dc.js

Class: scatterPlot

dc. scatterPlot

new scatterPlot(parent [, chartGroup])

A scatter plot chart

Examples:

Parameters:
Name Type Argument Description
parent String | node | d3.selection

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:
Returns:
Type
dc.scatterPlot
Example
// create a scatter plot under #chart-container1 element using the default global chart group
var chart1 = dc.scatterPlot('#chart-container1');
// create a scatter plot under #chart-container2 element using chart group A
var chart2 = dc.scatterPlot('#chart-container2', 'chartGroupA');
// create a sub-chart under a composite parent chart
var chart3 = dc.scatterPlot(compositeChart);

Members

emptyColor

Set or get color for symbols when the group is empty. If null, just use the colorMixin.colors color scale zero value.

Source:

emptyOpacity

Set or get opacity for symbols when the group is empty.

Source:

nonemptyOpacity

Set or get opacity for symbols when the group is not empty.

Source:

Methods

canvas( [canvasElement])

Set or get canvas element. You should usually only ever use the get method as dc.js will handle canvas element generation. Provides valid canvas only when useCanvas is set to true

Parameters:
Name Type Argument Description
canvasElement CanvasElement | d3.selection <optional>
Source:
Returns:
Type
CanvasElement | d3.selection

context()

Get canvas 2D context. Provides valid context only when useCanvas is set to true

Source:
Returns:
Type
CanvasContext

customSymbol( [customSymbol])

Get or set the symbol generator. By default dc.scatterPlot will use d3.symbol() to generate symbols. dc.scatterPlot will set the symbol size accessor on the symbol generator.

Parameters:
Name Type Argument Default Description
customSymbol String | function <optional>
 d3.symbol()
Source:
See:
Returns:
Type
String | function | dc.scatterPlot

emptySize( [emptySize])

Set or get radius for symbols when the group is empty.

Parameters:
Name Type Argument Default Description
emptySize Number <optional>
 0
Source:
See:
Returns:
Type
Number | dc.scatterPlot

excludedColor( [excludedColor])

Set or get color for symbols excluded from this chart's filter. If null, no special color is applied for symbols based on their filter status.

Parameters:
Name Type Argument Default Description
excludedColor Number <optional>
 null
Source:
Returns:
Type
Number | dc.scatterPlot

excludedOpacity( [excludedOpacity])

Set or get opacity for symbols excluded from this chart's filter.

Parameters:
Name Type Argument Default Description
excludedOpacity Number <optional>
 1.0
Source:
Returns:
Type
Number | dc.scatterPlot

excludedSize( [excludedSize])

Set or get size for symbols excluded from this chart's filter. If null, no special size is applied for symbols based on their filter status.

Parameters:
Name Type Argument Default Description
excludedSize Number <optional>
 null
Source:
See:
Returns:
Type
Number | dc.scatterPlot

existenceAccessor( [accessor])

Get or set the existence accessor. If a point exists, it is drawn with symbolSize radius and opacity 1; if it does not exist, it is drawn with emptySize radius and opacity 0. By default, the existence accessor checks if the reduced value is truthy.

Parameters:
Name Type Argument Description
accessor function <optional>
Source:
See:
Returns:
Type
function | dc.scatterPlot
Example
// default accessor
chart.existenceAccessor(function (d) { return d.value; });

highlightedSize( [highlightedSize])

Set or get radius for highlighted symbols.

Parameters:
Name Type Argument Default Description
highlightedSize Number <optional>
 5
Source:
See:
Returns:
Type
Number | dc.scatterPlot

resetSvg()

Method that replaces original resetSvg and appropriately inserts canvas element along with svg element and sets their CSS properties appropriately so they are overlapped on top of each other. Remove the chart's SVGElements from the dom and recreate the container SVGElement.

Source:
See:
Returns:
Type
SVGElement

symbol( [type])

Get or set the symbol type used for each point. By default the symbol is a circle (d3.symbolCircle). Type can be a constant or an accessor.

Parameters:
Name Type Argument Default Description
type function <optional>
 d3.symbolCircle
Source:
See:
Returns:
Type
function | dc.scatterPlot
Example
// Circle type
chart.symbol(d3.symbolCircle);
// Square type
chart.symbol(d3.symbolSquare);

symbolSize( [symbolSize])

Set or get radius for symbols.

Parameters:
Name Type Argument Default Description
symbolSize Number <optional>
 3
Source:
See:
Returns:
Type
Number | dc.scatterPlot

useCanvas( [useCanvas])

Set or get whether to use canvas backend for plotting scatterPlot. Note that the canvas backend does not currently support customSymbol or symbol methods and is limited to always plotting with filled circles. Symbols are drawn with symbolSize radius. By default, the SVG backend is used when useCanvas is set to false.

Parameters:
Name Type Argument Default Description
useCanvas Boolean <optional>
 false
Source:
Returns:
Type
Boolean | d3.selection