Foot Traffic in Manhattan (Map)

<!DOCTYPE html>
<html lang="en">
   <head>
      
      
      
      <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">
      
      
      
   </head>
   <body>

<h1>Foot traffic in Manhattan</h1>
      <p>Relative estimated foot traffic in Manhattan</p>
      <script type="text/javascript">

/////////////////////////////////////////////////////////////////////  
         // GLOBAL VARIABLES, DON'T POLLUTE THE NAME SPACE :)
         /////////////////////////////////////////////////////////////////////

var dv={};
         // Positions of Elements on Page
         dv.basepad=5;

dv.width_map=500; // 400
         dv.height_map=600; // 600
         dv.x_map=0;
         dv.y_map=75;

dv.x_colorbar=dv.width_map-175;
         dv.y_colorbar=dv.height_map-30;
         dv.width_colorbar=15;
         dv.height_colorbar=1;

// 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;");

// Map
         dv.svg_map=d3.select("body").append("svg")
                      .attr("class","map")
                      .attr("id","svg_map")
                      .attr("width",dv.width_map)
                      .attr("height",dv.height_map)
                      .attr("style","position:absolute; top:"+dv.y_map+"px; left:"+dv.x_map+"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.json("nycap_MN_clean_topojson.json",function(error,nycap) {
            if (error) return console.error(error);
         d3.csv("interpolateFootTrafficRating_completeAverage.csv",function(error,data) {
            if (error) return console.error(error);

/////////////////////////////////////////////////////////////////////  
         // MAP
         /////////////////////////////////////////////////////////////////////

// Get projection and path
         var projection=d3.geo.mercator()
                          .center([-73.9597,40.7903]) //-73.94, 40.70 for NYC  
                          .scale(130000)
                          .translate([dv.width_map/2-75,dv.height_map/2]);

var path=d3.geo.path()
                    .projection(projection);

// All polygons
         var allPolygons=nycap.objects.nycap_MN_clean_geojson.geometries;

// Draw Atomic Polygons
         var data_AP;
         allPolygons.map(function(d,i){
                            data_AP=topojson.feature(nycap,d);
                            dv.svg_map.append("path")
                              .attr("class","map polygons MN")
                              .datum(data_AP)
                              .attr("d",path);
                         });

//
         // Show Estimated Foot Traffic For Manhattan
         //
         
         dv.crScale=d3.scale.linear().range([255,0]).domain([d3.min(data,function(d){return +d.Npeople;}),
                                                             d3.max(data,function(d){return +d.Npeople;})*0.25]);
         dv.cgScale=d3.scale.linear().range([255,0]).domain([d3.min(data,function(d){return +d.Npeople;}),
                                                               d3.max(data,function(d){return +d.Npeople;})*0.25]);

d3.selectAll(".map.polygons.MN")
           .data(data)
           .style("fill",function(d){return "rgb("+Math.round(dv.crScale(+d.Npeople))+","+Math.round(dv.cgScale(+d.Npeople))+",255)";});

//
         // Make a color bar
         //
         cdata=[]; for (var i=0;i<256;i++) {cdata[i]={icolor:i};}

dv.svg_map.selectAll("rect")
                   .data(cdata)
                   .enter()
                   .append("rect")
                   .attr("class","colorbar")
                   .attr("x",dv.x_colorbar).attr("y",function(d){return dv.y_colorbar-d.icolor*dv.height_colorbar;})
                   .attr("width",dv.width_colorbar).attr("height",dv.height_colorbar)
                   .attr("fill",function(d){return "rgb("+(255-d.icolor)+","+(255-d.icolor)+",255)";});

dv.svg_map.append("text")
                   .attr("class","colorbar label")
                   .attr("x",dv.x_colorbar+dv.width_colorbar+5).attr("y",dv.y_colorbar-255+15)
                   .attr("text-anchor","start")
                   .text("High Foot Traffic");
         dv.svg_map.append("text")
                   .attr("class","colorbar label")
                   .attr("x",dv.x_colorbar+dv.width_colorbar+5).attr("y",dv.y_colorbar)
                   .attr("text-anchor","start")
                   .text("Low Foot Traffic");

/////////////////////////////////////////////////////////////////////  
         // CLOSE DATA FILES
         /////////////////////////////////////////////////////////////////////
         }); //data d3.csv("interpolateFootTrafficRating.csv"
         }); //nycap d3.json("nycap_MN_clean_topojson.json"

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js