Old school D3 from simpler times

All examples By author By category About

jaclyncnguyen

Full window Github gist

Towards Reusable Charts

Built with blockbuilder.org

forked from Jay-Oh-eN's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

forked from jaclyncnguyen's block: Towards Reusable Charts

<!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;
      background: orange;
    }

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'];
      });
      
      console.log(y_ext):
     
      
      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]])); 
      
      var path = d3.select('svg')
      							.append('path')
      							.datum(data)
      							.attr('d', line);
    }
  </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>

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

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