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#