Scatter Plot

Reusable Scatter Plot API class that renders a simple and configurable scatter chart.

Example

import { select } from 'd3-selection';
import { scatterPlot } from '@britecharts/core';

// dataset: [{ name, x, y }]
const scatterPlotChart = scatterPlot();

scatterPlotChart
    .grid('horizontal')
    .width(500);

select('.css-selector')
    .datum(dataset)
    .call(scatterPlotChart);

Scatter-plot
- exports(_selection, _data) ⏏
  - static
    - .a11yTitle(_x) ⇒ String | null | module
    - .a11yDescription(_x) ⇒ String | null | module
    - .a11yDataTable(_x) ⇒ Boolean | module
    - .a11yKeyboardNavigation(_x) ⇒ Boolean | module
    - .animationDuration(_x) ⇒ duration | module
    - .circleStrokeOpacity(_x) ⇒ Number | module
    - .circleStrokeWidth(_x) ⇒ Number | module
    - .circleOpacity(_x) ⇒ Number | module
    - .colorMap([_x]) ⇒ object | module
    - .colorSchema(_x) ⇒ Array.<String> | module
    - .exportChart(filename, title) ⇒ Promise
    - .grid(_x) ⇒ String | module
    - .hasCrossHairs(_x) ⇒ boolean | module
    - .hasHollowCircles(_x) ⇒ boolean | module
    - .hasTrendline(_x) ⇒ boolean | module
    - .enableZoom(_x) ⇒ boolean | module
    - .isLoading(_flag) ⇒ boolean | module
    - .height(_x) ⇒ Number | module
    - .highlightTextLegendOffset(_x) ⇒ Number | module
    - .isAnimated(_x) ⇒ boolean | module
    - .margin(_x) ⇒ Object | module
    - .maxCircleArea(_x) ⇒ Number | module
    - .on() ⇒ module
    - .valueLocale([_x]) ⇒ LocaleObject | module
    - .width(_x) ⇒ Number | module
    - .xAxisLabel(_x) ⇒ String | module
    - .xAxisLabelOffset(_x) ⇒ Number | module
    - .xAxisFormat(_x) ⇒ String | module
    - .xAxisFormatType(_x) ⇒ string | module
    - .xTicks(_x) ⇒ Number | module
    - .yAxisFormat(_x) ⇒ String | module
    - .yAxisLabel(_x) ⇒ String | module
    - .yAxisLabelOffset(_x) ⇒ Number | module
    - .yTicks(_x) ⇒ Number | module
  - inner
    - ~nameToColorMap
    - ~ScatterPlotData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	`D3Selection`	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	`ScatterPlotData`	The data to attach and generate the chart

a11yTitle(_x) ⇒ `String` | `null` | `module`

Gets or Sets the name screen readers announce for the chart. It is set as the svg's aria-label. Unset, the chart is announced as "Scatter plot".

Kind: static method of exports
Returns: String | null | module - Current a11yTitle or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String` \| `null`	Desired accessible title for the chart

a11yDescription(_x) ⇒ `String` | `null` | `module`

Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's <desc>. Unset, the chart has no description.

Kind: static method of exports
Returns: String | null | module - Current a11yDescription or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String` \| `null`	Desired accessible description for the chart

a11yDataTable(_x) ⇒ `Boolean` | `module`

Gets or Sets whether the chart renders its data as a visually hidden table after its svg, which screen readers can read cell by cell. On by default; set it to false when the app gives the data its own accessible form.

Kind: static method of exports
Returns: Boolean | module - Current a11yDataTable or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	Whether to render the data table

a11yKeyboardNavigation(_x) ⇒ `Boolean` | `module`

Gets or Sets whether a keyboard can move through the chart's data points: the chart takes one tab stop, the arrow keys move between points, Home and End go to the first and last, and Escape lets go. The tooltip and highlights follow focus as they follow the pointer. On by default.

Kind: static method of exports
Returns: Boolean | module - Current a11yKeyboardNavigation or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Boolean`	Whether the keyboard can move through the data

animationDuration(_x) ⇒ `duration` | `module`

Gets or Sets the duration of the circle animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`1200`	Desired animation duration for the graph

circleStrokeOpacity(_x) ⇒ `Number` | `module`

Gets or Sets each circle's border opacity value of the chart. It makes each circle border transparent if it's less than 1.

Kind: static method of exports
Returns: Number | module - Current circleStrokeOpacity or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`1`	Desired border opacity of circles of the chart

Example

scatterPlot.circleStrokeOpacity(0.6)

circleStrokeWidth(_x) ⇒ `Number` | `module`

Gets or Sets each circle's border width value of the chart. It makes each circle border transparent if it's less than 1.

Kind: static method of exports
Returns: Number | module - Current circleStrokeWidth or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`1`	Desired border width of circles of the chart

Example

scatterPlot.circleStrokeWidth(10)

circleOpacity(_x) ⇒ `Number` | `module`

Gets or Sets the circles opacity value of the chart. Use this to set opacity of a circle for each data point of the chart. It makes the area of each data point more transparent if it's less than 1.

Kind: static method of exports
Returns: Number | module - Current circleOpacity or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`0.24`	Desired opacity of circles of the chart

Example

scatterPlot.circleOpacity(0.6)

colorMap([_x]) ⇒ `object` | `module`

Gets or Sets the colorMap of the chart

Kind: static method of exports
Returns: object | module - Current colorMap or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`object`		Color map

Example

scatterPlot.colorMap({name: 'colorHex', name2: 'colorString'})

colorSchema(_x) ⇒ `Array.<String>` | `module`

Gets or Sets the colorSchema of the chart

Kind: static method of exports
Returns: Array.<String> | module - Current colorSchema or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Array.<String>`	Desired colorSchema for the chart

Example

scatterPlot.colorSchema(['#fff', '#bbb', '#ccc'])

exportChart(filename, title) ⇒ `Promise`

Exports the chart and fires a download: an svg file when the filename ends in .svg, and a png otherwise

Kind: static method of exports
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

Param	Type	Description
filename	`String`	Name of the downloaded file, whose extension picks the format
title	`String`	Title to add at the top of the exported picture

grid(_x) ⇒ `String` | `module`

Gets or Sets the grid mode.

Kind: static method of exports
Returns: String | module - Current mode of the grid or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired mode for the grid ('vertical'

hasCrossHairs(_x) ⇒ `boolean` | `module`

Gets or Sets the hasCrossHairs status. If true, the hovered data point will be highlighted with lines and legend from both x and y axis. The user will see values for x under x axis line and y under y axis. Lines will be drawn with respect to highlighted data point

Kind: static method of exports
Returns: boolean | module - Current hasCrossHairs or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`boolean`	`false`	Desired hasCrossHairs status for chart

hasHollowCircles(_x) ⇒ `boolean` | `module`

Gets or Sets the hasHollowCircles value of the chart area

Kind: static method of exports
Returns: boolean | module - Current hasHollowCircles value or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`boolean`	`false`	Choose whether chart's data points/circles should be hollow

hasTrendline(_x) ⇒ `boolean` | `module`

Gets or Sets the hasTrendline value of the chart area If true, the trendline calculated based off linear regression formula will be drawn

Kind: static method of exports
Returns: boolean | module - Current hasTrendline value or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`boolean`	`false`	Choose whether chart's trendline should be drawn

enableZoom(_x) ⇒ `boolean` | `module`

Gets or Sets weather the chart support zoom controls If true, zoom event handling will be added to the chart.

Kind: static method of exports
Returns: boolean | module - Current enableZoom value or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`boolean`	`false`	Choose whether chart should support zoom controls

isLoading(_flag) ⇒ `boolean` | `module`

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
_flag	`boolean`	Desired value for the loading state

Example

chart.isLoading(true)

height(_x) ⇒ `Number` | `module`

Gets or Sets the height of the chart

Kind: static method of exports
Returns: Number | module - Current height or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired height for the chart

highlightTextLegendOffset(_x) ⇒ `Number` | `module`

Sets a custom distance between legend values with respect to both axises. The legends show up when hasCrossHairs is true.

Kind: static method of exports
Returns: Number | module - Current highlightTextLegendOffset or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired highlightTextLegendOffset for the chart

Example

scatterPlot.highlightTextLegendOffset(-55)

isAnimated(_x) ⇒ `boolean` | `module`

Gets or Sets isAnimated value. If set to true, the chart will be initialized or updated with animation.

Kind: static method of exports
Returns: boolean | module - Current isAnimated or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`boolean`	`false`	Desired isAnimated properties for each side

margin(_x) ⇒ `Object` | `module`

Gets or Sets the margin object of the chart

Kind: static method of exports
Returns: Object | module - Current margin or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Object`	Desired margin object properties for each side

maxCircleArea(_x) ⇒ `Number` | `module`

Gets or Sets the maximum value of the chart area

Kind: static method of exports
Returns: Number | module - Current maxCircleArea or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`10`	Desired margin object properties for each side

on() ⇒ `module`

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customClick, customMouseOut, customMouseOver, and customMouseMove

Kind: static method of exports
Returns: module - Scatter Plot
Access: public

valueLocale([_x]) ⇒ `LocaleObject` | `module`

Gets or Sets the locale which our formatting functions use. Check the d3-format docs for the required values.

Kind: static method of exports
Returns: LocaleObject | module - Current locale object or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`LocaleObject`		_x Desired locale object format.

Example

scatterPlot
 .locale({thousands: '.', grouping: [3], currency: ["$", ""], decimal: "."})

width(_x) ⇒ `Number` | `module`

Gets or Sets the height of the chart

Kind: static method of exports
Returns: Number | module - Current width or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired height for the chart

xAxisLabel(_x) ⇒ `String` | `module`

Gets or Sets the xAxisLabel of the chart. Adds a label bellow x-axis for better clarify of data representation.

Kind: static method of exports
Returns: String | module - Current xAxisLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired string for x-axis label of the chart

xAxisLabelOffset(_x) ⇒ `Number` | `module`

Gets or Sets the offset of the xAxisLabel of the chart. The method accepts both positive and negative values.

Kind: static method of exports
Returns: Number | module - Current xAxisLabelOffset or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`-40`	Desired offset for the label

Example

scatterPlot.xAxisLabelOffset(-55)

xAxisFormat(_x) ⇒ `String` | `module`

Exposes ability to set the format of x-axis values

Kind: static method of exports
Returns: String | module - Current xAxisFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired xAxisFormat for the chart

xAxisFormatType(_x) ⇒ `string` | `module`

Exposes ability to set the formatter of x-axis values

Kind: static method of exports
Returns: string | module - current xAxisFormatType or Chart module to chain calls
Access: public
Value: 'number'
Value: 'time'

Param	Type	Description
_x	`string`	type of x-axis formatter

xTicks(_x) ⇒ `Number` | `module`

Gets or Sets the xTicks of the chart

Kind: static method of exports
Returns: Number | module - Current xTicks or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired xTicks for the chart

yAxisFormat(_x) ⇒ `String` | `module`

Exposes ability to set the format of y-axis values

Kind: static method of exports
Returns: String | module - Current yAxisFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired yAxisForma for the chart

yAxisLabel(_x) ⇒ `String` | `module`

Gets or Sets the y-axis label of the chart

Kind: static method of exports
Returns: String | module - Current yAxisLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired label string

Example

scatterPlot.yAxisLabel('Ice Cream Consmuption Growth')

yAxisLabelOffset(_x) ⇒ `Number` | `module`

Gets or Sets the offset of the yAxisLabel of the chart. The method accepts both positive and negative values.

Kind: static method of exports
Returns: Number | module - Current yAxisLabelOffset or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`-40`	Desired offset for the label

Example

scatterPlot.yAxisLabelOffset(-55)

yTicks(_x) ⇒ `Number` | `module`

Gets or Sets the xTicks of the chart

Kind: static method of exports
Returns: Number | module - Current yTicks or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired height for the chart

exports~nameToColorMap

Maps data point category name to each color of the given color scheme { name1: 'color1', name2: 'color2', name3: 'color3', ... }

Kind: inner property of exports

exports~ScatterPlotData : `Array.<Object>`

Kind: inner typedef of exports
Properties

Name	Type	Description
name	`String`	Name of the category or topic for data point
x	`Number`	Data point's position value relative to x-axis
y	`Number`	Data point's position value relative to y-axis

Example

[
    {
        name: 'topic',
        x: 123,
        y: 24,
    },
    {
        name: 'topic1',
        x: 53,
        y: 31,
    },
    {
        name: 'topic2',
        x: 631,
        y: 321,
    },
    {
        name: 'topic1',
        x: 231,
        y: 111,
    }
]

exports(_selection, _data) ⏏
a11yTitle(_x) ⇒ String | null | module
a11yDescription(_x) ⇒ String | null | module
a11yDataTable(_x) ⇒ Boolean | module
a11yKeyboardNavigation(_x) ⇒ Boolean | module
animationDuration(_x) ⇒ duration | module
circleStrokeOpacity(_x) ⇒ Number | module
circleStrokeWidth(_x) ⇒ Number | module
circleOpacity(_x) ⇒ Number | module
colorMap([_x]) ⇒ object | module
colorSchema(_x) ⇒ Array.<String> | module
exportChart(filename, title) ⇒ Promise
grid(_x) ⇒ String | module
hasCrossHairs(_x) ⇒ boolean | module
hasHollowCircles(_x) ⇒ boolean | module
hasTrendline(_x) ⇒ boolean | module
enableZoom(_x) ⇒ boolean | module
isLoading(_flag) ⇒ boolean | module
height(_x) ⇒ Number | module
highlightTextLegendOffset(_x) ⇒ Number | module
isAnimated(_x) ⇒ boolean | module
margin(_x) ⇒ Object | module
maxCircleArea(_x) ⇒ Number | module
on() ⇒ module
valueLocale([_x]) ⇒ LocaleObject | module
width(_x) ⇒ Number | module
xAxisLabel(_x) ⇒ String | module
xAxisLabelOffset(_x) ⇒ Number | module
xAxisFormat(_x) ⇒ String | module
xAxisFormatType(_x) ⇒ string | module
xTicks(_x) ⇒ Number | module
yAxisFormat(_x) ⇒ String | module
yAxisLabel(_x) ⇒ String | module
yAxisLabelOffset(_x) ⇒ Number | module
yTicks(_x) ⇒ Number | module
exports~nameToColorMap
exports~ScatterPlotData : Array.<Object>

exports(_selection, _data) ⏏​

a11yTitle(_x) ⇒ String | null | module​

a11yDescription(_x) ⇒ String | null | module​

a11yDataTable(_x) ⇒ Boolean | module​

a11yKeyboardNavigation(_x) ⇒ Boolean | module​

animationDuration(_x) ⇒ duration | module​

circleStrokeOpacity(_x) ⇒ Number | module​

circleStrokeWidth(_x) ⇒ Number | module​

circleOpacity(_x) ⇒ Number | module​

colorMap([_x]) ⇒ object | module​

colorSchema(_x) ⇒ Array.<String> | module​

exportChart(filename, title) ⇒ Promise​

grid(_x) ⇒ String | module​

hasCrossHairs(_x) ⇒ boolean | module​

hasHollowCircles(_x) ⇒ boolean | module​

hasTrendline(_x) ⇒ boolean | module​

enableZoom(_x) ⇒ boolean | module​

isLoading(_flag) ⇒ boolean | module​

height(_x) ⇒ Number | module​

highlightTextLegendOffset(_x) ⇒ Number | module​

isAnimated(_x) ⇒ boolean | module​

margin(_x) ⇒ Object | module​

maxCircleArea(_x) ⇒ Number | module​

on() ⇒ module​

valueLocale([_x]) ⇒ LocaleObject | module​

width(_x) ⇒ Number | module​

xAxisLabel(_x) ⇒ String | module​

xAxisLabelOffset(_x) ⇒ Number | module​

xAxisFormat(_x) ⇒ String | module​

xAxisFormatType(_x) ⇒ string | module​

xTicks(_x) ⇒ Number | module​

yAxisFormat(_x) ⇒ String | module​

yAxisLabel(_x) ⇒ String | module​

yAxisLabelOffset(_x) ⇒ Number | module​

yTicks(_x) ⇒ Number | module​

exports~nameToColorMap​

exports~ScatterPlotData : Array.<Object>​

exports(_selection, _data) ⏏

a11yTitle(_x) ⇒ `String` | `null` | `module`

a11yDescription(_x) ⇒ `String` | `null` | `module`

a11yDataTable(_x) ⇒ `Boolean` | `module`

a11yKeyboardNavigation(_x) ⇒ `Boolean` | `module`

animationDuration(_x) ⇒ `duration` | `module`

circleStrokeOpacity(_x) ⇒ `Number` | `module`

circleStrokeWidth(_x) ⇒ `Number` | `module`

circleOpacity(_x) ⇒ `Number` | `module`

colorMap([_x]) ⇒ `object` | `module`

colorSchema(_x) ⇒ `Array.<String>` | `module`

exportChart(filename, title) ⇒ `Promise`

grid(_x) ⇒ `String` | `module`

hasCrossHairs(_x) ⇒ `boolean` | `module`

hasHollowCircles(_x) ⇒ `boolean` | `module`

hasTrendline(_x) ⇒ `boolean` | `module`

enableZoom(_x) ⇒ `boolean` | `module`

isLoading(_flag) ⇒ `boolean` | `module`

height(_x) ⇒ `Number` | `module`

highlightTextLegendOffset(_x) ⇒ `Number` | `module`

isAnimated(_x) ⇒ `boolean` | `module`

margin(_x) ⇒ `Object` | `module`

maxCircleArea(_x) ⇒ `Number` | `module`

on() ⇒ `module`

valueLocale([_x]) ⇒ `LocaleObject` | `module`

width(_x) ⇒ `Number` | `module`

xAxisLabel(_x) ⇒ `String` | `module`

xAxisLabelOffset(_x) ⇒ `Number` | `module`

xAxisFormat(_x) ⇒ `String` | `module`

xAxisFormatType(_x) ⇒ `string` | `module`

xTicks(_x) ⇒ `Number` | `module`

yAxisFormat(_x) ⇒ `String` | `module`

yAxisLabel(_x) ⇒ `String` | `module`

yAxisLabelOffset(_x) ⇒ `Number` | `module`

yTicks(_x) ⇒ `Number` | `module`

exports~nameToColorMap

exports~ScatterPlotData : `Array.<Object>`