Force Directed Network Graphs in D3

Network analysis is a unique theoretical and methodological approach to sociology that I happened to stumble into last semester. At its most basic, network analysis can help us understand networks not just in terms of who is the most connected, but who helps connect disparate parts of a network, who is closest to the most important actors in a network, and who gets shafted in the network. It ticks a lot of boxes for me; it’s quantitative, it generates a lot of hypotheses for future research projects, and most importantly, the visualizations are just really pretty.

I started toying with D3’s .force functionality shortly after the start of the course, with mixed results; chiefly because I hadn’t mastered the art of drawing SVG objects, let alone applying forces telling them where to situate themselves.

WordPress isn’t always the friendliest when it comes to embedding iframes, but a sample of what I’ve got running can be found on JSFiddle. The code itself is fairly standard; nodes are pulled from a csv list and drawn as circles with varying radii based on their degree values. Links are pulled from another csv list and drawn as lines between the circles. This is a fair start, and this visualization has some basic functions like mouseover tooltips to see who each circle represents. It can be taken a lot further, though.

For starters, the forces drawn here are completely arbitrary. I basically started with a force that would draw everything to the middle of the svg “canvas”, then created two forces to represent repulsion and attraction and stopped once I found a combination of variables that didn’t look atrocious. It would be cool to crack open the d3-force functions a little further and try to program some recognized graphing algorithms such as Yifan Hu’s popular algorithm.

Secondly, nodes are entirely indistinguishable from one another. One idea I had been playing around with was adding image url’s for each node’s organization logo to the original csv, and then assigning those url’s to the svg’s when drawn. This presents some issues considering the size discrepancy between nodes. This method could still be implemented by adding the organization’s logo to the tooltips and creating an ordinal color scale to distinguish different types of organizations.

Thirdly, the tooltips are about as meat and potatoes as you can get. A rectangle with some text. The logo’s would be a nice touch, but it would be interesting to see how d3’s onmouseover and transition functions can be used to create something snappier or more presentable; perhaps a rectangle that draws itself to size out of the cursor’s tip, or a box that wipes horizontally on mouseover to reveal the tooltip.


Austin Round


2 thoughts on “Force Directed Network Graphs in D3

  1. I fixed up your install so that iframes will go in with less drama. If any fail to work the way you want let me know and I’ll take a deeper look.

    Some things to think about
    While you could set the logo as the background on nodes greater than size X . . . I like the idea of colors to delineate organizational types better. I think that’s likely to reinforce the kind of pattern analysis you’re looking for. That’s me guessing though.

    The issue I’ve seen in the past when trying to do some similar work with logos is that there is often little pattern between companies/organizations in terms of size and shape (unless you’re dealing with fairly large companies who tend to have a variety of patterns/sizes). Even when the organizations have the content it takes far more time to gather than you may want to spend. I think it would be visually attractive but may not be worth the time and effort given it’d add little to the kind of thinking/understanding that I think you’re trying to create.

    I see you’re pulling the data from Google Sheets via the CSV option. That’s very handy. In case you were unaware, Google Sheets also has a JSON variant of that which can be handy at times. If the spreadsheet is published as HTML, you can then go a URL pattern like this and get the JSON. The number following the SS ID is the SS page you’d like to access. Just another option that might make life easier depending on your goals.

    One of the things that’s interesting when you make examples like this is the ability to reference the ID of the Google Sheet (or other data sources) as a URL parameter. You can see that in this Twitter network visualizer. As long at the data structure is the same, it becomes an easy way to switch data sources or enable other people to use your visualization with their data. I’ve built a few examples that use the WordPress API or Google Sheets as the data source if you want to see what that looks like at some point.

Leave a Reply

Your email address will not be published.

Privacy Statement