xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3 NYC Geo Test</title> </head> <style type="text/css"> body { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script type="text/javascript"> /* code reused from the following stackoverflow question: https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object */ var width = 900, height = 900; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .attr("class", "svg"); // load geojson and do stuff in a callback function... d3.json("nyc_coastline.json", function(error, data){ // console.log the data console.log(data); // create a unit projection var projection = d3.geo.albers() .scale(1) .translate([0,0]); // create a path generator. var path = d3.geo.path() .projection(projection); // compute bounds of a point of interest, then derive scale and translate var b = path.bounds(data), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]; // update the projection to use computed scale and translate.... projection .scale(s) .translate(t); // calculate and draw a bounding box for the geojson svg.append("rect") .attr('width', width) .attr('height', height) .style('stroke', 'black') .style('fill', 'orange'); // draw the svg of both the geojson and bounding box svg.selectAll("path").data(data.features).enter().append("path") .attr("d", path) .style("fill", "red") .style("stroke-width", "1") .style("stroke", "blue") }); </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js