Multiple Multiples

forked from Jay-Oh-eN's block: Single Multiple

forked from Jay-Oh-eN's block: Multiple Multiples

forked from vswetha01's block: Multiple Multiples

<!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%;
    }

svg {
      width:50%;
      height:100%;
      float: left;
    }

circle.airbnb {
      fill: #e00007;
      opacity: 0.6;
    }

.axis {
      font-family: arial;
      font-size: 0.7em;
    }
    
    text {
      fill: black;
      stroke: none;
    }
      
    .label {
      font-size: 1.5em;
    }
      
    path {
      fill: none;
      stroke: black;
      stroke-width: 2px;
    }
    .tick {
      fill: none;
      stroke: black;
    }
    
    circle {
      opacity: 0.9;
      stroke: none;
      fill: red;
    }
    
    .line {
      fill: none;
      stroke: #e00007;
      stroke-width: 1px;
    }
    
    div.multiple {
       width: 50px;
       height: 50px;
       margin: 10px;
       float: left;
       background: blue;
    }
    
    ////css to make them go next to each other
/*     div#multiples{
      background:yellow;
    } */
  </style>
  <script>
    function draw(error, data) {
    "use strict";
      
    // important: First argument it expects is error
    if (error) throw error;
      
    /*
    D3.js setup code
    */

var container = d3.select('#multiples');
      
      //group on neighborhood
      var nested = d3.nest().key(function(d){
        return d.neighborhood
      }).entries(data);//pipe at the end
    
      
  console.log(data);
  console.log(nested);
   var container = d3.select('#multiples');
    container.selectAll('div.chart')
    					.data(nested)
    					.enter()
              .append('div')
							.attr('class', 'multiple');
    }  
  </script>
</head>
<body>
  <div id="multiples"></div>
  <script>
		d3.csv("https://jay-oh-en.github.io/interactive-data-viz/data/airbnb/neighborhood_reviews_timeseries.csv", draw);
  </script>
</body>
</html>

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

https://d3js.org/d3-queue.v2.min.js