Brushing at last (#939)

* initial reorganization

* basic brushing functionality

* dragging

* add some initial useless tests

* add last of examples, address some commentary, start flushing out tests

* make examples use seeded random, start writing docs

* get click to clear done, finish writing tests

* ensure that only allowed axes are returned on bruhs

* switch to boolean opt out props for selecting axes of operation

* trying to work out how parallel coordinates with brushing work

* finish parallel brush coords

* Finish respond to krebs commentary

* address commentary and address bug that was preventing dragging on pc

* lint

docs/highlight.md

@@ -0,0 +1,116 @@
+## Highlight
+
+The highlight component enables use interaction via direct manipulation of chart through dragging and brushing. This component is stateful and can maintain a notion of a dragged box. It can be applied either in two directions or in one!
+
+<!-- INJECT:"ZoomableChartExampleWithLink" -->
+
+It is quite easy to drop this functionality into an existing chart, for example:
+
+```jsx
+<XYPlot
+  width={300}
+  height={300}>
+  <VerticalGridLines />
+  <HorizontalGridLines />
+  <XAxis />
+  <YAxis />
+
+  <MarkSeries
+    className="mark-series-example"
+    strokeWidth={2}
+    opacity="0.8"
+    sizeRange={[5, 15]}
+    colorType="literal"
+    getColor={d => highlightPoint(d) ? '#EF5D28' : '#12939A'}
+    data={data}/>
+  <Highlight
+    drag
+    enableX={false}
+    onBrush={area => this.setState({filter: area})}
+    onDrag={area => this.setState({filter: area})}/>
+</XYPlot>
+```
+
+An important point to notice here is that direction responsiveness (the thing that makes calling on brush and on drag return meaningful values) is OPT OUT. VERY IMPORTANT! See examples for more details.
+
+
+<!-- INJECT:"DragableChartExampleWithLink" -->
+
+In drag mode (activated by including the prop drag) you are able to drag a selection box around in the chart space. When putting this shape you first execute a drag action to define the size of the box and then are able to move it around. See above and below for examples.
+
+<!-- INJECT:"BidirectionDragChartWithLink" -->
+
+When designing your listeners it is important to be mindful the lifecycle of this component as there are a lot of edge cases. To wit, if you NOT using drag mode then the life cycle will always be brushStart > brush > brushEnd. While if you are in drag mode it will be brushStart > brush > brushEnd when you are making the box and then dragStart > drag > dragEnd while dragging the box.
+
+The biggest gotchas revolve around click to clear type events. In order to implement this, make sure to include an on End listener to set update your state. In click events there isn't a middle state between start and end because your user does not move the mouse. Be aware! See the code for the examples for more details.
+
+It is important to note that brushing over non-continuous scales is not supported! Specifically this means that you can not brush over category or ordinal scales.
+
+
+
+## API Reference
+
+<!-- INJECT:"SelectionPlotExampleWithLink" -->
+
+
+### className (optional)
+Type: `String`
+Add css class to Voronoi container
+
+### drag (optional)
+Type: `Boolean`
+Enable dragging interactions
+
+### enableX (optional)
+Type: `Boolean`
+Defaults to `true`
+Enable brushing and dragging in the x direction
+
+### enableY (optional)
+Type: `Boolean`
+Defaults to `true`
+Enable brushing and dragging in the y direction
+
+### highlightX (optional)
+Type: `String or Number`
+Defaults to left edge
+Position in x coordinate space to place the left edge of the highlight bar.
+
+### highlightY (optional)
+Type: `String or Number`
+Defaults to top edge
+Position in y coordinate space to place the top edge of the highlight bar.
+
+### highlightHeight (optional)
+Type: `Number`
+Defaults to full height
+The height of highlight bar in pixels.
+
+### highlightWidth (optional)
+Type: `Number`
+Defaults to full width
+The width of highlight bar in pixels.
+
+### onBrushStart (optional)
+Type: `Function`
+Function called on the start of brushing.
+
+### onBrush (optional)
+Type: `Function`
+Function called on the start of brushing.
+
+### onBrushEnd (optional)
+Type: `Function`
+Function called on the start of brushing.
+
+### onDragStart (optional)
+Type: `Function`
+Function called on the start of dragging.
+
+### onDrag (optional)
+Type: `Function`
+Function called on the start of dragging.
+
+### onDragEnd (optional)
+Type: `Function`
+Function called on the start of dragging.

docs/interaction.md

@@ -10,6 +10,8 @@ These events can be implemented either at the XYPlot level or at the plot level:
     * The above series, and some others (area, line, polygon) support interaction at the series level. These series have handlers like onSeriesClick, onSeriesMouseOut, onSeriesMouseOver. Those handlers only pass the mouseevent that triggered them.
     * Finally, all series support onNearestX and onNearestXY. These two special handlers are triggered when the user moves their mouse on the plot area, and can access the datapoint of the nearest mark, in addition to the mouse event.
 
+* You can also interact with your plot through specialized components, such as the [highlight](highlight.md) for brushing and dragging or the [voronoi](voronoi.md) for mouse overs.
+
 ### What handlers are implemented by series type
 
 | Series                                | Proximity handlers (onNearestX, onNearestY) | series level handlers (onSeriesClick, onSeriesRightClick, onSeriesMouseOver, onSeriesMouseOut) | mark-level handlers (onValueClick, onValueRightClick, onValueMouseOver, onValueMouseOut) |
@@ -37,7 +39,6 @@ In all cases, onNearestX and onNearestXY can be implemented at the series level,
 
 ### Note
 - the contour series doesn't support interaction other than onNearestX or onNearestXY
-- react-vis doesn't yet support interactions such as dragging, zooming or scrolling.
 - whenever the datapoint-level handlers are supported, they can also catch all the events happening at the series level.
 
 ## API

docs/parallel-coordinates.md

@@ -32,6 +32,9 @@ const PARALLEL_COORDINATES_PROPS = {
 
 In such a case, there would be ONE polygon rendered for four variables (nice/explosions/wow/sickMoves), because those values are listed in the domains prop.
 
+The ParallelCoordinates also features a stateful brushing mode in which your user can brush and drag on the the chart to selected and unselected lines. See the [highlight](highlight.md) component for more details.
+
+<!-- INJECT:"BrushedParallelCoordinatesWithLink" -->
 
 ## API Reference
 #### data
@@ -90,6 +93,11 @@ Type: `Object`
 Default: `{left: 40, right: 10, top: 10, bottom: 40}`
 Margin around the chart.
 
+#### brushing
+Type: `Boolean`
+Default: false
+Enable stateful brushing on parallel coordinates
+
 ### style (optional)
 Type: `object`
 An object that contains CSS properties with which the axis component can be entirely re-styled.
@@ -108,10 +116,15 @@ Most generally, there are three top level components `axes`, `labels`, and `line
   },
   line: {
     strokeOpacity: 1
+  },
+  deselectedLineStyle: {
+    strokeOpacity: 0.1
   }
 }}/>
 ```
 
+If you are using the stateful brushing mode and have filtered out a line then, in addition to the previous styles that were applied to a particular line, deselectedLineStyle will also be applied.
+
 #### animation (optional)
 Type: `boolean|Object`
 Please refer to [Animation](animation.md) doc for more information.

showcase/axes/parallel-coordinates-example.js

@@ -21,7 +21,7 @@
 import React from 'react';
 import {scaleLinear} from 'd3-scale';
 
-import CarData from './car-data.json';
+import CarData from '../datasets/car-data.json';
 
 import {
   XYPlot,