Scatter Plot
A scatter plot displays series of data points, where each point represents values for two different numeric variables and is correlated with the position of each point on the horizontal and vertical axes.
Read more on: Scatter plot.
Inputs
data
Type: object [] required
Data must be provided as an array of objects in JSON format. The data array should is indexed (by an id
, if specified) with a nested array of data objects (with x
, y
properties). Each nested object represents a single data point, and each point's position is determined by its x
and y
values.
A sample dataset could look something like this:
climbs.json
[ { "x": 0, "y": 93.69018434064849 }, { "x": 1, "y": 46.3018492732896 }, { "x": 2, "y": 58.14436737157354 }, { "x": 3, "y": 54.51790586843437 }, { "x": 4, "y": 22.09286874993026 }, { "x": 5, "y": 85.86961518991087 }]
xKey
Type: string required
The xKey is the string as the accessor for the data series in the X-domain. This string must match the corresponding property in each data object used for plotting on the x-axis. The xKey should represent data of type number
.
yKey
Type: string required
The yKey is the string as the accessor for the data series in the Y-domain. This string must match the corresponding property in each data object used for plotting on the y-axis. The yKey should represent data of type number
.
xAxisLabel
Type: string
An optional label for the x-axis. Defaults to an empty string ""
. Defaults to an empty string ""
yAxisLabel
Type: string
An optional label for the y-axis. Defaults to an empty string ""
.
height
Type: number required
Chart height in pixels, used within the bounding box of the Chart
wrapper component. If a value < 100 is provided, this value will default back to 500
.
width
Type: number required
Chart width in pixels, used within the bounding box of the Chart
wrapper component. If a value < 100 is provided, this value will default back to 500
.
radius
Type: number
Dynamic node size. If no value provMake your points as large or small as you please! If no value is provided, this value will default back to 5
.
Children
The ScatterPlot contains the following children components:
Chart
Axis
Circles
Component Structure and Use
The finished MyScatterPlot
is structured like so:
import { data } from 'MyScatterPlotData.js'import { ScatterPlot } from 'ad3lie'const MyScatterPlot = ({ data /* see data from your Javascript data file */,}) => ( <ScatterPlot data={data} xKey="x" yKey="y" xAxisLabel="X-axis" yAxisLabel="Y-axis" height={500} width={500} radius={5} />)
Simply import your custom MyScatterPlot
along with MyScatterPlotData.js
for easy use. Or, pull ScatterPlot
and provide the required props yourself.
Props Summary
Property | Type | Required? |
---|---|---|
data | object [] | ✅ |
xKey | string | ✅ |
yKey | string | ✅ |
xAxisLabel | string | ❌ |
yAxisLabel | string | ❌ |
height | number | ✅ |
width | number | ✅ |
radius | number | ❌ |