Turnstile Traffic

Working through the book Getting Started with D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100%; margin-left:20px; margin-top:50px;}
    .axis{
      font-family: arial;
      font-size:0.6em;
    }
    path{
      fill:none;
      stroke:black;
      stroke-width:2px;
    }
    .tick{
      fill:none;
      stroke:black;
    }
    circle{
      stroke:black;
      stroke-width:0.5px;
    }
    circle.times_square{
      fill:DeepPink;
    }
    circle.grand_central{
      fill:MediumSeaGreen;
    }
    path.times_square{
      stroke:DeepPink;
    }
    path.grand_central{
      stroke:MediumSeaGreen;
    }
  </style>
</head>
<body>
  <script>
    
    d3.json("turnstile_traffic.json", draw);
    
    function draw(data) {
      "use strict";
      
      var margin = 40,
          width = 700 - margin,
          height = 300 - margin;
      
      var count_extent = d3.extent(
        data.times_square.concat(data.grand_central),
        function(d) { return d.count}
      );
      
      var count_scale = d3.scale.linear()
      	.domain(count_extent)
      	.range([height, margin]);
      
      var time_extent = d3.extent(
        data.times_square.concat(data.grand_central),
        function(d) { return d.time}
      );
      
      var time_scale = d3.time.scale()
      	.domain(time_extent)
      	.range([margin, width]);
      
      var time_axis = d3.svg.axis()
      	.scale(time_scale);
      
      var count_axis = d3.svg.axis()
      	.scale(count_scale)
      	.orient("left");
      
      var line = d3.svg.line()
      	.x(function(d){return time_scale(d.time)})
      	.y(function(d){return count_scale(d.count)});
      
      d3.select("body")
      	.append("svg")
      		.attr("width", width+margin)
      		.attr("height", height+margin)
      		.attr("class", "chart");
      
      d3.select("svg")
      	.append("g")
      	.attr("class", "x axis")
      	.attr("transform", "translate(0,"+height+")")
      	.call(time_axis);
      
      d3.select("svg")
      	.append("g")
      	.attr("class", "y axis")
      	.attr("transform", "translate("+margin+",0)")
      	.call(count_axis);
      
      d3.select("svg")
      	.selectAll("circle.times_square")
      	.data(data.times_square)
      	.enter()
      	.append("circle")
      		.attr("class", "times_square");
      
      d3.select("svg")
      	.selectAll("circle.grand_central")
      	.data(data.grand_central)
      	.enter()
      	.append("circle")
      		.attr("class", "grand_central")
      
      d3.selectAll("circle")
      	.attr("cy", function(d) {return count_scale(d.count);})
      	.attr("cx", function(d) {return time_scale(d.time);})
      	.attr("r", 3);
      
      d3.select("svg")
      	.append("path")
      		.attr("d", line(data.times_square))
      		.attr("class", "times_square");
      
      d3.select("svg")
      	.append("path")
      		.attr("d", line(data.grand_central))
      		.attr("class", "grand_central");
      
      d3.select(".y.axis")
      	.append("text")
      	.text("Mean Number of Turnstile Revolutions")
      	.attr("transform", "rotate (90, "+ -margin + ", 0)")
      	.attr("x", 20)
      	.attr("y", 0);
      
      d3.select(".x.axis")
      	.append("text")
      	.text("Time")
      	.attr("x", function(){return (width/1.6)-margin})
      	.attr("y", margin/1.5);
      
      
      
      
    }

</script>
</body>

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