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))