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

---
 BUILD.md                     | 34 +++++++++++++++++++++-------------
 examples/scatter_plot/app.js |  7 +++++++
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/BUILD.md b/BUILD.md
index 670c271..c52ff1f 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -991,24 +991,32 @@ When you drag a circle, it should turn red
 
 ## Create a zoom behavior that scales elements
 
-- Another behavior we can create is the zooming/panning ability.  To do this you can do any of the following:
-    - zoom:
-        - two finger drag on a trackpad
-        - rotate your mouse wheel
-        - pinch/spread on a trackpad
-    - pan:
-        - click/drag the svg element
+Another behavior we can create is the zooming/panning ability.  Once this functionality is complete you will be able to zoom in and out on different parts of the graph by doing one of the following:
+
+- two finger drag on a trackpad
+- rotate your mouse wheel
+- pinch/spread on a trackpad
+
+You will also be able to pan left/right/up/down on the graph by clicking and dragging on the SVG element
+
+Put the following code at the bottom of `app.js`:
 
 ```javascript
-//put this at the end of app.js
-var zoomCallback = function(){ //the callback function
-	d3.select('#points').attr("transform", d3.event.transform); //transform the #points <g> element based on the zoom transform created
+var zoomCallback = function(){
+	d3.select('#points').attr("transform", d3.event.transform);
 }
-var zoom = d3.zoom() //create the zoom behavior
-    .on('zoom', zoomCallback); //tell it which callback function to use when zooming
-d3.select('svg').call(zoom); //attach the behavior to the svg element
 ```
 
+This is the callback function that will be called when user attempts to zoom/pan.  All it does is take the zoom/pan action and turn it into a `transform` attribute that gets applied to the `<g id="points"></g>` element that contains the circles.  Now add the following code at the bottom of `app.js` to create the `zoom` behavior and attach it to the `svg` element:
+
+```javascript
+var zoom = d3.zoom()
+    .on('zoom', zoomCallback);
+d3.select('svg').call(zoom);
+```
+
+Now if we zoom out, the graph should look something like this:
+
 ![](https://i.imgur.com/Qvnu7yZ.png)
 
 ## Update axes when zooming/panning
diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js
index 2521709..9f7c27a 100644
--- a/examples/scatter_plot/app.js
+++ b/examples/scatter_plot/app.js
@@ -130,3 +130,10 @@ d3.select('svg').on('click', function(){
     createTable(); //render the table
     render(); //add this line
 });
+
+var zoomCallback = function(){
+	d3.select('#points').attr("transform", d3.event.transform);
+}
+var zoom = d3.zoom()
+    .on('zoom', zoomCallback);
+d3.select('svg').call(zoom);