Skip to content

Instantly share code, notes, and snippets.

@daniel-toman

daniel-toman/index.html

Last active May 17, 2016 05:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daniel-toman/5697108 to your computer and use it in GitHub Desktop.
Save daniel-toman/5697108 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
index.html
<!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