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

Tutorial

Scatterplot

Compare two quantitative fields and encode a category with color.

createScatterPlot 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

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

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 closed 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.

selectMarks highlightMarks View full size