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;
​
    // https://github.com/mbostock/d3/wiki/Time-Formatting
    var format = d3.time.format("%Y-%m-%d");
    }
  </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>
​
    