Skip to content

Instantly share code, notes, and snippets.

@elktamer
Forked from mbostock/.block
Created August 23, 2018 15:53
Show Gist options
  • Save elktamer/471ab8c16970c80d88287713d7b1e0b0 to your computer and use it in GitHub Desktop.
Save elktamer/471ab8c16970c80d88287713d7b1e0b0 to your computer and use it in GitHub Desktop.
Stacked Bar Chart
license: gpl-3.0
date total disease wounds other
4/1854 8571 1 0 5
5/1854 23333 12 0 9
6/1854 28333 11 0 6
7/1854 28772 359 0 23
8/1854 30246 828 1 30
9/1854 30290 788 81 70
10/1854 30643 503 132 128
11/1854 29736 844 287 106
12/1854 32779 1725 114 131
1/1855 32393 2761 83 324
2/1855 30919 2120 42 361
3/1855 30107 1205 32 172
4/1855 32252 477 48 57
5/1855 35473 508 49 37
6/1855 38863 802 209 31
7/1855 42647 382 134 33
8/1855 44614 483 164 25
9/1855 47751 189 276 20
10/1855 46852 128 53 18
11/1855 37853 178 33 32
12/1855 43217 91 18 28
1/1856 44212 42 2 48
2/1856 43485 24 0 19
3/1856 46140 15 0 35
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--x path {
display: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var causes = ["wounds", "other", "disease"];
var parseDate = d3.time.format("%b-%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.text("IRCC_M_AC_0001_E.csv", function(error, text) {
if (error) throw error;
var data = d3.csv.parseRows(text);
var header = data[0];
data.forEach( function( row){
var year = 2010;
row.forEach( function( column, i){
var month = header[i];
if( month=="Jan") year++;
if( i === 0) return;
if( i === 1){
row.province = column;
return;
}
row.date = parseDate(header[i]+"-"+year);
var g = 0;
})
});
var layers = d3.layout.stack()(causes.map(function(c) {
return data.map(function(d) {
return {x: d.date, y: d[c]};
});
}));
x.domain(layers[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return z(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
});
function type(d) {
d.date = parseDate(d.date);
causes.forEach(function(c) { d[c] = +d[c]; });
return d;
}
</script>
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2011 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2012 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2013 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2014 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2015 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2016 Total Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 2017 Total Jan Feb Mar Apr May Jun 2018 Total
Newfoundland and Labrador 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 -- 0 0 0 0 -- 0 0 -- 0 0 0 0 0 0 0 0 0 -- 0 0 0 0 0 -- 0 0 0 0 0 0 -- 0 -- -- 0 0 5 0 -- -- -- -- -- 25 0 0 -- 0 -- 0 0 0 0 0 0 0 5 0 0 0 0 0 0 0
Prince Edward Island 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 0 -- 10 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 -- 0 0 0 0 0 0 0
Nova Scotia 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 0 0 0 -- 0 0 0 0 0 -- 0 0 0 -- 0 0 0 -- 0 0 0 0 -- 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 -- 0 0 0 -- -- 0 0 0 0 0 0 -- -- -- 0 -- -- 5 5 0 5 -- 0 -- -- 25 0 -- 0 -- 0 0 --
New Brunswick -- 0 0 0 0 0 -- 5 0 0 0 0 5 0 0 0 0 0 -- -- 0 0 0 0 0 -- 0 0 0 0 0 -- 0 0 0 0 0 0 -- -- 0 -- -- 0 0 0 -- 0 0 0 0 5 0 -- 0 0 0 0 0 -- 0 0 0 -- -- 0 0 -- 0 0 -- -- 0 10 0 0 0 15 0 0 0 -- 0 -- -- 0 0 0 0 0 -- 0 0 -- 0 0 0 --
Quebec 95 95 100 100 75 120 120 130 105 110 80 125 1,250 80 70 90 80 115 105 85 105 75 85 75 95 1,060 45 45 40 65 60 60 45 90 65 75 75 90 755 45 60 60 60 85 95 80 65 75 95 65 75 855 40 60 45 60 80 75 85 125 115 105 85 115 990 115 90 75 110 75 120 150 120 150 185 185 325 1,700 245 330 590 420 280 265 285 315 205 235 250 250 3,675 195 180 1,510 2,430 1,845 1,215 7,380
Ontario 175 180 195 155 190 245 215 275 285 175 235 245 2,565 140 200 220 190 195 265 215 205 185 220 220 195 2,450 145 140 120 150 125 140 145 150 200 175 200 210 1,900 200 140 145 175 170 205 215 240 340 225 220 245 2,525 185 150 190 160 195 220 285 265 280 320 255 295 2,795 300 250 260 260 275 320 390 480 555 455 630 695 4,875 605 745 720 605 445 420 400 485 475 410 295 350 5,960 285 225 340 255 215 300 1,620
Manitoba 0 0 -- -- 0 0 0 0 5 -- 10 5 30 0 -- 0 -- -- 0 -- -- -- -- -- -- 20 0 -- 5 0 -- -- 0 5 -- -- -- 5 25 0 5 0 5 0 0 0 -- 0 -- 0 0 15 -- -- 0 -- 5 10 10 10 10 10 10 10 80 -- -- 10 10 10 -- 20 15 15 20 20 10 145 15 85 60 110 110 70 90 75 65 65 40 20 810 15 20 55 45 40 35 210
Saskatchewan 0 0 -- 0 0 5 0 -- -- 0 -- -- 15 0 0 0 -- 0 -- 0 0 0 0 0 0 -- -- 0 0 0 0 0 -- 5 -- 5 -- 5 20 0 -- 0 0 -- -- -- 0 -- -- -- 0 10 -- 0 -- 0 -- 0 -- 0 0 -- -- 10 15 -- 10 5 0 -- -- -- -- -- -- -- -- 35 -- -- -- 20 10 -- -- 0 0 5 -- 0 45 0 0 -- -- 0 0 --
Alberta 10 10 25 15 10 10 15 25 15 -- 25 15 185 10 10 10 10 5 10 10 10 20 15 20 10 145 15 10 5 20 10 10 5 10 15 10 10 20 135 10 10 20 5 10 20 10 25 10 15 25 15 175 5 25 10 15 15 25 20 25 40 30 20 25 255 10 20 15 25 15 20 20 30 55 50 40 50 340 35 50 90 45 45 55 40 40 65 45 25 15 540 30 30 25 20 20 20 145
British Columbia 10 -- 10 10 -- 15 10 20 10 10 15 20 135 5 5 10 10 -- 10 15 -- 5 10 10 -- 85 5 -- 5 5 -- 5 10 20 20 5 10 20 110 5 5 5 10 15 5 15 20 20 20 -- 5 130 5 10 15 -- 15 5 5 25 25 15 15 15 155 15 10 20 10 25 25 10 20 25 20 15 25 220 10 25 25 35 25 5 30 55 40 30 25 15 325 20 5 35 30 15 10 120
Northwest Territories 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 0 0 0 0 0 -- 0 0 0 0 0 0 0
Nunavut 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- -- 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Yukon 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -- 0 0 0 0 0 -- 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Border - Total 285 285 340 280 280 395 360 460 420 295 370 410 4,180 240 285 325 300 325 395 325 325 285 325 330 305 3,770 210 200 175 245 200 215 210 280 300 270 295 355 2,960 265 225 235 255 280 325 320 350 445 365 310 345 3,725 240 250 265 240 305 335 410 450 470 480 385 470 4,295 445 390 390 415 400 500 595 665 810 735 895 1,110 7,355 915 1,240 1,490 1,240 925 825 850 975 850 795 635 655 11,400 550 465 1,965 2,780 2,135 1,585 9,480
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment