DATA VISUALIZATION: NEW YORK DARK ECOLOGY ART SCENE 

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. 

Process: 

  • 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. 

      

 

RESEARCH & STUDIES BEFORE THE VISUALIZATION

Featured
This is a pretty overwhelming system map we drew for understanding the work we set out to do and the data we were about to collect. Some initial relationships between projects and key words such as economy, pollution, biodiversity, and quality of li

This is a pretty overwhelming system map we drew for understanding the work we set out to do and the data we were about to collect. Some initial relationships between projects and key words such as economy, pollution, biodiversity, and quality of life, began to emerge. 

We took a walk at the Newtown Creek Nature Walk, trying to understand how waterfront is acting as buffer between human activities and nature. This is photo of the stone stairs leading to the water. In the man-made cleft lived the clams whose living

We took a walk at the Newtown Creek Nature Walk, trying to understand how waterfront is acting as buffer between human activities and nature. This is photo of the stone stairs leading to the water. In the man-made cleft lived the clams whose living activities would help clean the water.  

This is the site where we interviewed Willis Elkins from the North Brooklyn Boat Club. He helped us understand which parties played what role in preserving the waterfront and the stakes that each of them held. 

This is the site where we interviewed Willis Elkins from the North Brooklyn Boat Club. He helped us understand which parties played what role in preserving the waterfront and the stakes that each of them held. 

We paid a visit to the Socrates Sculpture Park, a site transformed from an abandoned riverside landfill. It helped us understand what efforts could be made even after the environment of a place is totally wrecked and how human could deal with the id

We paid a visit to the Socrates Sculpture Park, a site transformed from an abandoned riverside landfill. It helped us understand what efforts could be made even after the environment of a place is totally wrecked and how human could deal with the idea of the possible "collapse" of the ecology some day in the future.