-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·156 lines (126 loc) · 4.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html>
<head>
<title>Keystone</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--
-->
<div id="tooltip"></div>
<div class="box">
<div class="A"><h1 class="ac">Campaign Finance in Congress</h1>
<p class="ac">A visualization of contributions to house members from interest groups over a two year period</p>
<p class="ac">Elizabeth Harris and Joe Rowley</p></div>
<!-- <div class="B"> </div> -->
<div class="B" id="">
<div class="flexcontainer" id="chartBox3">
<div id="leftCol">
<!-- Gets filled with sub group contribution info dynamically -->
<div id="infoBox"></div>
</div>
<div class="rightCol" id="chartBox">
</div>
<!--<div id="main">
<div id="houseBox">
<table style="border-collapse: collapse;">
<tr class="ar">
<td class="democrat al">Democrats:</td><td>188(43%)</td><td></td>
</tr>
<tr class="ar">
<td class="republican al">Republicans: </td><td>245(56%)</td><td></td>
</table>
</div>
</div>-->
</div>
<div id="source">
<ul>
Data: Campaign Contributions from Oct 1, 2012 to Sept 30, 2014.
</ul>
<ul>
Source: OpenSecrets.org and aggregated by <a href="http://maplight.org/us-congress/bill/114-hr-3/6584713/total-contributions">Maplight</a>.
</ul>
</div>
</div>
<div class="C">
<div class="flexcontainer">
<div id="voteChart">
</div>
</div>
</div>
<div class="D">
<!-- <div class="flexcontainer"> -->
<!-- <h3>How Money Affects Votes</h3> -->
<!-- <div class="flexcontainer" id="chartBox2"> -->
<!-- <div id="leftCol2"> -->
<!-- <div id="houseBox2"> -->
<!-- <h3>House Make Up</h3>
<p>Total Voting Seats: 435 <br>
<span class="democrat">Democrats: </span> 188 (43%) <br>
<span class="republican">Republicans:</span> 245 (56%)</p> -->
<!-- table of votes -->
<!-- <table>
<tr><th></th><th>No</th><th>Not Voting</th><th>Yes</th><th>Total</th></tr>
<tr class="ac"><td class="democrat">Democrats</td><td>153</td><td>6</td><td>28</td><td>187</td></tr>
<tr class="ac"><td class="republican">Republican</td><td>0</td><td>5</td><td>238</td><td>243</td></tr>
</table> -->
<!-- </div> -->
<!-- <div id="infoBox2"></div>
</div> -->
<!-- </div> -->
</div>
</div>
<div class="box">
<div class="E" >
<h3>CMPS 165: Data Programming for Visualization</h3>
<h4>Winter 2015</h4>
<h4>Suresh K. Lodha</h4>
<h4>Files:</h4>
<a href="https://github.com/joer14/Keystone"> Link to Repo</a>
<ul>
<li>houseChord.js</li>
<li>keystone.js</li>
<li>index.html</li>
<li>fewGroups.csv</li>
<li>Underscore</li>
<li>Mapper.js - Steven Hall</li>
</ul>
<div id=reference>
<h4>References:</h4>
<ul>
<li>
<a href="http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3"> D3 Chord Diagrams - Steven Hall</a>
</li>
<li>
<a href="https://stackoverflow.com/questions/21813723/change-and-transition-dataset-in-chord-diagram-with-d3"> Stack Overflow: Change and Transition Dataset in chord diagram</a>
</li>
<li>
The stacked bar chart for votes is based of a Mike Bostock <a href="http://bl.ocks.org/mbostock/3886208">example.</a>
</li>
</ul>
<h4>Inspiration:</h4>
<ul>
<li>
<a href=http://seanjs.me/some-stream-of-consciousness-writing/> Traffic Patterns</a>
</li>
<li>
<a href=http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0/> 512 paths to the white house Patterns</a>
<li><a href=http://www.maplight.org/> Maplight Campaign Contributions</a>
</li>
</ul>
<h5>Other Versions</h5>
<ul>
<li>
<a href="phase1.html"> Phase One</a>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="d3.js" charset="utf-8"></script>
<script src="lib/underscore.js"></script>
<script src="mapper.js"></script>
<!-- // <script src="keystone.js" type="text/javascript"></script> -->
<script src="houseChord.js" type="text/javascript"></script>
<!-- // <script src="stackedBar.js" type="text/javascript"></script> -->
</html>