Course NumberCSE 557A
SemesterSpring 2017
HoursTR 11:30AM-1:00PM
LocationRudolph Hall 203
InstructorAlvitta Ottley
Emailalvitta at
OfficeJolley 410
Office HoursTR 1:00PM-2:00PM
TAJosh Landman
Emaillandman at
OfficePsychology 402F
Office HoursMW 1:00PM-2:30PM


Assignment 4: Electoral Map

Based on material from Alex Lex, University of Utah


This is your first assignment in d3 and you will be learning the basics of d3 such as, loading and interacting with data. In this assignment, you will be using d3 to parse the US 2016 election dataset and create a visualization similar to the one above. The chart will show the election result by state and provides geospatial context. You will also implement a tooltip which provides details for a specific state on hover.


2016 Election Results

Basic Requirements

  1. Implement Cartogram
  2. Implement a cartogram that communicates the winning percentage of the candidates, but also gives us some geospatial context. In the cartogram, each state is represented by a square of equal size; the squares are placed so that they correspond to their position on a map. By using equal-sized squares, we ensure that all state results are equally readable.

    How do we lay these tiles out? Assume that you are given a matrix. where each cell corresponds to a tile. Some tiles are filled in (the states), others are not (i.e., remain white). Color-code the states either red or blue based on the winning party for that state, and display the abbreviation of the state and the number of its electoral votes.

  3. Implement Hovering
  4. On hover, display a tool tip having information such as the state name, the number of electoral votes for the state, and also the name of the nominee, number of votes won and vote percentage for each party with respect to a given state, as shown in the screenshot below.

  5. Implement Color-coding
  6. Color-code the tiles by win percentage using an appropriate color scale. We will also create a legend associated with the chart, as shown in the screenshot below.

Extra Credit

  1. Implement Timeline
  2. Create a timeline that shows electoral results between 1940 and 2016 inclusively. The points on the timeline should be colored based on the winning party for that year. Should the user selected a point on the timeline, the cartogram should update, showing the eletoral results of the correstponding year. Notice in the example above, 2012 is selected and styled appropriately.

    1940 - 2016 Election Results

  3. Inlcude Images
  4. You may also add images for of the president for each year on the timeline


Submit your work via Blackboard by Tuesday March 7, 2017, 11:59pm (midnight). Use the naming convention: "FirstnameLastname_a4"(e.g., AlvittaOttley_a4).

Grading Criteria

*Extra credit