API: Scatter-plot

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

(require("Scatter-plot"))(_selection, _data)

This function creates the graph using the selection as container
Parameters:
Name 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
Source:

Requires

  • module:d3-array,

Methods


module:Scatter-plot(_selection, _data)

This function creates the graph using the selection as container
Parameters:
Name 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
Source:

<static> aspectRatio(_x)

Gets or Sets the aspect ratio of the chart
Parameters:
Name Type Description
_x Number Desired aspect ratio for the graph
Source:
Returns:
Current aspect ratio or Chart module to chain calls
Type
Number | module

<static> circleOpacity(_x)

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.
Parameters:
Name Type Default Description
_x Number 0.24 Desired opacity of circles of the chart
Source:
Returns:
Current circleOpacity or Chart module to chain calls
Type
Number | module
Example
scatterPlot.circleOpacity(0.6)

<static> colorSchema(_x)

Gets or Sets the colorSchema of the chart
Parameters:
Name Type Description
_x Array.<String> Desired colorSchema for the chart
Source:
Returns:
Current colorSchema or Chart module to chain calls
Type
Array.<String> | module
Example
scatterPlot.colorSchema(['#fff', '#bbb', '#ccc'])

<static> exportChart(filename, title)

Chart exported to png and a download action is fired
Parameters:
Name Type Description
filename String File title for the resulting picture
title String Title to add at the top of the exported picture
Source:

<static> grid(_x)

Gets or Sets the grid mode.
Parameters:
Name Type Description
_x String Desired mode for the grid ('vertical'|'horizontal'|'full')
Source:
Returns:
Current mode of the grid or Chart module to chain calls
Type
String | module

<static> hasCrossHairs(_x)

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
Parameters:
Name Type Default Description
_x boolean false Desired hasCrossHairs status for chart
Source:
Returns:
Current hasCrossHairs or Chart module to chain calls
Type
boolean | module

<static> hasHollowCircles(_x)

Gets or Sets the hasHollowCircles value of the chart area
Parameters:
Name Type Default Description
_x boolean false Choose whether chart's data points/circles should be hollow
Source:
Returns:
Current hasHollowCircles value or Chart module to chain calls
Type
boolean | module

<static> hasTrendline(_x)

Gets or Sets the hasTrendline value of the chart area If true, the trendline calculated based off linear regression formula will be drawn
Parameters:
Name Type Default Description
_x boolean false Choose whether chart's trendline should be drawn
Source:
Returns:
Current hasTrendline value or Chart module to chain calls
Type
boolean | module

<static> height(_x)

Gets or Sets the height of the chart
Parameters:
Name Type Description
_x Number Desired height for the chart
Source:
Returns:
Current height or Chart module to chain calls
Type
Number | module

<static> highlightTextLegendOffset(_x)

Sets a custom distance between legend values with respect to both axises. The legends show up when hasCrossHairs is true.
Parameters:
Name Type Description
_x Number Desired highlightTextLegendOffset for the chart
Source:
Returns:
Current highlightTextLegendOffset or Chart module to chain calls
Type
Number | module
Example
scatterPlot.highlightTextLegendOffset(-55)

<static> isAnimated(_x)

Gets or Sets isAnimated value. If set to true, the chart will be initialized or updated with animation.
Parameters:
Name Type Default Description
_x boolean false Desired isAnimated properties for each side
Source:
Returns:
Current isAnimated or Chart module to chain calls
Type
boolean | module

<static> margin(_x)

Gets or Sets the margin object of the chart
Parameters:
Name Type Description
_x Object Desired margin object properties for each side
Source:
Returns:
Current margin or Chart module to chain calls
Type
Object | module

<static> maxCircleArea(_x)

Gets or Sets the maximum value of the chart area
Parameters:
Name Type Default Description
_x Number 10 Desired margin object properties for each side
Source:
Returns:
Current maxCircleArea or Chart module to chain calls
Type
Number | module

<static> on()

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
Source:
Returns:
Scatter Plot
Type
module

<static> width(_x)

Gets or Sets the height of the chart
Parameters:
Name Type Description
_x Number Desired height for the chart
Source:
Returns:
Current width or Chart module to chain calls
Type
Number | module

<static> xAxisFormat(_x)

Exposes ability to set the format of x-axis values
Parameters:
Name Type Description
_x String Desired height for the chart
Source:
Returns:
Current xAxisFormat or Chart module to chain calls
Type
String | module

<static> xAxisLabel(_x)

Gets or Sets the xAxisLabel of the chart. Adds a label bellow x-axis for better clarify of data representation.
Parameters:
Name Type Description
_x String Desired string for x-axis label of the chart
Source:
Returns:
Current xAxisLabel or Chart module to chain calls
Type
String | module

<static> xAxisLabelOffset(_x)

Gets or Sets the offset of the xAxisLabel of the chart. The method accepts both positive and negative values.
Parameters:
Name Type Default Description
_x Number -40 Desired offset for the label
Source:
Returns:
Current xAxisLabelOffset or Chart module to chain calls
Type
Number | module
Example
scatterPlot.xAxisLabelOffset(-55)

<static> xTicks(_x)

Gets or Sets the xTicks of the chart
Parameters:
Name Type Description
_x Number Desired height for the chart
Source:
Returns:
Current xTicks or Chart module to chain calls
Type
Number | module

<static> yAxisFormat(_x)

Exposes ability to set the format of y-axis values
Parameters:
Name Type Description
_x String Desired height for the chart
Source:
Returns:
Current yAxisFormat or Chart module to chain calls
Type
String | module

<static> yAxisLabel(_x)

Gets or Sets the y-axis label of the chart
Parameters:
Name Type Description
_x String Desired label string
Source:
Returns:
Current yAxisLabel or Chart module to chain calls
Type
String | module
Example
scatterPlot.yAxisLabel('Ice Cream Consmuption Growth')

<static> yAxisLabelOffset(_x)

Gets or Sets the offset of the yAxisLabel of the chart. The method accepts both positive and negative values.
Parameters:
Name Type Default Description
_x Number -40 Desired offset for the label
Source:
Returns:
Current yAxisLabelOffset or Chart module to chain calls
Type
Number | module
Example
scatterPlot.yAxisLabelOffset(-55)

<static> yTicks(_x)

Gets or Sets the xTicks of the chart
Parameters:
Name Type Description
_x Number Desired height for the chart
Source:
Returns:
Current yTicks or Chart module to chain calls
Type
Number | module