Skip to content

Commit ad73353

Browse files
committed
Republish
1 parent ab7802a commit ad73353

File tree

6 files changed

+11
-259
lines changed

6 files changed

+11
-259
lines changed

.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ node_modules
55
build
66
.idea
77
fonts
8-
.publish
8+
.publish
9+
data/scripts

README.md

+7-46
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,10 @@
1-
# a3-willium-ayush29feb
2-
3-
## Team Members
4-
5-
1. Will Strimling (willium)
6-
2. Ayush Saraf (ayush29f)
7-
8-
## Exit Poll Exploration
1+
# Exit Poll Exploration
92

103
![Screenshot](/storyboard/screenshot.png)
114

12-
This exploration makes use of a Sankey diagram, which is used to show 'flow'. Though they're often used for systems and other purposes, we decided it was a great representation of proportionality, cause and effect, and segmentation, without losing any information.
13-
They can be hard to read, but using interactivity and highlighting, we made it very simple to learn from the data in a meaningful way. At the top of the visualization, you can toggle by party. Some questions were asked to only one of the two parties, so this helps filter the possible questions.
14-
Next, you can choose a question. These questions were asked to voters at their polling places. It utilized statistical sampling methods to make the data as representative of the population as possible.
15-
Sometimes, CNN provided the data with multiple bin choices, so if you choose the question 'Age', you can further explore by different binning. By default, we show all answers and all the currently running candidates.
16-
If you want to focus on a specific candidate you can click the node, and all the others will return to the shelf. Similarly, if you want to remove a candidate, you can right-click on the node and just that one will return to the shelf.
17-
To add candidates back from the shelf, simply click them. Because some questions were asked in many states, you can toggle which states are visible in the visualization. Black is active and gray is inactive. We chose to encode the party to color, as is common with
18-
election data. Viewers are accustomed to red being Republican and blue being Democrat. We chose purple as a neutral color for the answer nodes and the links because its the color between blue and red on a color scale. The height of the nodes
19-
show the percent of the voters per the answer or per the candidate (given the current states selected). Similarly, the size of the link represents the % of the total number of people represented in the visualization.
20-
215
## Running Instructions
226

23-
Live here: http://cse512-16s.github.io/a3-willium-ayush29feb/
7+
Live here: http://hologr.am/exit-polls
248

259
#### Run Locally
2610

@@ -40,9 +24,10 @@ gulp watch
4024
```
4125
## Data
4226

43-
We noticed that while many news sites provide exit poll data, they do so in a minimally interactive tabluar form: [NyTimes](http://www.nytimes.com/interactive/2016/02/09/us/elections/new-hampshire-democrat-poll.html?_r=0), [CNN](http://www.cnn.com/election/primaries/polls).
44-
While everyone seems to talk about exit polls, and reference it in their writing, they're hard to read and reason about, considering their form. We decided that if we could represent the data in a more intuitive, interactive manner, one could learn more from it.
45-
In its current form, its relatively difficult to compare the polls across states or per candidate. We wanted to enable a richer form of exploration. We utilized the data provided on [CNN](http://www.cnn.com/election/primaries/polls) and cleaned, aggregated, and manipulated it to our needs in [data/generate.py](data/generate.py).
27+
We noticed that while many news sites provide exit poll data, they do so in a minimally interactive, often tabluar form (see [NYTimes](http://www.nytimes.com/interactive/2016/02/09/us/elections/new-hampshire-democrat-poll.html?_r=0), [CNN](http://www.cnn.com/election/primaries/polls)).
28+
While everyone seems to talk about exit polls and reference them in their commentary, we've found that the polls themselves are difficult to read and reason about in their current form. We decided that if we could represent the data in a more intuitive, interactive manner, one could learn more from it.
29+
30+
Exit Poll data was provided by Edison Media Research to [CNN](http://www.cnn.com/election/primaries/polls). We then transposed, cleaned, aggregated, and manipulated it for our needs.
4631

4732

4833
## Story Board
@@ -58,28 +43,4 @@ Compared to the final implementation and the initial storyboard design, we had a
5843
- Instead of using a heavy tooltip with redundant information we used % labels that help a user understand the ratios of links better. We also used svg's title elements to show some information on hover (and instructions on how to interact).
5944
- We decided to not use a bi-directional diagram. This was for two reasons. First, some questions existed for only one party, and it would be confusing to show that and not the other direction.
6045
And secondly (and more importantly), it's unnatural to read a snakey diagram from the middle out. Traditionally, it's left to right, with the middle representing filters or sub-processes.
61-
This would be broken by making the diagram bi-directional.
62-
63-
## Development Process
64-
65-
### Time breakdown
66-
- Collecting, parsing, manipulating, and aggregating data (6 hours)
67-
- Storyboarding and ideation (3 hours)
68-
- Original version of the code (11 hours)
69-
- Creation of UI and (4 hours)
70-
- Rewrite, conversion to browserify, build tools (10 hours)
71-
- Implementation of labels (1 hour)
72-
- Implementation of shelf (2 hours)
73-
- Implementation of UI toggles for question, bin, states, and party (3 hours)
74-
75-
**Total**: 6+3+10+4+10+1+2+3 = 40 hours.
76-
77-
The writing and architecting of the codebase overall deffinitely took the most time. Creating the diagram was relatively easy once we got the right data to be in the right place at the right time to best utilize d3's data binding methods.
78-
79-
### Division of labor
80-
81-
Include:
82-
- Breakdown of how the work was split among the group members.
83-
- A commentary on the development process, including answers to the following questions:
84-
- Roughly how much time did you spend developing your application?
85-
- What aspects took the most time?
46+
This would be broken by making the diagram bi-directional.

data/data.json

+1-1
Large diffs are not rendered by default.

data/generate.py

-194
This file was deleted.

0 commit comments

Comments
 (0)