You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
-
21
5
## Running Instructions
22
6
23
-
Live here: http://cse512-16s.github.io/a3-willium-ayush29feb/
7
+
Live here: http://hologr.am/exit-polls
24
8
25
9
#### Run Locally
26
10
@@ -40,9 +24,10 @@ gulp watch
40
24
```
41
25
## Data
42
26
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.
46
31
47
32
48
33
## Story Board
@@ -58,28 +43,4 @@ Compared to the final implementation and the initial storyboard design, we had a
58
43
- 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).
59
44
- 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.
60
45
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.
0 commit comments