HOME Course Number CSE 557A Semester Spring 2017 Hours TR 11:30AM-1:00PM Location Rudolph Hall 203 Instructor Alvitta Ottley Email alvitta at wustl.edu Office Jolley 410 Office Hours TR 1:00PM-2:00PM TA Josh Landman Email landman at wustl.edu Office Psychology 402F Office Hours MW 1:00PM-2:30PM

# Assignment 4: Electoral Map

Based on material from Alex Lex, University of Utah

## Description

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.

## Dataset

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

## Submission

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