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

Simple Bar Chart Responsive Bar Chart Aggregate Bar Chart Aggregate Bar Chart (Sorted) Grouped Bar Chart Grouped Bar Chart (Multiple Measure with Repeat) Stacked Bar Chart Stacked Bar Chart with Rounded Corners Horizontal Stacked Bar Chart Normalized (Percentage) Stacked Bar Chart Normalized (Percentage) Stacked Bar Chart With Labels Gantt Chart (Ranged Bar Marks) A Bar Chart Encoding Color Names in the Data Layered Bar Chart Diverging Stacked Bar Chart (Population Pyramid) Diverging Stacked Bar Chart (with Neutral Parts) Bar Chart with Labels Bar Chart with Label Overlays Bar Chart showing Initials of Month Names Bar Chart with bars center-aligned with time unit ticks Bar Chart with Negative Values and a Zero-Baseline Horizontal Bar Chart with Negative Values and Labels Bar Chart with a Spacing-Saving Y-Axis Heat Lane Chart

Histograms, Density Plots, and Dot Plots

Histogram Histogram (from Binned Data) Log-scaled Histogram Non-linear Histogram Relative Frequency Histogram Density Plot Stacked Density Estimates 2D Histogram Scatterplot 2D Histogram Heatmap Cumulative Frequency Distribution Layered Histogram and Cumulative Histogram Wilkinson Dot Plot Isotype Dot Plot Isotype Dot Plot with Emoji Relative Bar Chart (Calculate Percentage of Total)

Scatter & Strip Plots

Scatterplot 1D Strip Plot Strip Plot Colored Scatterplot 2D Histogram 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 Image-based Scatter Plot Strip plot with custom axis tick labels Dot Plot with Jittering

Line Charts

Line Chart Line Chart with Point Markers Line Chart with Stroked Point Markers Multi Series Line Chart Multi Series Line Chart with Repeat Operator Multi Series Line Chart with Halo Stroke Slope Graph Step Chart Line Chart with Monotone Interpolation Line Chart with Conditional Axis Properties Connected Scatterplot (Lines with Custom Paths) Bump Chart Line Chart with Varying Size (using the trail mark) A comet chart showing changes between between two states Line Chart with Markers and Invalid Values Carbon Dioxide in the Atmosphere Line Charts Showing Ranks Over Time Drawing Sine and Cosine Curves with the Sequence Generator Line chart with varying stroke dash Line chart with a dashed part

Area Charts & Streamgraphs

Area Chart Area Chart with Gradient 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 2D Histogram Heatmap Table Bubble Plot (Github Punch Card) Heatmap with Labels Lasagna Plot (Dense Time-Series Heatmap) Mosaic Chart with Labels Wind Vector Map

Circular Plots

Pie Chart Pie Chart with percentage_tooltip Donut Chart Pie Chart with Labels Radial Plot Pyramid Pie Chart

Advanced Calculations

Relative Bar Chart (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 Filtering Top-K Items Top-K Plot with “Others” Using the lookup transform to combine data Cumulative Frequency Distribution Layered Histogram and Cumulative Histogram Parallel Coordinate Plot Bar Chart Showing Argmax Value Layering Averages over Raw Values Layering Rolling Averages over Raw Values Line Chart to Show Benchmarking Results Quantile-Quantile Plot (QQ Plot) Linear Regression Loess Regression Using window transform to impute missing values by averaging the previous and next values.

Composite Marks

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) Box Plot with Pre-Calculated Summaries

Layered Plots

Labeling & Annotation

Simple Bar Chart with Labels Simple Bar Chart with Labels and Emojis Layering text over heatmap Carbon Dioxide in the Atmosphere Bar Chart Highlighting Values beyond a Threshold Mean overlay over precipitation chart Histogram with a Global Mean Overlay Line Chart with Highlighted Rectangles Layering Averages over Raw Values Layering Rolling Averages over Raw Values Distributions and Medians of Likert Scale Ratings Comparative Likert Scale Ratings

Other Layered Plots

Candlestick Chart Ranged Dot Plot Bullet Chart Layered Plot with Dual-Axis Horizon Graph Weekly Weather Plot Wheat and Wages Example

Multi-View Displays

Faceting (Trellis Plot / Small Multiples)

Trellis Bar Chart Trellis Stacked Bar Chart Trellis Scatter Plot (wrapped) Trellis Histograms Trellis Scatter Plot Showing Anscombe’s Quartet Becker’s Barley Trellis Plot Trellis Area Trellis Area Plot Showing Annual Temperatures in Seattle Faceted Density Plot Compact Trellis Grid of Bar Charts

Repeat & Concatenation

Repeat and Layer to Show Different Movie Measures Vertical Concatenation Horizontally Repeated Charts Interactive Scatterplot Matrix Marginal Histograms Discretizing scales Nested View Concatenation Aligned with Axis minExtent Population Pyramid

Maps (Geographic Displays)

Choropleth of Unemployment Rate per County One Dot per Zipcode in the U.S. One Dot per Airport in the U.S. Overlayed on Geoshape Rules (line segments) Connecting SEA to every Airport Reachable via Direct Flights Three Choropleths Representing Disjoint Data from the Same Table U.S. State Capitals Overlayed on a Map of U.S. Line between Airports in the U.S. Income in the U.S. by State, Faceted over Income Brackets London Tube Lines Projection explorer Earthquakes Example

Interactive

Interactive Charts

Bar Chart with Highlighting on Hover and Selection on Click Histogram with Full-Height Hover Targets for Tooltip Interactive Legend 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 an Interactive Line Highlight Multi Series Line Chart with an Interactive Point Highlight Multi Series Line Chart with Labels Multi Series Line Chart with Tooltip Multi Series Line Chart with Tooltip Isotype Grid Brushing Scatter Plot to show data on a table Selectable Heatmap Bar Chart with a Minimap Interactive Index Chart Focus + Context - Smooth Histogram Zooming Dynamic Color Legend Search Input Change zorder on hover

Interactive Multi-View Displays

Overview and Detail Crossfilter (Filter) Crossfilter (Highlight) Interactive Scatterplot Matrix Interactive Dashboard with Cross Highlight Seattle Weather Exploration Connections among Major U.S. Airports. An interactive scatter plot of global health statistics by country and year.

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.