Observable Plot

Transforms derive data as part of the plot specification, helping to reshape data for visualization (e.g., calculating medians, binning, or rolling averages).

Key characteristics:

• Not required: You can aggregate data manually using libraries like D3 and pass the results to marks.
• Two-argument pattern: Most built-in transforms take two arguments: options (transform-specific settings) and mark options (settings to be passed through to the mark). The transform returns a new options object containing the transformed mark options.
• Composability: Transforms can be nested. For example, you can apply a normalize transform on top of a bin transform.
• Implicit transforms: Many marks have built-in transforms. For example, rectY applies an implicit stackY transform when using the y option.

Scales convert abstract data values (like time, temperature, or categories) into visual values (like x and y positions, color, radius, or opacity).

In Plot, marks bind data channels to scales. While channel names often match scale names (e.g., the x channel uses the x scale), they can differ (e.g., an area mark's y1 and y2 channels both bind to the y scale). You can also use scale overrides to opt-out of a default scale for a specific channel.

Key concepts:

• Domain: The input abstract values (e.g., a date range [start, end] or a set of categories ['A', 'B']).
• Range: The output visual values (e.g., pixel positions [left, right] or a color extent ['blue', 'red']).
• Type: The nature of the input data (e.g., linear or ordinal).

Observable Plot is a JavaScript library designed for exploratory data visualization. Unlike traditional charting libraries that use predefined chart types, Plot uses a layered approach based on geometric shapes called Marks.

Key concepts include:

• Marks: Layered geometric shapes (e.g., bars, dots, lines) used to build visualizations.
• Scales: Functions that map abstract data values (like time or temperature) to visual values (like position or color).
• Transforms: On-the-fly data derivations, such as binning quantitative values or computing rolling averages.
• Facets: The use of small multiples to repeat a plot across different partitions of data for easier comparison.
• Projections: Support for GeoJSON and D3's spherical projection system for geographic mapping.

Observable Plot provides built-in interval implementations that can be used with the tick option for scales, the thresholds option for bin transforms, or other purposes.

Intervals implement several core methods:

• floor(value): Returns the greatest interval boundary less than or equal to the specified value.
• offset(value, [step]): Returns the value equal to value plus step intervals (defaults to 1).
• range(start, stop): Returns an array of values representing every interval boundary from start (inclusive) to stop (exclusive).
• ceil(value): Returns the least interval boundary greater than or equal to the specified value.

The select transform filters a mark's index to show a subset of the data, typically used to pull a single value or a sample subset out of each series (e.g., labeling the last point in a line chart).

Important: The transform uses input order, not natural order by value, to determine first and last. For example, if a dataset is in reverse chronological order, the 'first' element is the most recent.

To group data into series, use the z, fill, or stroke channels in the same way as area or line marks.

Plot.plot({
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(aapl, {x: "Date", y: "Close"}),
    Plot.text(aapl, Plot.selectLast({x: "Date", y: "Close", text: "Close", frameAnchor: "bottom", dy: -6}))
  ]
})

The window transform is a specialized map transform used to compute moving windows and derive summary statistics (like rolling averages, minimums, or maximums) from them. It can be applied to specific channels using Plot.windowX or Plot.windowY, or used generally with Plot.window inside a Plot.map call.

Note that the transform uses the input order of the data to determine the window alignment, not the natural value order. If your data is not sorted chronologically, use a sort transform first.

Plot.plot({
  y: {
    grid: true,
    label: "Temperature (°F)"
  },
  marks: [
    Plot.areaY(sftemp, {x: "date", y1: "low", y2: "high", fillOpacity: 0.3}),
    Plot.lineY(sftemp, Plot.windowY(k, {x: "date", y: "low", stroke: "blue"})),
    Plot.lineY(sftemp, Plot.windowY(k, {x: "date", y: "high", stroke: "red"}))
  ]
})

The Plot.density mark shows the estimated density of two-dimensional or one-dimensional point clouds using contours (isolines). It is useful for visualizing concentrations in dense datasets to avoid overplotting.

Key Features:

• 2D Density: Visualizes concentrations of $(x, y)$ points.
• 1D Density: Visualizes the distribution of a single dimension (e.g., just $x$).
• Projections: Supports Plot's projection system (e.g., for geographic density maps).
• Color Encoding: Using the keyword density for stroke or fill creates a sequential color encoding based on density values.
• Faceting: Supports fx and fy for comparison across facets. Thresholds are automatically synchronized to the series with the highest density to facilitate comparison.

Plot.plot({
  marks: [
    Plot.density(data, {x: "waiting", y: "eruptions", stroke: "blue"})
  ]
})

As of version 0.6.16, all marks support GeoJSON data and property shorthand. When using a GeoJSON FeatureCollection, you can use a property name directly as a channel option (e.g., fill: "unemployment"), which is shorthand for (d) => d.properties.unemployment. Additionally, the geo mark now supports the tip: true option, which uses an implicit centroid transform to enable interactive tooltips.

Plot.plot({
  projection: "albers-usa",
  color: {
    type: "quantile",
    n: 9,
    scheme: "blues",
    label: "Unemployment (%)",
    legend: true
  },
  marks: [
    Plot.geo(counties, {
      fill: "unemployment",
      title: (d) => `${d.properties.name} ${d.properties.unemployment}%`,
      tip: true
    })
  ]
})

The projection plot option applies a two-dimensional projection in place of x and y scales. While typically used with geo marks to create maps, it can be used with any mark supporting x and y channels (e.g., dot, text, arrow, rect).

For marks using x1, y1, x2, and y2 channels, the projection applies to both points. For other marks, it applies to the single x, y point.

Supported built-in named projections include:

• equirectangular (plate carrée)
• orthographic
• stereographic
• mercator
• equal-earth
• azimuthal-equal-area
• azimuthal-equidistant
• conic-conformal
• conic-equal-area
• conic-equidistant
• gnomonic
• transverse-mercator
• albers
• albers-usa
• identity
• reflect-y (identity with y pointing up)
• null (default, for pre-projected geometry)