Skip to content

Instantly share code, notes, and snippets.

@zhm
Last active January 4, 2016 02:09
Show Gist options
  • Save zhm/8553241 to your computer and use it in GitHub Desktop.
Save zhm/8553241 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Non-Contiguous Cartogram</title>
<style>
.land {
fill: #fff;
stroke: #ccc;
}
.state {
fill: #ccc;
stroke: #666;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var valueById = [7, 6, 14, 7, 8, 10, 8, 11, 8, 20, 30, 7, 7, 4, 6, 5, 8, 7, 4, 6, 8, 9, 5, 16, 8, 13, 8, 9, 11, 8, 7, 8, 6, 13, 10, 10, 8, 14, 12, 24, 4, 8, 6, 5, 12, 11, 12, 14, 12, 9, 5, 4, 7, 14, 8, 10, 13, 9, 7];
console.log(valueById);
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
d3.json("/d/4090846/us.json", function(error, us) {
console.log(us);
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "land")
.attr("d", path);
svg.selectAll(".state")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("class", "state")
.attr("d", path)
.attr("transform", function(d) {
var centroid = path.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + x + "," + y + ")"
+ "scale(" + (valueById[d.id] || 0) + ")"
+ "translate(" + -x + "," + -y + ")";
})
.style("stroke-width", function(d) {
return 1 / Math.sqrt(valueById[d.id] * 5 || 1);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment