NYC barley - Morris by kpq

index.html

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

<style type="text/css">
  /*css to go here*/
  body {
  	font-family: arial;
  	font-size: 12px;
  }

  svg {
  	border: 1px solid #f0f;
  }

  circle {
  	opacity: 0.4;
  }

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

  .g-location {
  	text-align:left;
  	font-weight: bold;
  	font-size:14px; 
  	margin: 3px 0;
  }
  .g-variety-group.g-increasing line {
  	stroke:#7FA4CE;
  }

  .g-variety-group.g-decreasing line {
  	stroke: #BE6C8D;
  }
  .g-variety-group.g-decreasing circle {
  	fill: #BE6C8D;
  }
  .g-variety-group.g-increasing circle {
  	fill: #7FA4CE;
  }


	.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 text {
    text-anchor: end !important;
    font-size:12px;
  }
</style>

<body>
	<div class="g-chart-container">
		<h5 class="g-location"></h5>
		<div class="g-chart"></div>
	</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>
//JS to go here

//which location do I want to chart?
var myLocationName = "Morris";

var margin = {top: 10, right: 10, bottom: 50, left: 50};

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

//set domains once we load data
var yScale = d3.scale.linear()
		.range([height,0]);

//ordinal scale - y0 is just a naming convention
var x0 = d3.scale.ordinal()
		.rangeBands([width, 0], 0.2);

var yAxis = d3.svg.axis()
		.scale(yScale)
		// .tickSize(height)
		.tickPadding(13)
		.orient("left");

var xAxis = d3.svg.axis()
		.scale(x0)
		// .tickSize(width)
		.orient("bottom");

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;
	});

	// an array for just the location I want
	var myLocationData = data.filter(function(d) {
		return d.site === myLocationName;
	});

	//tricky, but insert hierarchy into our data. we'll go over this.
	yieldsByVariety = d3.nest()
			.key(function(d) { return d.variety; })
			.entries(myLocationData);

	//add a flag for each variety to see whether it increased
	yieldsByVariety.forEach(function(d) {
		d.pctChange = (d.values[1].yield - d.values[0].yield)/d.values[1].yield;
	});

	yieldsByVariety = yieldsByVariety.sort(function(a,b) {
		return a.pctChange - b.pctChange;
	});

	var orderedSites = yieldsByVariety.map(function(d) { return d.key; });

	//make a headline
	d3.select(".g-location").text(myLocationName);

	// //set domains
	var maxPctChange = d3.max(yieldsByVariety.map(function(d) { return d.pctChange; }));

	yScale.domain([0, maxPctChange ]);
	
	x0.domain(orderedSites);

	//draw your axes
	svg.append("g")
			.attr("class", "y axis")
			.call(yAxis);

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

	//data join -- draw groups first
	var varietyGroup = svg.selectAll(".g-variety-group")
			.data(yieldsByVariety)
			.enter()
			.append("g")
			.attr("class", function(d) { return "g-variety-group " + (d.increasing ? "g-increasing" : "g-decreasing"); })
			.attr("transform", function(d) {
				return "translate(" +(x0(d.key) + x0.rangeBand()/2) + ",0)";
			});

	// varietyGroup.append("line")
	// 		.attr("x1", function(d) { return xScale(d.values[0].yield); })
	// 		.attr("x2", function(d) { return xScale(d.values[1].yield); });

	varietyGroup.append("circle")
			// .attr("class", "g-1931-yield")
			.attr("r", function(d) { return 8*Math.sqrt(d.values[0].yield)})
			.attr("cy", function(d) { return yScale(d.pctChange) });
			// .attr("cx", function(d) { return xScale(d.values[0].yield); });

	// varietyGroup.append("circle")
	// 		.attr("r", 4)
	// 		.attr("cx", function(d) { return xScale(d.values[1].yield); });

}


</script>

barley.tsv

yield	variety	year	site
27	Manchuria	1931	University Farm
48.86667	Manchuria	1931	Waseca
27.43334	Manchuria	1931	Morris
39.93333	Manchuria	1931	Crookston
32.96667	Manchuria	1931	Grand Rapids
28.96667	Manchuria	1931	Duluth
43.06666	Glabron	1931	University Farm
55.2	Glabron	1931	Waseca
28.76667	Glabron	1931	Morris
38.13333	Glabron	1931	Crookston
29.13333	Glabron	1931	Grand Rapids
29.66667	Glabron	1931	Duluth
35.13333	Svansota	1931	University Farm
47.33333	Svansota	1931	Waseca
25.76667	Svansota	1931	Morris
40.46667	Svansota	1931	Crookston
29.66667	Svansota	1931	Grand Rapids
25.7	Svansota	1931	Duluth
39.9	Velvet	1931	University Farm
50.23333	Velvet	1931	Waseca
26.13333	Velvet	1931	Morris
41.33333	Velvet	1931	Crookston
23.03333	Velvet	1931	Grand Rapids
26.3	Velvet	1931	Duluth
36.56666	Trebi	1931	University Farm
63.8333	Trebi	1931	Waseca
43.76667	Trebi	1931	Morris
46.93333	Trebi	1931	Crookston
29.76667	Trebi	1931	Grand Rapids
33.93333	Trebi	1931	Duluth
43.26667	No. 457	1931	University Farm
58.1	No. 457	1931	Waseca
28.7	No. 457	1931	Morris
45.66667	No. 457	1931	Crookston
32.16667	No. 457	1931	Grand Rapids
33.6	No. 457	1931	Duluth
36.6	No. 462	1931	University Farm
65.7667	No. 462	1931	Waseca
30.36667	No. 462	1931	Morris
48.56666	No. 462	1931	Crookston
24.93334	No. 462	1931	Grand Rapids
28.1	No. 462	1931	Duluth
32.76667	Peatland	1931	University Farm
48.56666	Peatland	1931	Waseca
29.86667	Peatland	1931	Morris
41.6	Peatland	1931	Crookston
34.7	Peatland	1931	Grand Rapids
32	Peatland	1931	Duluth
24.66667	No. 475	1931	University Farm
46.76667	No. 475	1931	Waseca
22.6	No. 475	1931	Morris
44.1	No. 475	1931	Crookston
19.7	No. 475	1931	Grand Rapids
33.06666	No. 475	1931	Duluth
39.3	Wisconsin No. 38	1931	University Farm
58.8	Wisconsin No. 38	1931	Waseca
29.46667	Wisconsin No. 38	1931	Morris
49.86667	Wisconsin No. 38	1931	Crookston
34.46667	Wisconsin No. 38	1931	Grand Rapids
31.6	Wisconsin No. 38	1931	Duluth
26.9	Manchuria	1932	University Farm
33.46667	Manchuria	1932	Waseca
34.36666	Manchuria	1932	Morris
32.96667	Manchuria	1932	Crookston
22.13333	Manchuria	1932	Grand Rapids
22.56667	Manchuria	1932	Duluth
36.8	Glabron	1932	University Farm
37.73333	Glabron	1932	Waseca
35.13333	Glabron	1932	Morris
26.16667	Glabron	1932	Crookston
14.43333	Glabron	1932	Grand Rapids
25.86667	Glabron	1932	Duluth
27.43334	Svansota	1932	University Farm
38.5	Svansota	1932	Waseca
35.03333	Svansota	1932	Morris
20.63333	Svansota	1932	Crookston
16.63333	Svansota	1932	Grand Rapids
22.23333	Svansota	1932	Duluth
26.8	Velvet	1932	University Farm
37.4	Velvet	1932	Waseca
38.83333	Velvet	1932	Morris
32.06666	Velvet	1932	Crookston
32.23333	Velvet	1932	Grand Rapids
22.46667	Velvet	1932	Duluth
29.06667	Trebi	1932	University Farm
49.2333	Trebi	1932	Waseca
46.63333	Trebi	1932	Morris
41.83333	Trebi	1932	Crookston
20.63333	Trebi	1932	Grand Rapids
30.6	Trebi	1932	Duluth
26.43334	No. 457	1932	University Farm
42.2	No. 457	1932	Waseca
43.53334	No. 457	1932	Morris
34.33333	No. 457	1932	Crookston
19.46667	No. 457	1932	Grand Rapids
22.7	No. 457	1932	Duluth
25.56667	No. 462	1932	University Farm
44.7	No. 462	1932	Waseca
47	No. 462	1932	Morris
30.53333	No. 462	1932	Crookston
19.9	No. 462	1932	Grand Rapids
22.5	No. 462	1932	Duluth
28.06667	Peatland	1932	University Farm
36.03333	Peatland	1932	Waseca
43.2	Peatland	1932	Morris
25.23333	Peatland	1932	Crookston
26.76667	Peatland	1932	Grand Rapids
31.36667	Peatland	1932	Duluth
30	No. 475	1932	University Farm
41.26667	No. 475	1932	Waseca
44.23333	No. 475	1932	Morris
32.13333	No. 475	1932	Crookston
15.23333	No. 475	1932	Grand Rapids
27.36667	No. 475	1932	Duluth
38	Wisconsin No. 38	1932	University Farm
58.16667	Wisconsin No. 38	1932	Waseca
47.16667	Wisconsin No. 38	1932	Morris
35.9	Wisconsin No. 38	1932	Crookston
20.66667	Wisconsin No. 38	1932	Grand Rapids
29.33333	Wisconsin No. 38	1932	Duluth