Published-release documentation · release compatibility

All Chart Examples

This catalog includes every maintained public chart example. Start with the curated gallery when you want a shorter representative set.

Blue point panel and orange replacement bar panel aligned in one horizontal dashboard

Recipe

Program composition

Compare distinct child panels, edit their layout, and replace one stable slot.

hconcat editCompositionLayout replaceCompositionChild View full size

Cars scatterplots repeated by origin with one shared cylinder legend

Recipe

Faceted scatterplot

Repeat a complete point or bar chart by field value.

facet editFacetHeaders editCompositionLayout View full size

Six panel grid crossing North and South regions with three periods and one intentionally empty cell

API

Row and column facet grid

Cross two fields into an observed or complete grid with stable cell coordinates.

facetGrid editFacetSource editCompositionLayout View full size

Three aligned scatterplots comparing speed quality and cost against score with a shared group legend

API

Repeated metric charts

Repeat one positional encoding across fields with explicit scale and guide policies.

repeatCharts editFacetSource editCompositionLayout View full size

Tutorial

Scatterplot

Compare two quantitative fields and encode a category with color.

createScatterPlot View full size

Market score scatterplot with wrapped rotated category labels and fitted margins

API

Fitted long axis labels

Fit chart margins after laying out long Cartesian axis labels.

createXAxis View full size

Cars scatterplot with origin and acceleration legends aligned in one top row

API

Multi-legend layout

Place categorical and sampled opacity legends on one aligned horizontal reading line.

createLegend editLegend View full size

Tutorial

Line chart

Aggregate values over time and split the result into series.

createLinePlot View full size

Mean car acceleration shown as aligned temporal bars and a trend line

API

Temporal bar and line

Layer compatible marks without repeating the line position encodings.

createBarMark encodeX encodeY createLineMark View full size

Three chronological country trajectories through fertility and life expectancy space

Recipe

Development trajectories

Connect repeated and non-monotonic positions by a separate quantitative order field.

createLineMark encodePathOrder removePathOrder View full size

Selected film ratings over release years with title annotations

Recipe

Annotated scatterplot

Attach readable data labels to final point, bar, or rule items.

createTextMark encodeText editTextMark View full size

Recipe

Heatmap

Map two discrete fields to cells and a quantitative field to color.

createHeatmap createTextMark encodeText View full size

Tutorial

Bar chart

Aggregate ordinal categories and arrange nominal groups side by side.

createBarPlot View full size

Three orange bar charts showing automatic category order, descending total order, and reset order

API

Ordered category bars

Order categorical x or y positions explicitly or from a stable aggregate summary.

orderCategories removeCategoryOrder View full size

API

Horizontal grouped bar

Compare grouped aggregate values with a horizontal measure axis.

createBarMark encodeX encodeY encodeColor View full size

Tutorial

Histogram

Bin a quantitative field and count category partitions.

createHistogram View full size

Tutorial

Density area

Estimate grouped distributions and draw baseline-closed areas.

createAreaMark encodeDensity encodeColor View full size

API

Center-stacked area

Preserve series thickness while centering each time partition around zero.

createAreaMark encodeX encodeY encodeColor View full size

Cars scatterplot with grouped regression lines and confidence bands

Tutorial

Regression scatterplot

Layer observations, grouped fits, and confidence bands.

createPointMark createRegression View full size

Kenya life expectancy folded into blue and red Horizon bands around 55 years

Tutorial

Horizon chart

Compress a long time series by folding values above and below a baseline.

createAreaMark encodeHorizon editHorizon View full size

Car observations with grouped mean confidence intervals

Tutorial

Error bar

Keep observations visible while summarizing group uncertainty.

createErrorBar View full size

Life expectancy confidence bands with explicit boundaries

Tutorial

Error band

Show interval ribbons with explicit lower and upper boundaries.

createErrorBand View full size

Recipe

Box plot

Compose quartiles, whiskers, medians, and outlier points.

createBoxPlot View full size

Density gradient strips showing car acceleration distributions by origin

Recipe

Gradient plot

Compare complete distribution shapes across categories in a compact strip.

createGradientPlot editGradientPlot View full size

Three violin shapes comparing car acceleration distributions by origin

API

Violin plot

Compare complete distribution shapes across categories with symmetric or split density areas.

createViolinPlot editDensity View full size

Cars of 1970 connected across fuel economy, horsepower, weight, and acceleration axes

Recipe

Parallel coordinates

Compare multivariate row profiles while retaining row-level identity.

createParallelCoordinates encodeParallelCoordinates View full size

Cars Polar scatterplot using acceleration angle and horsepower radius

Tutorial

Polar points

Map quantitative fields to clockwise angle and radial distance.

encodeTheta encodeR encodePointRadius View full size

Cars Polar scatterplot with circular and radial axes and grids

Tutorial

Polar guides

Read angle and radial mappings with aligned axes, labels, and grids.

createGuides editRadialAxis View full size

Tutorial

Polar lines

Connect ordered angle and radial values as grouped open paths.

createLineMark encodeTheta encodeR View full size

Closed radar paths comparing job shares for men and women

Tutorial

Radar chart

Close nominal-angle series without duplicating the first observation.

createLineMark View full size

Tutorial

Donut chart

Build proportional sectors with an inferred categorical color legend.

createArcMark encodeTheta encodeColor View full size

Donut chart showing 2005 population totals by Gapminder cluster

Tutorial

Weighted donut chart

Partition a full revolution by category-level sums without expanding rows.

createArcMark encodeTheta encodeColor View full size

Recipe

Rose chart

Compare radial magnitudes inside ordered categorical sectors.

createArcMark encodeTheta encodeR View full size

Tutorial

Radial bars

Compare values as equal-width sectors around a Polar coordinate.

createArcMark encodeTheta encodeR View full size

Grouped maximum points highlighted as red diamonds

Tutorial

Mark selection and highlighting

Select, filter, and emphasize final point, bar, and line items.

highlightMarks View full size

Red negative and blue positive values folded into three bands on each side of zero

Tutorial

Signed Horizon chart

Define explicit source roles, then revise bands, baseline, palette, and appearance.

createHorizonPlot View full size

Translucent density area estimated from four quantitative observations

Tutorial

Density profile

Estimate one variable, then add explicit groups and color.

createDensityPlot View full size

Pie chart with category A occupying two thirds and category B one third

Tutorial

Category pie chart

Create a complete category pie or explicitly weighted donut with one action.

createPiePlot View full size

Three measured values form a translucent area closing to zero

Tutorial

Area with an explicit baseline

Define bounds and independently revise series identity, placement, and color.

createAreaPlot layoutSeries encodeGroup View full size

Three equal-angle sectors with annular areas proportional to values two, three, and four

Tutorial

Measured rose sectors

Compare category sums with proportional area or radial length.

createRosePlot createRadialBarPlot encodeR View full size

Four points colored blue, white, pale red, and red with zero centered in the color palette

API

A meaningful color midpoint

Set an explicit reference value for continuous color.

createScatterPlot encodeColor editScale View full size

Aggregate bars colored blue below three and red from three upward with a matching interval legend

API

Color scale and legend transitions

Switch between continuous color and numeric classes without stale guides.

createBarPlot editScale createLegend View full size

Each origin panel shows the observed distribution with its own final bars

Guide

Faceted car histograms

Each origin panel shows the observed distribution with its own final bars.

createBarMark encodeHistogram encodeColor View full size

Rule widths and opacity map quantitative observations to visible stroke properties

Guide

Field-driven rule widths

Rule widths and opacity map quantitative observations to visible stroke properties.

createRuleMark encodeX encodeX2 View full size

A half violin, summary, and raw observations share one category and measure frame

Guide

Raincloud distribution

A half violin, summary, and raw observations share one category and measure frame.

createRaincloudPlot View full size

Packed point glyphs preserve individual observations within each category slot

Guide

Beeswarm distribution

Packed point glyphs preserve individual observations within each category slot.

createBeeswarmPlot View full size

Each raw observation remains a dot on its categorical slot

Guide

Categorical dot plot

Each raw observation remains a dot on its categorical slot.

createDotPlot View full size

A stem connects each observation to the explicit zero baseline

Guide

Lollipop plot

A stem connects each observation to the explicit zero baseline.

createLollipopPlot View full size

Named before and after endpoints retain their roles when values reverse

Tutorial

Dumbbell changes

Named before and after endpoints retain their roles when values reverse.

createDumbbellPlot View full size

Step-after lines show cumulative probability at each observed support value

Tutorial

Empirical cumulative distribution

Step-after lines show cumulative probability at each observed support value.

createECDFPlot View full size

Reordering a categorical legend preserves the identities of the linked sectors

Guide

Pie legend order

Reordering a categorical legend preserves the identities of the linked sectors.

createPiePlot editLegend View full size

Quantitative measures are positioned against explicitly parsed temporal input

Guide

Explicit temporal inputs

Quantitative measures are positioned against explicitly parsed temporal input.

createScatterPlot createTitle View full size

Series identity remains independent from color, width, and opacity encodings

Guide

Independent series appearance

Series identity remains independent from color, width, and opacity encodings.

createLinePlot encodeStrokeWidth encodeOpacity View full size

Directional glyphs and a rug compare point and tick encodings

Guide

Directional ticks and points

Directional glyphs and a rug compare point and tick encodings.

encodeX encodeY createTickMark View full size

Rectangular bins summarize the density of two quantitative car measurements

Guide

Binned cars heatmap

Rectangular bins summarize the density of two quantitative car measurements.

createHeatmap createTitle View full size

Calendar buckets change temporal resolution while preserving original measurements

API

Time bucket comparison

Calendar buckets change temporal resolution while preserving original measurements.

createTimeUnitData createScatterPlot createTitle View full size

Ordered moving summaries reveal changes in monthly passenger counts

Guide

Moving passenger windows

Ordered moving summaries reveal changes in monthly passenger counts.

createTimeUnitData createLineMark encodeX View full size

A partitioned window rank selects observations before drawing a scatterplot

Guide

Ranked cars

A partitioned window rank selects observations before drawing a scatterplot.

createWindowData filterData createScatterPlot View full size

Complete statistical and coordinate-specific programs form a nested dashboard

Guide

Mixed chart dashboard

Complete statistical and coordinate-specific programs form a nested dashboard.

facet editCompositionLayout View full size

Bounded deterministic offsets separate overlapping observations inside category slots

Guide

Cars by origin with jitter

Bounded deterministic offsets separate overlapping observations inside category slots.

createStripPlot View full size

Guide

Dark theme scatterplot

A program theme changes default canvas, guide, and mark appearance together.

createPointMark encodeX encodeY View full size

Attached labels use bounded collision layout and leader lines

Guide

Country labels without overlap

Attached labels use bounded collision layout and leader lines.

createPointMark encodeX encodeY View full size

A quantitative color scale maps a compatible aggregate for each bar

Guide

Continuous aggregate bar color

A quantitative color scale maps a compatible aggregate for each bar.

filterData createBarMark encodeX View full size

Quantitative observations map to ordered color intervals and legend labels

Guide

Discretized color intervals

Quantitative observations map to ordered color intervals and legend labels.

filterData createPointMark encodeX View full size

Band, point, and temporal mappings retain distinct positional meanings

Guide

Temporal and discrete positions

Band, point, and temporal mappings retain distinct positional meanings.

filterData createBarMark encodeX View full size

Nonlinear position scales compare measurements over unequal numeric ranges

Guide

Transformed quantitative positions

Nonlinear position scales compare measurements over unequal numeric ranges.

filterData createPointMark encodeX View full size

Recipe

Repair missing observations

Repair missing observations with explicit inputs and immutable program revisions.

createWindowData createLinePlot bindMarkData View full size

Recipe

Compare weighted distributions

Compare weighted distributions with explicit inputs and immutable program revisions.

createHistogram createDensityPlot createECDFPlot View full size

Recipe

Switch encoding modes atomically

Switch encoding modes atomically with explicit inputs and immutable program revisions.

createScatterPlot encodeChannels View full size

Recipe

Edit scales and refresh guides

Edit scales and refresh guides with explicit inputs and immutable program revisions.

createScatterPlot editXScale editXAxis View full size

Recipe

Select and place final-item labels

Select and place final-item labels with explicit inputs and immutable program revisions.

editMarkLabelSelection editMarkLabelPlacement layoutLabels View full size

Recipe

Apply, override, and remove a theme

Apply, override, and remove a theme with explicit inputs and immutable program revisions.

applyTheme editPointMark removeTheme View full size

Recipe

Revise facet source and shared guides

Revise facet source and shared guides with explicit inputs and immutable program revisions.

editFacetSource editFacetHeaders editFacetGuides View full size

Recipe

Remove resources in dependency order

Remove resources in dependency order with explicit inputs and immutable program revisions.

encodeY removeData removeMark View full size

A high-level scatterplot followed by focused styling and a later opacity edit

Tutorial

Choose the right authoring level

Choose the smallest action that expresses the intended chart change.

createScatterPlot createPointMark editPointMark View full size

Two cubehelix color rows and a blue to red signed-power row

API

Cubehelix gamma and signed-power color

Edit lightness interpolation and transform original color values.

createRectMark encodeColor editColorScale View full size

Two red to blue color rows computed with D65 and D50 Lab white points

API

Lab white point comparison

Choose a white point and edit it without changing the source values.

createRectMark encodeColor editColorScale View full size

A cyan bar with a blue outline produced by difference compositing on white

API

Bar difference compositing

Refine a complete bar with one compositing edit.

createBarPlot editBarMark View full size

A scatterplot with separate quantity and share axes and an inside horizontal title

API

Independent Cartesian axis owners

Create complete named axes before focused placement and text edits.

createAxes editYAxis editYAxisLabels View full size

Four narrow scatterplot panels above one horizontal legend owned by their parent

API

A shared legend across narrow facet panels

Declare and edit one parent legend across a repeated chart.

facet editLegendLayout View full size

Full circles in a scatterplot and a vertically cropped circle in its size legend

API

Encoded area symbol window

Clip an oversized sample without changing its physical area.

encodeSize createLegend editLegendSymbols View full size

Red and green legend circles with blue outlines composed at one shared layer opacity

API

Whole symbol opacity

Apply opacity to one recipe layer while retaining labels and mapped colors.

createLegend editLegendSymbols View full size

Wedge and arrow shapes at areas 100 and 225 with zero and ninety degree rotations

API

Directional point shapes preserve area

Refine a complete scatterplot with shape, physical area and angle encodings.

createScatterPlot encodeShape encodeSize encodeAngle View full size

Categorical shape and size samples alongside a shared numeric color and size list

API

Combined legends

Combine compatible quantitative color and size without changing mark data.

encodeColor encodeSize createLegend editLegend View full size

Horizontal color gradient with a dashed frame and bottom title above an independent size legend in the bottom left

API

Independent legend layout and border

Start with legend blocks, then edit orientation, title, border and one local anchor.

createLegend editLegendLayout editLegendBorder editLegendBlock View full size

Three blue size samples have equal seven-pixel gaps and clear a separate title by twenty pixels

API

Equal gaps between different-sized legend rows

Set occupied row gaps separately from title padding and legacy center pitch.

createLegend editLegendLayout View full size

A line and outlined orange point with an explicit opacity of 0.7 beside an unchanged text label

API

Opacity of a layered legend recipe

Style an existing legend with a complete line and point recipe.

createLegend editLegendLabels editLegendSymbols View full size

Nine stacked area series filled by one continuous HCL color scale

API

Quantitative color within independent area series

Declare complete areas and refine color independently from series layout.

createAreaPlot encodeGroup encodeColor layoutSeries View full size

An asymmetric blue bootstrap confidence band around a mean line for five groups

API

Reproducible bootstrap mean confidence intervals

Preserve raw observations and calculate reusable asymmetric intervals before drawing existing areas and lines.

createSummaryData createAreaPlot createLineMark View full size

Seven grouped bar panels retain their full height below a title and day headers in the existing top margin

API

Share the existing facet top margin

Keep fixed plot sizes while reusing existing top space for titles and facet headers.

facet editCompositionLayout editFacetHeaders View full size

Two rounded difference-blended bars use the gray axis and plot border as their backdrop

API

Composite marks over guides

Move a complete Cartesian axis or plot border behind ordinary marks without changing geometry.

createXAxis editXAxis editCanvas View full size

Two line panels labeled North and South vertically along their left edge

API

Vertical region headers

Put panel names beside their plots with an explicit header rotation.

facet editFacetHeaders editCompositionLayout View full size

Three bars showing mean age for groups First, Second and Third

API

Mean age by group

Copy typed reference values while keeping both original tables unchanged.

createData createLookupData createBarPlot View full size

Two line panels with vertical North and South names and one shared Region title

API

One field title across two panels

Add an independent field title to existing facet headers.

facet editFacetHeaders editCompositionLayout View full size

A line reaching 108 within an automatically rounded 0 through 110 Y domain

API

Count-based automatic linear domain

Choose automatic linear domain rounding without hard-coding a range for every panel.

createLinePlot editYScale editFacetScales View full size

A blue line on a Y axis labeled 0 through 140 at intervals of 20

API

Nearest-step automatic linear ticks

Use one automatic tick policy across independently scaled facet panels.

createLinePlot createYAxis editYAxisTicksAndLabels View full size

Documentation provenance

293 actions · sha256:e755591a2e5f5e2b494867583876e28020a478c5220b77bdc6ad469a6224891d