Course NumberCSE 557A
SemesterFall 2016
HoursMW 4:00-5:30
LocationLopata Hall / 202
InstructorAlvitta Ottley
Emailalvitta at
OfficeJolley 410
Office HoursMW 2:00-4:00


<< back


In this OPTIONAL 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.


Election Results


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.

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.

Extra Credit

Insead of red/blue, 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.


Submit your work via Blackboard by Wednesday December 7, 2016, 11:59pm (midnight). Use the naming convention: “FirstnameLastname_a5”(e.g., AlvittaOttley_a4).

Grading Criteria

Extra Credit