D3 Examples - Foot Traffic in Manhattan (Time Series)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
   <head>
      <!------------------------------------------------------------------>
      <!-- BEGIN HEADER                                                 -->
      <!------------------------------------------------------------------>
      <meta charset="utf-8">
      <title>Foot Traffic</title>
      <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
      <script src="https://d3js.org/topojson.v1.min.js"></script>
      <link rel="stylesheet" type="text/css" href="index.css">
      <!------------------------------------------------------------------>
      <!-- END HEADER                                                   -->
      <!------------------------------------------------------------------>
   </head>
   <body>
      <!------------------------------------------------------------------>
      <!-- BEGIN BODY                                                   -->
      <!------------------------------------------------------------------>
​
      <h1>Foot Traffic in Manhattan</h1>
      <p>Relative foot traffic over the course of the day, averaged over all of Manhattan.</p>
​
      <script type="text/javascript">
​
         /////////////////////////////////////////////////////////////////////  
         // GLOBAL VARIABLES, DON'T POLLUTE THE NAME SPACE :)
         ///////////////////////////////////////////////////////////////////// 
​
         var dv={};
         // Positions of Elements on Page
         dv.width=650; 
         dv.height=450; 
         dv.x=0;
         dv.y=50;
         dv.pad_top=50;
         dv.pad_bottom=80;
         dv.pad_right=50;
         dv.pad_left=90;
         dv.pad_xaxis=45;
         dv.pad_yaxis=45;
         dv.basepad=5;
​
         // Map
         dv.svg=d3.select("body").append("svg")
                  .attr("class","plot")
                  .attr("id","svg_plot")
                  .attr("width",dv.width)
                  .attr("height",dv.height)
                  .attr("style","position:absolute; top:"+dv.y+"px; left:"+dv.x+"px;");
​
         // Adjust <h1> <p> spacing
         d3.select("h1").attr("style","margin: "+(dv.basepad*2)+"px 0px 0px "+(dv.basepad*2)+"px;");
         d3.select("p").attr("style","margin: "+(dv.basepad)+"px 0px 0px "+(dv.basepad*2)+"px;");
​
​
         /////////////////////////////////////////////////////////////////////  
         // LOAD ALL DATA YOU NEED AND KEEP OPEN UNTIL SCRIPT IS CLOSED
         // THAT WAY YOU DON'T HAVE TO KEEP LOADING IT BACK IN
         /////////////////////////////////////////////////////////////////////  
         d3.csv("plotTimeSeries.csv",function(error,data) {
            if (error) return console.error(error);
​
         /////////////////////////////////////////////////////////////////////  
         // PLOT IT
         /////////////////////////////////////////////////////////////////////  
​
         var xScale=d3.scale.linear()
                      .range([dv.pad_left,dv.width-dv.pad_right])
                      .domain(d3.extent(data,function(d){return +d.hour;}));
​
         var yScale=d3.scale.linear()
                      .range([dv.height-dv.pad_bottom,dv.pad_top])
                      .domain(d3.extent(data,function(d){return +d.Npeople;}));
​
         var xAxis=d3.svg.axis().scale(xScale).orient("bottom");
         var yAxis=d3.svg.axis().scale(yScale).orient("left");
​
​
         dv.svg.append("g")
               .attr("class","plot x axis")
               .call(xAxis)
               .attr("transform","translate(0,"+(dv.height-dv.pad_bottom)+")");
         dv.svg.append("text")
               .attr("class","plot x label")
               .attr("x",dv.pad_left+(dv.width-dv.pad_left-dv.pad_right)/2.0)
               .attr("y",dv.height-dv.pad_bottom+dv.pad_xaxis)
               .text("Hour")
               .attr("text-anchor","middle");
​
         dv.svg.append("g")
               .attr("class","plot y axis")
               .attr("transform","translate("+dv.pad_left+",0)")
               .call(yAxis);
         var xtext=dv.pad_left-dv.pad_yaxis,
             ytext=(dv.height-dv.pad_bottom-dv.pad_top)/2.0+dv.pad_top;
         dv.svg.append("text")
               .attr("class","plot y label")
               .attr("x",xtext)
               .attr("y",ytext)
               .attr("text-anchor","middle")
               .attr("transform","rotate(-90,"+xtext+","+ytext+")")
               .text("Estimated relative foot traffic");
​
         var line = d3.svg.line()
                          .x(function(d) { return xScale(+d.hour); })
                          .y(function(d) { return yScale(+d.Npeople); });
         dv.svg.append("path")
               .datum(data)
               .attr("class", "plot line")
               .attr("d", line);
​
​
         dv.svg.selectAll("circle[id='estimate']").data(data).enter().append("circle")
               .attr("class","plot points")
               .attr("id","estimate")
               .attr("cx",function(d){ return xScale(+d.hour);})
               .attr("cy",function(d){ return yScale(+d.Npeople)})
               .attr("r",5);
​
         /////////////////////////////////////////////////////////////////////  
         // CLOSE DATA FILES
         /////////////////////////////////////////////////////////////////////
         }); //data d3.csv("plotTimeSeries.csv"
​
      </script>
​
      <!------------------------------------------------------------------>
      <!-- END BODY                                                     -->
      <!------------------------------------------------------------------>
   </body>
</html>
​
    