xxxxxxxxxx<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 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> <!------------------------------------------------------------------> <!-- END BODY --> <!------------------------------------------------------------------> </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