tomshanley/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from emagee's block: More small multiples, repeated axes

  
## data.csv

          
            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

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