Skip to content

Instantly share code, notes, and snippets.

@aaronsw

aaronsw/electionnight.html

Created November 4, 2012 17:02
Show Gist options
  • Save aaronsw/4012598 to your computer and use it in GitHub Desktop.
Save aaronsw/4012598 to your computer and use it in GitHub Desktop.
Download ZIP
Election Night FiveThirtyEight (538)
Raw
electionnight.html
<head>
<style>
body { padding: 0; margin: 0; }
#ev { width: 100%; position: fixed; background-color: white; margin: 0; }
#obama_votes, #romney_votes { text-align: center; }
#obama_votes { color: blue; }
#romney_votes { color: red; }
</style>
<script src="electionnight.js"></script>
<script src="http://graphics8.nytimes.com/packages/html/1min/elections/2012/fivethirtyeight/fivethirtyeight-ccol-top.js"></script>
</head>
<body>
<table id="ev">
<tr>
<th>Barack Obama</th>
<th>Electoral vote</th>
<th>Mitt Romney</th>
</tr>
<tr>
<td id="obama_votes"></td>
<td></td>
<td id="romney_votes"></td>
</tr>
</table>
<p style="padding-top: 5em;"></p>
<div id="evform">
</div>
<script>renderForm();</script>
<script>renderPage();</script>
Raw
electionnight.js
var states = [
{ code: 'AL', name: 'Alabama', votes: 9, close: 8 },
{ code: 'AK', name: 'Alaska', votes: 3, close: 13 },
{ code: 'AZ', name: 'Arizona', votes: 11, close: 9 },
{ code: 'AR', name: 'Arkansas', votes: 6, close: 8.5 },
{ code: 'CA', name: 'California', votes: 55, close: 11 },
{ code: 'CO', name: 'Colorado', votes: 9, close: 9 },
{ code: 'CT', name: 'Connecticut', votes: 7, close: 8 },
{ code: 'DE', name: 'Delaware', votes: 3, close: 8 },
{ code: 'DC', name: 'Dist. of Columbia', votes: 3, close: 8 },
{ code: 'FL', name: 'Florida', votes: 29, close: 8 },
{ code: 'GA', name: 'Georgia', votes: 16, close: 7 },
{ code: 'HI', name: 'Hawaii', votes: 4, close: 11 },
{ code: 'ID', name: 'Idaho', votes: 4, close: 11 },
{ code: 'IL', name: 'Illinois', votes: 20, close: 8 },
{ code: 'IN', name: 'Indiana', votes: 11, close: 7 },
{ code: 'IA', name: 'Iowa', votes: 6, close: 8 },
{ code: 'KS', name: 'Kansas', votes: 6, close: 9 },
{ code: 'KY', name: 'Kentucky', votes: 8, close: 7 },
{ code: 'LA', name: 'Louisiana', votes: 8, close: 9 },
{ code: 'ME', name: 'Maine', votes: 4, close: 8 },
{ code: 'MD', name: 'Maryland', votes: 10, close: 8 },
{ code: 'MA', name: 'Massachusetts', votes: 11, close: 8 },
{ code: 'MI', name: 'Michigan', votes: 16, close: 9 },
{ code: 'MN', name: 'Minnesota', votes: 10, close: 9 },
{ code: 'MS', name: 'Mississippi', votes: 6, close: 8 },
{ code: 'MO', name: 'Missouri', votes: 10, close: 8 },
{ code: 'MT', name: 'Montana', votes: 3, close: 10 },
{ code: 'NE', name: 'Nebraska', votes: 5, close: 9 },
{ code: 'NV', name: 'Nevada', votes: 6, close: 10 },
{ code: 'NH', name: 'New Hampshire', votes: 4, close: 8 },
{ code: 'NJ', name: 'New Jersey', votes: 14, close: 8 },
{ code: 'NM', name: 'New Mexico', votes: 5, close: 9 },
{ code: 'NY', name: 'New York', votes: 29, close: 9 },
{ code: 'NC', name: 'North Carolina', votes: 15, close: 7.5 },
{ code: 'ND', name: 'North Dakota', votes: 3, close: 11 },
{ code: 'OH', name: 'Ohio', votes: 18, close: 7.5 },
{ code: 'OK', name: 'Oklahoma', votes: 7, close: 8 },
{ code: 'OR', name: 'Oregon', votes: 7, close: 11 },
{ code: 'PA', name: 'Pennsylvania', votes: 20, close: 8 },
{ code: 'RI', name: 'Rhode Island', votes: 4, close: 8 },
{ code: 'SC', name: 'South Carolina', votes: 9, close: 7 },
{ code: 'SD', name: 'South Dakota', votes: 3, close: 9 },
{ code: 'TN', name: 'Tennessee', votes: 11, close: 8 },
{ code: 'TX', name: 'Texas', votes: 38, close: 9 },
{ code: 'UT', name: 'Utah', votes: 6, close: 10 },
{ code: 'VT', name: 'Vermont', votes: 3, close: 7 },
{ code: 'VA', name: 'Virginia', votes: 13, close: 7 },
{ code: 'WA', name: 'Washington', votes: 12, close: 11 },
{ code: 'WV', name: 'West Virginia', votes: 5, close: 7.5 },
{ code: 'WI', name: 'Wisconsin', votes: 10, close: 9 },
{ code: 'WY', name: 'Wyoming', votes: 3, close: 9 }
]
var eg2012 = {};
eg2012.cards = {};
eg2012.cards['38-fivethirtyeight-ccol-top'] = {};
eg2012.cards['38-fivethirtyeight-ccol-top'].load = function(x) {
eg2012.data = x;
eg2012.data.states.forecast[0].states.forEach(function(state) {
for (i in states) {
if (states[i].code == state[0]) {
states[i].forecast = state[5];
}
}
});
}
$id = function(x) { return document.getElementById(x); }
function renderPage(){
var obamaVotes = 0;
for (i in states) {
var userChose = function(vote) { return $id(states[i].code + '_' + vote).checked; }
if (userChose('obama')) {
obamaVotes += states[i].votes;
} else if (userChose('romney')) {
obamaVotes += 0;
} else {
obamaVotes += states[i].votes * (states[i].forecast/100.0);
}
}
$id('obama_votes').innerHTML = obamaVotes.toFixed(1);
$id('romney_votes').innerHTML = (538 - obamaVotes).toFixed(1);
}
function renderForm(){
states.sort(function(x, y){ return x.close - y.close} );
var out = '';
for (i in states) {
out += '<p><i>' + states[i].name + ' (closes at ' + states[i].close + ')</i>';
out += '<br /> Call for: '
out += '<input type="radio" name="' + states[i].code + '_call" id="' + states[i].code + '_romney" onclick="renderPage()" /> Romney&nbsp;&nbsp;&nbsp;';
out += '<input type="radio" name="' + states[i].code + '_call" id="' + states[i].code + '_obama" onclick="renderPage()" /> Obama&nbsp;&nbsp;&nbsp;';
out += '<input type="radio" name="' + states[i].code + '_call" id="' + states[i].code + '_forecast" checked="checked" onclick="renderPage()" />';
out += ' ' + states[i].forecast + '% forecast'
}
$id('evform').innerHTML = out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment