Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.
Last active
December 27, 2022 15:16
-
-
Save tnightingale/4696122 to your computer and use it in GitHub Desktop.
Canada Population
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Good work on this.
Is this not updated anymore?