print coordinates to page from drag action

app.js

@@ -22,9 +22,25 @@ d3.selectAll('svg').on('click', function(datum){
 	console.log(worldProjection.invert(d3.mouse(this)));
 });
 
+var dragBehavior = d3.drag() //create a drag behavior
+	.on('start', function(){
+		d3.select('table tr:nth-child(2) td:first-child')
+			.html(worldProjection.invert(d3.mouse(this))[0])
+		d3.select('table tr:nth-child(2) td:last-child')
+			.html(worldProjection.invert(d3.mouse(this))[1])
+	})
+	.on('drag', function(){
+		d3.select('table tr:nth-child(3) td:first-child')
+			.html(worldProjection.invert(d3.mouse(this))[0])
+		d3.select('table tr:nth-child(3) td:last-child')
+			.html(worldProjection.invert(d3.mouse(this))[1])
+	})
+
+d3.select('svg').call(dragBehavior);
+
 d3.select('form').on('submit', function(){
 	d3.event.preventDefault();
-	
+
 	const lat1 = d3.select('input:first-child').node().value
 	const lng1 = d3.select('input:nth-child(2)').node().value
 	const location1 = worldProjection([lat1, lng1]);

index.html

@@ -20,6 +20,20 @@
 
 		<input type="submit"/>
 	</form>
+	<table border="1">
+		<tr>
+			<th>lat</th>
+			<th>lng</th>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+	</table>
     <script src="app.js" charset="utf-8"></script>
 </body>
 </html>