Class: Scatterplot

#module:EsbmePlots.Scatterplot

new Scatterplot()

Scatterplot creates a new Scatterplot
Version:
  • 1.0
Author:
Source:
Example
var x = Scatterplot()
 .parent(d3.selectAll(".container"))
 .seriesNames(["blue","pink"])
 .margin("auto")
 .data([
   [
     [30,26],
     [10,15],
     [12,0]
   ],
   [
     [3,2],
     [1,1],
     [1,0]
   ]
 ])
 .draw()

Extends

Methods

className(valueopt)

Defines a class to be added to all DOM elements within the SVG

If value is specified, sets the class name.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Default Description
value String <optional>
 random
Inherited From:
Source:

colors(valueopt)

Defines the custom colors for dots on the canvas

If value is specified, sets the color groups.
If value is not specified, return the current color groups
Parameters:
Name Type Attributes Description
value function <optional>
Source:

data(valueopt)

Adds / Updates the data bound to the plot

If value is specified, sets the data.
If value is not specified, returns the currently bound data
Parameters:
Name Type Attributes Description
value Array <optional>
 Array with data
Inherited From:
Source:

duration(valueopt)

Defines the duration for transitions

If value is specified, sets the length of transitions (in ms).
If value is not specified, return the current set value
Parameters:
Name Type Attributes Default Description
value Integer <optional>
 300
Inherited From:
Source:

events(valueopt)

Defines custom event listeners

Not yet implemented
Parameters:
Name Type Attributes Description
value Object <optional>
 Key=>value of events to listen and responding callbacks
Inherited From:
Source:

finished()

Defines a callback to be called whenever transitions finish

Not yet implemented
Inherited From:
Source:

Defines the header to be printed above the plot

If value is specified, sets the plot header.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Default Description
value String <optional>
 "EsbmePlot" Header
Inherited From:
Source:

height(valueopt)

Defines the total height of the SVG

If value is specified, sets the height.
If value is not specified, return the currentlt set height
Parameters:
Name Type Attributes Description
value Int <optional>
 height in px
Inherited From:
Source:

highlightColor(RGB_Color)

Defines color of highlighted points

Parameters:
Name Type Description
RGB_Color String
Source:

highlightRadius(radius)

Defines radius of highlighted points

Parameters:
Name Type Description
radius Int
Source:

highlights(highlightsopt)

Defines data points to be highlighted

Data needs to be passed an Array of highlight
Each highlight is [x-Value, y-Value, Text, labelPosition]
Parameters:
Name Type Attributes Description
highlights Array <optional>
Source:

info(valueopt)

Defines extra info that is stored in the DOM

If value is specified, sets the info.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value Array.<Object> <optional>
 Must have the same format as data. Final elements can be any kind of object
Inherited From:
Source:

margin(valueopt)

Defines the margin of the plot

Margin is used to print labels and axes, so it should either be set large enough or left to be determined automatically. If value is specified, sets the margins.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Default Description
value Int | Array.<Int> | Object <optional>
 "auto" Margins in same format as with CSS
Inherited From:
Source:
Example
plot.margin(20)
=> {top: 20, right: 20, bottom: 20, left: 20}
plot.margin("auto")
=> {top: "auto", right: "auto", bottom: "auto", left: "auto"}
plot.margin(20,10)
=> {top: 20, right: 10, bottom: 20, left: 10}
plot.margin(5,10,15,20)
=> {top: 5, right: 10, bottom: 15, left: 20}
plot.margin({ top: 5, right: 10, bottom: 15, left: 20 })
=> {top: 5, right: 10, bottom: 15, left: 20}

parent(valueopt)

Defines or returns the parent DOM element onto which the svg will be appended

If value is specified, sets the parent.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value D3Selection <optional>
 d3.js Selection
Inherited From:
Source:

radius(valueopt)

Defines the radius of the dots

If value is specified, sets the value.
If value is not specified, returns the current value
Parameters:
Name Type Attributes Default Description
value Integer <optional>
 0
Source:

radius(valueopt)

Defines whether to draw on a canvas or SVG

If value is specified, sets the value.
If value is not specified, returns the current value
Parameters:
Name Type Attributes Default Description
value String <optional>
 "auto" Allowed values: auto|svg|canvas
Source:

radius(valueopt)

If `canvas` is set to `auto` sets the limit of data points to draw on an SVG

If more data points than `maxDots` are present, plot is drawn as canvas.
This might not work well with adding more data etc. In this case use canvas as default
Parameters:
Name Type Attributes Default Description
value Integer <optional>
 100
Source:

scaleX(valueopt)

Defines the custom Scatterplot specifc scale for the x-axis

If value is specified, sets the x-axis scale.
If value is not specified, return the current scale Should not be used as setter in most cases
Parameters:
Name Type Attributes Description
value function <optional>
Source:

scaleY(valueopt)

Defines the custom Scatterplot specifc scale for the y-axis

If value is specified, sets the y-axis scale.
If value is not specified, return the current scale Should not be used as setter in most cases
Parameters:
Name Type Attributes Description
value function <optional>
Source:

seriesNames(valueopt)

Defines the class names to be added to each series

If value is specified, sets the series names.
If value is not specified, return the current series names
Parameters:
Name Type Attributes Default Description
value Array.<String> <optional>
 ["Series1","Series2","Series3","Series4","Series5","Series6","Series7","Series8","Series9","Series10"]
Inherited From:
Source:

svg(valueopt)

Defines the svg element

This value should rarely be used for setting the svg element and mainly used as a getter If value is specified, sets the parent.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value D3Selection <optional>
Inherited From:
Source:

width(valueopt)

Defines the total width of the SVG

If value is specified, sets the width.
If value is not specified, return the currently set width
Parameters:
Name Type Attributes Description
value Int <optional>
 width in px
Inherited From:
Source:

xDomain(valueopt)

Defines the domain for the X-axis

If value is specified, sets the x-axis domain.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value String <optional>
Inherited From:
Source:

xLabel(valueopt)

Defines the label to be printed below the X-axis

If value is specified, sets the x-axis label.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value String <optional>
Inherited From:
Source:

yDomain(valueopt)

Defines the domain for the y-axis

If value is specified, sets the y-axis domain.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value String <optional>
Inherited From:
Source:

yLabel(valueopt)

Defines the label to be printed alongside the Y-axis

If value is specified, sets the y-axis label.
If value is not specified, return the current set value
Parameters:
Name Type Attributes Description
value String <optional>
Inherited From:
Source: