slopegraphMultiples

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

.g-chart-container {
      width:270px;
      margin:10px 0;
      display:inline-block;
      float:left;
   }

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

.g-increasing .g-slopegraph-path {
      stroke:#018571;
   }

.g-decreasing .g-slopegraph-path {
      stroke: #dfc27d;
   }

.g-increasing .g-slopegraph-path:hover {
      stroke:#018571;
      opacity: 0.8;
   }

.g-decreasing .g-slopegraph-path:hover {
      stroke: #a6611a;
      opacity: 0.8;
   }
  
   .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.3;
   }

.bounder {
      fill:none;
      stroke: red;
   }

h2 {
      margin:0;
   }

p {
      margin: 5px 0px 20px 0px;
   }

.increase {
      background-color: #80cdc1;
      padding: 3px;
      color: white;
      font-weight: bold;
   }

.decrease {
      background-color: #dfc27d;
      padding: 3px;
      color: white;
      font-weight: bold;
   }

</style>

<body>
   <header>
      <h2>What happened in Morris?</h2>
      <p><span class="increase">INCREASE</span> or <span class="decrease">DECREASE</span> in barley yields from 1931 to 1932</p>
   <div class="barley-charts-container"><div> 
</body>

var width = 250 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

//scales
var yScale = d3.scale.linear()
      .range([height,0]);

var xScale = d3.scale.linear()
      .range([0, width])
      .domain([1931, 1932]);

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

//axis
var xAxis = d3.svg.axis()
      .scale(xScale)
      .tickSize(-height)
      .tickValues([1931,1932])
      .tickFormat(d3.round)
      .orient("bottom");

//load data
d3.csv("barley2.csv", 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 maxYield = d3.max(data, function(d) { return d.yield; });

yScale.domain([0, maxYield ]);

allSites = d3.set(data.map(function(d) { return d.site; })).values();

allSites.forEach(function(d) {
        makeChart(d);
});

//FANCY CHART FUNCTION
function makeChart(site) {
   var myLocationName = site;

//filter data and return only the data that matches conditional
   var myLocationData = data.filter(function(d) {
      return d.site === myLocationName;
   });

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

//create divs
   var chartContainer = d3.select(".barley-charts-container").append("div")
      .attr("class", "g-chart-container");

var chartLocation = chartContainer.append("h5")
      .attr("class", "g-location");

var chart = chartContainer.append("div")
      .attr("class", "g-chart");

//adding chart title
   chartLocation.text(myLocationName);;

//creating svg
   var svg = chart.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 + ")");

//tooltips
   var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([10, function(d) { return yScale(d.values[1].yield); }])
      .html(function(d) {
         console.log(d);
         return "<strong>" + d.key + "</strong>";
      })

svg.call(tip);

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

//data join
   var varietyLineGroup = svg.selectAll(".g-variety-group")
      .data(yieldsByVariety)
      .enter()
      .append("g")
      .attr("class", "g-variety-group")
      .classed("g-decreasing", function(d) { return d.values[0].yield > d.values[1].yield;  })
      .classed("g-increasing", function(d) { return d.values[0].yield < d.values[1].yield;  });

//add labels
   
//   varietyLineGroup.append("text")
//      .text(function(d) {
//         if (d.values[1].variety === "Velvet"/*d.values[0].yield < d.values[1].yield*/) {
//            return d.values[1].variety;
//         }
//         else {
//            return null
//         }   
//      })
//      .attr("x", xScale(1932))
//      .attr("dx", 5)
//      .attr("y", function(d) { return yScale(d.values[1].yield); });

//draw lines
   varietyLineGroup.append("path")
      .attr("class", "g-slopegraph-path")
      .attr("d", function(d) { return line(d.values); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

}

</script>

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js