D3 Examples - Reusable Stacked Chart: Ladybug group interactions

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Reusable Chart Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="time-series-stacked-chart.js"></script>
    <style>
​
      .axis text {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <p id="example">
    <script>
​
      var chart = timeSeriesStackedChart()
            .width(1200)
                    .height(420)
            .margin({top: 40, right: 30, bottom: 20, left: 30});
      
      var formatDate = d3.time.format("%Y-%m-%d %I:00:00").parse;
    
      d3.json("https://dl.dropboxusercontent.com/u/16228160/D3TestData/interactions.json", function(error, data) {
        
        data.forEach(function(d){
            d.dt = formatDate(d.dt);
            d.total = d.cmnts + d.reps + d.dscs;
            });
        
        // this should be implemented as updating domain
        // https://bl.ocks.org/mbostock/1166403
        var cuttingDate = new Date("Jan 12, 2015 01:00:00")
​
        data = data.filter(function(d){
             return d.dt > cuttingDate;
          });
​
        d3.select("#example")
            .datum(data)
            .call(chart);
      });
​
    </script>
  </body>
</html>
​
    