D3 Examples - san francisco temperature

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      path{
        fill: none;
        stroke: black;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
    <script>
​
      var outerWidth = 500;
      var outerHeight = 250;
      var circleRadius = 3;
      var margin = { left: 30, top: 30, right: 30, bottom: 30 };
​
      var xColumn = "timestamp";
      var yColumn = "temperature";
​
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
      var path = g.append("path");
      
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var xScale = d3.time.scale().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
​
      var line = d3.svg.line()
        .x(function(d) { return xScale(d[xColumn]); })
        .y(function(d) { return yScale(d[yColumn]); })
​
      function render(data){
​
        xScale.domain( d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain( d3.extent(data, function (d){ return d[yColumn]; }));
                path.attr("d", line(data))  // the 'd' element is the line that has 'M50 500 L400 300 etc
        
      }
​
      function type(d){
        d.timestamp = new Date(d.timestamp);
        d.temperature = +d.temperature;
        return d;
      }
​
      d3.csv("week_temperature_sf.csv", type, render);
​
    </script>
  </body>
</html>
    