Interactive Data Vizualiztion: Portfolio

This portfolio represents work completed in the Interactive Data Visualization course offered at the CUNY Graduate Center in the fall of 2022. It was my first experience learning and working with HTML, CSS, and Javascript.

Tutorials

The bulk of the course focused on tutorials, where we were provided with prompts, demo code, and challenges to update, customize, and otherwise generate new work. Live instances of the completed tutorials can be found below.

As someone new to these coding languages and their particularities, I often found simple problems quite challenging to work through. Many hours were spent searching for answers online, reading through forums and documentation, and on trial and error. I was not always able to achieve the results I envisioned. Initially even writing basic functions was a struggle. But as I progressed through the tutorials, I came to better understand the functionality of the various languages and their interaction, as well as accompanying libraries, like d3. 

An example of the simple challenges I faced: In tutorial 2.3 Time Series, because of the data I was working with, I had to deviate significantly from the demo. In the end I was able to create a time series using a band scale to generate a path. As part of this process I wanted to add custom labels to my chart—specifically, I wanted custom text to appear along the bottom axis tick marks. Eventually, after trying a number of different ways, I ran out of time and gave up. After completing the course I revisited my code. I quickly solved the problem when I realized I needed to provide multiple arguments within the d3 method I was using to assign the text.

Final Project

How Big is Big Government?: Exploring Trends in Public Employment

For our final project we had a very broad mandate: Create an interactive website (using HTML, CSS, Javascript, and d3) that visualizes Census data. 

A point of interest and research in my graduate studies has been the development, ownership, and governance of technology and technical systems. As part of that work I’ve been interested in the role of the state and public ownership of infrastructure, vs. the role of private profit-seeking interests. When reviewing the Census data I noticed that the economic data collected includes public employment numbers. Since I’m already interested in the interaction between public and private sectors, this data piqued my interest.

Using that employment data, I wanted to ask (and answer) this broad question: Can we identify any trends by looking at public employment numbers broken down by state?

As with the tutorials, I had grand visions for what I wanted to accomplish, but was limited by the data I was able to find, my own technical abilities, and time. In the end, I focused my attention on producing a website that was accurate, informative, functional, and cleanly executed, and I’m proud of the final result, even if it was more narrow in scope and less conclusive than first imagined. 

Conceptual Stage

As part of our coursework devoted to this project, we were asked to find Census data that interested us, and then work with a partner to brainstorm what questions we could ask of the data. From this activity, I found I was curious what social factors might be linked to public employment rates. And I was particularly interested in national trends over time. My thinking was that I could tell a story about a decline in the public sector since the 1970s.

I then thought it would be useful to look at trends in contrasting states. If we looked at the largest states, or comparable states with contrasting levels of public employment, it would help reinforce or disprove correlation to the other trends I wanted to examine. 

To that end, I envisioned a narrative project, reliant on animations and transitions that would show the passage of time. I wanted to start at the macro level, and increase granularity, as we worked our way through the story. I also envisioned using small multiples to present data on different possible corollaries in a standardized format, for easier comparison.

Prototyping

As I began to work through the data I immediately ran into some problems and limitations. The Census data sets were huge, and although I did determine how to make cuts by state, I realized I was only going to practically be able to work with data from the most recent Census. I wouldn’t be able to track the data I was looking for from multiple Census years without major cleaning and merging work that was beyond the limits of both my time and skill level. I also found that the economic data I was interested in, particularly poverty/inequality rates, wasn’t formatted in a manner that I would easily be able to work with. 

As a result I began to reshape my project around the data I was able to find and work with. It meant focusing on a snapshot, instead of a historical narrative. I focused on unemployment rates, wages, political affiliation, and state “size” (through economic output and workforce numbers).   

Also, after an initial critique of my project ideas in class, I realized that the total number and variety of visualizations I wanted to use to tell my story was not realistic in the time allotted. 

I used Tableau to do some initial design sketches and data manipulation. What I found was illuminating, but also made me rethink my project significantly: no clear trends were present. Going into this project, my assumption was that we might see a strong relationship between high rates of public employment and lower overall unemployment for instance, or Democratic Party leadership of government. These clear, direct relationships weren’t really present in any of the data. 

After processing and visualizing the data, I realized I didn’t have a good story to tell! But I realized I still had the ability to make a useful tool for easily looking at all this data. Maybe it would help others challenge their own preconceptions. Or possibly other researchers could see something that I was missing by engaging with it themselves. I decided this project would need to be more exploratory, and altered the course of my design accordingly. 

Final execution

Final project link

Final project git repository with code, notes, and additional documentation

The final site is set up with two tools, both of which incorporate ideas from my initial project ideation session and proposals. 

The first tool is a map, which presents a national picture (macro), and allows for state-level comparisons and distinctions to be drawn (micro). I envisioned a version of this map from the very beginning stages of my project, largely as an expository element. That is, it sets the stage. It presents the foundational data—public employment rates in the U.S.—in a clean, easy to process, and easy to explore format. I wanted to let the viewer get acquainted with the baseline data we would then be exploring further in the next section of the project.  

The second tool is essentially a dynamic, interactive version of a small multiple. Here we move from the simple employment rate data, and begin comparing it with other information. It presents four different possible corollaries, mapped against the constant factor of public employment density, and broken out by state. For me, the most important function of this visualization was transitioning the states from graph to graph dynamically. Static small multiples, especially with a high number of data points, can make for difficult comparisons of individual items. By keeping the points on the visualization and moving them it makes it easier for the viewer to compare the larger trends the chart shows, while also tracking changes to individual items of interest. 

The final site also includes two important elements: 

  1. An introductory text explaining the visualizations and the project impetus in more detail, inviting the user to explore the work presented and providing them the context to do so. 
  2. Detailed information on the data sources, how the data was used, and a link to the code I used to clean and merge the data. 
Possible next steps

Although I am pleased with the final result, this project is far from what I initially envisioned. With the data I was able to find and analyze in the time allotted, it was difficult to draw any meaningful conclusions. If I were to build this project out further, I would start by reattempting to answer my initial research question: How have these numbers changed over time? It is quite possible that even if I was successful in answering this question, no clear trends would emerge. But I think that would have to be the first direction this research expands. 

One theme present in my prototyping stage, but which I wasn’t able to incorporate in my final project, was the distinction between categories of public employment. For instance distinctions between federal, state level, and public employment, as well as between military and civilian public employment. These distinctions tell a more nuanced story about where public funding is coming from and what kinds of jobs (and by extension what kinds of public services) it is stimulating. Including filters for these categories would likely lead to new insights, or at least new trends to explore.    

In terms of design and functionality, I struggled with some basic layout issues using d3 to manage HTML elements (for instance the dynamic placement of the select element over the SVG, and the fill color of my x-axis as it was re-appended to my SVG). With more time and more experience with Javascript, I would like to tighten that up. 

Similarly, on the backend, I ended up manually merging some data that ideally I could have used Javascript to access and merge for me. If I were to build this out into a fully dynamic project, I would like to be able to use code to automatically incorporate new data. I got close, but it is an area I would like to improve upon going forward.