Old school D3 from simpler times

All examples By author By category About

mostaphaRoudsari

Full window Github gist

Reusable Area Chart: Ladybug group interactions

This example is code originally written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts. Curran put together a bl.ock Towards Reusable Charts Example based on the post which I forked from to create this bl.ock and learn more about re-usable charts and a step forward to write Ladybug for web.

Here are some learning resources related to this example from Curran's bl.ock:

<!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-chart.js"></script>
    <style>

.axis text {
        font: 10px sans-serif;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.line {
        fill: none;
        stroke: #000;
        stroke-width: 0.5px;
      }

.area {
        fill: #ffbb8e;
      }

</style>
  </head>
  <body>
    <p id="example">
    <script>

var chart = timeSeriesChart()
          .x(function(d) { return formatDate(d.dt); })
          .y(function(d) { return +d.total; })
      		.width(940)
					.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("interactions.json", function(error, data) {
        
        data.forEach(function(d){
          // calculate total interactions
          d['total'] = d.reps + d.cmnts + d.dscs;
        });
        
        d3.select("#example")
            .datum(data)
            .call(chart);
      });

</script>
  </body>
</html>

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-chart.js"></script>
    <style>
​
      .axis text {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
      .line {
        fill: none;
        stroke: #000;
        stroke-width: 0.5px;
      }
​
      .area {
        fill: #ffbb8e;
      }
​
    </style>
  </head>
  <body>
    <p id="example">
    <script>
​
      var chart = timeSeriesChart()
          .x(function(d) { return formatDate(d.dt); })
          .y(function(d) { return +d.total; })
            .width(940)
                    .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("interactions.json", function(error, data) {
        
        data.forEach(function(d){
          // calculate total interactions
          d['total'] = d.reps + d.cmnts + d.dscs;
        });
        
        d3.select("#example")
            .datum(data)
            .call(chart);
      });
​
    </script>
  </body>
</html>
​
    

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