Skip to content

Instantly share code, notes, and snippets.

@arm5077

arm5077/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Save arm5077/86aea48f592053f7beee to your computer and use it in GitHub Desktop.
Save arm5077/86aea48f592053f7beee to your computer and use it in GitHub Desktop.
Download ZIP
Pennsylvania counties treemap by population
Raw
README.md

It's election season again, and I considered using a treemap to show vote totals for Pennsylvania's gubernatorial primary, which will pit four Democrats against each other. Using an abstract visualization like a treemap, which sizes each county by vote totals, cancels out the visual advantage enjoyed by large-but-unpeopled counties of Central Pennsylvania.

I decided to go with something else, but I thought this demo (sized by population, organized by region, colored by Obama/Romney vote in 2012) was still neat.

Raw
index.html
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
.node .population {
display:none;
}
.node.selected {
overflow:visible;
}
.node.selected .population{
display:inline;
}
</style>
</head>
<body>
<a href="#" id="toggle">Switch regional/election result coloring</a>
</body>
<script type="text/javascript">
var width = 900,
height = 500;
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.pop; });
var color = d3.scale.category20c();
var div = d3.select("body").append("div")
.style("position", "relative")
.style("width", width + "px")
.style("height", height + "px")
.style("left", "10px")
.style("top", "10px");
d3.json("pa.json", function(json)
{
var node = div.datum(json).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.children ? color(d.name) : null; })
.on("mouseover", function(d){
d3.select(this).classed("selected", true);
})
.on("mouseout", function(d){
d3.select(this).classed("selected", false);
})
.html(function(d) { return d.children ? null : d.name + "<span class='population'>: " + d.pop + "</span>"; });
var political = false;
d3.select("#toggle")
.on("click", function(){
node.style("background", function(d){
if( political ){
return d.children ? color(d.name) : null
} else {
return d.children ? null : ( d.winner == "Obama" ? "#447bd4" : "#FF4940")
}
});
political = !political;
});
function position() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
});
</script>
</html>
Raw
pa.json
{
"name": "Pennsylvania",
"children": [
{
"name": "East",
"children": [
{
"name": "Northeast",
"children": [
{
"name": "Bradford County",
"pop": 62622,
"winner": "Romney"
},
{
"name": "Carbon County",
"pop": 65249,
"winner": "Romney"
},
{
"name": "Lackawanna County",
"pop": 214437,
"winner": "Obama"
},
{
"name": "Luzerne County",
"pop": 320918,
"winner": "Obama"
},
{
"name": "Monroe County",
"pop": 169842,
"winner": "Obama"
},
{
"name": "Pike County",
"pop": 57369,
"winner": "Romney"
},
{
"name": "Sullivan County",
"pop": 6428,
"winner": "Romney"
},
{
"name": "Wayne County",
"pop": 52822,
"winner": "Romney"
},
{
"name": "Columbia County",
"pop": 67295,
"winner": "Romney"
},
{
"name": "Susquehanna County",
"pop": 43356,
"winner": "Romney"
},
{
"name": "Wyoming County",
"pop": 28276,
"winner": "Romney"
}
]
},
{
"name": "Southeast",
"children": [
{
"name": "Berks County",
"pop": 411442,
"winner": "Romney"
},
{
"name": "Bucks County",
"pop": 625249,
"winner": "Obama"
},
{
"name": "Chester County",
"pop": 498886,
"winner": "Romney"
},
{
"name": "Delaware County",
"pop": 558979,
"winner": "Obama"
},
{
"name": "Lancaster County",
"pop": 519445,
"winner": "Romney"
},
{
"name": "Lehigh County",
"pop": 349497,
"winner": "Obama"
},
{
"name": "Montgomery County",
"pop": 799874,
"winner": "Obama"
},
{
"name": "Northampton County",
"pop": 297735,
"winner": "Obama"
},
{
"name": "Philadelphia County",
"pop": 1526006,
"winner": "Obama"
},
{
"name": "Schuylkill County",
"pop": 148289,
"winner": "Romney"
}
]
}
]
},
{
"name": "Central",
"children": [
{
"name": "North-central",
"children": [
{
"name": "Lycoming County",
"pop": 116111,
"winner": "Romney"
},
{
"name": "Montour County",
"pop": 18267,
"winner": "Romney"
},
{
"name": "Tioga County",
"pop": 41981,
"winner": "Romney"
},
{
"name": "Union County",
"pop": 44947,
"winner": "Romney"
},
{
"name": "Centre County",
"pop": 153990,
"winner": "Romney"
},
{
"name": "Clinton County",
"pop": 39238,
"winner": "Romney"
}
]
},
{
"name": "South-central",
"children": [
{
"name": "Juniata County",
"pop": 24636,
"winner": "Romney"
},
{
"name": "Cumberland County",
"pop": 235406,
"winner": "Romney"
},
{
"name": "Dauphin County",
"pop": 268100,
"winner": "Obama"
},
{
"name": "Lebanon County",
"pop": 133568,
"winner": "Romney"
},
{
"name": "Mifflin County",
"pop": 46682,
"winner": "Romney"
},
{
"name": "Northumberland County",
"pop": 94528,
"winner": "Romney"
},
{
"name": "Perry County",
"pop": 45969,
"winner": "Romney"
},
{
"name": "Snyder County",
"pop": 39702,
"winner": "Romney"
},
{
"name": "Franklin County",
"pop": 149618,
"winner": "Romney"
},
{
"name": "Fulton County",
"pop": 14845,
"winner": "Romney"
},
{
"name": "Huntingdon County",
"pop": 45913,
"winner": "Romney"
},
{
"name": "York County",
"pop": 434972,
"winner": "Romney"
},
{
"name": "Adams County",
"pop": 101407,
"winner": "Romney"
}
]
}
]
},
{
"name": "West",
"children": [
{
"name": "Northwest",
"children": [
{
"name": "Cameron County",
"pop": 5085,
"winner": "Romney"
},
{
"name": "Clarion County",
"pop": 39988,
"winner": "Romney"
},
{
"name": "Clearfield County",
"pop": 81642,
"winner": "Romney"
},
{
"name": "Crawford County",
"pop": 88765,
"winner": "Romney"
},
{
"name": "Elk County",
"pop": 31946,
"winner": "Romney"
},
{
"name": "Erie County",
"pop": 280566,
"winner": "Obama"
},
{
"name": "Forest County",
"pop": 7716,
"winner": "Romney"
},
{
"name": "Jefferson County",
"pop": 45200,
"winner": "Romney"
},
{
"name": "Lawrence County",
"pop": 91108,
"winner": "Romney"
},
{
"name": "McKean County",
"pop": 43450,
"winner": "Romney"
},
{
"name": "Mercer County",
"pop": 116638,
"winner": "Romney"
},
{
"name": "Potter County",
"pop": 17457,
"winner": "Romney"
},
{
"name": "Venango County",
"pop": 54984,
"winner": "Romney"
},
{
"name": "Warren County",
"pop": 41815,
"winner": "Romney"
}
]
},
{
"name": "Southwest",
"children": [
{
"name": "Allegheny County",
"pop": 1223348,
"winner": "Obama"
},
{
"name": "Armstrong County",
"pop": 68941,
"winner": "Romney"
},
{
"name": "Beaver County",
"pop": 170539,
"winner": "Romney"
},
{
"name": "Bedford County",
"pop": 49762,
"winner": "Romney"
},
{
"name": "Blair County",
"pop": 127089,
"winner": "Romney"
},
{
"name": "Butler County",
"pop": 183862,
"winner": "Romney"
},
{
"name": "Cambria County",
"pop": 143679,
"winner": "Romney"
},
{
"name": "Fayette County",
"pop": 136606,
"winner": "Romney"
},
{
"name": "Greene County",
"pop": 38686,
"winner": "Romney"
},
{
"name": "Indiana County",
"pop": 88880,
"winner": "Romney"
},
{
"name": "Somerset County",
"pop": 77742,
"winner": "Romney"
},
{
"name": "Washington County",
"pop": 207820,
"winner": "Romney"
},
{
"name": "Westmoreland County",
"pop": 365169,
"winner": "Romney"
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment