This repository has been archived by the owner on Jan 14, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
215 lines (196 loc) · 11.9 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A 2016 Presidential Campaign Finance Comparison — Clinton vs. Trump</title>
<meta name="description" content="A 2016 Presidential Campaign Finance Comparison, Clinton vs. Trump">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- replace no-js class with js if JavaScript is enabled -->
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
</head>
<body>
<nav class="visuallyhidden focusable"><a href="#content">Skip to content</a></nav>
<header role="banner" class="site-header">
<div class="container container--med">
<div class="site-header__branding">
<h1 class="site-header__title"><span class="candidate1"></span> vs. <span class="candidate2"></span></h1>
<p class="site-header__tagline">A 2016 Presidential Campaign Finance Comparison</p>
</div>
</div>
</header>
<main id="content">
<div class="container container--med">
<form id="compare" class="compare-form">
<fieldset class="select-inputs">
<legend class="visuallyhidden focusable">Select an item to compare between the candidates</legend>
<div id="options" class="options">
<div class="select">
<input type="checkbox" id="toggle" class="toggle">
<label for="toggle" class="toggle-label angle">Select an item for comparison</label>
<ul class="select-list">
<li class="select-option">
<input type="radio" name="cash" id="cash" value="Cash on Hand">
<label for="cash" class="select-label">Cash on Hand</label>
</li>
<li class="select-option">
<input type="radio" name="total-contributions" id="total-contribution" value="Total Contributions">
<label for="total-contribution" class="select-label">Total Contributions</label>
</li>
<li class="select-option">
<input type="radio" name="contribution-levels" id="contribution-level1" value="Contributions under $200">
<label for="contribution-level1" class="select-label">Contributions under $200</label>
</li>
<li class="select-option">
<input type="radio" name="contribution-levels" id="contribution-level2" value="Contributions from $200 to 499">
<label for="contribution-level2" class="select-label">Contributions from $200 to 499</label>
</li>
<li class="select-option">
<input type="radio" name="contribution-levels" id="contribution-level3" value="Contributions from $500 to 1,499">
<label for="contribution-level3" class="select-label">Contributions from $500 to 1,499</label>
</li>
<li class="select-option">
<input type="radio" name="contribution-levels" id="contribution-level4" value="Contributions from $1,500 to 2,699">
<label for="contribution-level4" class="select-label">Contributions from $1,500 to 2,699</label>
</li>
<li class="select-option">
<input type="radio" name="contribution-levels" id="contribution-level5" value="Contributions at the maximum limit">
<label for="contribution-level5" class="select-label">Contributions at the maximum limit</label>
</li>
<li class="select-option">
<input type="radio" name="total-receipts" id="total-receipts" value="Total Receipts">
<label for="total-receipts" class="select-label">Total Receipts</label>
</li>
<li class="select-option">
<input type="radio" name="total-disbursements" id="total-disbursements" value="Total Disbursements">
<label for="total-disbursements" class="select-label">Total Disbursements</label>
</li>
<li class="select-option">
<input type="radio" name="ind-expend-support" id="ind-expend-support" value="Independent Expenditures – Support">
<label for="ind-expend-support" class="select-label">Independent Expenditures – Support</label>
</li>
<li class="select-option">
<input type="radio" name="ind-expend-oppose" id="ind-expend-oppose" value="Independent Expenditures – Oppose">
<label for="ind-expend-oppose" class="select-label">Independent Expenditures – Oppose</label>
</li>
</ul>
</div><!-- end .select -->
</div><!-- end #options -->
</fieldset>
</form>
<div id="results" class="results">
<h2 class="results__title"></h2>
<div id="result">
<dl>
<dt><strong></strong></dt><dd></dd>
<dt><strong></strong></dt><dd></dd>
</dl>
</div>
<canvas id="visuals"></canvas>
</div><!-- end #results -->
<div class="error">
<p>Uh-oh! Something went wrong with your request. Here’s what we know:</p>
</div>
</div><!-- end .container -->
</main>
<footer role="contentinfo" class="site-footer">
<div class="container container--med">
<ul class="resources">
<li class="resources__item">
<a href="#about-site" id="about-link" data-action="modal-open">About this Site</a>
</li>
<li class="resources__item">
<a href="#campaign-finance-resources" id="campaign-resources-link" data-action="modal-open">Campaign Finance Resources</a>
</li>
<li class="resources__item">
<a href="#voting-resources" id="voting-resources-link" data-action="modal-open">Voting Resources</a>
</li>
</ul>
<p class="current">(Data is current through <time datetime="" class="date-cutoff"></time>.)</p>
</div>
</footer>
<div id="about-site" class="a11y-modal">
<div class="modal">
<header class="modal__intro">
<h3 class="modal__intro__title">About this Site</h3>
</header>
<div class="modal__content">
<p>Use this site to compare selected campaign finance data for Hillary Clinton and Donald Trump. All data was accessed using <a href="https://www.propublica.org/">ProPublica’s</a> <a href="https://propublica.github.io/campaign-finance-api-docs/">Campaign Finance API</a>, which in turn retrieves campaign finance data from the <a href="http://www.fec.gov/">US Federal Election Commission</a> (FEC).</p>
<p>Candidates are required to file campaign finance reports for each month by the 20<sup>th</sup> day of the following month. For example, candidates must file July 2016 reports by August 20. Because reports are filed electronically, this site will automatically update once candidate reports are filed with the FEC.</p>
</div> <!-- /.modal__content -->
<div class="modal__outro">
<a data-modal-close
class="modal__outro__close"
href="#about-link">
<svg role="presentation" viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 10.5l8.646-8.646a.5.5 0 0 0-.707-.707L10 9.793 1.354 1.147a.5.5 0 0 0-.707.707L9.293 10.5.647 19.146a.5.5 0 0 0 .708.707l8.646-8.646 8.646 8.646a.498.498 0 0 0 .708 0 .5.5 0 0 0 0-.707L10.709 10.5z"/></svg>
</a>
</div> <!-- .modal__outro -->
</div> <!-- end .modal -->
</div> <!-- .a11y-modal -->
<div id="campaign-finance-resources" class="a11y-modal">
<div class="modal">
<header class="modal__intro">
<h3 class="modal__intro__title">Campaign Finance Resources</h3>
</header>
<div class="modal__content">
<p>If you would like more campaign finance, there are several publicly available resources that offer comprehensive data on other candidates (Presidential and Congressional) committee contributions, personal finances, etc. Here are a few:</p>
<ul class="modal__list">
<li class="modal__item">
<a href="http://www.opensecrets.org/elections/">OpenSecrets - Politicians & Elections</a> by the Center for Responsive Politics
</li>
<li class="modal__item">
<a href="http://realtime.influenceexplorer.com/newest-filings/#?ordering=-filing_number&time_range=2016_cycle">Real-Time Federal Campaign Finance</a> by the <a href="https://sunlightfoundation.com/">Sunlight Foundation</a>
</li>
<li class="modal__item">Federal Election Commission sites:
<ul class="modal__list--sub-list">
<li>
<a href="http://www.fec.gov/disclosure.shtml">Campaign Finance and Data</a>
</li>
<li>
<a href="http://www.fec.gov/finance/disclosure/candcmte_info.shtml">Candidate and Committee Viewer</a>
</li>
<li>
<a href="http://www.fec.gov/disclosurep/pnational.do">2016 Presidential Campaign Finance</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.modal__content -->
<div class="modal__outro">
<a data-modal-close
class="modal__outro__close"
href="#campaign-resources-link">
<svg role="presentation" viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 10.5l8.646-8.646a.5.5 0 0 0-.707-.707L10 9.793 1.354 1.147a.5.5 0 0 0-.707.707L9.293 10.5.647 19.146a.5.5 0 0 0 .708.707l8.646-8.646 8.646 8.646a.498.498 0 0 0 .708 0 .5.5 0 0 0 0-.707L10.709 10.5z"/></svg>
</a>
</div> <!-- .modal__outro -->
</div> <!-- end .modal -->
</div> <!-- .a11y-modal -->
<div id="voting-resources" class="a11y-modal">
<div class="modal">
<header class="modal__intro">
<h3 class="modal__intro__title">Voting Resources</h3>
</header>
<div class="modal__content">
<p>If you are not registered to vote, need to find a polling place, or need other election information, here are a few voting resources:</p>
<ul class="modal__list">
<li class="modal__item"><a href="https://vote.usa.gov/">Voter Registration</a> by USA.gov</li>
<li class="modal__item">Find your polling place at <a href="http://www.vote411.org/">Vote411.org</a></li class="modal__item">
<li class="modal__item"><a href="https://www.usa.gov/election-day">Voting in Person on Election Day</a> by USA.gov</li>
</ul>
</div> <!-- /.modal__content -->
<div class="modal__outro">
<a data-modal-close
class="modal__outro__close"
href="#voting-resources-link">
<svg role="presentation" viewBox="0 0 20 20" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 10.5l8.646-8.646a.5.5 0 0 0-.707-.707L10 9.793 1.354 1.147a.5.5 0 0 0-.707.707L9.293 10.5.647 19.146a.5.5 0 0 0 .708.707l8.646-8.646 8.646 8.646a.498.498 0 0 0 .708 0 .5.5 0 0 0 0-.707L10.709 10.5z"/></svg>
</a>
</div> <!-- .modal__outro -->
</div> <!-- end .modal -->
</div> <!-- .a11y-modal -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/chart.js/2.2.1/Chart.min.js"></script>
<script src="js/a11y.modal.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>