Skip to content

Plot

A Plot is defined using a set of directives that specify attributes, graphical marks, interactors, and legends.

js
plot(
  width(500), // attribute
  rectY(from("table"), { x1: "u", x2: "v", y: "w", fill: "c" }), // mark
  intervalX({ as: selection }), // interactor
  colorLegend() // legend
)

plot

plot(...directives)

Create a new Plot instance based on the provided directives and return the corresponding HTML element.

Plot

new Plot(element)

Class definition for a Plot. If provided, the input element will be used as the container for the plot, otherwise a new div element will be generated.

element

plot.element

The HTML element containing the plot.

margins

plot.margins()

Return the specified margins of the plot as an object of the form {left, right, top, bottom}.

innerWidth

plot.innerWidth()

Return the "inner" width of the plot, which is the width attribute value minus the leftMargin and rightMargin values.

innerHeight

plot.innerHeight()

Return the "inner" height of the plot, which is the height attribute value minus the topMargin and bottomMargin values.

pending

plot.pending(mark)

Called by a Mark instance to inform this parent plot that the mark has a pending data update.

update

plot.update(mark)

Called by a Mark instance to inform this parent plot that the mark has completed an update.

render

plot.render()

Renders this plot within its container element.

getAttribute

plot.getAttribute(name)

Returns the attribute value for the given attribute name. Called by attribute directives.

setAttribute

plot.setAttribute(name, value, options)

Sets the attribute value for the given attribute name. Returns true if the attribute is updated to a new value, false otherwise. The options hash may include a silent flag to suppress listener updates. Called by attribute directives.

addAttributeListener

plot.addAttributeListener(name, callback)

Adds an event listener callback that is invoked when the attribute with the given name is updated.

removeAttributeListener

plot.removeAttributeListener(name, callback)

Removes an event listener callback associated with the given attribute name.

addParams

plot.addParams(mark, paramSet)

Register a set of Params associated with a mark to coordinate updates. Called by child Mark instances.

addMark

plot.addMark(mark)

Add a Mark instance to this plot. Called by mark directives.

markSet

plot.markSet

Property getter that returns a Set containing this plot's marks.

addInteractor

plot.addInteractor(interactor)

Add an interactor to this plot. Called by interactor directives.

addLegend

plot.addLegend(legend, include)

Add a legend associated with this plot. The include flag (default true) indicates if the legend should be included within the same container element as the plot. Called by legend directives.