Canada Population

Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.

<!DOCTYPE html>
<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>

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