D3 Examples - nyc

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    console.log(d3)
 var width = 960,
      height = 1160;
​
​
​
  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  d3.json("./opendataset_borough_boundaries.geojson", (d) => {return d;}).then((NYC_MapInfo) => {
    console.log(NYC_MapInfo)
    // after loading geojson, use d3.geo.centroid to find out
    // where you need to center your map
    var center = d3.geoCentroid(NYC_MapInfo);
    const projection = d3.geoMercator()
    projection
      .scale(60000)
      .translate([width / 2, height / 2])
      // .center(center);
      .center([-73.94, 40.70]);
​
    // now you can create new path function with
    // correctly centered projection
    var path = d3.geoPath()
      .projection(projection);
​
    // and finally draw the actual polygons
    svg.selectAll("path")
      .data(NYC_MapInfo.features)
      .enter()
      .append("path")
      .style("fill", "steelblue")
      .attr("d", path);
​
    console.log(d3.geoMercator()([40.7750119, -73.948142]))
    svg.selectAll("circle")
    .data([[40.7750119, -73.948142],[40.7102956, -73.8491607], [-73.94, 40.70]]).enter()
    .append("circle")
    .attr("cx", function (d) {
      return projection(d)[1];;
    })
    .attr("cy", function (d) { return projection(d)[1]; })
    .attr("r", "8px")
    .attr("fill", "red")
    .attr("class", "testcircle");
​
​
  });
​
  </script>
</body>
</html>
    