Skip to content

Instantly share code, notes, and snippets.

@tomshanley

tomshanley/.block

Last active April 27, 2017 01:08
Show Gist options
  • Save tomshanley/e88c1ad0d6baa2fb8f6f074f3e85651f to your computer and use it in GitHub Desktop.
Save tomshanley/e88c1ad0d6baa2fb8f6f074f3e85651f to your computer and use it in GitHub Desktop.
Download ZIP
Small multiple area line charts
Raw
.block
license: mit
Raw
data-apartments.csv
estimate year city ratio
baseline 2012 Hamilton 1.842268
baseline 2012 Tauranga 2.228378
baseline 2012 Palmerston North 1.1502743
baseline 2012 Wellington 3.234967
baseline 2012 Christchurch 2.334318
baseline 2012 Queenstown 2.021966
baseline 2012 Auckland 2.6189
baseline 2012 New Zealand 2.716361
baseline 2013 Hamilton 2.635989
baseline 2013 Tauranga 2.314015
baseline 2013 Palmerston North 1.1344663
baseline 2013 Wellington 3.013259
baseline 2013 Christchurch 2.516045
baseline 2013 Queenstown 2.074217
baseline 2013 Auckland 3.111546
baseline 2013 New Zealand 3.001946
baseline 2014 Hamilton 1.715066
baseline 2014 Tauranga 2.191151
baseline 2014 Palmerston North 1.0448536
baseline 2014 Wellington 3.118088
baseline 2014 Christchurch 2.741691
baseline 2014 Queenstown 1.925434
baseline 2014 Auckland 2.962789
baseline 2014 New Zealand 2.915531
baseline 2015 Hamilton 1.844517
baseline 2015 Tauranga 2.285873
baseline 2015 Palmerston North 1.2391665
baseline 2015 Wellington 3.027987
baseline 2015 Christchurch 2.351883
baseline 2015 Queenstown 2.296133
baseline 2015 Auckland 3.314699
baseline 2015 New Zealand 3.159031
baseline 2016 Hamilton 1.92761
baseline 2016 Tauranga 2.39919
baseline 2016 Palmerston North 0.6155434
baseline 2016 Wellington 2.996345
baseline 2016 Christchurch 3.057269
baseline 2016 Queenstown 3.244533
baseline 2016 Auckland 3.499515
baseline 2016 New Zealand 3.369876
conservative 2012 Auckland 2.514022
conservative 2012 Wellington 3.148615
conservative 2012 Tauranga 2.026212
conservative 2012 Hamilton 1.782708
conservative 2012 Christchurch 2.233749
conservative 2012 Palmerston North 1.1051945
conservative 2012 Queenstown 1.989259
conservative 2012 New Zealand 2.61307
conservative 2013 Auckland 3.013771
conservative 2013 Wellington 2.919032
conservative 2013 Tauranga 2.115205
conservative 2013 Hamilton 2.633074
conservative 2013 Christchurch 2.46273
conservative 2013 Palmerston North 1.124045
conservative 2013 Queenstown 2.074217
conservative 2013 New Zealand 2.902371
conservative 2014 Auckland 2.853264
conservative 2014 Wellington 2.982082
conservative 2014 Tauranga 1.953452
conservative 2014 Hamilton 1.698675
conservative 2014 Christchurch 2.69692
conservative 2014 Palmerston North 0.9978587
conservative 2014 Queenstown 1.820816
conservative 2014 New Zealand 2.799384
conservative 2015 Auckland 3.200795
conservative 2015 Wellington 2.930405
conservative 2015 Tauranga 2.121576
conservative 2015 Hamilton 1.828267
conservative 2015 Christchurch 2.321902
conservative 2015 Palmerston North 1.2391665
conservative 2015 Queenstown 2.254666
conservative 2015 New Zealand 3.050156
conservative 2016 Auckland 3.38695
conservative 2016 Wellington 2.90826
conservative 2016 Tauranga 2.22096
conservative 2016 Hamilton 1.883009
conservative 2016 Christchurch 3.020094
conservative 2016 Palmerston North 0.6155434
conservative 2016 Queenstown 3.244533
conservative 2016 New Zealand 3.261219
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px Arial;
margin: 0;
}
svg {
margin: 13px;
}
.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 line = d3.line()
.x(function(d) { return xScale(d.year); })
.y(function(d) { return yScale(d.ratio); });
d3.csv("data-apartments.csv", convertTextToNumbers, function(error, data) {
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain([0,4]);
// Nest data by subject.
var cities = d3.nest()
.key(function(d) { return d.city; })
.key(function(d) { return d.estimate; })
.entries(data);
console.log(cities)
//var nz = cities.filter(function(d){ return d.key === "NZ" });
cities = cities.filter(function(d){ return d.key !== "New Zealand" });
// Add an SVG element for each city
var svg = d3.select("#charts").selectAll("svg")
.data(cities)
.enter().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 + ")");
// Add the line path elements
svg.selectAll(".estimate")
.data(function(d){ return d.values; })
.enter()
.append("g")
.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")
.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")
svg.append("text")
.text(xScale.domain()[1])
.attr("x", width)
.attr("y", height + 15)
.style("text-anchor", "end")
.style("font-size", "12px")
//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.ratio = +d.ratio;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment