Post a Comment On: A picture of health

[Image]
A collaborative project from earlier this year that I enjoyed working on was The BMJ's investigation on the sugar industry, and links to UK government advisory panels. For this project I was working with a journalist, Jonathan Gornall, to co-create the graphic.

The project started, as so many projects do, with several long tables of data - in this case Freedom of Information act requests, and publicly declared conflict of interest statements from different organisations:

[Image] I initially began to explore a force-directed node diagram to try and see an overview of these complex links between organisations and individuals. I first tried a d3 layout, by d3noob: http://bl.ocks.org/d3noob/5141278

[Image] https://dl.dropboxusercontent.com/u/56571574/sugar/index.html
This version started to reveal important hubs, like the MRC and Susan Jebb, but it wasn't easy to see the detail beyond this. I edited the code, to freeze the dots in place when they were dropped, allowing me more control:
[Image] https://dl.dropboxusercontent.com/u/56571574/sugar2/index2.html
While I was enjoying experimenting with d3, I decided that this point to switch back to the more familiar Processing, to make a version that I could work on with the journalist conducting the investigation. The following (very ugly) version was designed to be linked to a Google Sheets spreadsheet, so that we could both edit the data in real time and see it reflected in the graphic:

[Image] http://willstahl.com/sugarweb4/
The graphic also recorded the locations of the points, so that we could both work on the position of the points, moving them around until we could see the patterns in the data more clearly. So if you refresh your browser, the points should stay in whatever place you moved them to. Now this is available to the world, it's probably only a matter of time before someone makes a penis shape out of it. So I apologise in advance if you are offended by visiting that link.
Anyway, we eventually came up with something a bit less spaghetti-like (and I added in some colour coding):
[Image]
We decided to give some information about the links on rollover, revealing the kind and amounts of funding received. 
[Image] https://dl.dropboxusercontent.com/u/56571574/sugar3/index.html

I'm particularly proud of my code for this, which involves looking at the difference between the mouse position and the two points at the end of each line, and comparing this to the distance between the points. It means the rollover area is a bit wider in the middle of the lines, but it seems to work okay.
From there it was a small step to add in some labelling for the final thing. I also added rollovers to the individual nodes, allowing the viewer to see which things are linked directly together:
[Image] http://www.bmj.com/content/350/bmj.h231/infographic

I hope to do more collaborative graphics like this in the future - I particularly like working on the big investigations that our team does, because the graphics can reveal the complexity of these issues in a way that is challenging in text. I think some of the people in this diagram would be surprised to see the overview of the relationships involved. They may be involved with only a tiny part of the network, receiving what seems like an inconsequential amount of funding in kind for valuable research work. But the digram reveals that the web that these researchers and advisory bodies are caught in is subtle and wide-reaching.