ScatterPlot

live example

Explore the API in the live example.

api reference

ScatterPlot(name[, parent])

The scatter plot widget. Being a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

BottomAxis
ElementTooltip
Highlight Dot clouds can be highlighted by passing their plot names as specified in the data array.
LeftAxis
Objects
Opacity
XRange
YRange

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

ScatterPlot.data(plots)

Set/updates the data that is shown in the scatter plot.

Parameters

Name Type Description

plots

Object[]

Name	Type	Description
plots	Object[]	Array of objects representing the dot clouds to show. Each plot has two properties: name `string` Name of the plot. values `Object[]` Plot data. The `values` property is an array of objects of the following structure: x `number` X coordinate of the data point. y `number` Y coordinate of the data point. label `(number\|string)` An optional label that is used for distinguishing the dots during updates.

Array of objects representing the dot clouds to show. Each plot has two properties:

name: string Name of the plot.
values: Object[] Plot data.

The values property is an array of objects of the following structure:

x: number X coordinate of the data point.
y: number Y coordinate of the data point.
label: (number|string) An optional label that is used for distinguishing the dots during updates.

Returns

ScatterPlot

Reference to the ScatterPlot API.

Examples

const scatter = dalian.ScatterPlot('my-chart')
  .data([{
    name: 'sample 1',
    values: [
      {x: 1.3, y: 2.3},
      {x: 1.4, y: 2.1},
      {x: 5.3, y: -2.3},
      ...
    ]
  }, {
    name: 'sample 2',
    values: [
      {x: 2.5, y: 7.1},
      {x: 3.8, y: 5.3},
      {x: 1.7, y: 2.4},
      ...
    ]
  } ... ])
  .render()

ScatterPlot.size([value])

Sets the circles' radius in pixels. Default value is 4.

Parameters

Name	Type	Description
value	number, Function	optionalRadius of the circles to set in pixels. Either a number or a function mapping from a data point to a number. Default value is `3`.

Returns

Object

Reference to the ScattePlot's API.

Examples

// Set dot size to 2px.
const scatter = dalian.ScatterPlot('my-chart')
  .size(2)
  .render()

// Reset size to default.
scatter.size()
  .render()