From 99bd6035d16fcf396b2d16fd8e4aa3806186a81b Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Sun, 19 Aug 2018 18:01:47 -0400
Subject: [PATCH] examples/adjustments for scatter plot

---
 BUILD.md                         | 28 ++++++++++++++++------------
 examples/scatter_plot/app.css    |  2 +-
 examples/scatter_plot/app.js     | 10 +++++-----
 examples/scatter_plot/index.html |  6 ++++--
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/BUILD.md b/BUILD.md
index b32c8c2..df8c1c4 100644
--- a/BUILD.md
+++ b/BUILD.md
@@ -1236,11 +1236,11 @@ Now clicking on the middle circle should work correctly.
 
 ## Hide elements beyond axis
 
-Check out our graph when you pan:
+If you pan or zoom extensively, you'll notice that the circles are visible beyond the bounds of the axes:
 
 ![](https://i.imgur.com/s2oXYxS.png)
 
-To remove elements once they get beyond an axis, we can just add an outer SVG:
+To hide elements once they get beyond an axis, we can just add an outer SVG with `id="container"` around our current `<svg>` element in `index.html`:
 
 ```html
 <svg id="container">
@@ -1250,15 +1250,16 @@ To remove elements once they get beyond an axis, we can just add an outer SVG:
 </svg>
 ```
 
-Now replace all `d3.select('svg')` with `d3.select('#container')`
+Now replace all `d3.select('svg')` code with `d3.select('#container')`.  You can do a find replace.  There should be five instances to change:
 
 ```javascript
 d3.select('#container')
     .style('width', WIDTH)
     .style('height', HEIGHT);
 //
-// ...
+// lots of code omitted here, including render() declaration...
 //
+var bottomAxis = d3.axisBottom(xScale);
 d3.select('#container')
 	.append('g')
     .attr('id', 'x-axis')
@@ -1271,29 +1272,32 @@ d3.select('#container')
     .attr('id', 'y-axis')
 	.call(leftAxis);
 //
-// ...
+// code for create table omitted here...
 //
 d3.select('#container').on('click', function(){
 //
-// ...
+// click handler functionality omitted
 //
 });
 //
-// ...
+// zoomCallback code omitted here
 //
+var zoom = d3.zoom()
+    .on('zoom', zoomCallback);
 d3.select('#container').call(zoom);    
 ```
 
-And lastly, adjust css:
+And lastly, adjust css to replace `svg {` with `#container {`:
 
 ```css
-/* replace the rule for svg */
 #container {
-     overflow: visible;
-     margin-bottom: 50px;
- }
+    overflow: visible;
+    margin-bottom: 50px;
+}
 ```
 
+Now circles should be hidden once they move beyond the bounds of the inner `<svg>` element:
+
 ![](https://i.imgur.com/t6BKuiz.png)
 
 
diff --git a/examples/scatter_plot/app.css b/examples/scatter_plot/app.css
index 12a515b..09e7f03 100644
--- a/examples/scatter_plot/app.css
+++ b/examples/scatter_plot/app.css
@@ -3,7 +3,7 @@ circle {
     fill: black;
     transition: r 0.5s linear, fill 0.5s linear;
 }
-svg {
+#container {
     overflow: visible;
     margin-bottom: 50px;
 }
diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js
index 5324377..dd332c1 100644
--- a/examples/scatter_plot/app.js
+++ b/examples/scatter_plot/app.js
@@ -20,7 +20,7 @@ var runs = [
 ];
 
 
-d3.select('svg')
+d3.select('#container')
     .style('width', WIDTH)
     .style('height', HEIGHT);
 
@@ -93,14 +93,14 @@ var render = function(){
 render();
 
 var bottomAxis = d3.axisBottom(xScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
     .attr('id', 'x-axis') //add an id
 	.call(bottomAxis)
     .attr('transform', 'translate(0,'+HEIGHT+')');
 
 var leftAxis = d3.axisLeft(yScale);
-d3.select('svg')
+d3.select('#container')
 	.append('g')
     .attr('id', 'y-axis') //add an id
 	.call(leftAxis);
@@ -117,7 +117,7 @@ var createTable = function(){
 
 createTable();
 
-d3.select('svg').on('click', function(){
+d3.select('#container').on('click', function(){
     var x = lastTransform.invertX(d3.event.offsetX);
     var y = lastTransform.invertY(d3.event.offsetY);
 
@@ -146,4 +146,4 @@ var zoomCallback = function(){
 
 var zoom = d3.zoom()
     .on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+d3.select('#container').call(zoom);
diff --git a/examples/scatter_plot/index.html b/examples/scatter_plot/index.html
index 7197fb4..42f3849 100644
--- a/examples/scatter_plot/index.html
+++ b/examples/scatter_plot/index.html
@@ -6,8 +6,10 @@
         <link rel="stylesheet" href="app.css">
     </head>
     <body>
-        <svg>
-            <g id="points"></g>
+        <svg id="container">
+            <svg>
+                <g id="points"></g>
+            </svg>
         </svg>
         <table>
             <thead>