Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.
npm install @d3plus/coreIf using npm, npm install @d3plus/core. Otherwise, you can download the latest release from GitHub or load from a CDN.
``js`
import modules from "@d3plus/core";
In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:
`html`
Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.
#####
* AreaPlot
* BarChart
* BoxWhisker
* BumpChart
* Donut
* Geomap
* LinePlot
* Matrix
* Network
* Pack
* Pie
* Plot
* Priestley
* Radar
* RadialMatrix
* Rings
* Sankey
* StackedArea
* Tree
* Treemap
* Viz
* Axis
* AxisBottom
* AxisLeft
* AxisRight
* AxisTop
* ColorScale
* Legend
* TextBox
* Timeline
* Tooltip
* Area
* Bar
* Box
* Circle
* Image
* Line
* Path
* Rect
* Shape
* Whisker
* BaseClass - An abstract class that contains some global methods and functionality.
#####
* accessor - Wraps an object key in a simple accessor function.
* configPrep - Preps a config object for d3plus data, and optionally bubbles up a specific nested type. When using this function, you must bind a d3plus class' this context.
* constant - Wraps non-function variables in a simple return function.
* uuid - Returns a unique identifier.
#####
* RESET - String constant used to reset an individual config property.
---
#### AreaPlot <>
This is a global class, and extends all of the methods and functionality of Plot.
# new AreaPlot()
Creates an area plot based on an array of data.
the equivalent of calling:
`js`
new d3plus.Plot()
.baseline(0)
.discrete("x")
.shape("Area")
---
#### BarChart <>
This is a global class, and extends all of the methods and functionality of Plot.
# new BarChart()
Creates a bar chart based on an array of data.
the equivalent of calling:
`js`
new d3plus.Plot()
.baseline(0)
.discrete("x")
.shape("Bar")
---
#### BoxWhisker <>
This is a global class, and extends all of the methods and functionality of Plot.
# new BoxWhisker()
Creates a simple box and whisker based on an array of data.
---
#### BumpChart <>
This is a global class, and extends all of the methods and functionality of Plot.
# new BumpChart()
Creates a bump chart based on an array of data.
the equivalent of calling:
`js`
new d3plus.Plot()
.discrete("x")
.shape("Line")
.y2(d => this._y(d))
.yConfig({
tickFormat: val => {
const data = this._formattedData;
const xDomain = this._xDomain;
const startData = data.filter(d => d.x === xDomain[0]);
const d = startData.find(d => d.y === val);
return this._drawLabel(d, d.i);
}
})
.y2Config({
tickFormat: val => {
const data = this._formattedData;
const xDomain = this._xDomain;
const endData = data.filter(d => d.x === xDomain[xDomain.length - 1]);
const d = endData.find(d => d.y === val);
return this._drawLabel(d, d.i);
}
})
.ySort((a, b) => b.y - a.y)
.y2Sort((a, b) => b.y - a.y)
---
#### Donut <>
This is a global class, and extends all of the methods and functionality of Pie.
# new Donut()
Extends the Pie visualization to create a donut chart.
---
#### Geomap <>
This is a global class, and extends all of the methods and functionality of Viz.
* Geomap ⇐ Viz
* new Geomap()
[.fitFilter([value*])](#Geomap.fitFilter) ↩︎
.fitKey(value*) ↩︎
[.fitObject(data, [formatter*])](#Geomap.fitObject) ↩︎
[.ocean([value*])](#Geomap.ocean) ↩︎
[.point([value*])](#Geomap.point) ↩︎
[.pointSize([value*])](#Geomap.pointSize) ↩︎
[.pointSizeMax([value*])](#Geomap.pointSizeMax) ↩︎
[.pointSizeMin([value*])](#Geomap.pointSizeMin) ↩︎
.projection(projection*) ↩︎
[.projectionPadding([value*])](#Geomap.projectionPadding) ↩︎
[.projectionRotate([value*])](#Geomap.projectionRotate) ↩︎
[.tiles([value*])](#Geomap.tiles) ↩︎
* [.tileUrl([url])](#Geomap.tileUrl) ↩︎
[.topojson(data, [formatter*])](#Geomap.topojson) ↩︎
.topojsonFill(value*) ↩︎
[.topojsonFilter([value*])](#Geomap.topojsonFilter) ↩︎
.topojsonKey(value*) ↩︎
.topojsonId(value*) ↩︎
# new Geomap()
Creates a geographical map with zooming, panning, image tiles, and the ability to layer choropleth paths and coordinate points. See this example for help getting started.
# Geomap.fitFilter([value]) <>
Topojson files sometimes include small geographies that negatively impact how the library determines the default zoom level (for example, a small island or territory far off the coast that is barely visible to the eye). The fitFilter method can be used to remove specific geographies from the logic used to determine the zooming.
The value passed can be a single id to remove, an array of ids, or a filter function. Take a look at the Choropleth Example to see it in action.
This is a static method of Geomap, and is chainable with other methods of this Class.
If the topojson being used to determine the zoom fit (either the main topojson object or the fitObject) contains multiple geographical sets (for example, a file containing state and county boundaries), use this method to indentify which set to use for the zoom fit.
If not specified, the first key in the Array returned from using Object.keys on the topojson will be used.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.fitObject(data, [formatter]) <>
The topojson to be used for the initial projection fit extent. The value passed should either be a valid Topojson Object or a String representing a filepath or URL to be loaded.
Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function needs to return the final Topojson Object.
This is a static method of Geomap, and is chainable with other methods of this Class.
The color visible behind any shapes drawn on the map projection. By default, a color value matching the color used in the map tiles is used to help mask the loading time needed to render the tiles. Any value CSS color value may be used, including hexidecimal, rgb, rgba, and color strings like "blue" and "transparent".
This is a static method of Geomap, and is chainable with other methods of this Class.
The accessor to be used when detecting coordinate points in the objects passed to the data method. Values are expected to be in the format [longitude, latitude], which is in-line with d3's expected coordinate mapping.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.pointSize([value]) <>
The accessor or static value to be used for sizing coordinate points.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.pointSizeMax([value]) <>
The maximum pixel radius used in the scale for sizing coordinate points.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.pointSizeMin([value]) <>
The minimum pixel radius used in the scale for sizing coordinate points.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.projection(projection) <>
Sets the map projection used when displaying topojson and coordinate points. All of the projections exported from d3-geo, d3-geo-projection, and d3-composite-projections are accepted, whether as the string name (ie. "geoMercator") or the generator function itself. Map tiles are only usable when the projection is set to Mercator (which is also the default value).
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.projectionPadding([value]) <>
The outer padding between the edge of the visualization and the shapes drawn. The value passed can be either a single number to be used on all sides, or a CSS string pattern (ie. "20px 0 10px").
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.projectionRotate([value]) <>
An array that corresponds to the value passed to the projection's rotate function. Use this method to shift the centerpoint of a map.
This is a static method of Geomap, and is chainable with other methods of this Class.
Toggles the visibility of the map tiles.
This is a static method of Geomap, and is chainable with other methods of this Class.
By default, d3plus uses the light_all style provided by CARTO for it's map tiles. The tileUrl method changes the base URL used for fetching the tiles, as long as the string passed contains {x}, {y}, and {z} variables enclosed in curly brackets for the zoom logic to load the correct tiles.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.topojson(data, [formatter]) <>
The topojson to be used for drawing geographical paths. The value passed should either be a valid Topojson Object or a String representing a filepath or URL to be loaded.
Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final Topojson Obejct.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.topojsonFill(value) <>
The function is used to set default color of the map.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.topojsonFilter([value]) <>
If the topojson being used contains boundaries that should not be shown, this method can be used to filter them out of the final output. The value passed can be a single id to remove, an array of ids, or a filter function.
This is a static method of Geomap, and is chainable with other methods of this Class.
# Geomap.topojsonKey(value) <>
If the topojson contains multiple geographical sets (for example, a file containing state and county boundaries), use this method to indentify which set to use.
If not specified, the first key in the Array returned from using Object.keys on the topojson will be used.
This is a static method of Geomap, and is chainable with other methods of this Class.
The accessor used to map each topojson geometry to it's corresponding data point.
This is a static method of Geomap, and is chainable with other methods of this Class.
---
#### LinePlot <>
This is a global class, and extends all of the methods and functionality of Plot.
# new LinePlot()
Creates a line plot based on an array of data.
the equivalent of calling:
`js`
new d3plus.Plot()
.discrete("x")
.shape("Line")
---
#### Matrix <>
This is a global class, and extends all of the methods and functionality of Viz.
* Matrix ⇐ Viz
* new Matrix()
[.cellPadding([value*])](#Matrix.cellPadding)
[.column([value*])](#Matrix.column)
.columnConfig(value*) ↩︎
[.columnList([value*])](#Matrix.columnList)
[.columnSort([value*])](#Matrix.columnSort)
[.row([value*])](#Matrix.row)
.rowConfig(value*) ↩︎
[.rowList([value*])](#Matrix.rowList)
[.rowSort([value*])](#Matrix.rowSort)
# new Matrix()
Creates a simple rows/columns Matrix view of any dataset. See this example for help getting started using the Matrix class.
# Matrix.cellPadding([value]) <>
The pixel padding in between each cell.
This is a static method of Matrix
Determines which key in your data should be used for each column in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's column value.
This is a static method of Matrix
`js`
function column(d) {
return d.name;
}
# Matrix.columnConfig(value) <>
A pass-through to the underlying Axis config used for the column labels.
This is a static method of Matrix, and is chainable with other methods of this Class.
# Matrix.columnList([value]) <>
A manual list of IDs to be used for columns.
This is a static method of Matrix
# Matrix.columnSort([value]) <>
A sort comparator function that is run on the unique set of column values.
This is a static method of Matrix
`js`
function column(a, b) {
return a.localeCompare(b);
}
Determines which key in your data should be used for each row in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's row value.
This is a static method of Matrix
`js`
function row(d) {
return d.name;
}
A pass-through to the underlying Axis config used for the row labels.
This is a static method of Matrix, and is chainable with other methods of this Class.
A manual list of IDs to be used for rows.
This is a static method of Matrix
A sort comparator function that is run on the unique set of row values.
This is a static method of Matrix
`js`
function row(a, b) {
return a.localeCompare(b);
}
---
#### Network <>
This is a global class, and extends all of the methods and functionality of Viz.
* Network ⇐ Viz
* new Network()
[.hover([value*])](#Network.hover) ↩︎
[.links(links, [formatter*])](#Network.links) ↩︎
[.linkSize([value*])](#Network.linkSize) ↩︎
[.linkSizeMin([value*])](#Network.linkSizeMin) ↩︎
[.linkSizeScale([value*])](#Network.linkSizeScale) ↩︎
[.nodeGroupBy([value*])](#Network.nodeGroupBy) ↩︎
[.nodes(nodes, [formatter*])](#Network.nodes) ↩︎
[.size([value*])](#Network.size) ↩︎
[.sizeMax([value*])](#Network.sizeMax) ↩︎
[.sizeMin([value*])](#Network.sizeMin) ↩︎
[.sizeScale([value*])](#Network.sizeScale) ↩︎
[.x([value*])](#Network.x) ↩︎
[.y([value*])](#Network.y) ↩︎
[.linkSize([value*])](#Network.linkSize) ↩︎
[.linkSizeMin([value*])](#Network.linkSizeMin) ↩︎
[.linkSizeScale([value*])](#Network.linkSizeScale) ↩︎
# new Network()
Creates a network visualization based on a defined set of nodes and edges. Click here for help getting started using the Network class.
If value is specified, sets the hover method to the specified function and returns the current class instance.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.links(links, [formatter]) <>
A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:id
1. The index of the node in the nodes array (as in this example).
2. The actual node Object itself.
3. A String value matching the of the node.
The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSize([value]) <>
Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSizeMin([value]) <>
Defines the minimum pixel stroke width used in link sizing.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSizeScale([value]) <>
Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.nodeGroupBy([value]) <>
If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.nodes(nodes, [formatter]) <>
The list of nodes to be used for drawing the network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.
Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.
This is a static method of Network, and is chainable with other methods of this Class.
If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.
This is a static method of Network, and is chainable with other methods of this Class.
Defines the maximum pixel radius used in size scaling. By default, the maximum size is determined by half the distance of the two closest nodes.
This is a static method of Network, and is chainable with other methods of this Class.
Defines the minimum pixel radius used in size scaling.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.sizeScale([value]) <>
Sets the specific type of continuous d3-scale used when calculating the pixel size of nodes in the network.
This is a static method of Network, and is chainable with other methods of this Class.
If value is specified, sets the x accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current x accessor. By default, the x and y positions are determined dynamically based on default force layout properties.
This is a static method of Network, and is chainable with other methods of this Class.
If value is specified, sets the y accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current y accessor. By default, the x and y positions are determined dynamically based on default force layout properties.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSize([value]) <>
Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSizeMin([value]) <>
Defines the minimum pixel stroke width used in link sizing.
This is a static method of Network, and is chainable with other methods of this Class.
# Network.linkSizeScale([value]) <>
Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.
This is a static method of Network, and is chainable with other methods of this Class.
---
#### Pack <>
This is a global class, and extends all of the methods and functionality of Viz.
* Pack ⇐ Viz
* new Pack()
[.hover([value*])](#Pack.hover) ↩︎
[.layoutPadding([value*])](#Pack.layoutPadding)
[.packOpacity([value*])](#Pack.packOpacity)
[.sort([comparator*])](#Pack.sort)
[.sum([value*])](#Pack.sum)
# new Pack()
Uses the d3 pack layout to creates Circle Packing chart based on an array of data.
If value is specified, sets the hover method to the specified function and returns the current class instance.
This is a static method of Pack, and is chainable with other methods of this Class.
# Pack.layoutPadding([value]) <>
If value is specified, sets the opacity accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.
This is a static method of Pack
# Pack.packOpacity([value]) <>
If value is specified, sets the padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.
This is a static method of Pack
If comparator is specified, sets the sort order for the pack using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.
This is a static method of Pack
`js`
function comparator(a, b) {
return b.value - a.value;
}
If value is specified, sets the sum accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current sum accessor.
This is a static method of Pack
`js`
function sum(d) {
return d.sum;
}
---
#### Pie <>
This is a global class, and extends all of the methods and functionality of Viz.
* Pie ⇐ Viz
* new Pie()
[.innerRadius([value*])](#Pie.innerRadius)
[.padAngle([value*])](#Pie.padAngle)
[.padPixel([value*])](#Pie.padPixel)
[.sort([comparator*])](#Pie.sort)
.value(value*)
# new Pie()
Uses the d3 pie layout to creates SVG arcs based on an array of data.
The pixel value, or function that returns a pixel value, that is used as the inner radius of the Pie (creating a Donut).
This is a static method of Pie
The padding between each arc, set as a radian value between \0\ and \1\.
If set, this will override any previously set padPixel value.
This is a static method of Pie
The padding between each arc, set as a pixel number value.
By default the value is \0\, which shows no padding between each arc.
If \padAngle\ is defined, the \padPixel\ value will not be considered.
This is a static method of Pie
A comparator function that sorts the Pie slices.
This is a static method of Pie
The accessor key for each data point used to calculate the size of each Pie section.
This is a static method of Pie
---
#### Plot <>
This is a global class, and extends all of the methods and functionality of Viz.
* Plot ⇐ Viz
* new Plot()
.annotations(annotations*) ↩︎
[.axisPersist([value*])](#Plot.axisPersist) ↩︎
[.backgroundConfig([value*])](#Plot.backgroundConfig) ↩︎
.barPadding(value*) ↩︎
.baseline(value*) ↩︎
[.buffer([value*])](#Plot.buffer) ↩︎
.confidence(value*) ↩︎
[.confidenceConfig([value*])](#Plot.confidenceConfig) ↩︎
.discreteCutoff(value*) ↩︎
[.groupPadding([value*])](#Plot.groupPadding) ↩︎
[.labelConnectorConfig([value*])](#Plot.labelConnectorConfig) ↩︎
[.lineLabels([value*])](#Plot.lineLabels) ↩︎
.lineMarkerConfig(value*) ↩︎
[.lineMarkers([value*])](#Plot.lineMarkers) ↩︎
.shapeSort(value*) ↩︎
.size(value*) ↩︎
.sizeMax(value*) ↩︎
.sizeMin(value*) ↩︎
.sizeScale(value*) ↩︎
.stacked(value*) ↩︎
.stackOffset(value*) ↩︎
.stackOrder(value*) ↩︎
.x(value*) ↩︎
.x2(value*) ↩︎
.xConfig(value*) ↩︎
.xCutoff(value*) ↩︎
.x2Config(value*) ↩︎
.xDomain(value*) ↩︎
.x2Domain(value*) ↩︎
.xSort(value*) ↩︎
.x2Sort(value*) ↩︎
.y(value*) ↩︎
.y2(value*) ↩︎
.yConfig(value*) ↩︎
.yCutoff(value*) ↩︎
.y2Config(value*) ↩︎
.yDomain(value*) ↩︎
.y2Domain(value*) ↩︎
.ySort(value*) ↩︎
.y2Sort(value*) ↩︎
# new Plot()
Creates an x/y plot based on an array of data.
# Plot.annotations(annotations) <>
Allows drawing custom shapes to be used as annotations in the provided x/y plot. This method accepts custom config objects for the Shape class, either a single config object or an array of config objects. Each config object requires an additional parameter, the "shape", which denotes which Shape sub-class to use (Rect, Line, etc).
Additionally, each config object can also contain an optional "layer" key, which defines whether the annotations will be displayed in "front" or in "back" of the primary visualization shapes. This value defaults to "back" if not present.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.axisPersist([value]) <>
Determines whether the x and y axes should have their scales persist while users filter the data, the timeline being the prime example (set this to true to make the axes stay consistent when the timeline changes).
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.backgroundConfig([value]) <>
A d3plus-shape configuration Object used for styling the background rectangle of the inner x/y plot (behind all of the shapes and gridlines).
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the pixel space between each bar in a group of bars.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the baseline for the x/y plot. If value is not specified, returns the current baseline.
This is a static method of Plot, and is chainable with other methods of this Class.
Determines whether or not to add additional padding at the ends of x or y scales. The most commone use for this is in Scatter Plots, so that the shapes do not appear directly on the axis itself. The value provided can either be true or false to toggle the behavior for all shape types, or a keyed Object for each shape type (ie. {Bar: false, Circle: true, Line: false}).
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the confidence to the specified array of lower and upper bounds.
This is a static method of Plot, and is chainable with other methods of this Class.
Can be called with accessor functions or static keys:
`js
var data = {id: "alpha", value: 10, lci: 9, hci: 11};
...
// Accessor functions
.confidence([function(d) { return d.lci }, function(d) { return d.hci }])
// Or static keys
.confidence(["lci", "hci"])
`
# Plot.confidenceConfig([value]) <>
If value is specified, sets the config method for each shape rendered as a confidence interval and returns the current class instance.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.discreteCutoff(value) <>
When the width or height of the chart is less than or equal to this pixel value, the discrete axis will not be shown. This helps produce slick sparklines. Set this value to 0 to disable the behavior entirely.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.groupPadding([value]) <>
Sets the pixel space between groups of bars.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.labelConnectorConfig([value]) <>
The d3plus-shape config used on the Line shapes created to connect lineLabels to the end of their associated Line path.
This is a static method of Plot, and is chainable with other methods of this Class.
Draws labels on the right side of any Line shapes that are drawn on the plot.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.lineMarkerConfig(value) <>
Shape config for the Circle shapes drawn by the lineMarkers method.
This is a static method of Plot, and is chainable with other methods of this Class.
# Plot.lineMarkers([value]) <>
Draws circle markers on each vertex of a Line.
This is a static method of Plot, and is chainable with other methods of this Class.
A JavaScript sort comparator function that receives each shape Class (ie. "Circle", "Line", etc) as it's comparator arguments. Shapes are drawn in groups based on their type, so you are defining the layering order for all shapes of said type.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the size of bubbles to the given Number, data key, or function.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the size scale maximum to the specified number.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the size scale minimum to the specified number.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the size scale to the specified string.
This is a static method of Plot, and is chainable with other methods of this Class.
If value is specified, toggles shape stacking. If value is not specified, returns the current stack value.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the stack offset. If value is not specified, returns the current stack offset function.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the stack order. If value is not specified, returns the current stack order function.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the x accessor to the specified accessor Function or String representing which key in the data to reference. If value is not specified, returns the current x accessor.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the x2 accessor to the specified accessor Function or String representing which key in the data to reference. If value is not specified, returns the current x2 accessor.
This is a static method of Plot, and is chainable with other methods of this Class.
A pass-through to the underlying Axis config used for the x-axis. Includes additional functionality where passing "auto" as the value for the scale method will determine if the scale should be "linear" or "log" based on the provided data.
This is a static method of Plot, and is chainable with other methods of this Class.
When the width of the chart is less than or equal to this pixel value, and the x-axis is not the discrete axis, it will not be shown. This helps produce slick sparklines. Set this value to 0 to disable the behavior entirely.
This is a static method of Plot, and is chainable with other methods of this Class.
A pass-through to the underlying Axis config used for the secondary x-axis. Includes additional functionality where passing "auto" as the value for the scale method will determine if the scale should be "linear" or "log" based on the provided data.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the x domain to the specified array. If value is not specified, returns the current x domain. Additionally, if either value of the array is undefined, it will be calculated from the data.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the x2 domain to the specified array. If value is not specified, returns the current x2 domain. Additionally, if either value of the array is undefined, it will be calculated from the data.
This is a static method of Plot, and is chainable with other methods of this Class.
Defines a custom sorting comparitor function to be used for discrete x axes.
This is a static method of Plot, and is chainable with other methods of this Class.
Defines a custom sorting comparitor function to be used for discrete x2 axes.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the y accessor to the specified accessor Function or String representing which key in the data to reference. If value is not specified, returns the current y accessor.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the y2 accessor to the specified accessor Function or String representing which key in the data to reference. If value is not specified, returns the current y2 accessor.
This is a static method of Plot, and is chainable with other methods of this Class.
A pass-through to the underlying Axis config used for the y-axis. Includes additional functionality where passing "auto" as the value for the scale method will determine if the scale should be "linear" or "log" based on the provided data.
Note:* If a "domain" array is passed to the y-axis config, it will be reversed.
This is a static method of Plot, and is chainable with other methods of this Class.
When the height of the chart is less than or equal to this pixel value, and the y-axis is not the discrete axis, it will not be shown. This helps produce slick sparklines. Set this value to 0 to disable the behavior entirely.
This is a static method of Plot, and is chainable with other methods of this Class.
A pass-through to the underlying Axis config used for the secondary y-axis. Includes additional functionality where passing "auto" as the value for the scale method will determine if the scale should be "linear" or "log" based on the provided data.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the y domain to the specified array. If value is not specified, returns the current y domain. Additionally, if either value of the array is undefined, it will be calculated from the data.
This is a static method of Plot, and is chainable with other methods of this Class.
Sets the y2 domain to the specified array. If value is not specified, returns the current y2 domain. Additionally, if either value of the array is undefined, it will be calculated from the data.
This is a static method of Plot, and is chainable with other methods of this Class.
Defines a custom sorting comparitor function to be used for discrete y axes.
This is a static method of Plot, and is chainable with other methods of this Class.
Defines a custom sorting comparitor function to be used for discrete y2 axes.
This is a static method of Plot, and is chainable with other methods of this Class.
---
#### Priestley <>
This is a global class, and extends all of the methods and functionality of Viz.
* Priestley ⇐ Viz
* new Priestley()
[.axisConfig([value*])](#Priestley.axisConfig) ↩︎
[.end([value*])](#Priestley.end) ↩︎
[.paddingInner([value*])](#Priestley.paddingInner) ↩︎
[.paddingOuter([value*])](#Priestley.paddingOuter) ↩︎
[.start([value*])](#Priestley.start) ↩︎
# new Priestley()
Creates a priestley timeline based on an array of data.
# Priestley.axisConfig([value]) <>
If value is specified, sets the config method for the axis and returns the current class instance. If value is not specified, returns the current axis configuration.
This is a static method of Priestley, and is chainable with other methods of this Class.
If value is specified, sets the end accessor to the specified function or key and returns the current class instance. If value is not specified, returns the current end accessor.
This is a static method of Priestley, and is chainable with other methods of this Class.
# Priestley.paddingInner([value]) <>
Sets the paddingInner value of the underlining Band Scale used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space in between each rectangle.
This is a static method of Priestley, and is chainable with other methods of this Class.
# Priestley.paddingOuter([value]) <>
Sets the paddingOuter value of the underlining Band Scale used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space around the outer rectangles.
This is a static method of Priestley, and is chainable with other methods of this Class.
If value is specified, sets the start accessor to the specified function or key and returns the current class instance. If value is not specified, returns the current start accessor.
This is a static method of Priestley, and is chainable with other methods of this Class.
---
#### Radar <>
This is a global class, and extends all of the methods and functionality of Viz.
* Radar ⇐ Viz
* new Radar()
.axisConfig(value*) ↩︎
.metric(value*) ↩︎
[.outerPadding([value*])](#Radar.outerPadding) ↩︎
.value(value*)
# new Radar()
Creates a radar visualization based on an array of data.
Sets the config method used for the radial spokes, circles, and labels.
This is a static method of Radar, and is chainable with other methods of this Class.
Defines the value used as axis. If value is specified, sets the accessor to the specified metric function. If value is not specified, returns the current metric accessor.
This is a static method of Radar, and is chainable with other methods of this Class.
# Radar.outerPadding([value]) <>
Determines how much pixel spaces to give the outer labels.
This is a static method of Radar, and is chainable with other methods of this Class.
If value is specified, sets the value accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current value accessor.
This is a static method of Radar
`js``
function value(d) {
return d.value;
}
---
#### RadialMatrix <>
This is a global class, and extends all of the methods and functionality of Viz.
* RadialMatrix ⇐ Viz
* new RadialMatrix()
[.cellPadding([value*])](#RadialMatrix.cellPadding)
[.column([value*])](#RadialMatrix.column)
.columnConfig(value*) ↩︎
[.columnList([value*])](#RadialMatrix.columnList)
[.columnSort([value*])](#RadialMatrix.columnSort)
[.innerRadius([value*])](#RadialMatrix.innerRadius)
[.row([value*])](#RadialMatrix.row)
[.rowList([value*])](#RadialMatrix.rowList)
[.rowSort([value*])](#RadialMatrix.rowSort)
# new RadialMatrix()
Creates a radial layout of a rows/columns Matrix of any dataset. See this example for help getting started using the Matrix class.
# RadialMatrix.cellPadding([value]) <>
The pixel padding in between each cell.
This is a static method of RadialMatrix
# RadialMatrix.column([value]) <>
Determines which key in your data should be used for each column in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's column value.
This is a static method of RadialMatrix