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.


Back to Basics: Starting a stacked bar chart in D3

This week the theme is simplify, simplify, simplify. One of my past professors used to tell me I had a propensity to get “lost in the weeds” with my work; I get so fixated on the minutia of my projects that I forget to think about the big picture. This is a habit I seem to have carried over into my data visualizations; I see some cool niche functionality and get so fixated that it eats up all of my time. To abet this, I wanted to take it back to basics this week with a stacked bar chart.

The data I’m going to be using comes from a study of current and former vegans and vegetarians conducted by Faunalytics. Specifically, two variables stand out that I would like to visualize; the first is the respondents status as either current or former vegan/vegetarian, and the second is a battery of reasons for deciding to abstain from meat consumption (health, animal rights, environmentalism, advice from peers, etc.). The original researchers seemed primarily interested in vegan recidivism and why most vegans relapse with this study, but I think these data points present interesting findings in regards to how vegan/vegetarian groups could structure their outreach to get the most people to try vegan/vegetarian dieting.

To visualize responses and how they vary between the main respondent groups, I am going to create a stacked bar chart with each category represented by a different color. D3’s author, Michael Bostock, has a handy sample of such a visualization here. I have three, short term goals I want to address this week:

  • Drawing the chart using data parsed from the original csv dataset
  • Tooltips on hover to show specific response rates for each group on each variable
  • A legend generated using SVG’s, similar to Bostock’s example.

D3 has some interesting animation and onclick/onhover functions that would be cool to apply later down the line, such as those seen inĀ this example. There’s also some functionality to add gradient effects and append images to svg’s, however for now I’m going to try to leave that pandora’s box closed.

Privacy Statement