Click here for the code on github.

Screen Shot 2015-12-29 at 5.08.20 PM.png

Time frame: One month

Background & Project Overview:

(To understand what the dataset is about and what is Dark Ecology, please visit the site where the interactive data visualization is hosted.) 

During the summer of 2015, I worked as member of the Floating Studio of Dark Ecologies,led by my professor, Marina Zurkow, 

We gathered the then most up-to-date data on the current landscape of art projects that deals with the Anthropocene. I proposed to Marina that I wanted to visualize the data we collected. I believed I can quickly have something in hand. But by then I have just started web development using javascript for a month and was feeling unrealistically ambitious. The project in the end took me over a month, but I learnt so much. 


  • Figuring out data structure 

           The data set I got had two primary categories. One is the dozens of projects, the other is the tags we used to analyze them. Each project may be tagged with different key words. And each tag may have multiple projects associated. I sorted the data in Microsoft Excel and got two data sets -- one with each each projects as the parent and tags as the attributes and the counts for each tag, and the second the other way around. 

           My next question is to figure out how to draw the bubbles in the center. After studying the documentation, I discovered D3.JS provides a handy Bubble Layout.

*Starting with 3 nodes

*Starting with 3 nodes

           I wrote a simple JSON file with only 3 nodes in the format D3's Bubble Layout would take and then tested wether anything was drawn correctly. Following that, I transformed the data to the same format and fed them into the off-the-shelf functions. D3 automatically configured the size of the tag bubbles according to the number of projects each tag was associated with. 

  • Drawing the outer circle

           I then started to draw the outer circle. In short of a ready-for-use layout, I began drawing the nodes myself. I didn't know how to draw everything at once. So again, I figured maybe I should just draw three nodes first. (Shown on the right)

          After this succeeded, I fed the whole data set in and got the complete outer circle with each project as a node. 

  • Figuring out interaction

          How to visually connect the two data sets? How to make the user experience smooth?

          I sketched two ways: 1) Having each central node connected with the projects outside with curved lines upon mouseover and the same with project node; 2) Upon mouse over a project/tag node, have each related tag/project note pop up with change of color or opacity to signal their relation. 

         But right after drawing the lines as a mockup test, I discovered it was not visually disturbing and unnecessary for depicting the relationship between the two layers of data. So I changed route and had what it is now.