tnightingale/README.md

## README.md

      
    Raw
  

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

  
## census-profile.csv

          
            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
              ...

## index.html
<!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>

## non-contiguous-cartogram-chart.js
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;
};

## prov_4326_simple.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              prov_4326_simple.topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
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;
	};