D3 is a Javascript library for producing really cool visualizations such as this one and these. According to Wikipedia, D3 offers greater control over the appearance of the final result than other similar libraries. This (probably) means that it requires a bit more Javascript experience than other libraries, but I have to admit I’m totally new to Javascript.
For this post, I wanted to make a simple D3 visualization to test whether or not there would be any hiccups to overcome in order to host my own D3 work with a Jekyll Blog and GitHub Pages. Javascript is high on my list of things to learn and I think picking up D3 along the way would be fun way to do that. I do not, however, want the presence of D3 on this site to indicate to anyone that I know what I’m doing. I do not.
You can click-and-drag the nodes around, although I’m not sure why you’d want to except that it is unreasonably fun. I think I read somewhere the edges of this graph are meant to behave like springs, but Mike Bostock provides more information in the link given below.
The visualization above was taken from this entry of the D3 gallery. First, I create a style tag for the node and link attributes of the plot.
Finally the actual Javascript to create the SVG. I wanted the SVG to resize based on the width of the parent container. This way it should work properly when viewed on mobile or on a skinny web broswer window. To do this I changed the width variable to grab the width of the d3div tag. When you resize the window you’ll have to refresh your browser to get the SVG to change. There almost certainly exists a more clever approach, but I didn’t take the time to work it out.
This went off without a hitch. If I understood more of how all of this works I suppose there wouldn’t have been any doubt, but it is nonetheless nice to know that you can embed D3 visualizations in Jekyll blog posts.