Chrome users: If the animation doesn't work for you, try viewing the cartogram in its own window by clicking: "Open in new window".
This cartogram scales the area of Canada's provinces and territories by the number of characters used in the name of the province or territory.
Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.
xxxxxxxxxx
<html>
<head>
<script src="https://d3js.org/d3.v2.js"></script>
<script src="topojson-v0.0.10.js"></script>
<script src="cartogram.js"></script>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#map {
display: block;
position: absolute;
background: #fff;
width: 100%;
height: 100%;
margin: 0;
}
path.province {
fill: steelblue;
stroke: white;
}
path.province:hover {
fill: orange;
}
</style>
</head>
<body>
<div id="map-container" data-provinces="prov_4326_simple.topo.json"></div>
<script type="text/javascript">
(function () {
var container = d3.select('#map-container').node(),
data = container.dataset;
var width = 960,
height = 500;
var proj = d3.geo.albers(),
path = d3.geo.path().projection(proj);
var svg = d3.select(container).append("svg")
.attr("width", width)
.attr("height", height);
d3.json(data.provinces, ready);
function ready(canada) {
var carto = d3.cartogram()
.projection(proj)
.properties(function (geom, topo) {
return geom.properties;
})
// Morph on the number of characters in province's name.
.value(get_id_length);
var provinces = svg.append("g")
.attr("class", "provinces")
.selectAll("path")
.data(topojson.object(canada, canada.objects.provinces).geometries)
// .data(features)
.enter().append("path")
.attr("class", "province")
.attr("d", path)
// .attr("d", carto.path)
.attr("transform", "translate(0,350)" +
"scale(0.75,0.75)");
var title = provinces.append("title")
.text(function(d) { return get_id_length(d) + ": " + d.id; });
var features = carto(canada, canada.objects.provinces.geometries).features;
provinces.data(features)
.transition()
.duration(2000)
.ease("sin-in-out")
.attr("d", carto.path);
console.log(provinces.length);
}
function get_id_length (d) {
return d.id.length;
}
}());
</script>
</body>
</html>
Modified http://d3js.org/d3.v2.js to a secure url
https://d3js.org/d3.v2.js