@d3plus/core

Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.

Installing

If using npm, npm install @d3plus/core. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "@d3plus/core";

In vanilla JavaScript, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/core@3.0.0-alpha.2"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

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

• defaultPadding - Default padding logic that will return false if the screen is less than 600 pixels wide.
• listify - Turns an array of values into a list string.
• _thresholdFunction - Applies the threshold algorithm according to the type of chart used.
• generateReference - Creates a reference element for popper.
• 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:

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:

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.

the equivalent of calling:

new d3plus.Plot()
  .discrete("x")
  .shape("Box")

---

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:

new d3plus.Plot()
  .discrete("x")
  .shape("Line")
  .x("x")
  .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]) ↩︎
  • .fitKey(value) ↩︎
  • .fitObject(data, [formatter]) ↩︎
  • .ocean([value]) ↩︎
  • .point([value]) ↩︎
  • .pointSize([value]) ↩︎
  • .pointSizeMax([value]) ↩︎
  • .pointSizeMin([value]) ↩︎
  • .projection(projection) ↩︎
  • .projectionPadding([value]) ↩︎
  • .projectionRotate([value]) ↩︎
  • .tiles([value]) ↩︎
  • .tileUrl([url]) ↩︎
  • .topojson(data, [formatter]) ↩︎
  • .topojsonFill(value) ↩︎
  • .topojsonFilter([value]) ↩︎
  • .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.

# Geomap.fitKey(value) <>

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.

# Geomap.ocean([value]) <>

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.

# Geomap.point([value]) <>

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.

# Geomap.tiles([value]) <>

Toggles the visibility of the map tiles.

This is a static method of Geomap, and is chainable with other methods of this Class.

# Geomap.tileUrl([url]) <>

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.

# Geomap.topojsonId(value) <>

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:

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])
  • .column([value])
  • .columnConfig(value) ↩︎
  • .columnList([value])
  • .columnSort([value])
  • .row([value])
  • .rowConfig(value) ↩︎
  • .rowList([value])
  • .rowSort([value])

# 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

# Matrix.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 Matrix

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

function column(a, b) {
  return a.localeCompare(b);
}

# Matrix.row([value]) <>

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

function row(d) {
  return d.name;
}

# Matrix.rowConfig(value) <>

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.

# Matrix.rowList([value]) <>

A manual list of IDs to be used for rows.

This is a static method of Matrix

# Matrix.rowSort([value]) <>

A sort comparator function that is run on the unique set of row values.

This is a static method of Matrix

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]) ↩︎
  • .links(links, [formatter]) ↩︎
  • .linkSize([value]) ↩︎
  • .linkSizeMin([value]) ↩︎
  • .linkSizeScale([value]) ↩︎
  • .nodeGroupBy([value]) ↩︎
  • .nodes(nodes, [formatter]) ↩︎
  • .size([value]) ↩︎
  • .sizeMax([value]) ↩︎
  • .sizeMin([value]) ↩︎
  • .sizeScale([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎
  • .linkSize([value]) ↩︎
  • .linkSizeMin([value]) ↩︎
  • .linkSizeScale([value]) ↩︎

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

# Network.hover([value]) <>

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:

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

# Network.size([value]) <>

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.

# Network.sizeMax([value]) <>

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.

# Network.sizeMin([value]) <>

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.

# Network.x([value]) <>

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.

# Network.y([value]) <>

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]) ↩︎
  • .layoutPadding([value])
  • .packOpacity([value])
  • .sort([comparator])
  • .sum([value])

# new Pack()

Uses the d3 pack layout to creates Circle Packing chart based on an array of data.

# Pack.hover([value]) <>

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

# Pack.sort([comparator]) <>

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

function comparator(a, b) {
  return b.value - a.value;
}

# Pack.sum([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

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])
  • .padAngle([value])
  • .padPixel([value])
  • .sort([comparator])
  • .value(value)

# new Pie()

Uses the d3 pie layout to creates SVG arcs based on an array of data.

# Pie.innerRadius([value]) <>

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

# Pie.padAngle([value]) <>

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

# Pie.padPixel([value]) <>

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

# Pie.sort([comparator]) <>

A comparator function that sorts the Pie slices.

This is a static method of Pie

# Pie.value(value) <>

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]) ↩︎
  • .backgroundConfig([value]) ↩︎
  • .barPadding(value) ↩︎
  • .baseline(value) ↩︎
  • .buffer([value]) ↩︎
  • .confidence(value) ↩︎
  • .confidenceConfig([value]) ↩︎
  • .discrete(value) ↩︎
  • .discreteCutoff(value) ↩︎
  • .groupPadding([value]) ↩︎
  • .labelConnectorConfig([value]) ↩︎
  • .lineLabels([value]) ↩︎
  • .lineMarkerConfig(value) ↩︎
  • .lineMarkers([value]) ↩︎
  • .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.

# Plot.barPadding(value) <>

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.

# Plot.baseline(value) <>

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.

# Plot.buffer([value]) <>

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.

# Plot.confidence(value) <>

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:

       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.discrete(value) <>

Sets the discrete axis to the specified string. If value is not specified, returns the current discrete axis.

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.

# Plot.lineLabels([value]) <>

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.

# Plot.shapeSort(value) <>

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.

# Plot.size(value) <>

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.

# Plot.sizeMax(value) <>

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.

# Plot.sizeMin(value) <>

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.

# Plot.sizeScale(value) <>

Sets the size scale to the specified string.

This is a static method of Plot, and is chainable with other methods of this Class.

# Plot.stacked(value) <>

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.

# Plot.stackOffset(value) <>

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.

# Plot.stackOrder(value) <>

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.

# Plot.x(value) <>

Sets the x accessor to the specified function or number. 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.

# Plot.x2(value) <>

Sets the x2 accessor to the specified function or number. 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.

# Plot.xConfig(value) <>

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.

# Plot.xCutoff(value) <>

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.

# Plot.x2Config(value) <>

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.

# Plot.xDomain(value) <>

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.

# Plot.x2Domain(value) <>

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.

# Plot.xSort(value) <>

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.

# Plot.x2Sort(value) <>

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.

# Plot.y(value) <>

Sets the y accessor to the specified function or number. 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.

# Plot.y2(value) <>

Sets the y2 accessor to the specified function or number. 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.

# Plot.yConfig(value) <>

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.

# Plot.yCutoff(value) <>

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.

# Plot.y2Config(value) <>

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.

# Plot.yDomain(value) <>

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.

# Plot.y2Domain(value) <>

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.

# Plot.ySort(value) <>

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.

# Plot.y2Sort(value) <>

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]) ↩︎
  • .end([value]) ↩︎
  • .paddingInner([value]) ↩︎
  • .paddingOuter([value]) ↩︎
  • .start([value]) ↩︎

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

# Priestley.end([value]) <>

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.

# Priestley.start([value]) <>

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]) ↩︎
  • .value(value)

# new Radar()

Creates a radar visualization based on an array of data.

# Radar.axisConfig(value) <>

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.

# Radar.metric(value) <>

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.

# Radar.value(value) <>

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

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])
  • .column([value])
  • .columnConfig(value) ↩︎
  • .columnList([value])
  • .columnSort([value])
  • .innerRadius([value])
  • .row([value])
  • .rowList([value])
  • .rowSort([value])

# 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

function column(d) {
  return d.name;
}

# RadialMatrix.columnConfig(value) <>

A pass-through to the underlying Axis config used for the column labels.

This is a static method of RadialMatrix, and is chainable with other methods of this Class.

# RadialMatrix.columnList([value]) <>

A manual list of IDs to be used for columns.

This is a static method of RadialMatrix

# RadialMatrix.columnSort([value]) <>

A sort comparator function that is run on the unique set of column values.

This is a static method of RadialMatrix

function column(a, b) {
  return a.localeCompare(b);
}

# RadialMatrix.innerRadius([value]) <>

The radius (in pixels) for the inner donut hole of the diagram. Can either be a static Number, or an accessor function that receives the outer radius as it's only argument.

This is a static method of RadialMatrix

function(outerRadius) {
  return outerRadius / 5;
}

# RadialMatrix.row([value]) <>

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 RadialMatrix

function row(d) {
  return d.name;
}

# RadialMatrix.rowList([value]) <>

A manual list of IDs to be used for rows.

This is a static method of RadialMatrix

# RadialMatrix.rowSort([value]) <>

A sort comparator function that is run on the unique set of row values.

This is a static method of RadialMatrix

function row(a, b) {
  return a.localeCompare(b);
}

---

Rings <>

This is a global class, and extends all of the methods and functionality of Viz.

• Rings ⇐ Viz
  • new Rings()
  • .center(_) ↩︎
  • .hover([value]) ↩︎
  • .links(links, [formatter]) ↩︎
  • .nodeGroupBy([value]) ↩︎
  • .nodes(nodes, [formatter]) ↩︎
  • .size([value]) ↩︎
  • .sizeMax([value]) ↩︎
  • .sizeMin([value]) ↩︎
  • .sizeScale([value]) ↩︎

# new Rings()

Creates a ring visualization based on a defined set of nodes and edges. Click here for help getting started using the Rings class.

# Rings.center(_) <>

Sets the center node to be the node with the given id.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.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:

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 id 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 Rings, and is chainable with other methods of this Class.

# Rings.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 Rings, and is chainable with other methods of this Class.

# Rings.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the rings 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 Rings, and is chainable with other methods of this Class.

# Rings.size([value]) <>

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 Rings, and is chainable with other methods of this Class.

# Rings.sizeMax([value]) <>

If value is specified, sets the size scale maximum to the specified number and returns the current class instance. If value is not specified, returns the current size scale maximum. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.sizeMin([value]) <>

If value is specified, sets the size scale minimum to the specified number and returns the current class instance. If value is not specified, returns the current size scale minimum.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.sizeScale([value]) <>

If value is specified, sets the size scale to the specified string and returns the current class instance. If value is not specified, returns the current size scale.

This is a static method of Rings, and is chainable with other methods of this Class.

---

Sankey <>

This is a global class, and extends all of the methods and functionality of Viz.

• Sankey ⇐ Viz
  • new Sankey()
  • .hover([value]) ↩︎
  • .links(links) ↩︎
  • .linksSource([value]) ↩︎
  • .linksTarget([value]) ↩︎
  • .nodeAlign([value]) ↩︎
  • .nodeId([value]) ↩︎
  • .nodes(nodes) ↩︎
  • .nodePadding([value]) ↩︎
  • .nodeWidth([value]) ↩︎
  • .value(value)

# new Sankey()

Creates a sankey visualization based on a defined set of nodes and links. Click here for help getting started using the Sankey class.

# Sankey.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.links(links) <>

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 one way:

1. A String value matching the id of the node.

The value passed should be an Array of data. 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 Sankey, and is chainable with other methods of this Class.

# Sankey.linksSource([value]) <>

The key inside of each link Object that references the source node.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.linksTarget([value]) <>

The key inside of each link Object that references the target node.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeAlign([value]) <>

Sets the nodeAlign property of the sankey layout, which can either be "left", "right", "center", or "justify".

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeId([value]) <>

If value is specified, sets the node id accessor(s) to the specified array of values and returns the current class instance. If value is not specified, returns the current node group accessor.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodes(nodes) <>

The list of nodes to be used for drawing the network. The value passed must be an Array of data.

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 Sankey, and is chainable with other methods of this Class.

# Sankey.nodePadding([value]) <>

If value is specified, sets the padding of the node and returns the current class instance. If value is not specified, returns the current nodePadding. By default, the nodePadding size is 8.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeWidth([value]) <>

If value is specified, sets the width of the node and returns the current class instance. If value is not specified, returns the current nodeWidth. By default, the nodeWidth size is 30.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.value(value) <>

If value is specified, sets the width of the links and returns the current class instance. If value is not specified, returns the current value accessor.

This is a static method of Sankey

function value(d) {
  return d.value;
}

---

StackedArea <>

This is a global class, and extends all of the methods and functionality of Area.

# new StackedArea()

Creates a stacked area plot based on an array of data.

the equivalent of calling:

new d3plus.AreaPlot()
  .stacked(true)

---

Tree <>

This is a global class, and extends all of the methods and functionality of Viz.

• Tree ⇐ Viz
  • new Tree()
  • .orient([value])
  • .separation([value])

# new Tree()

Uses d3's tree layout to create a tidy tree chart based on an array of data.

# Tree.orient([value]) <>

If value is specified, sets the orientation to the specified value. If value is not specified, returns the current orientation.

This is a static method of Tree

# Tree.separation([value]) <>

If value is specified, sets the separation accessor to the specified function. If value is not specified, returns the current separation accessor.

From the d3-hierarchy documentation:

The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.

This is a static method of Tree

function separation(a, b) {
  return a.parent === b.parent ? 1 : 2;
}

---

Treemap <>

This is a global class, and extends all of the methods and functionality of Viz.

• Treemap ⇐ Viz
  • new Treemap()
  • .layoutPadding([value])
  • .sort([comparator])
  • .sum([value])
  • .tile([value])

# new Treemap()

Uses the d3 treemap layout to creates SVG rectangles based on an array of data. See this example for help getting started using the treemap generator.

# Treemap.layoutPadding([value]) <>

If value is specified, sets the inner and outer padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current padding accessor.

This is a static method of Treemap

# Treemap.sort([comparator]) <>

If comparator is specified, sets the sort order for the treemap 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 Treemap

function comparator(a, b) {
  return b.value - a.value;
}

# Treemap.sum([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 Treemap

function sum(d) {
  return d.sum;
}

# Treemap.tile([value]) <>

Sets the tiling method used when calcuating the size and position of the rectangles.

Can either be a string referring to a d3-hierarchy tiling method, or a custom function in the same format.

This is a static method of Treemap

---

Viz <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Viz ⇐ BaseClass
  • new Viz()
  • .labelPosition([value]) ↩︎
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .aggs([value]) ↩︎
  • .ariaHidden([value]) ↩︎
  • .attribution(value) ↩︎
  • .attributionStyle([value]) ↩︎
  • .backConfig([value]) ↩︎
  • .cache([value]) ↩︎
  • .color([value]) ↩︎
  • .colorScale([value]) ↩︎
  • .colorScaleConfig([value]) ↩︎
  • .colorScalePadding([value]) ↩︎
  • .colorScalePosition([value]) ↩︎
  • .colorScaleMaxSize([value]) ↩︎
  • .data(data, [formatter]) ↩︎
  • .dataCutoff([value]) ↩︎
  • .depth([value]) ↩︎
  • .detectResize(value) ↩︎
  • .detectResizeDelay(value) ↩︎
  • .detectVisible(value) ↩︎
  • .detectVisibleInterval(value) ↩︎
  • .discrete([value]) ↩︎
  • .downloadButton([value]) ↩︎
  • .downloadConfig([value]) ↩︎
  • .downloadPosition([value]) ↩︎
  • .duration([ms]) ↩︎
  • .filter([value]) ↩︎
  • .fontFamily([value]) ↩︎
  • .groupBy([value]) ↩︎
  • .height([value]) ↩︎
  • .hiddenColor([value]) ↩︎
  • .hiddenOpacity([value]) ↩︎
  • .hover([value]) ↩︎
  • .label([value]) ↩︎
  • .legend([value]) ↩︎
  • .legendConfig([value]) ↩︎
  • .legendFilterInvert([value]) ↩︎
  • .legendPadding([value]) ↩︎
  • .legendPosition([value]) ↩︎
  • .legendSort(value) ↩︎
  • .legendTooltip([value]) ↩︎
  • .loadingHTML([value]) ↩︎
  • .loadingMessage([value]) ↩︎
  • .messageMask([value]) ↩︎
  • .messageStyle([value]) ↩︎
  • .noDataHTML([value]) ↩︎
  • .noDataMessage([value]) ↩︎
  • .resizeContainer(selector) ↩︎
  • .scrollContainer(selector) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([value]) ↩︎
  • .subtitle([value]) ↩︎
  • .subtitleConfig([value]) ↩︎
  • .subtitlePadding([value]) ↩︎
  • .svgDesc([value]) ↩︎
  • .svgTitle([value]) ↩︎
  • .threshold([value]) ↩︎
  • .thresholdKey([value]) ↩︎
  • .thresholdName([value]) ↩︎
  • .time([value]) ↩︎
  • .timeFilter([value]) ↩︎
  • .timeline([value]) ↩︎
  • .timelineConfig([value]) ↩︎
  • .timelineDefault([value]) ↩︎
  • .timelinePadding([value]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .titlePadding([value]) ↩︎
  • .tooltip([value]) ↩︎
  • .tooltipConfig([value]) ↩︎
  • .total([value]) ↩︎
  • .totalConfig([value]) ↩︎
  • .totalFormat(value) ↩︎
  • .totalPadding([value]) ↩︎
  • .width([value]) ↩︎
  • .zoom(value) ↩︎
  • .zoomBrushHandleSize(value) ↩︎
  • .zoomBrushHandleStyle(value) ↩︎
  • .zoomBrushSelectionStyle(value) ↩︎
  • .zoomControlStyle(value) ↩︎
  • .zoomControlStyleActive(value) ↩︎
  • .zoomControlStyleHover(value) ↩︎
  • .zoomFactor(value) ↩︎
  • .zoomMax(value) ↩︎
  • .zoomPan(value) ↩︎
  • .zoomPadding(value) ↩︎
  • .zoomScroll([value]) ↩︎
  • .parent([value]) ↩︎
  • .shapeConfig([value]) ↩︎

# new Viz()

Creates an x/y plot based on an array of data. If data is specified, immediately draws the tree map based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method. See this example for help getting started using the treemap generator.

# Viz.labelPosition([value]) <>

The behavior to be used when calculating the position and size of each shape's label(s). The value passed can either be the String name of the behavior to be used for all shapes, or an accessor Function that will be provided each data point and will be expected to return the behavior to be used for that data point. The availability and options for this method depend on the default logic for each Shape. As an example, the values "outside" or "inside" can be set for Bar shapes, whose "auto" default will calculate the best position dynamically based on the available space.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.render([callback]) <>

Draws the visualization given the specified configuration.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.active([value]) <>

If value is specified, sets the active method to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.aggs([value]) <>

If value is specified, sets the aggregation method for each key in the object and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.ariaHidden([value]) <>

Sets the "aria-hidden" attribute of the containing SVG element. The default value is "false", but it you need to hide the SVG from screen readers set this property to "true".

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.attribution(value) <>

Sets text to be shown positioned absolute on top of the visualization in the bottom-right corner. This is most often used in Geomaps to display the copyright of map tiles. The text is rendered as HTML, so any valid HTML string will render as expected (eg. anchor links work).

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.attributionStyle([value]) <>

If value is specified, sets the config method for the back button and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.backConfig([value]) <>

If value is specified, sets the config method for the back button and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.cache([value]) <>

Enables a lru cache that stores up to 5 previously loaded files/URLs. Helpful when constantly writing over the data array with a URL in the render function of a react component.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.color([value]) <>

Defines the main color to be used for each data point in a visualization. Can be either an accessor function or a string key to reference in each data point. If a color value is returned, it will be used as is. If a string is returned, a unique color will be assigned based on the string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScale([value]) <>

Defines the value to be used for a color scale. Can be either an accessor function or a string key to reference in each data point.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScaleConfig([value]) <>

A pass-through to the config method of ColorScale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScalePadding([value]) <>

Tells the colorScale whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the colorScale appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScalePosition([value]) <>

Defines which side of the visualization to anchor the color scale. Acceptable values are "top", "bottom", "left", "right", and false. A false value will cause the color scale to not be displayed, but will still color shapes based on the scale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScaleMaxSize([value]) <>

Sets the maximum pixel size for drawing the color scale: width for horizontal scales and height for vertical scales.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.data(data, [formatter]) <>

Sets the primary data array to be used when drawing the visualization. The value passed should be an Array of objects or a String representing a filepath or URL to be loaded. The following filetypes are supported: csv, tsv, txt, and json.

If your data URL needs specific headers to be set, an Object with "url" and "headers" keys may also be passed.

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 array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.

If you would like to specify certain configuration options based on the yet-to-be-loaded data, you can also return a full config object from the data formatter (including the new data array as a key in the object).

If data is not specified, this method returns the current primary data array, which defaults to an empty array ([]);

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.dataCutoff([value]) <>

If the number of visible data points exceeds this number, the default hover behavior will be disabled (helpful for very large visualizations bogging down the DOM with opacity updates).

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.depth([value]) <>

If value is specified, sets the depth to the specified number and returns the current class instance. The value should correspond with an index in the groupBy array.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectResize(value) <>

If the width and/or height of a Viz is not user-defined, it is determined by the size of it's parent element. When this method is set to true, the Viz will listen for the window.onresize event and adjust it's dimensions accordingly.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectResizeDelay(value) <>

When resizing the browser window, this is the millisecond delay to trigger the resize event.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectVisible(value) <>

Toggles whether or not the Viz should try to detect if it visible in the current viewport. When this method is set to true, the Viz will only be rendered when it has entered the viewport either through scrolling or if it's display or visibility is changed.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectVisibleInterval(value) <>

The interval, in milliseconds, for checking if the visualization is visible on the page.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.discrete([value]) <>

If value is specified, sets the discrete accessor to the specified method name (usually an axis) and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadButton([value]) <>

Shows a button that allows for downloading the current visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadConfig([value]) <>

Sets specific options of the saveElement function used when downloading the visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadPosition([value]) <>

Defines which control group to add the download button into.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.duration([ms]) <>

If ms is specified, sets the animation duration to the specified number and returns the current class instance. If ms is not specified, returns the current animation duration.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.filter([value]) <>

If value is specified, sets the filter to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.fontFamily([value]) <>

If value is specified, sets the filter to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.groupBy([value]) <>

If value is specified, sets the group accessor(s) to the specified string, function, or array of values and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

function value(d) {
  return d.id;
}

# Viz.height([value]) <>

If value is specified, sets the overall height to the specified number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.hiddenColor([value]) <>

Defines the color used for legend shapes when the corresponding grouping is hidden from display (by clicking on the legend).

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.hiddenOpacity([value]) <>

Defines the opacity used for legend labels when the corresponding grouping is hidden from display (by clicking on the legend).

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.label([value]) <>

If value is specified, sets the label accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legend([value]) <>

If value is specified, toggles the legend based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendConfig([value]) <>

If value is specified, the object is passed to the legend's config method.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendFilterInvert([value]) <>

Defines the click functionality of categorical legend squares. When set to false, clicking will hide that category and shift+clicking will solo that category. When set to true, clicking with solo that category and shift+clicking will hide that category.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendPadding([value]) <>

Tells the legend whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the legend appears centered underneath the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendPosition([value]) <>

Defines which side of the visualization to anchor the legend. Expected values are "top", "bottom", "left", and "right".

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendSort(value) <>

A JavaScript sort comparator function used to sort the legend.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendTooltip([value]) <>

If value is specified, sets the config method for the legend tooltip and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.loadingHTML([value]) <>

Sets the inner HTML of the status message that is displayed when loading AJAX requests and displaying errors. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.loadingMessage([value]) <>

Toggles the visibility of the status message that is displayed when loading AJAX requests and displaying errors.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.messageMask([value]) <>

Sets the color of the mask used underneath the status message that is displayed when loading AJAX requests and displaying errors. Additionally, false will turn off the mask completely.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.messageStyle([value]) <>

Defines the CSS style properties for the status message that is displayed when loading AJAX requests and displaying errors.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.noDataHTML([value]) <>

Sets the inner HTML of the status message that is displayed when no data is supplied to the visualization. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.noDataMessage([value]) <>

Toggles the visibility of the status message that is displayed when no data is supplied to the visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.resizeContainer(selector) <>

If using resize detection, this method allow a custom override of the element to which the resize detection function gets attached.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.scrollContainer(selector) <>

If using scroll or visibility detection, this method allow a custom override of the element to which the scroll detection function gets attached.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element, which is undefined by default.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.shape([value]) <>

If value is specified, sets the shape accessor to the specified function or number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.shapeConfig([value]) <>

If value is specified, sets the config method for each shape and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.subtitle([value]) <>

If value is specified, sets the subtitle accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.subtitleConfig([value]) <>

If value is specified, sets the config method for the subtitle and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.subtitlePadding([value]) <>

Tells the subtitle whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the subtitle appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.svgDesc([value]) <>

If value is specified, sets the description accessor to the specified string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.svgTitle([value]) <>

If value is specified, sets the title accessor to the specified string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.threshold([value]) <>

If value is specified, sets the threshold for buckets to the specified function or string, and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.thresholdKey([value]) <>

If value is specified, sets the accesor for the value used in the threshold algorithm, and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.thresholdName([value]) <>

If value is specified, sets the label for the bucket item, and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.time([value]) <>

If value is specified, sets the time accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timeFilter([value]) <>

If value is specified, sets the time filter to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timeline([value]) <>

If value is specified, toggles the timeline based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timelineConfig([value]) <>

If value is specified, sets the config method for the timeline and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timelineDefault([value]) <>

Sets the starting time or range for the timeline. The value provided can either be a single Date/String, or an Array of 2 values representing the min and max.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timelinePadding([value]) <>

Tells the timeline whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the timeline appears centered underneath the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.title([value]) <>

If value is specified, sets the title accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.titleConfig([value]) <>

If value is specified, sets the config method for the title and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.titlePadding([value]) <>

Tells the title whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the title appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.tooltip([value]) <>

If value is specified, toggles the tooltip based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.tooltipConfig([value]) <>

If value is specified, sets the config method for the tooltip and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.total([value]) <>

If value is specified, sets the total accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.totalConfig([value]) <>

If value is specified, sets the config method for the total and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.totalFormat(value) <>

Formatter function for the value in the total bar.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.totalPadding([value]) <>

Tells the total whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the total appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.width([value]) <>

If value is specified, sets the overallwidth to the specified number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoom(value) <>

Toggles the ability to zoom/pan the visualization. Certain parameters for zooming are required to be hooked up on a visualization by visualization basis.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushHandleSize(value) <>

The pixel stroke-width of the zoom brush area.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushHandleStyle(value) <>

An object containing CSS key/value pairs that is used to style the outer handle area of the zoom brush. Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushSelectionStyle(value) <>

An object containing CSS key/value pairs that is used to style the inner selection area of the zoom brush. Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyle(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyleActive(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button when active (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyleHover(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button on hover (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomFactor(value) <>

The multiplier that is used in with the control buttons when zooming in and out.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomMax(value) <>

If value is specified, sets the max zoom scale to the specified number and returns the current class instance. If value is not specified, returns the current max zoom scale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomPan(value) <>

If value is specified, toggles panning to the specified boolean and returns the current class instance. If value is not specified, returns the current panning value.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomPadding(value) <>

A pixel value to be used to pad all sides of a zoomed area.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomScroll([value]) <>

If value is specified, toggles scroll zooming to the specified boolean and returns the current class instance. If value is not specified, returns the current scroll zooming value.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.parent([value]) <>

If value is specified, sets the parent config used by the wrapper and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.shapeConfig([value]) <>

If value is specified, sets the config method for each shape and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

---

Axis <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Axis ⇐ BaseClass
  • new Axis()
  • .render([callback]) ↩︎
  • .align([value]) ↩︎
  • .barConfig([value]) ↩︎
  • .data([value]) ↩︎
  • .domain([value]) ↩︎
  • .duration([value]) ↩︎
  • .grid([value]) ↩︎
  • .gridConfig([value]) ↩︎
  • .gridLog([value]) ↩︎
  • .gridSize([value]) ↩︎
  • .height([value]) ↩︎
  • .labels([value]) ↩︎
  • .labelOffset([value]) ↩︎
  • .labelRotation([value]) ↩︎
  • .maxSize(_) ↩︎
  • .minSize(_) ↩︎
  • .orient([orient]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .paddingInner([value]) ↩︎
  • .paddingOuter([value]) ↩︎
  • .range([value]) ↩︎
  • .rounding([value]) ↩︎
  • .roundingInsideMinPrefix([value]) ↩︎
  • .roundingInsideMinSuffix([value]) ↩︎
  • .roundingInsideMaxPrefix([value]) ↩︎
  • .roundingInsideMaxSuffix([value]) ↩︎
  • .scale([value]) ↩︎
  • .scalePadding([value]) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([value]) ↩︎
  • .tickFormat([value]) ↩︎
  • .ticks([value]) ↩︎
  • .tickSize([value]) ↩︎
  • .tickSuffix([value]) ↩︎
  • .timeLocale([value]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .width([value]) ↩︎

# new Axis()

Creates an SVG scale based on an array of data.

# Axis.render([callback]) <>

Renders the current Axis to the page. If a callback is specified, it will be called once the legend is done drawing.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.align([value]) <>

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.barConfig([value]) <>

If value is specified, sets the axis line style and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.data([value]) <>

An array of data points, which helps determine which ticks should be shown and which time resolution should be displayed.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.domain([value]) <>

If value is specified, sets the scale domain of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.duration([value]) <>

If value is specified, sets the transition duration of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.grid([value]) <>

If value is specified, sets the grid values of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridConfig([value]) <>

If value is specified, sets the grid config of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridLog([value]) <>

If value is specified, sets the grid behavior of the axis when scale is logarithmic and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.gridSize([value]) <>

If value is specified, sets the grid size of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.height([value]) <>

If value is specified, sets the overall height of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labels([value]) <>

If value is specified, sets the visible tick labels of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labelOffset([value]) <>

If value is specified, sets whether offsets will be used to position some labels further away from the axis in order to allow space for the text.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.labelRotation([value]) <>

If value is specified, sets whether whether horizontal axis labels are rotated -90 degrees.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.maxSize(_) <>

If value is specified, sets the maximum size allowed for the space that contains the axis tick labels and title.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.minSize(_) <>

If value is specified, sets the minimum size alloted for the space that contains the axis tick labels and title.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.orient([orient]) <>

If orient is specified, sets the orientation of the shape and returns the current class instance. If orient is not specified, returns the current orientation.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.outerBounds() <>

If called after the elements have been drawn to DOM, will returns the outer bounds of the axis content.

This is a static method of Axis

{"width": 180, "height": 24, "x": 10, "y": 20}

# Axis.padding([value]) <>

If value is specified, sets the padding between each tick label to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.paddingInner([value]) <>

If value is specified, sets the inner padding of band scale to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.paddingOuter([value]) <>

If value is specified, sets the outer padding of band scales to the specified number and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.range([value]) <>

If value is specified, sets the scale range (in pixels) of the axis and returns the current class instance. The given array must have 2 values, but one may be undefined to allow the default behavior for that value.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.rounding([value]) <>

Sets the rounding method, so that more evenly spaced ticks appear at the extents of the scale. Can be set to "none" (default), "outside", or "inside".

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMinPrefix([value]) <>

Sets the prefix used for the minimum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMinSuffix([value]) <>

Sets the suffix used for the minimum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMaxPrefix([value]) <>

Sets the prefix used for the maximum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.roundingInsideMaxSuffix([value]) <>

Sets the suffix used for the maximum value of "inside" rounding scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.scale([value]) <>

If value is specified, sets the scale of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.scalePadding([value]) <>

Sets the "padding" property of the scale, often used in point scales.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.shape([value]) <>

If value is specified, sets the tick shape constructor and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.shapeConfig([value]) <>

If value is specified, sets the tick style of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickFormat([value]) <>

If value is specified, sets the tick formatter and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.ticks([value]) <>

If value is specified, sets the tick values of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickSize([value]) <>

If value is specified, sets the tick size of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.tickSuffix([value]) <>

Sets the behavior of the abbreviations when you are using linear scale. This method accepts two options: "normal" (uses formatAbbreviate to determinate the abbreviation) and "smallest" (uses suffix from the smallest tick as reference in every tick).

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.timeLocale([value]) <>

Defines a custom locale object to be used in time scale. This object must include the following properties: dateTime, date, time, periods, days, shortDays, months, shortMonths. For more information, you can revise d3p.d3-time-format.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.title([value]) <>

If value is specified, sets the title of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.titleConfig([value]) <>

If value is specified, sets the title configuration of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

# Axis.width([value]) <>

If value is specified, sets the overall width of the axis and returns the current class instance.

This is a static method of Axis, and is chainable with other methods of this Class.

---

AxisBottom <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisBottom()

Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base Axis class.

---

AxisLeft <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisLeft()

Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base Axis class.

---

AxisRight <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisRight()

Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base Axis class.

---

AxisTop <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisTop()

Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base Axis class.

---

ColorScale <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• ColorScale ⇐ BaseClass
  • new ColorScale()
  • .render([callback]) ↩︎
  • .axisConfig([value]) ↩︎
  • .align([value]) ↩︎
  • .buckets([value]) ↩︎
  • .bucketAxis([value]) ↩︎
  • .bucketFormat([value]) ↩︎
  • .bucketJoiner([value]) ↩︎
  • .centered([value]) ↩︎
  • .color([value]) ↩︎
  • .colorMax([value]) ↩︎
  • .colorMid([value]) ↩︎
  • .colorMin([value]) ↩︎
  • .data([data]) ↩︎
  • .domain([value]) ↩︎
  • .duration([value]) ↩︎
  • .height([value]) ↩︎
  • .labelConfig([value]) ↩︎
  • .labelMin([value]) ↩︎
  • .labelMax([value]) ↩︎
  • .legendConfig([value]) ↩︎
  • .midpoint([value]) ↩︎
  • .orient([value]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .rectConfig([value]) ↩︎
  • .scale([value]) ↩︎
  • .select([selector]) ↩︎
  • .size([value]) ↩︎
  • .value([value]) ↩︎
  • .width([value]) ↩︎

# new ColorScale()

Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.

# ColorScale.render([callback]) <>

Renders the current ColorScale to the page. If a callback is specified, it will be called once the ColorScale is done drawing.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.axisConfig([value]) <>

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Axis. An example usage of this method can be seen here.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.align([value]) <>

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.buckets([value]) <>

The number of discrete buckets to create in a bucketed color scale. Will be overridden by any custom Array of colors passed to the color method. Optionally, users can supply an Array of values used to separate buckets, such as [0, 10, 25, 50, 90] for a percentage scale. This value would create 4 buckets, with each value representing the break point between each bucket (so 5 values makes 4 buckets).

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.bucketAxis([value]) <>

Determines whether or not to use an Axis to display bucket scales (both "buckets" and "jenks"). When set to false, bucketed scales will use the Legend class to display squares for each range of data. When set to true, bucketed scales will be displayed on an Axis, similar to "linear" scales.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.bucketFormat([value]) <>

A function for formatting the labels associated to each bucket in a bucket-type scale ("jenks", "quantile", etc). The function is passed four arguments: the start value of the current bucket, it's index in the full Array of buckets, the full Array of buckets, and an Array of every value present in the data used to construct the buckets. Keep in mind that the end value for the bucket is not actually the next bucket in the list, but includes every value up until that next bucket value (less than, but not equal to). By default, d3plus will make the end value slightly less than it's current value, so that it does not overlap with the start label for the next bucket.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.bucketJoiner([value]) <>

A function that receives the minimum and maximum values of a bucket, and is expected to return the full label.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.centered([value]) <>

Determines whether or not to display a midpoint centered Axis. Does not apply to quantile scales.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.color([value]) <>

Overrides the default internal logic of colorMin, colorMid, and colorMax to only use just this specified color. If a single color is given as a String, then the scale is interpolated by lightening that color. Otherwise, the function expects an Array of color values to be used in order for the scale.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.colorMax([value]) <>

Defines the color to be used for numbers greater than the value of the midpoint on the scale (defaults to 0). Colors in between this value and the value of colorMid will be interpolated, unless a custom Array of colors has been specified using the color method.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.colorMid([value]) <>

Defines the color to be used for the midpoint of a diverging scale, based on the current value of the midpoint method (defaults to 0). Colors in between this value and the values of colorMin and colorMax will be interpolated, unless a custom Array of colors has been specified using the color method.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.colorMin([value]) <>

Defines the color to be used for numbers less than the value of the midpoint on the scale (defaults to 0). Colors in between this value and the value of colorMid will be interpolated, unless a custom Array of colors has been specified using the color method.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.domain([value]) <>

In a linear scale, this Array of 2 values defines the min and max values used in the color scale. Any values outside of this range will be mapped to the nearest color value.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.duration([value]) <>

If value is specified, sets the transition duration of the ColorScale and returns the current class instance. If value is not specified, returns the current duration.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.height([value]) <>

If value is specified, sets the overall height of the ColorScale and returns the current class instance. If value is not specified, returns the current height value.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.labelConfig([value]) <>

A pass-through for the TextBox class used to style the labelMin and labelMax text.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.labelMin([value]) <>

Defines a text label to be displayed off of the end of the minimum point in the scale (currently only available in horizontal orientation).

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.labelMax([value]) <>

Defines a text label to be displayed off of the end of the maximum point in the scale (currently only available in horizontal orientation).

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.legendConfig([value]) <>

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Axis. An example usage of this method can be seen here.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.midpoint([value]) <>

The number value to be used as the anchor for colorMid, and defines the center point of the diverging color scale.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.orient([value]) <>

Sets the flow of the items inside the ColorScale. If no value is passed, the current flow will be returned.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.outerBounds() <>

If called after the elements have been drawn to DOM, will returns the outer bounds of the ColorScale content.

This is a static method of ColorScale

{"width": 180, "height": 24, "x": 10, "y": 20}

# ColorScale.padding([value]) <>

If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.rectConfig([value]) <>

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Rect. An example usage of this method can be seen here.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.scale([value]) <>

If value is specified, sets the scale of the ColorScale and returns the current class instance. If value is not specified, returns the current scale value.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.size([value]) <>

The height of horizontal color scales, and width when positioned vertical.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.value([value]) <>

If value is specified, sets the value accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current value accessor.

This is a static method of ColorScale, and is chainable with other methods of this Class.

function value(d) {
  return d.value;
}

# ColorScale.width([value]) <>

If value is specified, sets the overall width of the ColorScale and returns the current class instance. If value is not specified, returns the current width value.

This is a static method of ColorScale, and is chainable with other methods of this Class.

---

Legend <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Legend ⇐ BaseClass
  • new Legend()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .align([value]) ↩︎
  • .data([data]) ↩︎
  • .direction([value]) ↩︎
  • .duration([value]) ↩︎
  • .height([value]) ↩︎
  • .hover([value]) ↩︎
  • .id([value]) ↩︎
  • .label([value]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([config]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .verticalAlign([value]) ↩︎
  • .width([value]) ↩︎

# new Legend()

Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.

# Legend.render([callback]) <>

Renders the current Legend to the page. If a callback is specified, it will be called once the legend is done drawing.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.active([value]) <>

If value is specified, sets the active method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current active method.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.align([value]) <>

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.direction([value]) <>

Sets the flow of the items inside the legend. If no value is passed, the current flow will be returned.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.duration([value]) <>

If value is specified, sets the transition duration of the legend and returns the current class instance. If value is not specified, returns the current duration.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.height([value]) <>

If value is specified, sets the overall height of the legend and returns the current class instance. If value is not specified, returns the current height value.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.hover([value]) <>

If value is specified, sets the hover method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current hover method.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.id([value]) <>

If value is specified, sets the id accessor to the specified function and returns the current class instance. If value is not specified, returns the current id accessor.

This is a static method of Legend, and is chainable with other methods of this Class.

function value(d) {
  return d.id;
}

# Legend.label([value]) <>

If value is specified, sets the label accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current label accessor, which is the id accessor by default.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.outerBounds() <>

If called after the elements have been drawn to DOM, will returns the outer bounds of the legend content.

This is a static method of Legend

{"width": 180, "height": 24, "x": 10, "y": 20}

# Legend.padding([value]) <>

If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.shape([value]) <>

If value is specified, sets the shape accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current shape accessor.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.shapeConfig([config]) <>

If config is specified, sets the methods that correspond to the key/value pairs for each shape and returns the current class instance. If config is not specified, returns the current shape configuration.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.title([value]) <>

If value is specified, sets the title of the legend and returns the current class instance. If value is not specified, returns the current title.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.titleConfig([value]) <>

If value is specified, sets the title configuration of the legend and returns the current class instance. If value is not specified, returns the current title configuration.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.verticalAlign([value]) <>

If value is specified, sets the vertical alignment to the specified value and returns the current class instance. If value is not specified, returns the current vertical alignment.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.width([value]) <>

If value is specified, sets the overall width of the legend and returns the current class instance. If value is not specified, returns the current width value.

This is a static method of Legend, and is chainable with other methods of this Class.

---

TextBox <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• TextBox ⇐ BaseClass
  • new TextBox()
  • .render([callback])
  • .ariaHidden(value) ↩︎
  • .data([data]) ↩︎
  • .delay([value]) ↩︎
  • .duration([value]) ↩︎
  • .ellipsis([value]) ↩︎
  • .fontColor([value]) ↩︎
  • .fontFamily([value]) ↩︎
  • .fontMax([value]) ↩︎
  • .fontMin([value]) ↩︎
  • .fontOpacity([value]) ↩︎
  • .fontResize([value]) ↩︎
  • .fontSize([value]) ↩︎
  • .fontStroke([value]) ↩︎
  • .fontStrokeWidth([value]) ↩︎
  • .fontWeight([value]) ↩︎
  • .height([value]) ↩︎
  • .html([value = { i: 'font-style: italic;', em: 'font-style: italic;', b: 'font-weight: bold;', strong: 'font-weight: bold;' }]) ↩︎
  • .id([value]) ↩︎
  • .lineHeight([value]) ↩︎
  • .maxLines([value]) ↩︎
  • .overflow([value]) ↩︎
  • .padding([value]) ↩︎
  • .pointerEvents([value]) ↩︎
  • .rotate([value]) ↩︎
  • .rotateAnchor(_) ↩︎
  • .select([selector]) ↩︎
  • .split([value]) ↩︎
  • .text([value]) ↩︎
  • .textAnchor([value]) ↩︎
  • .verticalAlign([value]) ↩︎
  • .width([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

# new TextBox()

Creates a wrapped text box for each point in an array of data. See this example for help getting started using the TextBox class.

# TextBox.render([callback]) <>

Renders the text boxes. If a callback is specified, it will be called once the shapes are done drawing.

This is a static method of TextBox

# TextBox.ariaHidden(value) <>

If value is specified, sets the aria-hidden attribute to the specified function or string and returns the current class instance.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.data([data]) <>

Sets the data array to the specified array. A text box will be drawn for each object in the array.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.delay([value]) <>

Sets the animation delay to the specified number in milliseconds.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.duration([value]) <>

Sets the animation duration to the specified number in milliseconds.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.ellipsis([value]) <>

Sets the function that handles what to do when a line is truncated. It should return the new value for the line, and is passed 2 arguments: the String of text for the line in question, and the number of the line. By default, an ellipsis is added to the end of any line except if it is the first word that cannot fit (in that case, an empty string is returned).

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(text, line) {
  return line ? text.replace(/\.|,$/g, "") + "..." : "";
}

# TextBox.fontColor([value]) <>

Sets the font color to the specified accessor function or static string, which is inferred from the DOM selection by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontFamily([value]) <>

Defines the font-family to be used. The value passed can be either a String name of a font, a comma-separated list of font-family fallbacks, an Array of fallbacks, or a Function that returns either a String or an Array. If supplying multiple fallback fonts, the fontExists function will be used to determine the first available font on the client's machine.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontMax([value]) <>

Sets the maximum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when dynamically resizing fonts.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontMin([value]) <>

Sets the minimum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when dynamically resizing fonts.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontOpacity([value]) <>

Sets the font opacity to the specified accessor function or static number between 0 and 1.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontResize([value]) <>

Toggles font resizing, which can either be defined as a static boolean for all data points, or an accessor function that returns a boolean. See this example for a side-by-side comparison.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontSize([value]) <>

Sets the font size to the specified accessor function or static number (which corresponds to pixel units), which is inferred from the DOM selection by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontStroke([value]) <>

Sets the font stroke color for the rendered text.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontStrokeWidth([value]) <>

Sets the font stroke width for the rendered text.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.fontWeight([value]) <>

Sets the font weight to the specified accessor function or static number, which is inferred from the DOM selection by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.height([value]) <>

Sets the height for each box to the specified accessor function or static number.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d) {
  return d.height || 200;
}

# TextBox.html([value = { i: 'font-style: italic;', em: 'font-style: italic;', b: 'font-weight: bold;', strong: 'font-weight: bold;' }]) <>

Configures the ability to render simple HTML tags. Defaults to supporting <b>, <strong>, <i>, and <em>, set to false to disable or provide a mapping of tags to svg styles

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.id([value]) <>

Defines the unique id for each box to the specified accessor function or static number.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d, i) {
  return d.id || i + "";
}

# TextBox.lineHeight([value]) <>

Sets the line height to the specified accessor function or static number, which is 1.2 times the font size by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.maxLines([value]) <>

Restricts the maximum number of lines to wrap onto, which is null (unlimited) by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.overflow([value]) <>

Sets the text overflow to the specified accessor function or static boolean.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.padding([value]) <>

Sets the padding to the specified accessor function, CSS shorthand string, or static number, which is 0 by default.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.pointerEvents([value]) <>

Sets the pointer-events to the specified accessor function or static string.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.rotate([value]) <>

Sets the rotate percentage for each box to the specified accessor function or static string.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.rotateAnchor(_) <>

Sets the anchor point around which to rotate the text box.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.select([selector]) <>

Sets the SVG container element to the specified d3 selector or DOM element. If not explicitly specified, an SVG element will be added to the page for use.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.split([value]) <>

Sets the word split behavior to the specified function, which when passed a string is expected to return that string split into an array of words.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.text([value]) <>

Sets the text for each box to the specified accessor function or static string.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d) {
  return d.text;
}

# TextBox.textAnchor([value]) <>

Sets the horizontal text anchor to the specified accessor function or static string, whose values are analagous to the SVG text-anchor property.

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.verticalAlign([value]) <>

Sets the vertical alignment to the specified accessor function or static string. Accepts "top", "middle", and "bottom".

This is a static method of TextBox, and is chainable with other methods of this Class.

# TextBox.width([value]) <>

Sets the width for each box to the specified accessor function or static number.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d) {
  return d.width || 200;
}

# TextBox.x([value]) <>

Sets the x position for each box to the specified accessor function or static number. The number given should correspond to the left side of the textBox.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d) {
  return d.x || 0;
}

# TextBox.y([value]) <>

Sets the y position for each box to the specified accessor function or static number. The number given should correspond to the top side of the textBox.

This is a static method of TextBox, and is chainable with other methods of this Class. default accessor

function(d) {
  return d.y || 0;
}

---

Timeline <>

This is a global class, and extends all of the methods and functionality of Axis.

• Timeline ⇐ Axis
  • .render([callback]) ↩︎
  • .buttonPadding([value]) ↩︎
  • .brushing([value]) ↩︎
  • .brushFilter([value]) ↩︎
  • .brushMin([value]) ↩︎
  • .buttonAlign([value]) ↩︎
  • .buttonBehavior([value]) ↩︎
  • .buttonHeight([value]) ↩︎
  • .handleConfig([value]) ↩︎
  • .handleSize([value]) ↩︎
  • .on([typename], [listener]) ↩︎
  • .playButton([value]) ↩︎
  • .playButtonConfig([value]) ↩︎
  • .playButtonInterval([value]) ↩︎
  • .selectionConfig([value]) ↩︎
  • .selection([value]) ↩︎
  • .snapping([value]) ↩︎

# Timeline.render([callback]) <>

Draws the timeline.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.buttonPadding([value]) <>

If value is specified, sets the button padding and returns the current class instance. If value is not specified, returns the current button padding.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.brushing([value]) <>

If value is specified, toggles the brushing value and returns the current class instance. If value is not specified, returns the current brushing value.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.brushFilter([value]) <>

If value is specified, sets the brush event filter and returns the current class instance. If value is not specified, returns the current brush event filter.

This is a static method of Timeline, and is chainable with other methods of this Class.

function() {
  return !event.button && event.detail < 2;
}

# Timeline.brushMin([value]) <>

Sets the minimum number of "ticks" to allow to be highlighted when using "ticks" buttonBehavior. Helpful when using x/y plots where you don't want the user to select less than 2 time periods. Value passed can either be a static Number, or a function that is expected to return a Number.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.buttonAlign([value]) <>

If value is specified, toggles the horizontal alignment of the button timeline. Accepted values are "start", "middle" and "end". If value is not specified, returns the current button value.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.buttonBehavior([value]) <>

If value is specified, toggles the style of the timeline. Accepted values are "auto", "buttons" and "ticks". If value is not specified, returns the current button value.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.buttonHeight([value]) <>

If value is specified, sets the button height and returns the current class instance. If value is not specified, returns the current button height.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.handleConfig([value]) <>

If value is specified, sets the handle style and returns the current class instance. If value is not specified, returns the current handle style.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.handleSize([value]) <>

If value is specified, sets the handle size and returns the current class instance. If value is not specified, returns the current handle size.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.on([typename], [listener]) <>

Adds or removes a listener for the specified brush event typename. If a listener is not specified, returns the currently-assigned listener for the specified event typename. Mirrors the core d3-brush behavior.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.playButton([value]) <>

Determines the visibility of the play button to the left the of timeline, which will cycle through the available periods at a rate defined by the playButtonInterval method.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.playButtonConfig([value]) <>

The config Object for the Rect class used to create the playButton.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.playButtonInterval([value]) <>

The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.selectionConfig([value]) <>

If value is specified, sets the selection style and returns the current class instance. If value is not specified, returns the current selection style.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.selection([value]) <>

If value is specified, sets the selection and returns the current class instance. If value is not specified, returns the current selection. Defaults to the most recent year in the timeline.

This is a static method of Timeline, and is chainable with other methods of this Class.

# Timeline.snapping([value]) <>

If value is specified, toggles the snapping value and returns the current class instance. If value is not specified, returns the current snapping value.

This is a static method of Timeline, and is chainable with other methods of this Class.

---

Tooltip <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Tooltip ⇐ BaseClass
  • new Tooltip()
  • .arrow([value])
  • .arrowStyle([value])
  • .background([value])
  • .body([value])
  • .bodyStyle([value])
  • .border([value])
  • .borderRadius([value])
  • .className([value])
  • .data([data])
  • .footer([value])
  • .footerStyle([value])
  • .height([value])
  • .id([value])
  • .offset([value])
  • .padding([value])
  • .pointerEvents([value])
  • .position([value])
  • .tableStyle([value])
  • .tbody([value])
  • .tbodyStyle([value])
  • .thead([value])
  • .theadStyle([value])
  • .title([value])
  • .titleStyle([value])
  • .tooltipStyle([value])
  • .trStyle([value])
  • .tdStyle([value])
  • .width([value])

# new Tooltip()

Creates HTML tooltips in the body of a webpage.

# Tooltip.arrow([value]) <>

Sets the inner HTML content of the arrow element, which by default is empty.

This is a static method of Tooltip default accessor

   function value(d) {
  return d.arrow || "";
}

# Tooltip.arrowStyle([value]) <>

If value is specified, sets the arrow styles to the specified values and returns this generator. If value is not specified, returns the current arrow styles.

This is a static method of Tooltip default styles

   {
     "content": "",
     "border-width": "10px",
     "border-style": "solid",
     "border-color": "rgba(255, 255, 255, 0.75) transparent transparent transparent",
     "position": "absolute"
   }

# Tooltip.background([value]) <>

If value is specified, sets the background accessor to the specified function or string and returns this generator. If value is not specified, returns the current background accessor.

This is a static method of Tooltip

# Tooltip.body([value]) <>

If value is specified, sets the body accessor to the specified function or string and returns this generator. If value is not specified, returns the current body accessor.

This is a static method of Tooltip default accessor

function value(d) {
  return d.body || "";
}

# Tooltip.bodyStyle([value]) <>

If value is specified, sets the body styles to the specified values and returns this generator. If value is not specified, returns the current body styles.

This is a static method of Tooltip default styles

{
  "font-size": "12px",
  "font-weight": "400"
}

# Tooltip.border([value]) <>

If value is specified, sets the border accessor to the specified function or string and returns this generator. If value is not specified, returns the current border accessor.

This is a static method of Tooltip

# Tooltip.borderRadius([value]) <>

If value is specified, sets the border-radius accessor to the specified function or string and returns this generator. If value is not specified, returns the current border-radius accessor.

This is a static method of Tooltip

# Tooltip.className([value]) <>

If value is specified, sets the class name to the specified string and returns this generator. If value is not specified, returns the current class name.

This is a static method of Tooltip

# Tooltip.data([data]) <>

If data is specified, sets the data array to the specified array and returns this generator. If data is not specified, returns the current data array.

This is a static method of Tooltip

# Tooltip.footer([value]) <>

If value is specified, sets the footer accessor to the specified function or string and returns this generator. If value is not specified, returns the current footer accessor.

This is a static method of Tooltip default accessor

function value(d) {
  return d.footer || "";
}

# Tooltip.footerStyle([value]) <>

If value is specified, sets the footer styles to the specified values and returns this generator. If value is not specified, returns the current footer styles.

This is a static method of Tooltip default styles

{
  "font-size": "12px",
  "font-weight": "400"
}

# Tooltip.height([value]) <>

If value is specified, sets the height accessor to the specified function or string and returns this generator. If value is not specified, returns the current height accessor.

This is a static method of Tooltip

# Tooltip.id([value]) <>

If value is specified, sets the id accessor to the specified function or string and returns this generator. If value is not specified, returns the current id accessor.

This is a static method of Tooltip default accessor

function value(d, i) {
  return d.id || "" + i;
}

# Tooltip.offset([value]) <>

If value is specified, sets the offset accessor to the specified function or number and returns this generator. If value is not specified, returns the current offset accessor.

This is a static method of Tooltip

# Tooltip.padding([value]) <>

If value is specified, sets the padding accessor to the specified function or string and returns this generator. If value is not specified, returns the current padding accessor.

This is a static method of Tooltip

# Tooltip.pointerEvents([value]) <>

If value is specified, sets the pointer-events accessor to the specified function or string and returns this generator. If value is not specified, returns the current pointer-events accessor.

This is a static method of Tooltip

# Tooltip.position([value]) <>

If value is specified, sets the position accessor to the specified function or array and returns this generator. If value is not specified, returns the current position accessor. If value is an HTMLElement, anchors the Tooltip to that HTMLElement. If value is a selection string, anchors the Tooltip to the HTMLElement selected by that string. Otherwise, coordinate points must be in reference to the client viewport, not the overall page.

This is a static method of Tooltip default accessor

   function value(d) {
    return [d.x, d.y];
  }

# Tooltip.tableStyle([value]) <>

If value is specified, sets the table styles to the specified values and returns this generator. If value is not specified, returns the current table styles.

This is a static method of Tooltip default styles

{
  "border-collapse": "collapse",
  "border-spacing": "0",
  "width": "100%"
}

# Tooltip.tbody([value]) <>

If value is specified, sets the contents of the table body to the specified array of functions or strings and returns this generator. If value is not specified, returns the current table body data.

This is a static method of Tooltip

# Tooltip.tbodyStyle([value]) <>

If value is specified, sets the table body styles to the specified values and returns this generator. If value is not specified, returns the current table body styles.

This is a static method of Tooltip default styles

{
  "font-size": "12px",
  "font-weight": "600",
  "text-align": "center"
}

# Tooltip.thead([value]) <>

If value is specified, sets the contents of the table head to the specified array of functions or strings and returns this generator. If value is not specified, returns the current table head data.

This is a static method of Tooltip

# Tooltip.theadStyle([value]) <>

If value is specified, sets the table head styles to the specified values and returns this generator. If value is not specified, returns the current table head styles.

This is a static method of Tooltip default styles

{
  "font-size": "12px",
  "font-weight": "600",
  "text-align": "center"
}

# Tooltip.title([value]) <>

If value is specified, sets the title accessor to the specified function or string and returns this generator. If value is not specified, returns the current title accessor.

This is a static method of Tooltip default accessor

function value(d) {
  return d.title || "";
}

# Tooltip.titleStyle([value]) <>

If value is specified, sets the title styles to the specified values and returns this generator. If value is not specified, returns the current title styles.

This is a static method of Tooltip default styles

{
  "font-size": "14px",
  "font-weight": "600",
  "padding-bottom": "5px"
}

# Tooltip.tooltipStyle([value]) <>

If value is specified, sets the overall tooltip styles to the specified values and returns this generator. If value is not specified, returns the current title styles.

This is a static method of Tooltip default styles

{
  "font-family": "'Inter', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif",
  "font-size": "14px",
  "font-weight": "600",
  "padding-bottom": "5px"
}

# Tooltip.trStyle([value]) <>

An object with CSS keys and values to be applied to all

elements inside of each .

This is a static method of Tooltip default styles

  {
    "border-top": "1px solid rgba(0, 0, 0, 0.1)"
  }

# Tooltip.tdStyle([value]) <>

An object with CSS keys and values to be applied to all

elements inside of each .

This is a static method of Tooltip

# Tooltip.width([value]) <>

If value is specified, sets the width accessor to the specified function or string and returns this generator. If value is not specified, returns the current width accessor.

This is a static method of Tooltip

---

Area <>

This is a global class, and extends all of the methods and functionality of Shape.

• Area ⇐ Shape
  • new Area()
  • .render([callback]) ↩︎
  • .curve([value]) ↩︎
  • .defined([value]) ↩︎
  • .x([value]) ↩︎
  • .x0([value]) ↩︎
  • .x1([value]) ↩︎
  • .y([value]) ↩︎
  • .y0([value]) ↩︎
  • .y1([value]) ↩︎

# new Area()

Creates SVG areas based on an array of data.

# Area.render([callback]) <>

Draws the area polygons.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.curve([value]) <>

If value is specified, sets the area curve to the specified string and returns the current class instance. If value is not specified, returns the current area curve.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.defined([value]) <>

If value is specified, sets the defined accessor to the specified function and returns the current class instance. If value is not specified, returns the current defined accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.x([value]) <>

If value is specified, sets the x accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.x0([value]) <>

If value is specified, sets the x0 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x0 accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.x1([value]) <>

If value is specified, sets the x1 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x1 accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.y([value]) <>

If value is specified, sets the y accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.y0([value]) <>

If value is specified, sets the y0 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y0 accessor.

This is a static method of Area, and is chainable with other methods of this Class.

# Area.y1([value]) <>

If value is specified, sets the y1 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y1 accessor.

This is a static method of Area, and is chainable with other methods of this Class.

---

Bar <>

This is a global class, and extends all of the methods and functionality of Shape.

• Bar ⇐ Shape
  • new Bar()
  • .render([callback]) ↩︎
  • .height([value]) ↩︎
  • .width([value]) ↩︎
  • .x0([value]) ↩︎
  • .x1([value]) ↩︎
  • .y0([value]) ↩︎
  • .y1([value]) ↩︎

# new Bar()

Creates SVG areas based on an array of data.

# Bar.render([callback]) <>

Draws the bars.

This is a static method of Bar, and is chainable with other methods of this Class.

# Bar.height([value]) <>

If value is specified, sets the height accessor to the specified function or number and returns the current class instance.

This is a static method of Bar, and is chainable with other methods of this Class.

function(d) {
  return d.height;
}

# Bar.width([value]) <>

If value is specified, sets the width accessor to the specified function or number and returns the current class instance.

This is a static method of Bar, and is chainable with other methods of this Class.

function(d) {
  return d.width;
}

# Bar.x0([value]) <>

If value is specified, sets the x0 accessor to the specified function or number and returns the current class instance.

This is a static method of Bar