D3 Examples - US Electoral Map Sized by Electoral Votes

US Electoral Map Sized by Electoral Votes

This visualization shows the USA electoral map, with states sized by the number of electoral votes for each state.

Click a state to see its details, and drag the slider to update the visualization with different poll data. The data displayed shows the most recent polls conducted for each state before the date selected on the slider, or the Election 2008 Presidential Election outcome if no polls occurred in that state before the selected date. The chart on the right shows the electoral vote tally for the selected polls. A toss up occurs if the Democrat and Republican candidate are within 2 points (e.g. 47% to 49%).

I created this visualization because I thought most electoral map visualizations don't tell the whole story. Most maps try to size states according to their geographic area, but visually this makes Wyoming look like it has much more weight in the election than D.C., even though they both have the same number of electoral votes. The New York Times created a great interactive electoral map that solves that problem, but it also makes all the states square shaped. I thought it would be fun to take an alternate approach and retain the states' shapes in order to support recognition over recall.

Note that this visualization makes no attempt to show how Maine or Nebraska's votes might be separated. The NY Times visualization does show this, however.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>US Electoral Map</title>
        <link rel="stylesheet" href="style.css"/>
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="https://d3js.org/d3.v2.min.js?2.10.1"></script>
        <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <div id="body">
            <div style="display: inline-block; width: 260px;">
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                    <input type="radio" name="radio-mini" id="election-2008-radio" value="election2008"  />
                    <label for="election-2008-radio">2008 Results</label>
            
                    <input type="radio" name="radio-mini" id="election-2012-radio" value="election2012" checked="checked" />
                    <label for="election-2012-radio">2012 Polls</label>
                </fieldset>
            </div>
            <span id="date-slider-value-label" class="label">Polls on or before: </span><span id="date-slider-value"></span>
            <div id="#date-slider-container" data-role="fieldcontain">
                <span id="date-slider-min-label"></span>
                <input type="range" name="date-slider" id="date-slider" value="25" min="0" max="100" style="display:none;"/>
                <span id="date-slider-max-label"></span>
            </div>
            <div id="main-container">
                <div id="cartogram"> </div>
            </div>
            <div id="side-container">
                <div id="vote-chart"> </div>
                <div id="state-details">
                    <h3>Click a state</h3>
                    <p><span class='label'># of votes: </span></p>
                    <p><span class='label'># of polls:  </span></p>
                    <p><span class='label'>Displaying poll:  </span></p>
                    <p><span class='label'>Date conducted:  </span></p>
                    <p><span class='label'>% Dem:  </span></p>
                    <p><span class='label'>% GOP:  </span></p>
                </div>
            </div>
        </div>
    </body>
</html>
​
    