Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scatterplot: use dotRadius for 3rd data type #142

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Scatterplot: use dotRadius for 3rd data type #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions examples/scatterplot-chart/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
22 changes: 11 additions & 11 deletions modules/scatterplot-chart/hybrid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -84,6 +85,7 @@ export default class ScatterplotChart extends PureComponent {
config: [],
datePattern: '%d-%b-%y',
dotRadius: 5,
minRadius: 1,
grid: false,
mouseOverHandler: () => {},
mouseOutHandler: () => {},
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -366,6 +364,7 @@ export default class ScatterplotChart extends PureComponent {
const {
data,
dotRadius,
minRadius,
xType,
mouseOverHandler,
mouseOutHandler,
Expand All @@ -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))
Expand Down Expand Up @@ -442,6 +441,7 @@ export default class ScatterplotChart extends PureComponent {
const {
data,
dotRadius,
minRadius,
xType,
mouseOverHandler,
mouseOutHandler,
Expand All @@ -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))
Expand Down
19 changes: 9 additions & 10 deletions modules/scatterplot-chart/static/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -84,6 +85,7 @@ export default class ScatterplotChart extends PureComponent {
config: [],
datePattern: '%d-%b-%y',
dotRadius: 5,
minRadius: 1,
grid: false,
mouseOverHandler: () => {},
mouseOutHandler: () => {},
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -399,6 +397,7 @@ export default class ScatterplotChart extends PureComponent {
const {
data,
dotRadius,
minRadius,
xType,
mouseOverHandler,
mouseOutHandler,
Expand All @@ -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))
Expand Down