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.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.js"></script>
<script src="https://d3js.org/topojson.v0.js"></script>
<script type="text/javascript" src="non-contiguous-cartogram-chart.js"></script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.container {
float: left;
width: 650px;
margin: 20px 40px;
}
p.caption { text-align: center }
.land {
fill: #fff;
stroke: lightgray;
stroke-width: 2;
}
.area {
fill: orange;
stroke: darkgray;
}
.area:hover {
fill: red;
}
</style>
</head>
<body data-provinces="prov_4326_simple.topo.json"
data-profile="census-profile.csv">
<div class="container" id="population"></div>
<script type="text/javascript">
(function () {
var container = d3.select('body').node(),
data = container.dataset;
queue()
.defer(d3.json, data.provinces)
.defer(d3.csv, data.profile)
.await(ready);
function ready(err, canada, profile) {
var census = d3.map(),
commons = d3.map(),
total_population = d3.sum(profile, get_population);
profile.forEach(function (d) {
census.set(d["Prov_Name"], { population: get_population(d) });
});
canada.objects.provinces.geometries.forEach(function (d) {
var census_item = census.get(d.properties.PRENAME),
commons_item = commons.get(d.properties.PRENAME);
d.properties.population_percentage = census_item.population / total_population;
return d;
});
var population = cartogram('provinces', 'population_percentage')
.width(650).height(460)
.zoom(d3.behavior.zoom().translate([-50,310]).scale(0.70));
d3.select("#population").datum(canada).call(population)
.append("p").attr("class", "caption")
.text("Provinces & territories scaled by population");
}
/**
* Property accessor functions.
*/
function get_population(d) {
return +d["Total"];
}
}());
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.js to a secure url
Modified http://d3js.org/topojson.v0.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.js
https://d3js.org/topojson.v0.js