D3 Examples - slopegraphMultiples

xxxxxxxxxx
 
<!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: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>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script>
//margins and width
var margin = {top: 0, right: 50, bottom: 20, left: 15};
​
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>
    