Skip to content

Instantly share code, notes, and snippets.

@tnightingale
Last active December 27, 2022 15:16
Show Gist options
  • Save tnightingale/4696122 to your computer and use it in GitHub Desktop.
Save tnightingale/4696122 to your computer and use it in GitHub Desktop.
Canada Population
Geo_Code Prov_Name Topic Characteristic Note Total Flag_Total Male Flag_Male Female Flag_Female
13 New Brunswick Population and dwelling counts Population in 2011 1 751171 0 ... 0 ...
60 Yukon Population and dwelling counts Population in 2011 1 33897 0 ... 0 ...
11 Prince Edward Island Population and dwelling counts Population in 2011 1 140204 0 ... 0 ...
48 Alberta Population and dwelling counts Population in 2011 1 3645257 + 0 ... 0 ...
35 Ontario Population and dwelling counts Population in 2011 1 12851821 + 0 ... 0 ...
10 Newfoundland and Labrador Population and dwelling counts Population in 2011 1 514536 0 ... 0 ...
24 Quebec Population and dwelling counts Population in 2011 1 7903001 + 0 ... 0 ...
61 Northwest Territories Population and dwelling counts Population in 2011 1 41462 0 ... 0 ...
12 Nova Scotia Population and dwelling counts Population in 2011 1 921727 0 ... 0 ...
47 Saskatchewan Population and dwelling counts Population in 2011 1 1033381 + 0 ... 0 ...
46 Manitoba Population and dwelling counts Population in 2011 1 1208268 + 0 ... 0 ...
59 British Columbia Population and dwelling counts Population in 2011 1 4400057 + 0 ... 0 ...
62 Nunavut Population and dwelling counts Population in 2011 1 31906 0 ... 0 ...
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.js"></script>
<script src="http://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>
var cartogram = function (objects_key, scale_key) {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 960,
height = 500,
proj = d3.geo.albers(),
scale = d3.scale.linear(),
zoom = d3.behavior.zoom().translate([0,300]).scale(0.7);
function cartogram(selection) {
selection.each(function (d) {
var svg = d3.select(this).selectAll("svg").data([d]);
var gEnter = svg.enter().append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path().projection(proj);
var g = svg.append("g")
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
.attr("transform", "translate(" + zoom.translate() + ")" +
"scale(" + [zoom.scale(), zoom.scale()] + ")");
var land = g.append("path")
.attr("class", "land")
.datum(topojson.object(d, d.objects[objects_key]))
.attr("d", path);
var areas = g.selectAll(".area")
.data(topojson.object(d, d.objects[objects_key]).geometries)
.enter().append("path")
.attr("class", "area")
.attr("d", path)
.attr("transform", function (d) {
var centroid = path.centroid(d),
x = centroid[0],
y = centroid[1];
return "translate(" + x + "," + y + ")"
+ "scale(" + Math.sqrt(d.properties[scale_key] * 5 || 0) + ")"
+ "translate(" + -x + "," + -y + ")";
})
.style("stroke-width", function(d) {
return 1 / Math.sqrt(d.properties[scale_key] * 5 || 1);
});;
});
}
cartogram.width = function (value) {
if (!arguments.length) return width;
width = value;
return cartogram;
};
cartogram.height = function (value) {
if (!arguments.length) return height;
height = value;
return cartogram;
};
cartogram.zoom = function (value) {
if (!arguments.length) return zoom;
zoom = value;
return cartogram;
};
return cartogram;
};
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@adelaide-mmai2020
Copy link

Hi,

Good work on this.
Is this not updated anymore?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment