comments for zooming

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 {

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

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">