figure option forces HTML figure element generation
The figure option, when set to true, forces Plot to generate a figure element. By default, plot returns an SVG element unless the plot includes a title, subtitle, legend, or caption.
Observable Plot · all subjects
plots
48 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
aspectRatio option computes default height
The aspectRatio option, if not null, computes a default height such that a variation of one unit in the x dimension is represented by the corresponding number of pixels as a variation in the y dimension of one unit. When a position scale is ordinal (point or band), consecutive domain values are treated as one unit length apart.
mark.plot() example
Plot.barY(alphabet, {x: "letter", y: "frequency"}).plot({height: 200}) This example creates a bar chart using the convenience mark.plot() method.
title, subtitle, and caption options accept string or HTML element
The title, subtitle, and caption options accept either a string or an HTML element. If given an HTML element using the html tagged template literal, the title and subtitle are used as-is while the caption is wrapped in a figcaption element. Otherwise, the specified text is escaped and wrapped in an h2, h3, or figcaption respectively.
style option allows custom style overrides
The style option allows custom styles to override Plot's defaults. It may be specified either as a string of inline styles (e.g., 'color: red;') or an object of properties (e.g., {color: 'red'}). By default, the returned plot has a max-width of 100% and the system-ui font.
Plot marks and axes default to currentColor
Plot's marks and axes default to currentColor, meaning that they will inherit the surrounding content's color.
className option specifies SVG class name
The className option specifies the class name for the generated SVG element, which applies a default stylesheet.
clip option determines default clipping behavior
The clip option determines the default clipping behavior if the mark clip option is not specified; set it to true to enable clipping. This option does not affect axis, grid, and frame marks, whose clip option defaults to false.
document option specifies document for element creation
The document option specifies the document used to create plot elements. It defaults to window.document, but can be changed to another document, such as when using a virtual DOM implementation for server-side rendering in Node.
Plot.plot() basic example
Plot.plot({ height: 200, marks: [ Plot.barY(alphabet, {x: "letter", y: "frequency"}) ] }) This example renders a new plot with a bar chart of the alphabet data, 200 pixels tall.
mark.plot() convenience method
Given a mark object, mark.plot(options) is a convenience shorthand for calling Plot.plot() where the marks option includes this mark. Any additional marks in options are drawn on top of this mark.
plot.scale(name) method returns scale object
Given a rendered plot element returned by Plot.plot(), plot.scale(name) returns the plot's scale object for the scale with the specified name (such as x or color), or the projection if the name is "projection". If the plot has no scale or projection with the given name, returns undefined.
plot.scale() example
const plot = Plot.plot(options); // render a plot const color = plot.scale("color"); // get the color scale console.log(color.range); // inspect the scale's range This example shows how to access a scale object from a rendered plot and inspect its properties.
plot.legend(name, options) method renders standalone legend
Given a rendered plot element returned by Plot.plot(), plot.legend(name, options) renders a standalone legend for the scale with the specified name (such as color, opacity, or symbol), returning an SVG or HTML figure element. If the plot has no scale with the given name, returns undefined. Legends are currently only supported for color, opacity, and symbol scales.
plot.legend() example
const plot = Plot.plot(options); // render a plot const legend = plot.legend("color"); // render a color legend This example shows how to render a standalone legend from a rendered plot.
Unitless numbers not supported in style option
Unitless numbers (quirky lengths) such as {padding: 20} are not supported by some browsers. Instead, specify a string with units such as {padding: "20px"}.
Tabular data represented as array of objects
In JavaScript, tabular data is represented as an array of objects where each object records an observation with properties corresponding to columns. This is known as a row-based format since each object corresponds to a row in the table.
Each mark supplies its own tabular data
Each mark in a plot can have its own separate tabular data. For example, one mark can use Apple stock data while another mark uses Google stock data.
Mark channels assign data columns to visual properties
Channels are visual properties of marks such as x and y position. Data columns can be assigned to channels to encode data as visual properties. For example, the Date column can be assigned to the x channel and the Close column to the y channel.
Marks drawn in specified order with last mark on top
Marks in the marks array are drawn in the order they appear, with the last mark drawn on top of earlier marks. This allows controlling the visual layering of marks.
Plot.plot() function returns SVG or HTML figure element
The Plot.plot() function is called to render a plot in Observable Plot, passing in desired options. This function returns an SVG element by default, or an HTML figure element if the plot includes a title, subtitle, legend, or caption, or if the figure option is set to true.
Plot element must be inserted into page to be visible
The plot element returned by Plot.plot() is detached and must be inserted into the page to be visible.
marks option specifies array of marks to render
The marks option is an array of mark objects to render in the plot. Marks are drawn in the given order, with the last mark drawn on top.
Layout options: marginTop, marginRight, marginBottom, marginLeft
Layout options determine the overall size and margins of the plot, specified as numbers in pixels. marginTop is the top margin, marginRight is the right margin, marginBottom is the bottom margin, marginLeft is the left margin.
margin option shorthand for all four margins
The margin option is a shorthand that sets marginTop, marginRight, marginBottom, and marginLeft all at once.
width and height layout options
The width option sets the outer width of the plot in pixels including margins. The height option sets the outer height of the plot in pixels including margins.
Default width is 640 pixels
The default width for a plot is 640 pixels. On Observable, the width can be set to the standard width to make responsive plots.
Default height is chosen automatically based on scales
The default height is chosen automatically based on the plot's associated scales. For example, if y is linear and there is no fy scale, it might be 396 pixels.
Default margins depend on constituent marks
The default margins depend on the maximum margins of the plot's constituent marks. Most marks default to zero margins because they are drawn inside the chart area, but Plot's axis mark has non-zero default margins.
Plot Svelte client-side rendering example
In Svelte, use $effect to handle plot rendering. Remove old charts with element.firstChild.remove() before appending new plots with element.append().
Plot Node.js server-side rendering with JSDOM
To render SVG in Node.js, use JSDOM for a DOM implementation via the document option. Create the plot with Plot.plot() and serialize it using outerHTML. Set xmlns attributes with setAttributeNS() before serializing.
Plot Node.js PNG rasterization example
To rasterize SVG to PNG in Node.js, the plot outerHTML can be piped to tools like canvg with node-canvas, sharp, or Puppeteer. Sharp example: await sharp(Buffer.from(plot.outerHTML, "utf-8")).png().toBuffer()
rectY with binX transform example
Example of creating a histogram: Plot.rectY({length: 10000}, Plot.binX({y: "count"}, {x: d3.randomNormal()})).plot()
Plot includes TypeScript declarations
Plot includes TypeScript declarations with extensive documentation. Modern editors like Visual Studio Code and Observable surface documentation and type hints during code writing.
Plot UMD CDN bundle
Plot provides a UMD bundle at https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6 that exports the Plot global when loaded as a plain script. D3 must be loaded separately at https://cdn.jsdelivr.net/npm/d3@7.
Plot npm installation
Plot can be installed via npm with: npm install @observablehq/plot. It can be imported as: import * as Plot from "@observablehq/plot" or specific symbols can be imported like: import {barY, groupX} from "@observablehq/plot".
Plot React server-side rendering with document option
For server-side rendering (SSR) plots in React, use the document plot option to tell Plot to render with React's virtual DOM. This minimizes reflow on page load. The plot should be converted to hyperscript with .toHyperScript().
Plot React client-side rendering with useRef and useEffect
For complex plots in React, use useRef to get a reference to a DOM element and useEffect to generate and insert the plot. Remove the old plot with element.remove() before replacing it with a new one using element.append().
Plot Vue server-side rendering with document option
For server-side rendering in Vue, use the document plot option to render to Vue's virtual DOM. Convert the plot to hyperscript with .toHyperScript().
Plot Vue client-side rendering with mounted lifecycle
For client-side rendering in Vue, use a render function with a mounted lifecycle directive. After the component mounts, render the plot and insert it into the page with element.append().
Plot returns detached DOM element (SVG or HTML figure)
Observable Plot returns a detached DOM element — either an SVG or HTML figure element. In vanilla web development, you need to insert the generated plot into the page to see it by selecting a DOM element and calling element.append().
Plot ESM CDN bundle with D3 dependency
Plot can be loaded from CDN using the ESM bundle at https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm which automatically loads Plot's dependency on D3.
Observable Plot purpose and philosophy
Observable Plot is a free, open-source JavaScript library for visualizing tabular data, focused on accelerating exploratory data analysis. It features a concise, memorable, yet expressive interface with scales and layered marks in the grammar of graphics style, inspired by Leland Wilkinson, Hadley Wickham, and Jacques Bertin.
Observable Plot purpose and use case
Observable Plot is for exploratory data visualization designed to find insights quickly. Its API optimizes for conciseness and memorability, with the goal of minimizing time to first chart. Plot helps users quickly pivot and refine views of data, reducing time spent reading documentation and debugging compared to other visualization tools.
Plot minimizes chart creation time with defaults
Plot uses sensible defaults that allow creating meaningful charts with minimal code. When you specify the semantics—data and desired encodings—Plot figures out the rest. Defaults can be progressively overridden as needed during exploration.
Plot generates SVG for CSS styling and manipulation
Plot generates SVG output that can be styled with CSS and manipulated like D3, enabling extensions and customizations such as custom tooltip plugins.
Plot builds on D3 implementations
Plot uses D3 to implement scales (ticks, color schemes, number formatting), shapes (areas, lines, curves, symbols, stacks), planar geometry (Delaunay, Voronoi, contours, density estimation), spherical geometry (geographic projections), data manipulation (group, rollup, bin, statistics), tree diagrams, and more.
Plot vs D3 trade-offs
Plot is more efficient than D3 for making charts quickly, but is necessarily less expressive. Bespoke visualizations with extensive animation and interaction, advanced techniques like force-directed graph layout, or developing a custom charting library are better done with D3's low-level API.