commenting mapping code

7 years ago · b5f827465a
parent 8d5aaf203e
commit b5f827465a
2 changed files with 10 additions and 7 deletions
--- a/examples/mapping/app.js
+++ b/examples/mapping/app.js
@ -1,19 +1,21 @@
 var width = 960;
 var height = 490;

+//set the height/width of the svg
 d3.select('svg')
    .attr('width', width)
    .attr('height', height);

+//choose a project that works with our data
 var worldProjection = d3.geoEquirectangular();

-d3.select('svg').selectAll('path')
-    .data(map_json.features)
-    .enter()
-    .append('path')
-    .attr('fill', '#099');
+d3.select('svg').selectAll('path') //select all path elements within the svg, even if none exist
+    .data(map_json.features) //link the features array of our data to that selection
+    .enter() //find the data elements not associated with paths
+    .append('path') //append a path for each unmatch data element
+    .attr('fill', '#099'); //set the fill for all paths

-var dAttributeFunction = d3.geoPath()
+var dAttributeFunction = d3.geoPath() //create a path drawing function that will use our worldProjection
    .projection(worldProjection);

-d3.selectAll('path').attr('d', dAttributeFunction);
+d3.selectAll('path').attr('d', dAttributeFunction); //use that function to modify the d attribute of all path elements
--- a/examples/mapping/index.html
+++ b/examples/mapping/index.html
@ -4,6 +4,7 @@
    <meta charset="utf-8">
    <title></title>
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+    <!--  this loads the data of the various country boundires -->
    <script src="https://cdn.rawgit.com/mahuntington/mapping-demo/master/map_data3.js" charset="utf-8"></script>
 </head>
 <body>