# d3plus-plot A reusable javascript x/y plot built on D3. ## Installing If using npm, `npm install d3plus-plot`. Otherwise, you can download the [latest release from GitHub](https://github.com/d3plus/d3plus-plot/releases/latest) or load from a [CDN](https://cdn.jsdelivr.net/npm/d3plus-plot@1). ```js import modules from "d3plus-plot"; ``` d3plus-plot can be loaded as a standalone library or bundled as part of [D3plus](https://github.com/d3plus/d3plus). ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3plus` global is exported: ```html ``` ## Examples Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using [d3plus-react](https://github.com/d3plus/d3plus-react/). These examples are powered by the [d3plus-storybook](https://github.com/d3plus/d3plus-storybook/) repo, and PRs are always welcome. :beers: ## API Reference ##### * [AreaPlot](#AreaPlot) * [BarChart](#BarChart) * [BoxWhisker](#BoxWhisker) * [BumpChart](#BumpChart) * [LinePlot](#LinePlot) * [Plot](#Plot) * [Radar](#Radar) * [StackedArea](#StackedArea) --- #### **AreaPlot** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/AreaPlot.js#L5) This is a global class, and extends all of the methods and functionality of [Plot](#Plot). # new **AreaPlot**() Creates an area plot based on an array of data. the equivalent of calling: ```js new d3plus.Plot() .baseline(0) .discrete("x") .shape("Area") ``` --- #### **BarChart** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/BarChart.js#L5) This is a global class, and extends all of the methods and functionality of [Plot](#Plot). # new **BarChart**() Creates a bar chart based on an array of data. the equivalent of calling: ```js new d3plus.Plot() .baseline(0) .discrete("x") .shape("Bar") ``` --- #### **BoxWhisker** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/BoxWhisker.js#L5) This is a global class, and extends all of the methods and functionality of [Plot](#Plot). # new **BoxWhisker**() Creates a simple box and whisker based on an array of data. the equivalent of calling: ```js new d3plus.Plot() .discrete("x") .shape("Box") ``` --- #### **BumpChart** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/BumpChart.js#L5) This is a global class, and extends all of the methods and functionality of [Plot](#Plot). # new **BumpChart**() Creates a bump chart based on an array of data. the equivalent of calling: ```js new d3plus.Plot() .discrete("x") .shape("Line") .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) ``` --- #### **LinePlot** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/LinePlot.js#L5) This is a global class, and extends all of the methods and functionality of [Plot](#Plot). # new **LinePlot**() Creates a line plot based on an array of data. the equivalent of calling: ```js new d3plus.Plot() .discrete("x") .shape("Line") ``` --- #### **Plot** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L125) This is a global class, and extends all of the methods and functionality of Viz. * [Plot](#Plot) ⇐ Viz * [new Plot()](#new_Plot_new) * [.annotations(*annotations*)](#Plot.annotations) ↩︎ * [.axisPersist([*value*])](#Plot.axisPersist) ↩︎ * [.backgroundConfig([*value*])](#Plot.backgroundConfig) ↩︎ * [.barPadding(*value*)](#Plot.barPadding) ↩︎ * [.baseline(*value*)](#Plot.baseline) ↩︎ * [.buffer([*value*])](#Plot.buffer) ↩︎ * [.confidence(*value*)](#Plot.confidence) ↩︎ * [.confidenceConfig([*value*])](#Plot.confidenceConfig) ↩︎ * [.discrete(*value*)](#Plot.discrete) ↩︎ * [.discreteCutoff(*value*)](#Plot.discreteCutoff) ↩︎ * [.groupPadding([*value*])](#Plot.groupPadding) ↩︎ * [.labelConnectorConfig([*value*])](#Plot.labelConnectorConfig) ↩︎ * [.lineLabels([*value*])](#Plot.lineLabels) ↩︎ * [.lineMarkerConfig(*value*)](#Plot.lineMarkerConfig) ↩︎ * [.lineMarkers([*value*])](#Plot.lineMarkers) ↩︎ * [.shapeSort(*value*)](#Plot.shapeSort) ↩︎ * [.size(*value*)](#Plot.size) ↩︎ * [.sizeMax(*value*)](#Plot.sizeMax) ↩︎ * [.sizeMin(*value*)](#Plot.sizeMin) ↩︎ * [.sizeScale(*value*)](#Plot.sizeScale) ↩︎ * [.stacked(*value*)](#Plot.stacked) ↩︎ * [.stackOffset(*value*)](#Plot.stackOffset) ↩︎ * [.stackOrder(*value*)](#Plot.stackOrder) ↩︎ * [.x(*value*)](#Plot.x) ↩︎ * [.x2(*value*)](#Plot.x2) ↩︎ * [.xConfig(*value*)](#Plot.xConfig) ↩︎ * [.xCutoff(*value*)](#Plot.xCutoff) ↩︎ * [.x2Config(*value*)](#Plot.x2Config) ↩︎ * [.xDomain(*value*)](#Plot.xDomain) ↩︎ * [.x2Domain(*value*)](#Plot.x2Domain) ↩︎ * [.xSort(*value*)](#Plot.xSort) ↩︎ * [.x2Sort(*value*)](#Plot.x2Sort) ↩︎ * [.y(*value*)](#Plot.y) ↩︎ * [.y2(*value*)](#Plot.y2) ↩︎ * [.yConfig(*value*)](#Plot.yConfig) ↩︎ * [.yCutoff(*value*)](#Plot.yCutoff) ↩︎ * [.y2Config(*value*)](#Plot.y2Config) ↩︎ * [.yDomain(*value*)](#Plot.yDomain) ↩︎ * [.y2Domain(*value*)](#Plot.y2Domain) ↩︎ * [.ySort(*value*)](#Plot.ySort) ↩︎ * [.y2Sort(*value*)](#Plot.y2Sort) ↩︎ # new **Plot**() Creates an x/y plot based on an array of data. # Plot.**annotations**(*annotations*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1434) Allows drawing custom shapes to be used as annotations in the provided x/y plot. This method accepts custom config objects for the [Shape](http://d3plus.org/docs/#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](http://d3plus.org/docs/#Shape) sub-class to use ([Rect](http://d3plus.org/docs/#Rect), [Line](http://d3plus.org/docs/#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](#Plot), and is chainable with other methods of this Class. # Plot.**axisPersist**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1444) 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](#Plot), and is chainable with other methods of this Class. # Plot.**backgroundConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1454) 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](#Plot), and is chainable with other methods of this Class. # Plot.**barPadding**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1464) Sets the pixel space between each bar in a group of bars. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**baseline**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1474) Sets the baseline for the x/y plot. If *value* is not specified, returns the current baseline. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**buffer**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1484) 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](#Plot), and is chainable with other methods of this Class. # Plot.**confidence**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1513) Sets the confidence to the specified array of lower and upper bounds. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. Can be called with accessor functions or static keys: ```js var data = {id: "alpha", value: 10, lci: 9, hci: 11}; ... // Accessor functions .confidence([function(d) { return d.lci }, function(d) { return d.hci }]) // Or static keys .confidence(["lci", "hci"]) ``` # Plot.**confidenceConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1532) 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](#Plot), and is chainable with other methods of this Class. # Plot.**discrete**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1542) 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](#Plot), and is chainable with other methods of this Class. # Plot.**discreteCutoff**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1552) 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](#Plot), and is chainable with other methods of this Class. # Plot.**groupPadding**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1562) Sets the pixel space between groups of bars. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**labelConnectorConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1572) 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](#Plot), and is chainable with other methods of this Class. # Plot.**lineLabels**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1592) Draws labels on the right side of any Line shapes that are drawn on the plot. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**lineMarkerConfig**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1602) Shape config for the Circle shapes drawn by the lineMarkers method. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**lineMarkers**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1612) Draws circle markers on each vertex of a Line. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**shapeSort**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1622) A JavaScript [sort comparator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 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](#Plot), and is chainable with other methods of this Class. # Plot.**size**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1632) Sets the size of bubbles to the given Number, data key, or function. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**sizeMax**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1642) Sets the size scale maximum to the specified number. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**sizeMin**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1652) Sets the size scale minimum to the specified number. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**sizeScale**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1662) Sets the size scale to the specified string. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**stacked**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1672) If *value* is specified, toggles shape stacking. If *value* is not specified, returns the current stack value. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**stackOffset**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1682) Sets the stack offset. If *value* is not specified, returns the current stack offset function. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**stackOrder**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1692) Sets the stack order. If *value* is not specified, returns the current stack order function. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**x**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1707) 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](#Plot), and is chainable with other methods of this Class. # Plot.**x2**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1725) 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](#Plot), and is chainable with other methods of this Class. # Plot.**xConfig**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1743) A pass-through to the underlying [Axis](http://d3plus.org/docs/#Axis) config used for the x-axis. Includes additional functionality where passing "auto" as the value for the [scale](http://d3plus.org/docs/#Axis.scale) method will determine if the scale should be "linear" or "log" based on the provided data. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**xCutoff**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1753) 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](#Plot), and is chainable with other methods of this Class. # Plot.**x2Config**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1763) A pass-through to the underlying [Axis](http://d3plus.org/docs/#Axis) config used for the secondary x-axis. Includes additional functionality where passing "auto" as the value for the [scale](http://d3plus.org/docs/#Axis.scale) method will determine if the scale should be "linear" or "log" based on the provided data. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**xDomain**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1773) 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](#Plot), and is chainable with other methods of this Class. # Plot.**x2Domain**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1783) 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](#Plot), and is chainable with other methods of this Class. # Plot.**xSort**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1793) Defines a custom sorting comparitor function to be used for discrete x axes. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**x2Sort**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1803) Defines a custom sorting comparitor function to be used for discrete x2 axes. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**y**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1813) 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](#Plot), and is chainable with other methods of this Class. # Plot.**y2**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1831) 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](#Plot), and is chainable with other methods of this Class. # Plot.**yConfig**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1851) A pass-through to the underlying [Axis](http://d3plus.org/docs/#Axis) config used for the y-axis. Includes additional functionality where passing "auto" as the value for the [scale](http://d3plus.org/docs/#Axis.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](#Plot), and is chainable with other methods of this Class. # Plot.**yCutoff**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1866) 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](#Plot), and is chainable with other methods of this Class. # Plot.**y2Config**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1876) A pass-through to the underlying [Axis](http://d3plus.org/docs/#Axis) config used for the secondary y-axis. Includes additional functionality where passing "auto" as the value for the [scale](http://d3plus.org/docs/#Axis.scale) method will determine if the scale should be "linear" or "log" based on the provided data. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**yDomain**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1891) 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](#Plot), and is chainable with other methods of this Class. # Plot.**y2Domain**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1901) 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](#Plot), and is chainable with other methods of this Class. # Plot.**ySort**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1911) Defines a custom sorting comparitor function to be used for discrete y axes. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. # Plot.**y2Sort**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Plot.js#L1921) Defines a custom sorting comparitor function to be used for discrete y2 axes. This is a static method of [Plot](#Plot), and is chainable with other methods of this Class. --- #### **Radar** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Radar.js#L15) This is a global class, and extends all of the methods and functionality of Viz. * [Radar](#Radar) ⇐ Viz * [new Radar()](#new_Radar_new) * [.axisConfig(*value*)](#Radar.axisConfig) ↩︎ * [.metric(*value*)](#Radar.metric) ↩︎ * [.outerPadding([*value*])](#Radar.outerPadding) ↩︎ * [.value(*value*)](#Radar.value) # new **Radar**() Creates a radar visualization based on an array of data. # Radar.**axisConfig**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Radar.js#L240) Sets the config method used for the radial spokes, circles, and labels. This is a static method of [Radar](#Radar), and is chainable with other methods of this Class. # Radar.**metric**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Radar.js#L250) 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](#Radar), and is chainable with other methods of this Class. # Radar.**outerPadding**([*value*]) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Radar.js#L260) Determines how much pixel spaces to give the outer labels. This is a static method of [Radar](#Radar), and is chainable with other methods of this Class. # Radar.**value**(*value*) [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/Radar.js#L273) 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](#Radar). ```js function value(d) { return d.value; } ``` --- #### **StackedArea** [<>](https://github.com/d3plus/d3plus-plot/blob/master/src/StackedArea.js#L3) 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: ```js new d3plus.AreaPlot() .stacked(true) ``` --- ###### _{Documentation generated on Fri, 16 Aug 2024 18:53:49 GMT}

d3plus-plot

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past