Graph data visualization using d3js

Data visualization programming assignment 2

In this project, I downloaded 3 datasets from the UCI Network Data Repository.

• Coappearance network in the novel Les Miserables
• Social network of friendships between 34 members of a karate club at a US university in the 1970.
• Adjacency network of common adjectives and nouns in the novel David Copperfield by Charles Dickens.

I first had to write a python script gml2json to convert the graphml format into json.

I then created 2 pages that explored the 3 datasets using d3js.

• Force directed layout
• Radial layout

In general, I found the force directed layouts more interesting but less readable, especially for the "adjnoun" dataset which had the most nodes. I'll tend to use the more readable radial layouts in the future projects, and would try to sort/cluster the data into more interesting displays.

Resources

• Mike Bostok's force directed graph
• Mike Bostok's force directed with bounding box
• This circle graph layout
• I found this tutorial helpful in understanding enter(), exit() and update in d3js.