From 9972ccdd4660c26110fa5e23f5a6c22425278081 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Sun, 19 Aug 2018 14:42:52 -0400
Subject: [PATCH] examples/adjustments for scatter plot

---
 BUILD.md                     | 46 ++++++++++++++++++++++++++++++++----
 examples/scatter_plot/app.js | 15 ++++++++----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/BUILD.md b/BUILD.md
index c52ff1f..b18d343 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -1021,7 +1021,22 @@ Now if we zoom out, the graph should look something like this:
 
 ## Update axes when zooming/panning
 
-Now when we zoom, the points move in/out.  When we pan, they move vertically/horizontally.  Unfortunately, the axes don't update accordingly.  Let's first add ids to the `<g>` elements that contain them
+Now when we zoom, the points move in/out.  When we pan, they move vertically/horizontally.  Unfortunately, the axes don't update accordingly.  Let's first add ids to the `<g>` elements that contain them.  Find the following code:
+
+```javascript
+var bottomAxis = d3.axisBottom(xScale);
+d3.select('svg')
+	.append('g')
+	.call(bottomAxis)
+    .attr('transform', 'translate(0,'+HEIGHT+')');
+
+var leftAxis = d3.axisLeft(yScale);
+d3.select('svg')
+	.append('g')
+	.call(leftAxis);
+```
+
+Add `.attr('id', 'x-axis')` after the first `.append('g')` and `.attr('id', 'y-axis')` after the second `.append('g')`:
 
 ```javascript
 d3.select('svg')
@@ -1037,19 +1052,42 @@ d3.select('svg')
 	.call(leftAxis);
 ```
 
-Now let's use those ids when we zoom:
+Now let's use those ids to adjust the axes when we zoom.  Find this code:
 
 ```javascript
 var zoomCallback = function(){
 	d3.select('#points').attr("transform", d3.event.transform);
-    d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(xScale))); //tell the bottom axis to adjust its values based on how much we zoomed
-	d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale))); //tell the left axis to adjust its values based on how much we zoomed
 }
 ```
 
+Add the following at the end of it:
+
+```javascript
+d3.select('#x-axis')
+    .call(bottomAxis.scale(d3.event.transform.rescaleX(xScale)));
+d3.select('#y-axis')
+    .call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
+```
+
+Your zoomCallback should now look like this:
+
+```javascript
+var zoomCallback = function(){
+	d3.select('#points').attr("transform", d3.event.transform);
+    d3.select('#x-axis')
+        .call(bottomAxis.scale(d3.event.transform.rescaleX(xScale)));
+    d3.select('#y-axis')
+        .call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
+}
+```
+
+Two things to note about the code above:
+
 - `bottomAxis.scale()` tells the axis to redraw itself
 - `d3.event.transform.rescaleX(xScale)` returns a value indicating how the bottom axis should rescale
 
+Now when you zoom out, the axes should redraw themselves:
+
 ![](https://i.imgur.com/AI3KoG9.png)
 
 ## Update click points after a transform
diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js
index 9f7c27a..07c5480 100644
--- a/examples/scatter_plot/app.js
+++ b/examples/scatter_plot/app.js
@@ -91,16 +91,18 @@ var render = function(){
 }
 render();
 
-var bottomAxis = d3.axisBottom(xScale); //pass the appropriate scale in as a parameter
+var bottomAxis = d3.axisBottom(xScale);
 d3.select('svg')
-	.append('g') //put everything inside a group
-	.call(bottomAxis) //generate the axis within the group
+	.append('g')
+    .attr('id', 'x-axis') //add an id
+	.call(bottomAxis)
     .attr('transform', 'translate(0,'+HEIGHT+')');
 
 var leftAxis = d3.axisLeft(yScale);
 d3.select('svg')
 	.append('g')
-	.call(leftAxis); //no need to transform, since it's placed correctly initially
+    .attr('id', 'y-axis') //add an id
+	.call(leftAxis);
 
 var createTable = function(){
     d3.select('tbody').html(''); //clear out all rows from the table
@@ -133,7 +135,12 @@ d3.select('svg').on('click', function(){
 
 var zoomCallback = function(){
 	d3.select('#points').attr("transform", d3.event.transform);
+    d3.select('#x-axis')
+        .call(bottomAxis.scale(d3.event.transform.rescaleX(xScale)));
+    d3.select('#y-axis')
+        .call(leftAxis.scale(d3.event.transform.rescaleY(yScale)));
 }
+
 var zoom = d3.zoom()
     .on('zoom', zoomCallback);
 d3.select('svg').call(zoom);