denisemauldin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from VictorHom's block: nyc_map
forked from denisemauldin's block: nyc_map

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

 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()
      .scale(60000)
      .translate([width / 2, height / 2])
      .center([-73.94, 40.50]);

    // 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("proj is", projection([-73.948142, 40.7750119]))
    svg.selectAll("circle")
    .data([[-73.948142, 40.7750119], [ -73.8491607, 40.7102956], [ -73.94, 40.70]]).enter()
    .append("circle")
    .attr("cx", function (d) {
      return projection(d)[0];
    })
    .attr("cy", function (d) { return projection(d)[1]; })
    .attr("r", "8px")
    .attr("fill", "red")
    .attr("class", "testcircle");


  });

  </script>
</body>
</html>

## opendataset_borough_boundaries.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              opendataset_borough_boundaries.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>

	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()
	.scale(60000)
	.translate([width / 2, height / 2])
	.center([-73.94, 40.50]);

	// 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("proj is", projection([-73.948142, 40.7750119]))
	svg.selectAll("circle")
	.data([[-73.948142, 40.7750119], [ -73.8491607, 40.7102956], [ -73.94, 40.70]]).enter()
	.append("circle")
	.attr("cx", function (d) {
	return projection(d)[0];
	})
	.attr("cy", function (d) { return projection(d)[1]; })
	.attr("r", "8px")
	.attr("fill", "red")
	.attr("class", "testcircle");


	});

	</script>
	</body>
	</html>