Skip to content

Instantly share code, notes, and snippets.

@FrieseWoudloper

FrieseWoudloper/Leeftijdsopbouw_De_Marne_cat.csv

Last active November 12, 2015 18:55
Show Gist options
  • Save FrieseWoudloper/d7806d42dadde0dc30f3 to your computer and use it in GitHub Desktop.
Save FrieseWoudloper/d7806d42dadde0dc30f3 to your computer and use it in GitHub Desktop.
Download ZIP
Intermediate D3 for Data Visualization - Project Module 2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stacked area chart</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
path:hover {
fill: yellow;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Age structure in municipality De Marne</h1>
<p>Age structure in municipality De Marne 1992-2015, The Netherlands. Source: <a href="http://statline.cbs.nl/Statweb/publication/?VW=T&DM=SLNL&PA=03759NED&D1=1-2&D2=0-96&D3=625&D4=a&HD=151028-1330&HDR=T&STB=G2,G3,G1">CBS</a></p>
<script type="text/javascript">
//Set up stack method
var stack = d3.layout.stack()
.values(function(d) {
return d.tellingen;
});
// .order("reverse");
//Width, height, padding
var w = 1000;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date format function (years)
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Configure area generator
var area = d3.svg.area()
.x(function(d) {
return xScale(dateFormat.parse(d.x));
})
.y0(function(d) {
return yScale(d.y0); //Updated
})
.y1(function(d) {
return yScale(d.y0 + d.y); //Updated
});
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("Leeftijdsopbouw_De_Marne_cat.csv", function(data) {
//Uncomment to log the newly loaded data to the console
//console.log(data);
//New array with all the years, for referencing later
var years = ["1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this category's name and empty array
dataset[i] = {
leeftijdscategorie: data[i].cat,
tellingen: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
//Default value, used in case no value is present
var aantal = null;
// If value is not empty
if (data[i][years[j]]) {
aantal = +data[i][years[j]];
}
//Add a new object to the counts data array
//for this category
dataset[i].tellingen.push({
x: years[j],
y: aantal
});
}
}
console.log(dataset);
//Stack the data!
stack(dataset);
//Uncomment to log the original data to the console
//console.log(data);
//Uncomment to log the newly restructured dataset to the console
//console.log(dataset);
//Now that the data is ready, we can check its
//min and max values to set our scales' domains!
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
//Need to recalcluate the max value for yScale
//differently, now that everything is stacked.
//Loop once for each year, and get the total value
//of CO2 for that year.
var totals = [];
for (i = 0; i < years.length; i++) {
totals[i] = 0;
for (j = 0; j < dataset.length; j++) {
totals[i] += dataset[j].tellingen[i].y;
}
}
yScale.domain([ d3.max(totals), 0 ]);
//Areas
//
//Now that we are creating multiple paths, we can use the
//selectAll/data/enter/append pattern to generate as many
//as needed.
//Make a path for each category
var paths = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("class", "area")
.attr("d", function(d) {
//Calculate path based on only d.tellingen array,
//not all of d (which would include the category name)
return area(d.tellingen);
})
.attr("stroke", "none")
.attr("fill", function(d, i) {
return color(i);
});
//Append a title with the category name (so we get easy tooltips)
paths.append("title")
.text(function(d) {
return d.leeftijdscategorie;
});
//Create axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
Leeftijdsopbouw_De_Marne_cat.csv
cat 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
0-9 years old 576 553 494 518 492 457 413 365 358 342 410 387 451 417 372 290 264 431 412 413 368 520 836 1019
10-19 years old 551 548 544 523 562 551 557 517 465 446 544 482 444 467 413 542 509 282 277 253 429 427 242 597
20-29 years old 628 625 565 471 607 535 903 818 818 775 408 410 375 201 554 1007 1191 1347 1363 1200 1200 1382 1531 1373
30-39 years old 740 767 744 759 752 721 669 652 617 630 662 670 652 608 722 784 725 848 1010 951 899 1044 1029 1187
40-49 years old 727 749 765 773 772 774 779 784 814 822 826 811 813 831 813 740 710 705 648 640 629 604 569 517
50-59 years old 768 404 465 492 521 605 498 568 658 707 783 811 812 858 837 824 827 794 794 780 772 761 747 727
60-69 years old 1045 1030 1019 1199 1191 1187 1182 1208 1029 1251 1089 738 818 651 511 775 645 705 734 758 622 660 651 689
70-79 years old 1613 1431 1429 1593 1565 1573 1788 1761 1765 1756 1737 1728 1723 1734 1741 1553 1572 1409 1215 1247 1634 1443 1319 1337
80-89 years old 1333 1294 1361 1309 1348 1301 1332 1316 1337 1339 1341 1355 1352 1308 1267 1322 1405 1371 1406 1392 1386 1379 1364 1370
90 years or older 502 546 502 705 469 676 489 212 267 788 827 491 568 670 535 258 326 372 390 430 633 740 484 329
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment