Intro to Computational Media

Week 10: Final Project Progress Update

This week I began the beginning stages of my 2016 voter visualization project.  I spent time thinking about how I will eventually display the various visualizations as a whole and how that decision would incite the development of each visualization.  Eventually, I decided to create an interactive webpage that will tell the story of the 2016 votes through individual canvases on one webpage.   A description of each canvas will fill the empty space on the webpage in order to guide the story I am trying to tell.  I went through a number of storyboards and eventually decided to pursue this one (Figure 1).

Each row of this storyboard will be a stage (or canvas) on the webpage.  In ‘Stage 0’ one rectangle representing a certain number of the of age population will expand into the entire population represented by this rectangle. ‘Stage 1’ will begin with the non registered people fading away and then the registered voters will move into an American flag formation.  Once in the flag formation, the people who did not vote will fade away while the stars (representing the 50 states) fade in.  ‘Stage 2’ begins as the screen zooms into the star section of the flag.  Then each voter rectangle is sorted into their respective states (ie. stars).  Next, in ‘Stage 3’ the votes grow based on the electoral college weights.  Then the votes will change color based on the voter parties.  Lastly, the votes of the losing party in each state will fade away.  If I have time I will add a fourth stage where the ‘over past the post’ voters fade away.  I will be left with a visualization of the votes that actually mattered in the 2016 election.  Once I had this story, I developed a project plan.  I began by collecting data for each stage.  I primarily used figure4a from the United State Census Bureau website. Using this data and the story board, I began to code the stages.  I animated ‘Stage 0’ to represent the entire population (Figure 2).  The code can be found here.

Figure 2

From here, I developed ‘Stage 1’ through three versions.  In version 1 I focused on fading out the non registered part of the population (Figure 3).

Figure 3

Then in version 2 I organized the registered population into the flag formation (Figure 4).

Figure 4

In the final version I faded out the non voters and faded in the 50 stars to complete the flag representation (Figure 5).

Figure 5

Figure 5

Once I complete these two stages I realized that Stage 1 should be split into two stages.  The first one should just show the fade of the non registered population and the second should show the fade of the non voters.  This, I think will create a less confusing story for the final website. Overall, I am happy with how these animations turned out. While there are some small improvements to be made on these stages I plan to continue to complete the remaining stages first so I have a complete picture of the story.  If I have time in the end, I will manipulate these stages further. 

Eva PhilipsComment