This website is for Vega-Lite v2. Go to the main Vega-Lite homepage for the latest release.

Example Gallery

This page shows example specifications for different types of graphics. To see example code for embedding visualizations in a webpage, please read the embed documentation.

Single-View Plots

Bar Charts & Histograms

Simple Bar Chart Histogram Aggregate Bar Chart Grouped Bar Chart Stacked Bar Chart Horizontal Stacked Bar Chart Normalized Stacked Bar Chart Gantt Chart (Ranged Bar Marks) A bar chart encoding color names in the data Layered Bar Chart Diverging Stacked Bar Chart Simple Bar Chart with Labels

Scatter & Strip Plots

Scatterplot Dot Plot Strip Plot Colored Scatterplot Binned Scatterplot Bubble Plot Scatterplot with Null Values in Grey Scatterplot with Filled Circles Bubble Plot (Gapminder) Bubble Plot (Natural Disasters) Scatter Plot with Text Marks

Line Charts

Line Chart Line Chart with Overlaying Point Markers Multi Series Line Chart Slope Graph Step Chart Line Chart with Monotone Interpolation Connected Scatterplot (Lines with Custom Paths) Line Chart with Varying Size (using the trail mark) Line Chart with Markers and Invalid Values Carbon Dioxide in the Atmosphere Line Charts Showing Ranks Over Time

Area Charts & Streamgraphs

Area Chart Area Chart with Overlaying Lines and Point Markers Stacked Area Chart Normalized Stacked Area Chart Streamgraph Horizon Graph

Table-based Plots

Table Heatmap Annual Weather Heatmap Table Binned heatmap Table Bubble Plot (Github Punch Card) Layering text over heatmap

Distribution Plots

Histogram Cumulative Frequency Distribution Layered Histogram and Cumulative Histogram Box Plot with Min/Max Whiskers Tukey Box Plot (1.5 IQR)

Advanced Calculations

Calculate Percentage of Total Calculate Difference from Average Calculate Difference from Annual Average Calculate Residuals Line Charts Showing Ranks Over Time Waterfall Chart of Monthly Profit and Loss Using the lookup transform to combine data

Layered Plots

Error Bars & Error Bands

Error Bars showing Confidence Interval Error Bars showing Standard Deviation Line Chart with Confidence Interval Band Scatterplot with Mean and Standard Deviation Overlay

Labeling & Annotation

Simple Bar Chart with Labels Layering text over heatmap Carbon Dioxide in the Atmosphere Bar chart that highlights values beyond a threshold Mean overlay over precipitation chart Histogram with a Global Mean Overlay Line Chart with Highlighted Rectangles

Other Layered Plots

Candlestick Chart Ranged Dot Plot Bullet Chart Layered Plot with Dual-Axis Horizon Graph Weekly Weather Plot

Multi-View Displays

Faceting (Trellis Plot / Small Multiples)

Trellis Bar Chart Trellis Stacked Bar Chart Trellis Scatter Plot Trellis Histograms Trellis Scatter Plot showing Anscombe’s Quartet Becker’s Barley Trellis Plot Trellis Area

Repeat & Concatenation

Repeat and layer to show different weather measures Vertically concatenated charts that show precipitation in Seattle Horizontally repeated charts Interactive Scatterplot Matrix Marginal Histograms

Maps (Geographic Displays)

Choropleth of unemployment rate per county One dot per zipcode in the U.S One dot per airport in the US overlayed on geoshape Rules (line segments) connecting SEA to every airport reachable via direct flight Three choropleths representing disjoint data from the same table U.S. state capitals overlayed on a map of the U.S Line drawn between airports in the U.S. simulating a flight itinerary Income in the U.S. by state, faceted over income brackets London Tube Lines

Interactive

Interactive Charts

Scatterplot with External Links and Tooltips Rectangular Brush Area Chart with Rectangular Brush Paintbrush Highlight Scatterplot Pan & Zoom Query Widgets Interactive Average Multi Series Line Chart with Tooltips

Interactive Multi-View Displays

Overview and Detail Crossfilter Interactive Scatterplot Matrix Interactive Dashboard with Cross Highlight Seattle Weather Exploration

Community Examples

Here we list great examples of Vega-Lite visualizations that were created by the community. Please help us expand this gallery by forking our example block and sending us a pull request with your example added to this list.