I was idly thinking about my del.icio.us bookmarks, how the tags are connected to each other when they are used to describe the same bookmarks, and wondering what they would look like as a graph.

Instead of simply searching the web and finding this del.icio.us tag grapher, I decided that I wanted to try playing with Graphiz (open source graphing software), so I wrote a ruby script to write the .dot file from my bookmarks.

I really liked Graphiz. It’s a great tool, and .dot is a nice format, as it lets you abstract all the positioning and presentation, whereas if I had been generating an SVG file (for example), I would have had to do lots of calculations for the positioning of all the nodes and everything.

Anyway, this is how I did it:

#open the bookmarks file (after running it through HTML Tidy
# first, to transform it into XML)
require "rexml/document"
file = File.new( "delicious.xhtml" )
doc = REXML::Document.new file

#create a 2D array: an array of an array
# of the tags used for each bookmark.
tag_sets = Array.new()
doc.elements.each('//a') {|e| tag_sets.push(e.attributes['tags'].split(',')) } 

# I added this following line because I had too many bookmarks,
# making the graph too big and complicated: ->
#      tag_sets = tag_sets.slice(0..10)

# now flatten the 2D array, and get a 1D array
# of all the tags used - .uniq gets rid of duplicates
tag_list = tag_sets.flatten.uniq         

#get the relationships
relationships = Array.new()

# now iterate through the tag list,
# and for each tag, look for that in each of the bookmarks.
# If it's found, record a relationship with the other tags of
# that bookmark

tag_list.each do |tag|

 tag_sets.each do |tag_set|

   if tag_set.include? tag
     tag_set.each do |related_tag|
     relationships.push([tag, related_tag]) if tag!=related_tag
     end
   end

 end

end

# relationships is now a 2D array of arrays each
# containing two tags

# put it into the .dot syntax

graph = "digraph x { \r\n"+relationships.uniq.collect{|r|'"'+r.join('" -> "')+'";'}.join("\r")+"}"

# now  write it all into the .dot file

file = File.new("delicious_graph.dot", "w")
file.write(graph)
file.close()

Links to the Results

I don’t expect the results will be of much interest to anyone, but here they are for completeness sake.

the .dot file
an SVG export of the graph (you may need a plugin, or a recent version of firefox, safari or opera)

http://www.neoformix.com/2006/TopicFlower.html

(seen at http://infosthetics.com/archives/2006/08/topic_flowers.html)

Lately, there have been two semantic web widgets for Opera:

• Widgnaut, a widget version of FOAFNAUT (FOAF visualiser)
• Tabulator, a widget version of TBL’s tabulator(generic RDF browser)

Both of these seem to work much better than their webpage equivalents.

So there is a use for these widget things after all?

Dietrich Kappe has done another of those social network studies of book consumption using Amazon’s Other Customer’s also Bought...

(The original (at least, the first one I heard about) being Valdis Krebb’s Study of polarised political book buying).

The graph isn’t so pretty as Krebb’s, but it is more interesting in that it shows a more complex picture than the rather-to-be-expected left/right political divide of American politics.

Choice of programming language is also political of course, and it’s interesting that Kappe’s study shows that related books on server-side languages break up into subnets, whilst client-side technologies like CSS and javascript form a common ground (as you’d expect really).

If you’ve written or read similar studies, I’d appreciate it if you’d link to ‘em in the comments.

openacademia is an initiative to collect, share, publish and manage bibliographical information, the Semantic Web-way.

Information about scientific publications is often maintained by individual researchers. Reference management software such as EndNote and Bibtex help researchers to maintain a personal collection of bibliographic references. (These are typically references to one’s own publications and also those that have been read and cited by the researcher in his own work.)

Just had a quick look at openacademia.org. Wonderful – and a great use of the simile timeline.

Simile at MIT have recently come up with a timeline widget api – google maps for timelines. It lets you plot events and time ranges (taken from either XML or JSON) onto timelines, and it’s all pretty darn good.

It should facilitate all kinds of interesting visualisations. There are a few really interesting examples up already – my favourite is the timeline of the shooting of JFK.

This is still being developed, so all the features aren’t implemented yet.
You can get it and/ or read more about it here.

I think this could be a really useful extension. What it does is lets you select some tabular data on a page, then manipulate it as you would in a spreadsheet or database application, including editing, performing aggregate functions, and outputting to reports and graphs.

Sure, lots of spreadsheet applications let you import data from html tables, but where it gets really interesting is the roadmap, which seems to promise the capability to import from RDF. Here’s hoping…

New Javascript Canvas Graph Library
This is a library that makes it easy to generate relationship graphs. This has really interesting applications in visualising humanities data and concepts – for instance graphing social networks.

It’s pretty simple to get it to do its stuff. You just make an html page with a bunch of elements having unique ids and containing text. These are the entities to be graphed, and the text is the label. Then you define their relationships in your javascript like this:
var g = new Graph();

g.addEdge($(‘fred’), $(‘wilma’));

var layouter = new Graph.Layout.Spring(g);
layouter.layout();

var renderer = new Graph.Renderer.Basic($(‘people’), g);
renderer.draw();
This makes two entities (fred and wilma), creates a line between them, and draws this in the canvas element that you have in your html (with the id ‘people’).

I gave it a try with some of the data from thesis project. While it’s easy to use, and is a nice proof of concept, I find it to be far too slow to be practically useful with any largish amount of data. To graph between 30 people, the page takes about 20-30 seconds to load, with at least one “Unresponsive Script” warning. (In firefox at least; admittedly it is a bit better in safari and opera).

My test – graph shows book owners and book authors. Lines between mean that the owner owned a book by the author

If I have the time, I’d like to write something that does something similar in a server-side language.