From CS 294-10 Visualization Sp10

Jump to: navigation, search


Part 1 - Initial Concept


Image:tw_a4_map_1780.png Image:tw_a4_map_1954.png


There will be a timeline at the top and a slider that controls the date being displayed. Depending on the date, each area of the map will be grey (non-US), yellow (US territory), or red (US state). Of course, the storyboards above are a simplification, because the shapes of the states changed over time. Hovering the mouse over a particular state will bring up a pop-up or tool tip window that displays when that area became a territory and state. To make this task more manageable, the states may be represented by simplified polygons.


This visualization will be constructed in JavaScript using the Protovis toolkit.

Potential Enhancements

If time permits, the simple concept above may be enhanced with the following features:

  • Richer, more detailed polygons representing each state.
  • A corresponding timeline showing the presidents.
  • Major historical events (e.g., WWII) drawn on the timeline(s).
  • Indication of French, British, Spanish, and Mexican territories over time.

Part 2 - Realization & Commentary

Link to final visualization: Visual History of U.S. Statehood (source code)

Changes to Initial Design

  • Initially, I wanted to have a box appear when the user "hovers" the mouse over an area. This box was to include information about the history of that state. However, I chose to implement each state as a pv.Line object. Hence, the mouseover event only occurs when the cursor is directly over the thin outline of the state's border. I was unable to resolve this issue before the submission date.
  • Creating the polygons that describe each state took longer than expected. Thus, I sacrificed some of my loftier goals listed above (e.g., timeline of U.S. presidents, major historical events).
  • I excluded the U.S. territories that are not states today (e.g., Guam, Puerto Rico).

Essentially, I achieved the fundamental core of the application that I had envisioned, but there are many opportunities to add more data and interactivity.

Development Process

  1. Created a jQuery UI slider widget with the "Year" text linked to the slider position.
  2. Created a Protovis Panel with two Line objects representing boxes.
  3. Linked the fillStyle of the boxes to the value of the slider.
  4. Added Labels to the boxes.
  5. Linked the visibility of the labels to the value of the slider.
  6. Rewrote code to loop through an array of pv.Line objects, which represent the states, and an array of pv.Label objects.
  7. Created the polygon shapes of the states.
  8. Created the labels of the states.
  9. Added basic CSS styles.

Time Distribution

  • 10 hours learning JavaScript, Protovis, and jQuery UI.
  • 3 hours writing the visualization code (steps 1-6 above).
  • 11 hours creating the data from a reference map and Wikipedia (steps 7 and 8).
  • 1 hour writing the CSS and HTML that surround the visualization.

Overall, I spent about 25 hours on the visualization. Creating the polygons clearly took an inordinate amount of time.

[add comment]
Personal tools