comments

app.js

@@ -16,51 +16,59 @@ d3.select('svg').selectAll('path')
 	.attr('fill', '#099')
 	.attr('d', dAttributeFunction);
 
-const dragBehavior = d3.drag()
+const dragBehavior = d3.drag() //set up the behavior
-	.on('start', (event) => {
+	.on('start', (event) => { //create the start handler
-		d3.select('table tr:nth-child(2) td:first-child')
+		d3.select('table tr:nth-child(2) td:first-child') //select the top left cell of the table. The table header is tr:nth-child(1)
+			//use worldProject to convert the x/y pixel coordinates of the mouse click into lat/lng map coordinates
+			//this takes as params [x,y] and returns [lat,lng]
+			//insert the first element of the map coords array (lat) into the html of the table cell
 			.html(worldProjection.invert([event.x, event.y])[0]) 
-		d3.select('table tr:nth-child(2) td:last-child')
+		d3.select('table tr:nth-child(2) td:last-child') //select the top right cell of the table
+			//insert the second element of the map coords array (lng) into the html of the table cell
 			.html(worldProjection.invert([event.x, event.y])[1])
 
-		d3.selectAll('rect').remove();
+		d3.selectAll('rect').remove(); //remove any previously drawn rectangles
-		d3.select('svg').append('rect')
+		d3.select('svg').append('rect') //draw a rectangle of 0 height/width at the point where the drag started
 			.attr('x', event.x)
 			.attr('y', event.y);
 	})
-	.on('drag', (event) => {
+	.on('drag', (event) => { //create the drag handler
-		d3.select('table tr:nth-child(3) td:first-child')
+		d3.select('table tr:nth-child(3) td:first-child') //select the bottom left cell of the table
+			//insert the first element of the map coords array (lat) into the html of the table cell
 			.html(worldProjection.invert([event.x, event.y])[0])
-		d3.select('table tr:nth-child(3) td:last-child')
+		d3.select('table tr:nth-child(3) td:last-child') //select the bottom right cell of the table
+			//insert the second element of the map coords array (lng) into the html of the table cell
 			.html(worldProjection.invert([event.x, event.y])[1])
 
+		//computer width of the box based on current x value and current rect's x value
 		d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
+		//computer height of the box based on current y value and current rect's y value
 		d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
 	})
 
-d3.select('svg').call(dragBehavior);
+d3.select('svg').call(dragBehavior); //atach dragBehavior to the svg
 
-d3.select('form').on('submit', (event) => {
+d3.select('form').on('submit', (event) => { //set up a submit handler on the form
-	event.preventDefault();
+	event.preventDefault(); // stop the form from submitting
 
-	d3.selectAll('rect').remove();
+	d3.selectAll('rect').remove(); //remove any previously drawn rectangles
 
-	const lat1 = d3.select('input:first-child').property('value');
+	const lat1 = d3.select('input:first-child').property('value'); //get first latitude input
-	const lng1 = d3.select('input:nth-child(2)').property('value');
+	const lng1 = d3.select('input:nth-child(2)').property('value'); //get first longitude input
-	const location1 = worldProjection([lat1, lng1]);
+	const location1 = worldProjection([lat1, lng1]); //convert these into pixel coordinates
-	const x1 = location1[0];
+	const x1 = location1[0]; //reassign for ease of reading
 	const y1 = location1[1];
 
-	const lat2 = d3.select('input:nth-child(4)').property('value');
+	const lat2 = d3.select('input:nth-child(4)').property('value'); //get second latitude input (the <br/> is :nth-child(3)
-	const lng2 = d3.select('input:nth-child(5)').property('value');
+	const lng2 = d3.select('input:nth-child(5)').property('value'); //get second longitude input
-	const location2 = worldProjection([lat2, lng2]);
+	const location2 = worldProjection([lat2, lng2]); //convert these into pixel coordinates
-	const x2 = location2[0];
+	const x2 = location2[0]; //reassign for eas of reading
 	const y2 = location2[1];
 
-	d3.select('svg').append('rect')
+	d3.select('svg').append('rect') // append a rectangle to the svg
-		.attr('fill', '#000')
+		.attr('fill', '#000') //make it black
-		.attr('x', x1)
+		.attr('x', x1) //assign top left x location
-		.attr('y', y1)
+		.attr('y', y1) //assign top left y location
-		.attr('width', x2-x1)
+		.attr('width', x2-x1) //compute width from bottom right x coordinate
-		.attr('height', y2-y1) 
+		.attr('height', y2-y1) //compute height from bottom right y coordinate
 });