In addition to working on simplifying the visualizations that I already have and building the navigation interface for the thesis site, I’ve also been working on filling in some of the holes in the narrative that links the data visualizations together. Most of these narrative pieces don’t really have data that needs to be visualized, but they need to tell a story in an interesting way.
In my soil poster for my Research Methods class, I used hand-drawn icons for this purpose. Converting them directly to the web didn’t really work; it made a page that felt cluttered, with a lot of text. I also wanted the visualization to emphasize the interconnectedness of the soil ecosystem, and that wasn’t really coming across in the grid format.
By importing the icons as images and placing them in nodes (similar to what I’ve been doing for the front page design), I was able to use d3’s interactivity to show information about individual nodes when the user hovers over them with the mouse. I worked out the original node configuration and drew the connecting paths in Illustrator, and then exported the links as an SVG file by themselves. I calculated the fractional coordinates for the nodes in Illustrator and stored them in a JSON object that I bound in d3 to draw the nodes on the screen, so that I still have access to the advantages of web-based SVG elements for interactivity.
The node images are a little smaller than I’d like on my tiny computer screen, but I think the overall concept is working pretty well. It keeps some interactivity on each page, and emphasizes the icons over the text as the primary visual elements. I’ve found the synergy between Illustrator and d3 to be really helpful for this part of the project; it’s much faster to draw complicated components in Illustrator than to figure out how to generate the paths in code using Bezier coordinates, but I can use d3 to generate the pieces that I want to be interactive and bound to data. In the spirit of creating a unified site design, I’ve been using this trick in other pages as well.
I’m really happy with how these are coming out, and like how they echo the front page node design without directly copying it. Being fast to make and (relatively) easy to code once you figure out all the scaling factors helps, too. I think this method will probably apply to one or maybe two more nodes that still need to be filled in, so there will likely be more illustration-drawing in my future.