From d6bc19172c48e034d9beee77c68e99725507167c Mon Sep 17 00:00:00 2001
From: Sebastian Haas <sehaas@deebas.com>
Date: Wed, 1 Nov 2017 23:11:23 +0100
Subject: [PATCH] Scatterplot: use dotRadius for 3rd data type

Map the 3rd data value to a dot size between minRadius and dotRadius

Signed-off-by: Sebastian Haas <sehaas@deebas.com>
---
 examples/scatterplot-chart/App.js         | 16 ++++++++++++----
 modules/scatterplot-chart/hybrid/index.js | 22 +++++++++++-----------
 modules/scatterplot-chart/static/index.js | 19 +++++++++----------
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/examples/scatterplot-chart/App.js b/examples/scatterplot-chart/App.js
index 7bfe4ad..8e23e36 100644
--- a/examples/scatterplot-chart/App.js
+++ b/examples/scatterplot-chart/App.js
@@ -296,7 +296,8 @@ export default class ScatterplotContainer extends PureComponent {
       data.push({
         type: key,
         x: this.getRandomArbitrary(1, 1000),
-        y: this.getRandomArbitrary(1, 1000)
+        y: this.getRandomArbitrary(1, 1000),
+        z: this.getRandomArbitrary(1, 10)
       });
     });
     return data;
@@ -689,8 +690,8 @@ export default class ScatterplotContainer extends PureComponent {
             <h2>Dot radius</h2>
 
             <p>
-              The default size of the dot can be changed via the
-              <strong>dotRadius</strong> parameter.
+              The default size of the dot can be changed via
+              the <strong>dotRadius</strong> parameter.
             </p>
 
             <pre>
@@ -1134,7 +1135,8 @@ export default class ScatterplotContainer extends PureComponent {
 
             <p>
               Its also possible to pass in a third variable (z). This variable is a number and is
-              used to scale the radius of the dot.
+              used to scale the radius of the dot. The radius can be controlled with
+              the <strong>dotRadius</strong> and <strong>minRadius</strong> parameters.
             </p>
 
             <pre>
@@ -1205,6 +1207,8 @@ export default class ScatterplotContainer extends PureComponent {
 
   <ScatterplotChart
     data={bigDataZ}
+    dotRadius={20}
+    minRadius={5}
     axes
     axisLabels={{x: 'My x Axis', y: 'My y Axis'}}
     width={480}
@@ -1222,6 +1226,8 @@ export default class ScatterplotContainer extends PureComponent {
 
             <ScatterplotChart
               data={bigDataZ}
+              dotRadius={20}
+              minRadius={5}
               axes
               axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
               width={480}
@@ -1255,6 +1261,8 @@ export default class ScatterplotContainer extends PureComponent {
               data={this.data}
               grid
               axes
+              dotRadius={10}
+              minRadius={1}
               axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
               margin={{ top: 10, right: 10, bottom: 30, left: 60 }}
               width={480}
diff --git a/modules/scatterplot-chart/hybrid/index.js b/modules/scatterplot-chart/hybrid/index.js
index 76abf3f..8b7d062 100644
--- a/modules/scatterplot-chart/hybrid/index.js
+++ b/modules/scatterplot-chart/hybrid/index.js
@@ -51,6 +51,7 @@ export default class ScatterplotChart extends PureComponent {
       datePattern: PropTypes.string,
       yAxisOrientRight: PropTypes.bool,
       dotRadius: PropTypes.number,
+      minRadius: PropTypes.number,
       verticalGrid: PropTypes.bool,
       grid: PropTypes.bool,
       height: PropTypes.number,
@@ -84,6 +85,7 @@ export default class ScatterplotChart extends PureComponent {
       config: [],
       datePattern: '%d-%b-%y',
       dotRadius: 5,
+      minRadius: 1,
       grid: false,
       mouseOverHandler: () => {},
       mouseOutHandler: () => {},
@@ -139,16 +141,12 @@ export default class ScatterplotChart extends PureComponent {
       : color(data.type);
   }
 
-  getRadius(data, dataItem, dotRadius) {
+  getRadius(data, dataItem, dotRadius, minRadius) {
     if (typeof data[0].z !== 'undefined') {
-      const rangeRadius = extent(data, (d) => d.z);
-      const mn = rangeRadius[0];
-      const mx = rangeRadius[1];
-      const p = ((dataItem.z - mn) / (mx - mn));
-      const minRad = 5;
-      const maxRad = 20;
-      const rad = minRad + ((maxRad - minRad) * p);
-      return rad;
+      const r = linear()
+        .domain(extent(data, (d) => d.z))
+        .range([minRadius, dotRadius]);
+      return r(dataItem.z);
     }
     return dotRadius;
   }
@@ -366,6 +364,7 @@ export default class ScatterplotChart extends PureComponent {
     const {
       data,
       dotRadius,
+      minRadius,
       xType,
       mouseOverHandler,
       mouseOutHandler,
@@ -375,7 +374,7 @@ export default class ScatterplotChart extends PureComponent {
 
     const calculateDate = (v) => this.parseDate(v);
 
-    const calculateR = (d) => this.getRadius(data, d, dotRadius);
+    const calculateR = (d) => this.getRadius(data, d, dotRadius, minRadius);
     const calculateCX = (d) => (
         (xType === 'time')
           ? x(calculateDate(d.x))
@@ -442,6 +441,7 @@ export default class ScatterplotChart extends PureComponent {
     const {
       data,
       dotRadius,
+      minRadius,
       xType,
       mouseOverHandler,
       mouseOutHandler,
@@ -451,7 +451,7 @@ export default class ScatterplotChart extends PureComponent {
 
     const calculateDate = (v) => this.parseDate(v);
 
-    const calculateR = (d) => this.getRadius(data, d, dotRadius);
+    const calculateR = (d) => this.getRadius(data, d, dotRadius, minRadius);
     const calculateCX = (d) => (
         (xType === 'time')
           ? x(calculateDate(d.x))
diff --git a/modules/scatterplot-chart/static/index.js b/modules/scatterplot-chart/static/index.js
index de31abc..3db58ac 100644
--- a/modules/scatterplot-chart/static/index.js
+++ b/modules/scatterplot-chart/static/index.js
@@ -51,6 +51,7 @@ export default class ScatterplotChart extends PureComponent {
       datePattern: PropTypes.string,
       yAxisOrientRight: PropTypes.bool,
       dotRadius: PropTypes.number,
+      minRadius: PropTypes.number,
       verticalGrid: PropTypes.bool,
       grid: PropTypes.bool,
       height: PropTypes.number,
@@ -84,6 +85,7 @@ export default class ScatterplotChart extends PureComponent {
       config: [],
       datePattern: '%d-%b-%y',
       dotRadius: 5,
+      minRadius: 1,
       grid: false,
       mouseOverHandler: () => {},
       mouseOutHandler: () => {},
@@ -137,16 +139,12 @@ export default class ScatterplotChart extends PureComponent {
       : color(data.type);
   }
 
-  getRadius(data, dataItem, dotRadius) {
+  getRadius(data, dataItem, dotRadius, minRadius) {
     if (typeof data[0].z !== 'undefined') {
-      const rangeRadius = extent(data, (d) => d.z);
-      const mn = rangeRadius[0];
-      const mx = rangeRadius[1];
-      const p = ((dataItem.z - mn) / (mx - mn));
-      const minRad = 5;
-      const maxRad = 20;
-      const rad = minRad + ((maxRad - minRad) * p);
-      return rad;
+      const r = linear()
+        .domain(extent(data, (d) => d.z))
+        .range([minRadius, dotRadius]);
+      return r(dataItem.z);
     }
     return dotRadius;
   }
@@ -399,6 +397,7 @@ export default class ScatterplotChart extends PureComponent {
     const {
       data,
       dotRadius,
+      minRadius,
       xType,
       mouseOverHandler,
       mouseOutHandler,
@@ -408,7 +407,7 @@ export default class ScatterplotChart extends PureComponent {
 
     const calculateDate = (v) => this.parseDate(v);
 
-    const calculateR = (d) => this.getRadius(data, d, dotRadius);
+    const calculateR = (d) => this.getRadius(data, d, dotRadius, minRadius);
     const calculateCX = (d) => (
         (xType === 'time')
           ? x(calculateDate(d.x))