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 {
- The default size of the dot can be changed via the - dotRadius parameter. + The default size of the dot can be changed via + the dotRadius parameter.
@@ -1134,7 +1135,8 @@ export default class ScatterplotContainer extends PureComponent {
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 dotRadius and minRadius parameters.
@@ -1205,6 +1207,8 @@ export default class ScatterplotContainer extends PureComponent {
{},
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))