D3 Examples - Barley Farmers Exploration

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style type="text/css">
      /*css to go here*/
      .axis text {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <div id="viz"></div>
    <script>
      //JS to go here
      d3.csv("barley-yields.csv", function(error, data) {
        data.forEach(function(d) {
          d.year = +d.year;
          d.yield = +d.yield;
        });
​
        var margin = {top: 20, right: 20, bottom: 50, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
        var svg = d3.select("#viz")
                      .append("svg")
                      .attr({
                        width: width + margin.left + margin.right,
                        height: height + margin.top + margin.bottom
                      })
                      .append("g")
                      .attr("transform", "translate(" + [margin.left, margin.top] + ")");
​
        var xScale = d3.scale.ordinal()
                        .rangePoints([50, width])
                        .domain(data.map(function(d) { return d.year; }));
​
        var yScale = d3.scale.linear()
                        .range([height, 0])
                        .domain([0, d3.max(data, function(d) { return d.yield; })]);
        var circles = svg.selectAll("circle.yield").data(data);
​
        circles.enter()
          .append("circle")
          .classed("yield", true)
          .attr({
            cx: function(d) { return xScale(d.year); },
            cy: function(d) { return yScale(d.yield); },
            r: 2
          });
​
          var xAxis = d3.svg.axis()
                        .orient("bottom")
                        .scale(xScale);
​
          var yAxis = d3.svg.axis()
                        .orient("left")
                        .scale(yScale);
​
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(" + [0, margin.top + height] + ")")
            .call(xAxis);
​
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
      });
    </script>
  </body>
</html>
    