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

PropertyTypeRequired?
dataobject []
xKeystring
yKeystring
xAxisLabelstring
yAxisLabelstring
heightnumber
widthnumber
radiusnumber