D3 Examples - Towards Reusable Charts

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%;
    }
​
    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;
    }
  </style>
  <script>
    function draw(data) {
      
      console.table(data);
      
      var margin = 50,
        width = 450 - margin,
        height = 500 - margin;
​
      var svg = d3.select("body")
                            .append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append('g')
                                    .attr('class', 'chart')
                                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      
    // https://github.com/mbostock/d3/wiki/Time-Formatting
        var format = d3.time.format("%Y-%m-%d");
      
      var x_ext = d3.extent(data, function(d) {
        return format.parse(d['timestamp']);
      });
      
      var y_ext = d3.extent(data, function(d){
        return +d['Mission'];
      });
      
     
      
      var x_scale = d3.time.scale().domain(x_ext).range([0, width]);
      
        var y_scale = d3.linear.scale().domain(y_ext).range([height, 0]);
      
      
      var x_axis = d3.svg.axis().scale(x_scale).orient('right');
      
      var y_axis = d3.svg.axis().scale(y_scale);
      
      var line = d3.svg.line().x(function(d) {
        return x_scale(format.parse(d['timestamp']));
      })
      .y(function(d){
        return y_scale(d['Mission']);
      })
      
      //takes in array
      console.log(line([data[0]])); 
      
      
    }
  </script>
</head>
<body>
    <svg id="map"></svg>
    <svg id="chart">
      <text x="50%" y="50" id="heading" font-size="1.5em" text-anchor="middle" font-family="futura">SF</text>
        </svg>
  <script>
    var url = "https://jay-oh-en.github.io/interactive-data-viz/data/airbnb/neighborhood_reviews_timeseries.csv";
    
   d3.csv(url, draw);
  </script>
</body>
</html>
​
    