examples/adjustments for scatter plot

BUILD.md

@@ -885,17 +885,19 @@ Here's what a circle should look like when you hover over it:
 
 ## Drag an element
 
-We want to be able to update the data for a run by dragging the associated circle
+We want to be able to update the data for a run by dragging the associated circle.  To do this, we'll use a "behavior," which you can think of as a combination of multiple event handlers.  For a drag behavior, there are three callbacks:
 
-- D3 allows us to create complex interactions called "behaviors" which have multiple callbacks
-- there are two steps:
-    - create the behavior
-    - attach the behavior to one or more elements
-- drag behaviors have three callbacks
 - when the user starts to drag
 - each time the user moves the cursor before releasing the "mouse" button
 - when the user releases the "mouse" button
 
+There are two steps whenever we create a behavior:
+
+- create the behavior
+- attach the behavior to one or more elements
+
+Put the following code at the bottom of the `render()` function declaration:
+
 ```javascript
 //put this code at the end of the render function
 var drag = function(datum){
@@ -915,6 +917,32 @@ You can now drag the circles around, but the data doesn't update:
 
 ![](https://i.imgur.com/4pLzqt7.png)
 
+Let's examine how this code works:
+
+```javascript
+var drag = function(datum){
+    var x = d3.event.x; //get current x position of the cursor
+    var y = d3.event.y; //get current y position of the cursor
+    d3.select(this).attr('cx', x); //change the dragged element's cx attribute to whatever the x position of the cursor is
+    d3.select(this).attr('cy', y); //change the dragged element's cy attribute to whatever the y position of the cursor is
+}
+```
+
+This `drag` function will be used as a callback anytime the user moves the cursor before releasing the "mouse" button.  It gets the x and y coordinates of the mouse and sets the `cx` and `cy` values of the element being dragged (`d3.select(this)`) to those coordinates.
+
+Next we generate a drag behavior that will, at the appropriate time, call the `drag` function that was just explained:
+
+```javascript
+var dragBehavior = d3.drag()
+    .on('drag', drag);
+```
+
+Lastly, we attach that behavior to all `<circle>` elements:
+
+```javascript
+d3.selectAll('circle').call(dragBehavior);
+```
+
 ## Update data after a drag
 
 - Uncomment the `.on('end', dragEnd)` code

examples/scatter_plot/app.js

@@ -67,6 +67,18 @@ var render = function(){
         render(); //re-render dots
         createTable(); //re-render table
     });
+    //put this code at the end of the render function
+    var drag = function(datum){
+        var x = d3.event.x; //get current x position of the cursor
+        var y = d3.event.y; //get current y position of the cursor
+        d3.select(this).attr('cx', x); //change the dragged element's cx attribute to whatever the x position of the cursor is
+        d3.select(this).attr('cy', y); //change the dragged element's cy attribute to whatever the y position of the cursor is
+    }
+    var dragBehavior = d3.drag() //create a drag behavior
+        // .on('start', dragStart) //dragStart is a reference to a function we haven't created yet
+        .on('drag', drag); //call the "drag" function (the 2nd param) each time the user moves the cursor before releasing the mouse button.  The "drag" function is defined above
+        // .on('end', dragEnd) //dragEnd is a reference to a function we haven't created yet
+    d3.selectAll('circle').call(dragBehavior); //attach the dragBehavior behavior to all <circle> elements    
 }
 render();