D3 Examples - Multiple Multiples

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script>
  <script src="https://d3js.org/d3-queue.v2.min.js"></script>
  <style>
    body, html {
      width: 960px;
      height: 100%;
    }
​
 
    text {
      fill: black;
      stroke: none;
    }
     
    path {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
    .tick {
      fill: none;
      stroke: black;
    }
    
    .line {
      fill: none;
      stroke: #e00007;
      stroke-width: 1px;
    }
    
    div.multiple {
       width: 200px;
       height: 100px;
       margin: 10px;
       float: left;
       background: #eee;
    }
    
    div#chart1 {
      background: red;
    }
    
    div#chart2 {
      background: blue;
    }
  </style>
  <script>
    function draw(error, data) {
    "use strict";
      
    // important: First argument it expects is error
    if (error) throw error;
    
     var  container = d3.select('#dashboard');
         var width = 200;
     var height = 100;
      
    // group data
    var nested = d3.nest().key(function (d) {
      return d.neighborhood;
    }).entries(data);
     
    // create contain divs for each individual chart 
    container.selectAll('div.multiple')
                        .data(nested)
                        .enter()
              .append('div')
                    .attr('class', 'multiple')
                        .append('svg')
                        ;
      
           // extents
        var y_ext = d3.extent(data, function(d) {
             return d.count;
        });
        
        var x_ext = d3.extent(data, function(d) {
             return d.timestamp;
        });
                
        // scales
        var x_scale = d3.time.scale()
                                        .domain(x_ext)
                        .range([0, width]);
      
        var y_scale = d3.scale.linear()
                                        .domain(y_ext)
                       .range([height - 20, 10]);
        
      // line function
      var line = d3.svg.line().x(function (d) {
         return x_scale(d.timestamp);
      }).y(function (d) {
         return y_scale(d.count);
      });
      
      var draw_multiple = function (d, i) {
//       console.log(i);   
//          console.log(d); 
 
        // append path
        d3.select(this).append('path')
                                .datum(d.values)
                                    .attr('d', line)
                                    .attr('class', 'line');
        
        // append text
        d3.select(this).append('text').text(d.key)
                                .attr('x', width / 3)
                                .attr('y', height);                         
    };
    
      // draw the line charts
      container.selectAll('div.multiple svg').each(draw_multiple);
    }  
  </script>
</head>
<body>
  <div id="dashboard">
    <!--  <div id="chart1" class="chart"></div>
  <div id="chart2" class="chart"></div>  -->
  </div>
  <script>
    // https://github.com/mbostock/d3/wiki/Time-Formatting
    var format = d3.time.format("%Y-%m-%d");
    
        d3.csv("neighborhoods.csv", function(d) {
      d.timestamp = format.parse(d.timestamp);
      d.count = +d.count;
      return d;
    }, draw);
  </script>
</body>
</html>
    