Contour Density
Blurred Contours
Geomagnetic field anomalies over Southern California visualized using Observable Plot’s contour mark with blur interpolation, based on the Plot blurred contours example. A deterministic grid of 900 observation points covers the -121° to -115° longitude and 32° to 36° latitude region with simulated magnetic anomaly values featuring spatial structure (positive anomaly near LA, negative anomaly in the southeast, gradient patterns). Interactive controls include: a blur radius slider (0–20) that controls contour smoothing, a contour levels slider (5–60) for contour density, a stroke width slider (0–2) for contour line thickness, a color scheme picker (8 diverging and sequential schemes: RdBu, PiYG, BrBG, RdYlBu, PRGn, Spectral, Turbo, Viridis), and a checkbox to toggle display of the underlying data points as dots. The chart uses a diverging color scale with a built-in legend showing magnetic anomaly values in nanotesla (nT). Tooltips appear on hover showing longitude, latitude, and magnitude values.
Water Vapor Contour Map
Global precipitable water vapor visualized as filled contours on a geographic projection, based on the Observable Plot contours-projection example. A deterministic 360×180 grid of simulated water vapor values (0–6 cm) is generated procedurally, modeling higher moisture near the equator/ITCZ and dry continental interiors (Sahara, central Asia). Interactive controls include: a projection picker (Equal Earth, Equirectangular, Natural Earth, Orthographic, Stereographic, Mercator, Transverse Mercator), a color scheme picker (10 sequential schemes including BuPu, YlGnBu, Viridis, Magma, Inferno), a contour levels slider (5–60), a blur radius slider (0–10), a domain max slider (2–10 cm) to adjust the color scale range, a stroke width slider (0.1–2.0), and a checkbox to toggle contour stroke lines. The chart uses Plot.contour with clip “sphere” and Plot.sphere for the globe outline. A built-in color legend shows water vapor values in cm.
Faceted Density
Faceted density contour plot of penguin morphometric measurements, based on the Observable Plot density-faceted example. A deterministic dataset of ~146 simulated Palmer Penguins measurements (flipper length, bill length, bill depth, body mass) across three species (Adelie, Chinstrap, Gentoo) and three islands (Biscoe, Dream, Torgersen) models realistic inter-species variation. Interactive controls include: a facet-by selector (Island or Species) to choose the faceting variable for small multiples, X and Y axis column pickers (Flipper Length, Bill Length, Bill Depth, Body Mass), a stroke color mode selector (By density with sequential color scheme, or By category matching the facet variable), a color scheme picker (12 sequential schemes including YlGnBu, Viridis, Magma, Inferno, Plasma, Turbo) shown in density mode, a bandwidth slider (5–50) for Gaussian kernel smoothing, a thresholds slider (2–40) for contour density, a stroke width slider (0.2–3.0), an opacity slider (0.1–1.0), a fill toggle checkbox, a show data points checkbox, and a conditional dot radius slider (0.5–5) when dots are enabled. The chart includes Plot.crosshair for interactive hover inspection and Plot.frame for bordered facet panels with grid lines. A header card shows total penguin count with per-island and per-species breakdowns.
Diamond Density (Stroke)
Density contour plot of diamonds showing carat vs price relationship, based on the Observable Plot density-stroke example. Contour lines are stroked by density — brighter lines indicate regions of higher diamond concentration. A deterministic dataset of 150 simulated diamonds with realistic carat (0.2–5.0), price ($100–$8000+), cut, color, and clarity values is generated using a seeded PRNG. Interactive controls include: a bandwidth slider (5–60) controlling Gaussian kernel smoothing, a thresholds slider (2–40) for contour line count, a stroke width slider (0.2–4.0), an opacity slider (0.1–1.0), a color scheme picker (14 sequential and diverging schemes including Turbo, Viridis, Magma, Inferno, Plasma), X and Y scale type selectors (Logarithmic or Linear), a grid toggle checkbox, a show data points checkbox with conditional dot radius slider (0.5–5), and crosshair for interactive hover inspection. When data points are shown, tooltips display carat, price, cut, color, and clarity. A dataset info card displays diamond count, carat range, and price range. The chart includes a built-in color legend showing density values.
Faceted Function Contour
A 2×2 grid of contour plots where each cell visualizes fill = fx(x) × fy(y), faceted by combinations of trigonometric (sin, cos) and linear functions. Based on the Observable Plot faceted function contour example. Interactive controls include: a color scheme picker (15 diverging and sequential schemes including PuOr, RdBu, Viridis, etc.), a contour interval slider (0.05–1.0) to control contour density, a domain range selector (2π to 8π), 8 dropdown selectors to configure the 4 fx (column) and 4 fy (row) facet functions independently, and a checkbox to toggle frame borders. The chart uses Plot’s diverging color scale and faceted contour mark with the fill callback receiving fx/fy functions from the facet channels. The facet axis ticks display function names (sin, cos, linear).
Filled Contours
Volcanic elevation data rendered as filled contour bands, based on the Observable Plot filled contours example. A deterministic 87×61 grid of synthetic elevation values (94–195 m) models a volcanic peak with secondary ridges and small-scale terrain variation, inspired by the classic Maungawhau (Mt Eden) dataset. Interactive controls include: a color scheme picker (13 schemes including YlGnBu, Viridis, Magma, Inferno, Turbo, Spectral, RdBu), a contour levels slider (4–60), a blur radius slider (0–15), a fill opacity slider (0.1–1.0), a checkbox to toggle contour stroke lines, and a conditional stroke width slider (0.1–2.0) that appears when contour lines are enabled. The chart uses Plot.contour with fill: Plot.identity, aspect ratio 1, and a built-in color legend showing elevation in meters. A dataset info card displays grid dimensions, total cells, and elevation range.
Function Contour Plot
Visualizes mathematical functions as filled contour maps using Observable Plot’s contour mark. Users can select from six mathematical functions: Peaks (MATLAB classic), Sinc (radial), Saddle (hyperbolic paraboloid), Ripple (circular sine), Rosenbrock Valley, and Egg Crate. Interactive controls include a color scheme picker (8 schemes including diverging and sequential), a contour levels slider (4–50), and checkboxes to toggle color fill and contour stroke lines independently. A description banner updates to show the selected function’s formula description and domain range. The chart renders with aspect ratio 1 and the contour fill uses the selected color scheme.
IGRF90 Contours
International Geomagnetic Reference Field (1990) total intensity contours over Southern California, based on the Observable Plot IGRF90 contours example. A deterministic grid of 1225 survey points covers the -121.5° to -114.5° longitude and 32° to 37° latitude region with simulated IGRF90 total field intensity values (approximately 47,000–52,000 nT) featuring realistic latitude-dependent gradients and crustal magnetic anomalies. Interactive controls include: a color scheme picker (10 schemes including RdBu, BrBG, Viridis, Turbo, Magma, Inferno), a scale type selector (Diverging, Linear, Square Root, Logarithmic), a blur radius slider (0–20), a contour levels slider (4–60), a stroke width slider (0–2), and a checkbox to toggle display of the underlying survey points as dots with an adjustable dot radius slider (0.5–4). The chart uses Plot.contour with the fill channel mapped to MAG_IGRF90 and a built-in color legend showing total intensity in nanotesla. Tooltips appear on hover showing longitude, latitude, and IGRF90 field values.
Olympians Density
Density contour plot of Olympic athletes showing height (cm) vs. weight (kg), grouped by sex, based on the Observable Plot olympians-density example. A deterministic dataset of ~130 simulated Olympic athlete measurements (height, weight, sex) models realistic body composition clusters across lighter, medium, and heavier sport categories for both male and female athletes. Interactive controls include: a sex filter dropdown (Both, Male only, Female only), a fill mode selector (Stroke only matching the original example, Fill by sex with semi-transparent colored regions, Fill by density with a YlGnBu sequential color scheme and legend), a bandwidth slider (5–50) controlling Gaussian kernel smoothing, a thresholds slider (2–40) for contour line count, a stroke width slider (0.2–3.0), an opacity slider (0.1–1.0), a checkbox to toggle display of individual data points as dots, and a conditional dot radius slider (0.5–5) shown when dots are enabled. The chart includes Plot.crosshair for interactive hover inspection of data values and Plot.frame for a bordered chart area with grid lines. A header card shows total athlete count with male/female breakdown.
One-Dimensional Density
Old Faithful geyser data visualized as layered one-dimensional density contours with individual data points, based on the Observable Plot one-dimensional density example. The dataset contains 140 observations with eruption duration and waiting time columns exhibiting characteristic bimodal distributions. The chart uses Plot.density in 1D mode (x-only) with two layers: a fine density layer (strokeWidth 0.25) showing detailed contour structure, and a bold density layer with configurable thresholds showing the main density peaks. Individual observations are plotted as dots along the x-axis. Interactive controls include: a data column picker (waiting time or eruption duration), a density stroke color picker (8 colors including steelblue, crimson, darkorange, forestgreen, darkviolet, teal, slateblue, tomato), a bandwidth slider (1–30) controlling kernel smoothing, a bold thresholds slider (1–20) for the number of bold contour lines, a dot size slider (0.5–5), and three layer toggle checkboxes to independently show/hide the fine density contours, bold density contours, and data point dots. A crosshair follows the pointer along the x-axis for value readout. An info bar displays the observation count and describes the bimodal distribution pattern for the selected column.
Point Cloud Density
Old Faithful geyser eruption data visualized as a two-layer density estimation over a point cloud, based on the Observable Plot point-cloud-density example. A deterministic dataset of 272 observations with two columns (waiting time in minutes and eruption duration in minutes) exhibits bimodal clustering: short eruptions (~2 min, ~55 min wait) and long eruptions (~4.5 min, ~80 min wait). The chart overlays fine density contour lines (thin strokes) with bold density contours (configurable thresholds) and individual data points as dots. Interactive controls include: a bold thresholds slider (1–20) for the number of prominent contour lines, a bandwidth slider (5–50) controlling kernel density estimation smoothing, a checkbox to toggle fine density lines with an adjustable fine stroke width slider (0.1–1.0), a stroke color picker (8 colors: steelblue, orangered, darkgreen, purple, darkcyan, crimson, darkslateblue, chocolate), a checkbox to toggle data point dots with adjustable dot radius (0.5–5) and dot opacity (0.1–1.0) sliders, and a dataset info card showing observation count and data ranges. A crosshair follows the pointer for value readout at hover position.
Stroked Contours
Elevation contour lines of the Maunga Whau volcano rendered as stroke-only contours (no fill), based on the Observable Plot stroked contours example. A deterministic 87×61 grid of synthetic elevation values (94–195 m) models a volcanic peak with secondary ridges and terrain variation. Interactive controls include: a contour levels slider (4–60) to adjust contour density, a stroke width slider (0.2–3.0) for line thickness, a stroke opacity slider (0.1–1.0), a blur radius slider (0–15), a checkbox to toggle color-by-elevation mode, a stroke color picker (7 colors: Black, Dark Gray, Steel Blue, Dark Red, Forest Green, Indigo, Sienna) shown in single-color mode, and a color scheme picker (13 schemes including YlGnBu, Viridis, Magma, Turbo) shown in elevation-colored mode with a built-in color legend. The chart uses Plot.contour with stroke channels and aspect ratio 1. A dataset info card displays grid dimensions, total cells, and elevation range.
Walmart Store Density
Kernel density estimation of Walmart store locations across the continental United States, based on the Observable Plot walmart-density example. A deterministic dataset of 120 store locations (with longitude, latitude, and city name) covers all major US regions with realistic clustering in the Southeast and South Central states where Walmart originated. The chart uses an Albers projection with Plot.density for the heatmap, Plot.geo for state boundaries and national outline, and Plot.dot for individual store markers. Interactive controls include: a bandwidth slider (2–30) controlling the Gaussian kernel smoothing radius, a color scheme picker (10 sequential schemes including YlGnBu, YlOrRd, Blues, Viridis, Turbo, Magma), a fill opacity slider (0.1–1.0), a state border opacity slider (0–1), a dot radius slider (0.5–4), and a checkbox to toggle display of individual store dots. When dots are enabled, hovering shows a tooltip with the store’s city name via Plot.tip with Plot.pointer. The map loads US state boundaries from the us-atlas TopoJSON CDN.