san francisco temperature

<!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>

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