Scatterplot chart
TIP
For core principles, concept description, API and changelog, refer to the D3 chart.
Basic usage
tsx
import React from 'react';
import { Chart } from 'intergalactic/d3-chart';
const Demo = () => {
return (
<Chart.ScatterPlot
data={data}
plotWidth={500}
plotHeight={300}
groupKey={'x'}
aria-label={'ScatterPlot chart'}
/>
);
};
const data = Array(20)
.fill({})
.map((d, i) => ({
x: i,
y: Math.random() * 10,
}));
export default Demo;
TIP
For all the following examples, scale is calculated taking into account synthetic data. You can see the mathematics, used in Change.Scatterplot
to calculate common scale, in our GitHub repository.
Scatter plot
tsx
import React from 'react';
import { Plot, ScatterPlot, XAxis, YAxis, minMax } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const MARGIN = 40;
const width = 500;
const height = 300;
const xScale = scaleLinear()
.range([MARGIN, width - MARGIN])
.domain([-1, 21]);
const yScale = scaleLinear()
.range([height - MARGIN, MARGIN])
.domain([-1, 11]);
return (
<Plot scale={[xScale, yScale]} width={width} height={height} data={data}>
<YAxis>
<YAxis.Ticks />
<YAxis.Grid />
</YAxis>
<XAxis>
<XAxis.Ticks />
</XAxis>
<ScatterPlot x='x' y='y' />
<ScatterPlot.Tooltip>
{({ index }) => {
return {
children: (
<>
<ScatterPlot.Tooltip.Title>Data</ScatterPlot.Tooltip.Title>
<Text tag='div'>X axis {data[index].x}</Text>
<Text tag='div'>Y axis {data[index].y}</Text>
</>
),
};
}}
</ScatterPlot.Tooltip>
</Plot>
);
};
const data = Array(20)
.fill({})
.map((d, i) => ({
x: i,
y: Math.random() * 10,
}));
export default Demo;
Color customization
If required, you can assign your own color to Scatter plot.
tsx
import React from 'react';
import { Plot, ScatterPlot, XAxis, YAxis, minMax } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const MARGIN = 40;
const width = 500;
const height = 300;
const xScale = scaleLinear()
.range([MARGIN, width - MARGIN])
.domain([-1, 21]);
const yScale = scaleLinear()
.range([height - MARGIN, MARGIN])
.domain([-1, 11]);
return (
<Plot scale={[xScale, yScale]} width={width} height={height} data={data}>
<YAxis>
<YAxis.Ticks />
<YAxis.Grid />
</YAxis>
<XAxis>
<XAxis.Ticks />
</XAxis>
<ScatterPlot x='x' y='y1' color='#2BB3FF' />
<ScatterPlot x='x' y='y2' color='#59DDAA' />
<ScatterPlot.Tooltip>
{({ index, x, y, color }) => {
return {
children: (
<>
<ScatterPlot.Tooltip.Dot color={color}>Data</ScatterPlot.Tooltip.Dot>
<Text tag='div'>X axis {data[index][x]}</Text>
<Text tag='div'>Y axis {data[index][y]}</Text>
</>
),
};
}}
</ScatterPlot.Tooltip>
</Plot>
);
};
const data = Array(20)
.fill({})
.map((d, i) => ({
x: i,
y1: Math.random() * 10,
y2: Math.random() * 10,
}));
export default Demo;
Scatter plot with values inside
tsx
import React from 'react';
import { Plot, ScatterPlot, XAxis, YAxis, minMax } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const MARGIN = 40;
const width = 500;
const height = 300;
const xScale = scaleLinear()
.range([MARGIN, width - MARGIN])
.domain([-1, 21]);
const yScale = scaleLinear()
.range([height - MARGIN, MARGIN])
.domain([-1, 11]);
return (
<Plot scale={[xScale, yScale]} width={width} height={height} data={data}>
<YAxis>
<YAxis.Ticks />
<YAxis.Grid />
</YAxis>
<XAxis>
<XAxis.Ticks />
</XAxis>
<ScatterPlot x='x' y='y' value='value' />
<ScatterPlot.Tooltip>
{({ index, x, y, value }) => {
return {
children: (
<>
<ScatterPlot.Tooltip.Title>Data</ScatterPlot.Tooltip.Title>
<Text tag='div'>X axis {data[index][x]}</Text>
<Text tag='div'>Y axis {data[index][y]}</Text>
<Text tag='div'>Value {data[index][value]}</Text>
</>
),
};
}}
</ScatterPlot.Tooltip>
</Plot>
);
};
const data = Array(20)
.fill({})
.map((d, i) => ({
x: i,
y: Math.random() * 10,
value: i,
}));
export default Demo;
Legend and pattern fill
Note that for ChartLegend patterns
property works only with default shape={'Checkbox'}
.
tsx
import React from 'react';
import { Plot, ScatterPlot, XAxis, YAxis, minMax, ChartLegend } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
const Demo = () => {
const MARGIN = 40;
const width = 500;
const height = 300;
const xScale = scaleLinear()
.range([MARGIN, width - MARGIN])
.domain([-1, 11]);
const yScale = scaleLinear()
.range([height - MARGIN, MARGIN])
.domain([-1, 11]);
const legendItems = Object.keys(data[0])
.filter((name) => name !== 'x' && name !== 'value')
.map((item, index) => {
return {
id: item,
label: `Point ${item}`,
checked: true,
color: `chart-palette-order-${index + 1}`,
};
});
return (
<>
<ChartLegend
items={legendItems}
shape={'Checkbox'}
patterns
aria-label={'Legend for the scatterplot chart'}
/>
<Plot scale={[xScale, yScale]} width={width} height={height} data={data} patterns={true}>
<YAxis>
<YAxis.Ticks />
<YAxis.Grid />
</YAxis>
<XAxis>
<XAxis.Ticks />
</XAxis>
{legendItems
.filter((item) => item.checked)
.map((item, index) => {
return (
<ScatterPlot key={item.id} x={'x'} y={item.id} value={'value'} color={item.color} />
);
})}
</Plot>
</>
);
};
const data = Array(10)
.fill({})
.map((d, i) => ({
x: i,
1: Math.random() * 10,
2: Math.random() * 10,
3: Math.random() * 10,
value: i,
}));
export default Demo;
Color customization and values inside
If required, you can assign your own color to Scatter plot.
tsx
import React from 'react';
import { Plot, ScatterPlot, XAxis, YAxis, minMax } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const MARGIN = 40;
const width = 500;
const height = 300;
const xScale = scaleLinear()
.range([MARGIN, width - MARGIN])
.domain([-1, 21]);
const yScale = scaleLinear()
.range([height - MARGIN, MARGIN])
.domain([-1, 11]);
return (
<Plot scale={[xScale, yScale]} width={width} height={height} data={data}>
<YAxis>
<YAxis.Ticks />
<YAxis.Grid />
</YAxis>
<XAxis>
<XAxis.Ticks />
</XAxis>
<ScatterPlot x='x' y='y1' value='value' color='#2BB3FF' valueColor='#008ff8' />
<ScatterPlot x='x' y='y2' value='value' color='#59DDAA' valueColor='#00C192' />
<ScatterPlot.Tooltip>
{({ index, x, y, value }) => {
return {
children: (
<>
<ScatterPlot.Tooltip.Title>Data</ScatterPlot.Tooltip.Title>
<Text tag='div'>X axis {data[index][x]}</Text>
<Text tag='div'>Y axis {data[index][y]}</Text>
<Text tag='div'>Value {data[index][value]}</Text>
</>
),
};
}}
</ScatterPlot.Tooltip>
</Plot>
);
};
const data = Array(20)
.fill({})
.map((d, i) => ({
x: i,
y1: Math.random() * 10,
y2: Math.random() * 10,
value: i,
}));
export default Demo;
Initial data loading
Use ScatterPlotChartSkeleton
for the initial chart loading.