Add iris dashboard (uber#976)

docs/examples/iris-dashboard.md

@@ -0,0 +1,10 @@
+<!-- STYLETYPE:"example-page" -->
+<!-- INJECT:"IrisDashboard" -->
+
+Click and drag on the charts!
+
+The iris data set is a well beloved data set for getting to know various technical topics.
+Here we use it to show how to make a small multiples dashboard with react vis.
+You can find out more about it at it's [wikipedia page](https://en.wikipedia.org/wiki/Iris_flower_data_set)
+
+[Source code](https://github.com/uber/react-vis/blob/master/showcase/examples/iris-dashboard/iris-dashboard.js)

showcase/examples/iris-dashboard/iris-dashboard.js

@@ -0,0 +1,125 @@
+// Copyright (c) 2016 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import {
+  XAxis,
+  YAxis,
+  XYPlot,
+  MarkSeriesCanvas,
+  Borders,
+  Highlight
+} from 'index';
+
+import Iris from '../../datasets/iris.json';
+
+import './iris-dashboard.scss';
+const AXES = [
+  'sepal length',
+  'sepal width',
+  'petal length',
+  'petal width'
+];
+
+const SPECIES = ['setosa', 'versicolor', 'virginica'];
+
+const SIZE = 200;
+
+export default class IrisDashboard extends React.Component {
+  state = {
+    filters: AXES.reduce((acc, axis) => {
+      acc[axis] = {min: null, max: null};
+      return acc;
+    }, {})
+  }
+
+  render() {
+    const {filters} = this.state;
+
+    const data = Iris.map(d => {
+      const unselected = AXES.some(key => {
+        const filter = filters[key];
+        return (filter.min !== filter.max) && (filter.min > d[key] || filter.max < d[key]);
+      });
+      return {...d, selected: !unselected};
+    });
+    return (
+      <div className="iris-dasboard-example">
+        <div className="chart-container">
+          {AXES.map(yAxis => {
+            return (
+              <div key={yAxis} className="chart-row">
+                {AXES.map(xAxis => {
+                  if (xAxis === yAxis) {
+                    return (
+                      <div
+                        key={`${xAxis}-${yAxis}`}
+                        className="axis-label"
+                        style={{height: SIZE, width: SIZE}}>
+                        <h3>{xAxis}</h3>
+                      </div>
+                    );
+                  }
+                  const updateFilter = area => {
+                    if (!area) {
+                      filters[xAxis] = {min: null, max: null};
+                      filters[yAxis] = {min: null, max: null};
+                      this.setState({filters});
+                    } else {
+                      const {left, right, top, bottom} = area;
+                      filters[xAxis] = {min: left, max: right};
+                      filters[yAxis] = {min: bottom, max: top};
+                    }
+                    this.setState({filters});
+                  };
+                  return (
+                    <XYPlot height={SIZE} width={SIZE} key={`${xAxis}-${yAxis}`}>
+                      <MarkSeriesCanvas
+                        data={data.map(d => ({
+                          x: Number(d[xAxis]),
+                          y: Number(d[yAxis]),
+                          color: d.species,
+                          selected: d.selected
+                        }))}
+                        colorType="category"
+                        colorDomain={SPECIES}
+                        colorRange={['#19CDD7', 'red', '#88572C']}
+                        getOpacity={d => d.selected ? 1 : 0.1}
+                        size={2}
+                        />
+                      <Borders style={{all: {fill: '#fff'}}} />
+                      <XAxis title={xAxis}/>
+                      <YAxis title={yAxis}/>
+                      <Highlight
+                        drag
+                        onBrush={updateFilter}
+                        onDrag={updateFilter}
+                        onBrushEnd={updateFilter} />
+                    </XYPlot>
+                  )
+                })}
+              </div>
+            )
+            })}
+        </div>
+      </div>
+    );
+  }
+}

showcase/examples/iris-dashboard/iris-dashboard.scss

@@ -0,0 +1,20 @@
+.iris-dasboard-example {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .chart-row {
+    display: flex;
+  }
+
+  .rv-xy-plot__axis__title text {
+    font-size: 8px;
+  }
+
+  .axis-label {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+}

showcase/showcase-app.js

@@ -17,6 +17,7 @@ import {
   ForceDirectedGraph,
   ResponsiveVis,
   StreamgraphExample,
+  IrisDashboard,
   HistoryExample
 } from './showcase-index';
 
@@ -90,6 +91,12 @@ const sectionNames = [
     name: 'Streamgraph',
     showcase: StreamgraphExample
   },
+  {
+    showByDefault: false,
+    link: 'irisdashboard',
+    name: 'IrisDashboard',
+    showcase: IrisDashboard
+  },
   {
     showByDefault: false,
     link: 'responsive',

showcase/showcase-index.js

@@ -14,3 +14,4 @@ export ForceDirectedGraph from './examples/force-directed-graph/force-directed-e
 export ResponsiveVis from './examples/responsive-vis/responsive-vis-example';
 export StreamgraphExample from './examples/streamgraph/streamgraph-example';
 export HistoryExample from './examples/history/history-example';
+export IrisDashboard from './examples/iris-dashboard/iris-dashboard';

website/src/mdRoutes.js

@@ -7,6 +7,7 @@ import otherThings from "../../docs/examples/building-things-other-than-charts.m
 import extensibility from "../../docs/examples/extensibility.md";
 import gitHistory from "../../docs/examples/history-example.md";
 import responsiveVis from "../../docs/examples/responsive-vis.md";
+import irisDashboard from '../../docs/examples/iris-dashboard.md';
 import streamGraph from "../../docs/examples/stream-graph.md";
 
 import axesShowcase from "../../docs/examples/showcases/axes-showcase.md";
@@ -120,6 +121,10 @@ const mdRoutes = [
             name: 'Streamgraph',
             markdown: streamGraph
           },
+          {
+            name: 'Dynamic Dashboard',
+            markdown: irisDashboard
+          },
           {
             name: 'Responsive Vis',
             markdown: responsiveVis