Barley Yields -- Crookston, v4

forked from kpq's block: Barley Yields -- Crookston

<!DOCTYPE html>
<meta charset="utf-8">

.g-chart-container {
  	width:350px;
  	margin:10px 0;
  }

.g-location {
  	text-align: center;
  	font-weight: bold;
  	font-size:14px; 
  	margin: 3px 0;
  }

.axis line {
    fill: none;
    stroke: #ccc;
    stroke-dasharray: 2px 3px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }

.axis text {
    font-family: arial, sans-serif;
    font-size: 12px;
    pointer-events: none;
    fill: #777;
  }

.domain {
  	display: none;
  }

.y.axis line {
  }

.y.axis text {
    text-anchor: end !important;
    font-size:12px;
  }

.g-slopegraph-path {
  	stroke: #ccc;
  	stroke-width: 2px;
  	opacity:0.5;
  }

.bounder {
  	fill:none;
  	stroke: red;

}

</style>

//https://bl.ocks.org/mbostock/5577023
var colors10 = ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"]
;

var color = d3.scaleOrdinal()
		.range(colors10);

var margin = {top: 0, right: 100, bottom: 20, left: 100};

var width = 720 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

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 + ")");

var yScale = d3.scaleLinear()
		.range([height,0]);

var xScale = d3.scaleLinear()
		.range([0, width])
		.domain([1930.5, 1932.5]);

var xAxis = d3.axisBottom()
		.scale(xScale)
		.tickSize(-height)
		.tickValues([1931,1932])
		.tickFormat(d3.round);

var yAxis = d3.axisLeft()
		.scale(yScale);

var line = d3.line()
		.x(function(d) { return xScale(d.year); })
		.y(function(d) { return yScale(d.yield); });

d3.tsv("barley.tsv", ready);

function ready(err, data) {
	if (err) throw "error loading data";

//FORMAT data
	data.forEach(function(d) {
		d.year = +d.year;
		d.yield = +d.yield;
	});

var myLocationData = data.filter(function(d) {
		return d.site === myLocationName;
	});

var varieties = data.map(function(d) { return d.variety; });
  var uniqVarieties = d3.set(varieties).values();
	color.domain(uniqVarieties);

d3.select(".g-location").text(myLocationName);

var yieldsByVariety = d3.nest()
			.key(function(d) { return d.variety; })
			.entries(myLocationData);

var maxYield = d3.max(data, function(d) { return d.yield; });

yScale.domain([0, maxYield ]);

svg.append("g")
			.attr("transform", "translate(0," + height + ")")
			.attr("class", "x axis")
			.call(xAxis);

svg.append("g")
			.attr("class", "y axis")
			.call(yAxis);

var varietyLineGroup = svg.selectAll(".g-variety-group")
			.data(yieldsByVariety)
			.enter()
			.append("g")
			.attr("class", "g-variety-group");

varietyLineGroup.append("text")
			.text(function(d) {
				return d.values[1].variety;
			})
			.attr("x", xScale(1932))
			.attr("dx", 5)
			.attr("y", function(d) { return yScale(d.values[1].yield); });

varietyLineGroup.append("circle")
			.attr("r", 2)
			.style("fill", function(d) { return color(d.key); })
			.attr("cx", function(d) { return xScale(d.values[0].year); })
			.attr("cy", function(d) { return yScale(d.values[0].yield); });

varietyLineGroup.append("circle")
			.attr("r", 2)
			.style("fill", function(d) { return color(d.key); })
			.attr("cx", function(d) { return xScale(d.values[1].year); })
			.attr("cy", function(d) { return yScale(d.values[1].yield); });

varietyLineGroup.append("path")
			.attr("class", "g-slopegraph-path")
			.attr("d", function(d) { return line(d.values); })
			.style("stroke", function(d) { return color(d.key); });

}

</script>

https://d3js.org/d3.v4.min.js