Improve code formatting, update diagram, generalize terminology to "interaction tests"

Author: GlennMatthys

Diff for: CONTRIBUTING.md

@@ -177,31 +177,26 @@ which shows the baseline image, the generated image, the diff and the json mocks
 
 To view the results of a run on CircleCI, download the `build/test_images/` and `build/test_images_diff/` artifacts into your local repo and then run `npm run start-image_viewer`.
 
-### Writing selection tests
-Keep in mind that the selection coordinates are relative to the top-left corner of the plot, including the margins. To produce a reliable selection test, 
+### Writing interaction tests
+Keep in mind that the interaction coordinates are relative to the top-left corner of the plot, including the margins. To produce a reliable interaction test, 
 it may be necessary to to fix the width, height, margins, X axis range and Y axis range of the plot. For example:
 
 ```
-Plotly.newPlot(gd,
-    [
-        {
+Plotly.newPlot(gd, [{
             x: [1, 1, 1, 2, 2, 2, 3, 3, 3],
             y: [1, 2, 3, 1, 2, 3, 1, 2, 3],
             mode: 'markers'
-        }
-    ],
-    {
-        width: 400, height: 400,
-        margin: {l: 100, r: 100, t: 100, b: 100},
-        xaxis: {range: [0, 4]},
-        yaxis: {range: [0, 4]}
-     }
-)
+        }], {
+            width: 400, height: 400,
+            margin: {l: 100, r: 100, t: 100, b: 100},
+            xaxis: {range: [0, 4]},
+            yaxis: {range: [0, 4]}
+     });
 ```
 
-This will produce the following plot, and you want to simulate a selection path of (175, 175) to (225, 225):
+This will produce the following plot, and say you want to simulate a selection path of (175, 175) to (225, 225):
 
-<img src="https://user-images.githubusercontent.com/31989842/38889542-5303cf9c-427f-11e8-93a2-16ce2e29f521.png">
+<img src="https://user-images.githubusercontent.com/31989842/38890553-0bc6190c-4282-11e8-8efc-077bf05ca565.png">
 
 
 ## Repo organization