bresson · February 11, 2020 16:49
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
  
 </head>
 <body>
  <div id="content">   
    <svg width="100" height="100">
      <g class="map"></g>
    </svg>
  </div>
   <script src="https://d3js.org/d3.v5.js"></script>
  <script src="script.js"></script>
 
 </body>
 </html>
diff --git a/script.js b/script.js
 console.log('Hello World!');

 var geojson = {
   "type": "FeatureCollection",
   "features": [
      {
         "type": "Feature",
         "properties": {},
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     -73.75186,
                     40.680354
                  ],
                  [
                     -73.737319,
                     40.677607
                  ],
                  [
                     -73.749856,
                     40.672811
                  ],
                  [
                     -73.765827,
                     40.668466
                  ],
                  [
                     -73.785846,
                     40.663878
                  ],
                  [
                     -73.80312,
                     40.664281
                  ],
                  [
                     -73.816846,
                     40.666421
                  ],
                  [
                     -73.83067,
                     40.667228
                  ],
                  [
                     -73.845599,
                     40.66993
                  ],
                  [
                     -73.855353,
                     40.671233
                  ],
                  [
                     -73.867889,
                     40.674077
                  ],
                  [
                     -73.87788,
                     40.6725
                  ],
                  [
                     -73.881858,
                     40.679636
                  ],
                  [
                     -73.883144,
                     40.690856
                  ],
                  [
                     -73.898063,
                     40.7024
                  ],
                  [
                     -73.90219,
                     40.707943
                  ],
                  [
                     -73.89625,
                     40.719609
                  ],
                  [
                     -73.887893,
                     40.71676
                  ],
                  [
                     -73.888687,
                     40.708088
                  ],
                  [
                     -73.881908,
                     40.703122
                  ],
                  [
                     -73.867106,
                     40.694033
                  ],
                  [
                     -73.869177,
                     40.681418
                  ],
                  [
                     -73.853878,
                     40.682252
                  ],
                  [
                     -73.847981,
                     40.680222
                  ],
                  [
                     -73.830752,
                     40.676911
                  ],
                  [
                     -73.813943,
                     40.683702
                  ],
                  [
                     -73.804063,
                     40.677146
                  ],
                  [
                     -73.795233,
                     40.67601
                  ],
                  [
                     -73.782104,
                     40.674792
                  ],
                  [
                     -73.774733,
                     40.677501
                  ],
                  [
                     -73.766127,
                     40.679069
                  ],
                  [
                     -73.75186,
                     40.680354
                  ]
               ]
            ]
         }
      }
   ],
 }

 var projection = d3.geoMercator().fitExtent([[0, 0], [100, 100]], geojson);;

 var geoGenerator = d3.geoPath()
  .projection(projection);

 // Join the FeatureCollection's features array to path elements
 var u = d3.select('#content g.map')
  .selectAll('path')
  .data(geojson.features);

 // Create path elements and update the d attribute using the geo generator
 u.enter()
  .append('path')
  .attr('d', geoGenerator)
  .style('fill', "#ff0000")
diff --git a/styles.css b/styles.css
 /* todo: add styles */

 #content {
  border: 1px solid #CCC;
  width: 100px;
  height: 100px;
 }
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">

	</head>
	<body>
	<div id="content">
	<svg width="100" height="100">
	<g class="map"></g>
	</svg>
	</div>
	<script src="https://d3js.org/d3.v5.js"></script>
	<script src="script.js"></script>

	</body>
	</html>
	console.log('Hello World!');

	var geojson = {
	"type": "FeatureCollection",
	"features": [
	{
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "Polygon",
	"coordinates": [
	[
	[
	-73.75186,
	40.680354
	],
	[
	-73.737319,
	40.677607
	],
	[
	-73.749856,
	40.672811
	],
	[
	-73.765827,
	40.668466
	],
	[
	-73.785846,
	40.663878
	],
	[
	-73.80312,
	40.664281
	],
	[
	-73.816846,
	40.666421
	],
	[
	-73.83067,
	40.667228
	],
	[
	-73.845599,
	40.66993
	],
	[
	-73.855353,
	40.671233
	],
	[
	-73.867889,
	40.674077
	],
	[
	-73.87788,
	40.6725
	],
	[
	-73.881858,
	40.679636
	],
	[
	-73.883144,
	40.690856
	],
	[
	-73.898063,
	40.7024
	],
	[
	-73.90219,
	40.707943
	],
	[
	-73.89625,
	40.719609
	],
	[
	-73.887893,
	40.71676
	],
	[
	-73.888687,
	40.708088
	],
	[
	-73.881908,
	40.703122
	],
	[
	-73.867106,
	40.694033
	],
	[
	-73.869177,
	40.681418
	],
	[
	-73.853878,
	40.682252
	],
	[
	-73.847981,
	40.680222
	],
	[
	-73.830752,
	40.676911
	],
	[
	-73.813943,
	40.683702
	],
	[
	-73.804063,
	40.677146
	],
	[
	-73.795233,
	40.67601
	],
	[
	-73.782104,
	40.674792
	],
	[
	-73.774733,
	40.677501
	],
	[
	-73.766127,
	40.679069
	],
	[
	-73.75186,
	40.680354
	]
	]
	]
	}
	}
	],
	}

	var projection = d3.geoMercator().fitExtent([[0, 0], [100, 100]], geojson);;

	var geoGenerator = d3.geoPath()
	.projection(projection);

	// Join the FeatureCollection's features array to path elements
	var u = d3.select('#content g.map')
	.selectAll('path')
	.data(geojson.features);

	// Create path elements and update the d attribute using the geo generator
	u.enter()
	.append('path')
	.attr('d', geoGenerator)
	.style('fill', "#ff0000")
	/* todo: add styles */

	#content {
	border: 1px solid #CCC;
	width: 100px;
	height: 100px;
	}