Last active
May 17, 2016 05:50
-
-
Save daniel-toman/5697108 to your computer and use it in GitHub Desktop.
2012 Presidential Election Cartogram by Daniel Toman. Interactive data visualization of votes cast in the 2012 US Presidential election. Map of electoral college votes and popular votes for each state, with states resized proportionally to show relative influence (non-contiguous cartogram). Each state's degree of preference for winning candidate…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=1098" /> | |
| <title>2012 Presidential Election Cartogram by Daniel Toman</title> | |
| <link rel="author" href="https://plus.google.com/109943152411871047534/" /> | |
| <style type="text/css"> | |
| body { | |
| background:white; | |
| min-width:1098px; | |
| } | |
| body, body * { | |
| margin:0; | |
| padding:0; | |
| } | |
| #cartogram { | |
| margin:0 auto; | |
| position:relative; | |
| } | |
| #cartogram .layer, nav a { | |
| position:absolute; | |
| } | |
| #cartogram, #cartogram .layer { | |
| background:transparent no-repeat 0 0; | |
| height:1240px; | |
| width:1098px; | |
| top:0; | |
| left:0; | |
| } | |
| #cartogram #map { | |
| background-image:url("http://66.media.tumblr.com/8a00b2c7eaff2693eabc1c6f1156c52a/tumblr_mmihb6eZkM1sqrc5qo2_r1_1280.png"); | |
| z-index:30; | |
| display:none; | |
| } | |
| #cartogram #electors { | |
| background-image:url("http://66.media.tumblr.com/03a59995f49e43cf9d0598c9078b0835/tumblr_mmihb6eZkM1sqrc5qo3_r1_1280.png"); | |
| z-index:20; | |
| display:none; | |
| } | |
| #cartogram #population { | |
| background-image:url("http://66.media.tumblr.com/520857d2cd13fd74bdd66b0ea65b606c/tumblr_mmihb6eZkM1sqrc5qo1_r1_1280.png"); | |
| z-index:10; | |
| } | |
| nav a { | |
| display:block; | |
| z-index:100; | |
| text-indent:-10000px; | |
| outline:0; | |
| } | |
| nav #map-link { | |
| width:350px; | |
| height:40px; | |
| top:310px; | |
| left:670px; | |
| } | |
| nav #electors-link { | |
| width:390px; | |
| height:45px; | |
| top:350px; | |
| left:630px; | |
| } | |
| nav #population-link { | |
| width:282px; | |
| height:42px; | |
| top:395px; | |
| left:738px; | |
| } | |
| </style> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| function showMap(){ | |
| $("#map").show(); | |
| } | |
| function showElectors(){ | |
| $("#electors").show(); | |
| $("#map").hide(); | |
| } | |
| function showPopulation(){ | |
| $("#map").hide(); | |
| $("#electors").hide(); | |
| } | |
| function shebang(state){ | |
| if (window.location.hash != "") { window.location.hash = "!" + state; } | |
| } | |
| $(function() { | |
| $("#map-link").mouseover(function(){ | |
| showMap(); | |
| shebang("map"); | |
| }); | |
| $("#electors-link").mouseover(function(){ | |
| showElectors(); | |
| shebang("electors"); | |
| }); | |
| $("#population-link").mouseover(function(){ | |
| showPopulation(); | |
| shebang("population"); | |
| }); | |
| var deeplink = window.location.hash; | |
| if (deeplink == "#!map") { | |
| showMap(); | |
| } else if (deeplink == "#!electors") { | |
| showElectors(); | |
| } else if (deeplink == "#!population"){ | |
| showPopulation(); | |
| } | |
| $("nav a").click(false); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="cartogram"> | |
| <div id="map" class="layer"></div> | |
| <div id="electors" class="layer"></div> | |
| <div id="population" class="layer"></div> | |
| <nav> | |
| <a id="map-link" href="#!map">Geographic Area</a> | |
| <a id="electors-link" href="#!electors">Electoral College</a> | |
| <a id="population-link" href="#!population">Popular Vote</a> | |
| </nav> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment