Area

Area Chart

Interactive area chart based on Observable Plot’s area-chart gallery example, plotting stock closing price by date with an area fill and overlaid line. Users can change the visible date window using start and end date selectors, switch the interpolation curve style (linear, step, natural), and adjust the area fill opacity with a slider. Hover interaction includes a horizontal crosshair and pointer tooltip that reveals the nearest date and exact closing price, making it easy to inspect values across the selected range.

Area Chart with Missing Data

Interactive area chart adapted from Observable Plot’s plot-area-chart-missing-data gallery example, showing a weekly closing-price series with missing values at the beginning of the timeline. Users can switch between showing true gaps or interpolating missing segments, change curve interpolation style (linear, step, natural), adjust blue area opacity, and toggle a gray continuity layer that highlights how a complete series would bridge observed points. Hover exploration combines a crosshair and pointer tooltip to reveal date, displayed value, and source value at the nearest point, making missing-versus-observed behavior easy to inspect.

Area Chart with Gradient Fill

Interactive area chart adapted from Observable Plot’s area-chart-with-gradient example, showing weekly closing prices over time with a gradient-filled area under the series and a line overlay for trend clarity. Users can change the interpolation style using a curve selector (linear, natural, or step) and tune the gradient intensity with a slider that updates the top stop opacity in the area fill. Hover interaction includes a crosshair and pointer tooltip that displays the nearest date and exact dollar close value, enabling precise point inspection directly on the chart.

Area + Line Custom Mark

Interactive area-and-line chart adapted from Observable Plot’s plot-arealiney-custom-mark gallery example, implemented as a custom composite mark that combines a zero baseline rule, an area fill, and a line over weekly closing prices. Users can switch interpolation curve style, change the shared color for both line and area, and adjust area fill opacity to emphasize trend shape versus underlying area magnitude. Hover interaction includes a crosshair and pointer tooltip that reveals the nearest date and exact closing price for precise value inspection across the full timeline.

Burndown Chart

Interactive burndown chart adapted from Observable Plot’s plot-burndown-chart gallery example, showing daily open issues as a stacked area where each issue contributes to every day from creation until close (or the selected burn date). Users can pick the burn date cutoff, switch stack grouping between created week and issue priority, change curve interpolation style, and toggle whether newest stacks render on top. Hover interaction includes a crosshair and pointer tooltip over an overlaid open-issue trend line, enabling precise daily inspection of unresolved issue counts.

Difference Chart

Interactive difference chart adapted from Observable Plot’s plot-difference-chart gallery example, comparing monthly temperatures between New York and San Francisco and shading the gap between the two series. Users can switch the interpolation curve style, change the diverging color scheme used for positive versus negative differences, and adjust a slider to control how many months are visible. Hover exploration includes a pointer-driven tooltip and crosshair that reveals New York temperature, San Francisco temperature, and their exact difference at the nearest date.

Faceted Area Chart

Interactive faceted area chart adapted from Observable Plot’s plot-faceted-areas example, showing monthly unemployment trends as small-multiple area panels split by industry. Users can adjust a slider to choose how many industry facets are visible (top industries by latest unemployment level) and switch between absolute unemployed counts and an indexed trend mode where January equals 100. Hover interaction includes a pointer tooltip and crosshair within facets to inspect the nearest date and value for each industry panel.

Horizon Chart of Unemployment by Industry

Interactive horizon chart adapted from Observable Plot’s plot-unemployment-horizon-chart gallery example, showing monthly unemployment trends as faceted horizon bands for multiple industries. Users can adjust the number of horizon bands, limit the display to the top industries by latest unemployment value, switch sequential color schemes, and change interpolation curve style. Hover exploration includes a crosshair and pointer tooltip that reveal the nearest month and exact unemployment count for each industry facet.

Urban Traffic Horizon Bands

Interactive horizon chart adapted from Observable Plot’s plot-horizon gallery example, showing hourly vehicles-per-hour patterns as faceted horizon bands across multiple transit routes. Users can adjust horizon band count, limit the number of displayed routes, switch sequential color schemes, and change interpolation curve style to compare shape sensitivity. Hover exploration combines a crosshair and pointer tooltip to reveal the nearest hour and exact vehicles-per-hour value for each route facet.

Normalized Stack: Music Revenue Mix

Interactive normalized stacked area chart adapted from Observable Plot’s plot-normalized-stack gallery example, showing each format’s share of annual music revenue so every year sums to 100%. The chart uses Plot.areaY with Plot.stackY offset normalize, grouped stack ordering, and a zero/one rule baseline to match percentage framing across years. Users can switch color encoding between format groups and individual formats, change interpolation style (linear, step, natural), and adjust the visible time window using a start-year slider. Hover exploration includes a crosshair and pointer tooltip that display the nearest format, group, year, normalized share percentage, and underlying revenue value in billions.

Population Pyramid by Marital Status

Interactive population pyramid adapted from Observable Plot’s plot-population-pyramid gallery example, showing mirrored male and female age distributions where male values render on the left and female values on the right. Stacked area layers encode marital status (Single, Married, Divorced, Widowed), and users can switch between all categories or a single selected category, change the area interpolation curve, and limit the chart to a maximum age using a slider. Hover exploration combines pointer-driven tooltips and a crosshair to reveal the nearest age band, sex, marital-status category, and population in thousands for precise reading of both sides of the pyramid.

Proportion Plot Across Workforce Measures

Interactive proportion plot adapted from Observable Plot’s plot-proportion-plot gallery example, using stacked flowing areas to show how age-group shares change across four measures: population, labor force, employed, and full-time workers. The chart uses Plot.areaY with Plot.stackY and bump interpolation to preserve age cohorts between adjacent measure columns, with each column representing percentage shares that sum to 100%. Users can switch between two demographic scenarios, change interpolation curve style, and choose which measure column displays in-band percentage labels for easier comparison. Hover exploration combines a crosshair and pointer tooltip that reveal the nearest age cohort, measure, percentage value, and active scenario.

Ribbon Chart: U.S. Recorded Music Revenue

Interactive ribbon-style stacked area chart adapted from Observable Plot’s plot-ribbon-chart gallery example, showing annual U.S. recorded-music revenue split by format. The chart layers format ribbons with value-based ordering and a revenue axis transformed to billions, plus an overlaid annual-total trend line for context. Users can change the start year with a slider, switch interpolation curve (linear, natural, step), and toggle color encoding between broad groups and individual formats. Hover exploration combines a crosshair and pointer tooltip on annual totals, enabling precise year-by-year total revenue inspection while comparing underlying ribbon composition.

Variable Fill Area

Interactive area chart adapted from Observable Plot’s plot-variable-fill-area gallery example, showing weekly closing price over time with area fill intensity mapped to a selected metric. Users can switch the fill metric between trading volume and derived volatility, choose log or linear color scaling for the fill legend, and change interpolation style (linear, step, natural) for both area and line marks. Hover exploration combines a pointer tooltip and crosshair to inspect the nearest date, close price, volume, and volatility values directly on the chart.

Wiggle Streamgraph by Stack Offset

Interactive streamgraph adapted from Observable Plot’s plot-stack-offset gallery example, using stacked area layers for music-format revenue over time and exposing stack offset behavior directly in the UI. Users can switch offset mode between wiggle, center, zero, and normalize; adjust interpolation curve style; change color encoding between broader format groups and individual formats; and narrow the visible year window with start/end selectors. Hover exploration combines a pointer tooltip on stack layers and a crosshair aligned to annual totals, allowing precise inspection of format, group, year, and revenue while comparing how offset choice changes the stream shape.