From dd865c7695befdb34ffcb2fa349196832c43fdbc Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Tue, 23 Aug 2016 23:36:22 -0400
Subject: [PATCH] comments for zooming

---
 public/css/app.css |  2 +-
 public/js/app.js   | 16 +++++++++-------
 views/index.ejs    |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 5ec376d..9cf429e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -2,7 +2,7 @@ svg {
 	margin:40px; /* give it some margin to show off the axes */
 	overflow:visible; /* axes will extend beyond the svg cropping area.  Show them anyway */
 }
-#container {
+#container { /* crop circles within axes */
 	overflow: hidden;
 }
 svg circle {
diff --git a/public/js/app.js b/public/js/app.js
index af5876d..ce0e57f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -128,15 +128,17 @@ var attachDragHandlers = function(){
 };
 
 //create axes
-var xAxis = d3.axisBottom(xScale);
-var yAxis = d3.axisLeft(yScale);
-d3.select('svg').append('g').attr('id', 'x-axis').attr('transform', 'translate(0,' + HEIGHT + ')').call(xAxis); //x axes must be moved to bottom of svg
-d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good as it is
+var xAxis = d3.axisBottom(xScale); //create axis, not yet applied
+var yAxis = d3.axisLeft(yScale); //create axis, not yet applied
+d3.select('svg').append('g').attr('id', 'x-axis').attr('transform', 'translate(0,' + HEIGHT + ')').call(xAxis); //apply xAxis, also, x axis must be moved to bottom of svg
+d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good as it is, apply it
 
+//callback for zooming
 var zoomCallback = function(){
-	d3.select('#points').attr("transform", d3.event.transform);
+	d3.select('#points').attr("transform", d3.event.transform); //apply transform to g element containing circles
+	//recalculate the axes
 	d3.select('#x-axis').call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
 	d3.select('#y-axis').call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
 }
-var zoom = d3.zoom().on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+var zoom = d3.zoom().on('zoom', zoomCallback); //create zoom behavior
+d3.select('svg').call(zoom); //apply zoom behavior to svg
diff --git a/views/index.ejs b/views/index.ejs
index 0f5a99d..2f0a515 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -14,8 +14,8 @@
 		<% if(currentUser) { %>
 			<!-- show app if user is logged in -->
 			<svg>
-				<svg id="container">
-					<g id="points"></g>
+				<svg id="container"><!-- crops circles within axes -->
+					<g id="points"></g><!-- used for zooming -->
 				</svg>
 			</svg>
 			<form action="/logins?_method=DELETE" method="POST">