A reusable javascript x/y plot built on D3.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

d3plus-plot

NPM Release Build Status Dependency Status Gitter 1.0 progress

A reusable javascript x/y plot built on D3.

Installing

If you use NPM, run npm install d3plus-plot --save. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-plot.v0.7.full.min.js"></script>

Simple X/Y Plot

d3plus-plot combines the abstract Viz class found in d3plus-viz with the axes in d3plus-axis to create a standard x/y plot. In addition to a lot of automatic formatting and positioning, the Viz class also provides mouse events and tooltips.

var data = [
  {id: "alpha", x: 4, y:  7},
  {id: "beta",  x: 5, y:  2},
  {id: "gamma", x: 6, y: 13}
];

Given some data points, we can create a plot very easily:

new d3plus.Plot()
  .data(data)
  .groupBy("id")
  .render();

This creates an x/y plot using the default shape (Circle). The shape type can be overwritten using the .shape( ) accessor method, as well as using the many shorthand Classes for specific types of charts, like BarChart and AreaPlot.

Click here to view this example live on the web.

More Examples

API Reference


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")

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)

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")

Plot <>

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

# 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). Annotations will be drawn underneath the data to be displayed.

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

Sets the config method for the x-axis. If value is not specified, returns the current x-axis configuration.

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

# Plot.x2Config(value) <>

Sets the config method for the secondary x-axis. If value is not specified, returns the current secondary x-axis configuration.

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) <>

Sets the config method for the y-axis. If value is not specified, returns the current y-axis configuration. 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.y2Config(value) <>

Sets the config method for the secondary y-axis. If value is not specified, returns the current secondary y-axis configuration.

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.


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)

Documentation generated on Wed, 15 Aug 2018 14:12:25 GMT