Barley data: arrows 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;
  }

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

  .g-location {
  	text-align: center;
  	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;
  }

  .g-variety-group line {
  	stroke: #ccc;
  	stroke-width: 4px;
  }

	.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
var myLocationName = "Waseca";

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

var width = 350 - 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 xScale = d3.scale.linear()
		.range([0,width]);

var y0 = d3.scale.ordinal()
		.rangeBands([height, 0], 0.2)
		.domain(["Glabron", "Manchuria", "No. 457", "No. 462", "No. 475", "Peatland", "Svansota", "Trebi", "Velvet", "Wisconsin No. 38"]);

var yAxis = d3.svg.axis()
		.scale(y0)
		.tickSize(-width)
		.tickPadding(13)
		.orient("left");

var xAxis = d3.svg.axis()
		.scale(xScale)
		.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;
	});

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

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

	yieldsByLocation.forEach(function(d) {
		d.increasing = (d.values[0].yield > d.values[1].yield);
	});

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

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

	xScale.domain([0, maxYield ]);

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

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

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

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

}


</script>