BLACK_III_desktop-1.jpg

Intro to Computational Media

ICM Final Project Documentation: Tracking the Vote

Description/Motivation:

For my final ICM project I decided to use data visualizations to explore what happened in the 2016 US presidential election.  As the project progressed, the motivation became one that would inform readers about our election process and why we should care. The webpage follows the votes in the 2016 elections and tells the story of how and why some voices get eliminated in the process.  Toward the end, the visualizations get manipulated in order to explore faults in our electoral college system.  Hopefully, this webpage will inform the uninformed and empower everyone to care about future elections.

Figure 1: Demonstration

Process:

At the beginning of the process I had an idea of how the webpage would look however, I did not know what the final visualizations would tell.  This resulted in an iterative exploration of the data to develop visualizations that were meaningful and purposeful to the message about voting I was trying to convey.

Figure 2 shows a brief storyboard of my initial idea.  Generally, the idea was that the story would begin with the population as a whole and slowly narrow down the number of people visualized as the voting process got explained.  Ultimately, votes in each state would be weighted against votes in other states to get a picture of whose votes matter more.

Figure 2 : Initial Idea

Figure 2: Initial Idea

With this idea a began collecting data about voting and registration in the 2016 election.  My main, most reliable data, came from the United States Census Bureau which had voting records for the election in many different forms.  This research gave me an understanding of the data so I was able to plan my visualizations.  This was the most difficult part of the process.  I went through many iterations of how I would tell this story through visuals.  Ultimately, I decided to use the storyboard shown in Figure 3.  I would represent voters from each state using the stars in the American flag.

With this plan set, I began to code the different stages of my storyboard.  Each stage would be its own canvas so that I could embed them into the website at a later stage.  Figure4&5 show videos of progress sketches I created while building these visualizations.

Figure 4: Process Visualization

Figure 5: Process Visualization

Once I had most of the stages nearly complete, I realized that I needed to set up the webpage. This would give me a better idea of the size canvases I needed to use and how the user interactions should be implemented for the webpage.  To begin this process, I created a design layout in Illustrator to plan out how I wanted the webpage to look (Figure 6).

I then researched how to use the bootstrap library and built the html page using bootstrap and my layout design for reference. Finally, I then updated the visualizations to match the size and style of the webpage and wrote the script.  I combined all of these features into one webpage and uploaded it through github.  

For a more detailed description of the process, see previous posts on this blog.

Final Project Links:

The Website

The Website Files

The Population Visualization

The Registered Visualization

The Voters Visualization

The State by State Vote Visualization

The Value of Votes Visualization

The Winning Votes Visualization

Conclusion/Reflection:

Upon reflection this was my first webpage and first attempt at visualizations of big data.  Therefore, as a first attempt, I am quite satisfied with the result.  Of course along the way, I learned that developing useful data visualizations is hard and using html to implement is further challenging.  The visuals did not end up as striking as I had initial thought.  Perhaps, rethinking how I display the data would show the data in a more compelling way.  However, I have learned that this is the process of data visualization.  You must iterate and show the data in different ways in order to understand the full story and the best way to display the data.  The data does not lie, so the it is important to explore visuals in many ways before you jump to a conclusion.  This project certainly inspired me to work more with data visualization and research what makes visualizations successful.  I also really enjoyed building my knowledge with html and bootstrap and feel that I have a great basis to continue learning these tools. Overall, I learned a lot of new skills from this project and learned a great deal about the process of visual story telling. 

References:

  1. https://www.politico.com/story/2016/10/how-many-registered-voters-are-in-america-2016-229993

  2. https://www.census.gov/data/tables/time-series/demo/voting-and-registration/p20-580.html

  3. https://www.statista.com/statistics/273743/number-of-registered-voters-in-the-united-states/ 

  4. http://www.pewresearch.org/fact-tank/2017/05/12/black-voter-turnout-fell-in-2016-even-as-a-record-number-of-americans-cast-ballots/

  5. https://www.politico.com/mapdata-2016/2016-election/results/map/president/

  6. https://pixabay.com/en/usa-map-united-states-of-america-35713/

  7. https://www.youtube.com/watch?v=s7tWHJfhiyo

  8. https://www.youtube.com/watch?v=3Y3jE3B8HsE

  9. https://www.census.gov/data/tables/time-series/demo/voting-and-registration/p20-580.html (Table 4a)

  10. https://www.archives.gov/federal-register/electoral-college/about.html

  11. https://processing.org/examples/star.html

  12. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

  13. https://www.w3schools.com/bootstrap/bootstrap_affix.asp

  14. https://stackoverflow.com/questions/11718457/bootstrap-spans

  15. http://getbootstrap.com/docs/4.1/getting-started/introduction/

  16. https://www.youtube.com/watch?v=gqOEoUR5RHg

  17. https://www.w3schools.com/howto/howto_js_animate.asp

Eva Philips