scatter-plot

Scatter-plot

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

Requires: module:d3-array,
Example

let scatterPlot = scatterPlot();

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

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

Scatter-plot
- exports(_selection, _data) ⏏
  - static
    - .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
    - .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

exports.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

exports.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)

exports.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)

exports.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)

exports.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'})

exports.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'])

exports.exportChart(filename, title) ⇒ `Promise`

Chart exported to png and a download action is fired

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`	File title for the resulting picture
title	`String`	Title to add at the top of the exported picture

exports.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'

exports.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

exports.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

exports.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

exports.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

exports.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

exports.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)

exports.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

exports.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

exports.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

exports.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

exports.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: "."})

exports.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

exports.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

exports.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)

exports.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

exports.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

exports.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

exports.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

exports.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')

exports.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)

exports.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) ⏏

Scatter-plot

exports(_selection, _data) ⏏​

exports.animationDuration(_x) ⇒ duration | module​

exports.circleStrokeOpacity(_x) ⇒ Number | module​

exports.circleStrokeWidth(_x) ⇒ Number | module​

exports.circleOpacity(_x) ⇒ Number | module​

exports.colorMap([_x]) ⇒ object | module​

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

exports.exportChart(filename, title) ⇒ Promise​

exports.grid(_x) ⇒ String | module​

exports.hasCrossHairs(_x) ⇒ boolean | module​

exports.hasHollowCircles(_x) ⇒ boolean | module​

exports.hasTrendline(_x) ⇒ boolean | module​

exports.enableZoom(_x) ⇒ boolean | module​

exports.height(_x) ⇒ Number | module​

exports.highlightTextLegendOffset(_x) ⇒ Number | module​

exports.isAnimated(_x) ⇒ boolean | module​

exports.margin(_x) ⇒ Object | module​

exports.maxCircleArea(_x) ⇒ Number | module​

exports.on() ⇒ module​

exports.valueLocale([_x]) ⇒ LocaleObject | module​

exports.width(_x) ⇒ Number | module​

exports.xAxisLabel(_x) ⇒ String | module​

exports.xAxisLabelOffset(_x) ⇒ Number | module​

exports.xAxisFormat(_x) ⇒ String | module​

exports.xAxisFormatType(_x) ⇒ string | module​

exports.xTicks(_x) ⇒ Number | module​

exports.yAxisFormat(_x) ⇒ String | module​

exports.yAxisLabel(_x) ⇒ String | module​

exports.yAxisLabelOffset(_x) ⇒ Number | module​

exports.yTicks(_x) ⇒ Number | module​

exports~nameToColorMap​

exports~ScatterPlotData : Array.<Object>​

exports(_selection, _data) ⏏

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

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

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

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

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

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

exports.exportChart(filename, title) ⇒ `Promise`

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

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

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

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

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

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

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

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

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

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

exports.on() ⇒ `module`

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

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

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

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

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

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

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

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

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

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

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

exports~nameToColorMap

exports~ScatterPlotData : `Array.<Object>`