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 Line Chart with Square Stroke Cap 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 Table Binned heatmap Table Bubble Plot (Github Punch Card) Layering text over heatmap

Advanced Calculations

Calculate Percentage of Total Calculate Difference from Average Calculate Difference from Annual Average Calculate Residuals Line Charts Showing Ranks Over Time Using the lookup transform to combine data

Layered & 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

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

Box Plots

Box Plot with Min/Max Whiskers Tukey Box Plot (1.5 IQR)

Using Layer to Add Labels

Simple Bar Chart with Labels Layering text over heatmap Carbon Dioxide in the Atmosphere

Other Layered Displays

Bar chart that highlights values beyond a threshold Mean overlay over precipitation chart Candlestick Chart Histogram with a Global Mean Overlay Line Chart with Highlighted Rectangles Ranged Dot Plot Layered Plot with Dual-Axis Horizon Graph

Repeat & Concatenation

Repeat and layer to show different weather measures Vertically concatenated charts that show precipitation in Seattle Horizontally repeated charts

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 Charts

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 Scatterplot Matrix Interactive Dashboard with Cross Highlight

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.