block by kpq c73936a85187c5727740

Barley data: vertical barchart

Full Screen

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-1931 {
  	fill:#7FA4CE;
  }

  .g-1932 {
  	fill: #BE6C8D;
  }

  .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;
  }
</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 = "Grand Rapids";

var margin = {top: 0, right: 10, bottom: 120, left: 15};

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 yScale = d3.scale.linear()
		.range([height,0]);

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

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

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

	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)
			.selectAll("text")
			.style("text-anchor", "end")
			.attr("dx", -8)
			.attr("dy", -4)
      .attr("transform", "rotate(-90)");

	var varietyGroup = svg.selectAll(".g-variety-group")
			.data(myLocationData)
			.enter()
			.append("g")
			.attr("class", "g-variety-group")
			.attr("transform", function(d) {
				return "translate(" + x0(d.variety) + ",0)";
			});

	varietyGroup.append("rect")
			.attr("y", function(d) { return yScale(d.yield); })
			.attr("height", function(d) { return height - yScale(d.yield); })
			.attr("width", x0.rangeBand()/2 )
			.attr("class", function(d) {
				return "g-" + d.year;
			})
			.attr("x", function(d) {
				return d.year == 1931 ? 0 : x0.rangeBand()/2;
			});

}


</script>

barley.tsv