Skip to content

Instantly share code, notes, and snippets.

@tomshanley
Last active December 12, 2018 22:54
Show Gist options
  • Save tomshanley/b841837f5414b34b7c45055d97e7674d to your computer and use it in GitHub Desktop.
Save tomshanley/b841837f5414b34b7c45055d97e7674d to your computer and use it in GitHub Desktop.
Small multiple area line charts
license: mit
year city value
2012 Hamilton 1.724002
2012 Tauranga 1.73085
2012 Palmerston North 1.534094
2012 Wellington 2.618341
2012 Christchurch 1.902583
2012 Queenstown 2.31462
2012 Auckland 2.480358
2013 Hamilton 1.710646
2013 Tauranga 1.715279
2013 Palmerston North 1.520053
2013 Wellington 2.52119
2013 Christchurch 2.137502
2013 Queenstown 2.12775
2013 Auckland 2.711748
2014 Hamilton 1.697487
2014 Tauranga 1.735434
2014 Palmerston North 1.493198
2014 Wellington 2.515387
2014 Christchurch 2.050773
2014 Queenstown 2.326956
2014 Auckland 2.884561
2015 Hamilton 1.858228
2015 Tauranga 1.953395
2015 Palmerston North 1.431058
2015 Wellington 2.510296
2015 Christchurch 1.960725
2015 Queenstown 2.326798
2015 Auckland 3.328215
2016 Hamilton 2.230925
2016 Tauranga 2.30398
2016 Palmerston North 1.517878
2016 Wellington 2.794279
2016 Christchurch 1.917323
2016 Queenstown 3.083883
2016 Auckland 3.683606
2012 NZ 2.072585
2013 NZ 2.194391
2014 NZ 2.264715
2015 NZ 2.498475
2016 NZ 2.905786
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px Arial;
margin: 0;
}
.line {
fill: none;
stroke: #426789;
stroke-width: 2px;
}
.area {
fill: #e8eef4;
}
g#xAxisG text, g#yAxisG text {
stroke: none;
fill: silver;
font-size: 9px;
}
header, div#source {
margin-left: 40px;
margin-bottom: 38px;
}
</style>
<body>
<div id="charts"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 8, right: 15, bottom: 20, left: 40},
width = 180 - margin.left - margin.right,
height = 120 - margin.top - margin.bottom;
var xScale = d3.scaleLinear()
.range([0, width]);
var yScale = d3.scaleLinear()
.range([height, 0]);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(3);
var area = d3.area()
.x(function(d) { return xScale(d.year); })
.y0(height)
.y1(function(d) { return yScale(d.value); });
var line = d3.line()
.x(function(d) { return xScale(d.year); })
.y(function(d) { return yScale(d.value); });
d3.csv("data.csv", convertTextToNumbers, function(error, data) {
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain([0,d3.max(data, function(d) { return d.value; })]);
// Nest data by subject.
var cities = d3.nest()
.key(function(d) { return d.city; })
.entries(data);
var nz = cities.filter(function(d){ return d.key === "NZ" });
cities = cities.filter(function(d){ return d.key !== "NZ" });
// Add an SVG element for each city
var svg = d3.select("#charts").selectAll("svg")
.data(cities)
.enter().append("svg")
.style("margin-bottom", "10px")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(nz[0].values); })
.style("stroke", "lightgrey");
// Add the area path elements
/*svg.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); });*/
// Add the line path elements
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); });
// Add a labels
svg.append("text")
.attr("x", (width + 10)/2)
.attr("y", height - 85)
.style("text-anchor", "middle")
.style("font-size", "12px")
.attr("fill", "#B35959")
.text(function(d) { return d.key; });
svg.append("text")
.text(xScale.domain()[0])
.attr("x", 0)
.attr("y", height + 15)
.style("text-anchor", "start")
.style("font-size", "12px")
.attr("fill", "#B35959");
svg.append("text")
.text(xScale.domain()[1])
.attr("x", width)
.attr("y", height + 15)
.style("text-anchor", "end")
.style("font-size", "12px")
.attr("fill", "#B35959");
//add axes
svg.append("g").attr("id", "yAxisG").call(yAxis);
d3.selectAll("path.domain").remove();
d3.selectAll("line").style("stroke", "silver");
});
function convertTextToNumbers(d) {
d.year = +d.year;
d.value = +d.value;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment