Generated with Clerk from src/convert.clj@cbc1d1f

vega-lite example Gallery in EDN

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 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
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)
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 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 Chart
Area Chart with Gradient
Area Chart with Overlaying Lines and Point Markers
Stacked Area Chart
Normalized Stacked Area Chart
Streamgraph
Horizon Graph
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
Pie Chart
Pie Chart with percentage_tooltip
Donut Chart
Pie Chart with Labels
Radial Plot
Pyramid Pie Chart
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
Error Bars Showing Confidence Interval
Error Bars Showing Standard Deviation
Line Chart with Confidence Interval Band
Scatterplot with Mean and Standard Deviation Overlay
Box Plot with Min/Max Whiskers
Tukey Box Plot (1.5 IQR)
Box Plot with Pre-Calculated Summaries
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
Candlestick Chart
Ranged Dot Plot
Bullet Chart
Layered Plot with Dual-Axis
Horizon Graph
Weekly Weather Plot
Wheat and Wages Example
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 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
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.
London Tube Lines
Projection explorer
Earthquakes Example
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
Interactive Index Chart
Focus + Context - Smooth Histogram Zooming
Overview and Detail
Crossfilter
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.

Examples

Simple Bar Chart

A bar chart encodes quantitative values as the extent of rectangular bars.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b 28}
{:a "B" :b 55}
{:a "C" :b 43}
{:a "D" :b 91}
{:a "E" :b 81}
{:a "F" :b 53}
{:a "G" :b 19}
{:a "H" :b 87}
{:a "I" :b 52}]}
:description "A simple bar chart with embedded data."
:encoding {:x {:axis {:labelAngle 0} :field "a" :type "nominal"}
:y {:field "b" :type "quantitative"}}
:mark "bar"}

Responsive Bar Chart

The bar gets automatically resized based on container size. To see how the bar gets automatically resized try this in [the editor](https://vega.github.io/editor/#/examples/vega-lite/bar_size_responsive).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:x {:field "Origin"}
:y {:aggregate "count" :title "Number of Cars"}}
:height 250
:mark "bar"
:width "container"}

Aggregate Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:description "A bar chart showing the US population distribution of age groups in 2000."
:encoding {:x {:aggregate "sum" :field "people" :title "population"}
:y {:field "age"}}
:height {:step 17}
:mark "bar"
:transform [{:filter "datum.year == 2000"}]}

Aggregate Bar Chart (Sorted)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:description "A bar chart that sorts the y-values by the x-values."
:encoding {:x {:aggregate "sum" :field "people" :title "population"}
:y {:field "age" :sort "-x" :type "ordinal"}}
:height {:step 17}
:mark "bar"
:transform [{:filter "datum.year == 2000"}]}

Grouped Bar Chart

Read [here](https://vega.github.io/vega-lite/docs/size.html#offset-step) for more details about how to set step size for grouped bar.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category "A" :group "x" :value 0.1}
{:category "A" :group "y" :value 0.6}
{:category "A" :group "z" :value 0.9}
{:category "B" :group "x" :value 0.7}
{:category "B" :group "y" :value 0.2}
{:category "B" :group "z" :value 1.1}
{:category "C" :group "x" :value 0.6}
{:category "C" :group "y" :value 0.1}
{:category "C" :group "z" :value 0.2}]}
:encoding {:color {:field "group"}
:x {:field "category"}
:xOffset {:field "group"}
:y {:field "value" :type "quantitative"}}
:mark "bar"}

Grouped Bar Chart (Multiple Measure with Repeat)

Read [here](https://vega.github.io/vega-lite/docs/size.html#offset-step) for more details about how to set step size for grouped bar.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:mark {:invalid nil}}
:data {:url "data/movies.json"}
:repeat {:layer ["Worldwide Gross" "US Gross"]}
:spec {:encoding {:color {:datum {:repeat "layer"} :title "Gross"}
:x {:field "Major Genre" :type "nominal"}
:xOffset {:datum {:repeat "layer"}}
:y {:aggregate "sum"
:field {:repeat "layer"}
:title "Total Gross"
:type "quantitative"}}
:mark "bar"}}

Stacked Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:encoding {:color {:field "weather"
:scale {:domain ["sun" "fog" "drizzle" "rain" "snow"]
:range ["#e7ba52"
"#c7c7c7"
"#aec7e8"
"#1f77b4"
"#9467bd"]}
:title "Weather type"
:type "nominal"}
:x {:field "date"
:timeUnit "month"
:title "Month of the year"
:type "ordinal"}
:y {:aggregate "count" :type "quantitative"}}
:mark "bar"}

Stacked Bar Chart with Rounded Corners

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:encoding {:color {:field "weather"}
:x {:field "date" :timeUnit "month" :type "ordinal"}
:y {:aggregate "count"}}
:mark {:cornerRadiusTopLeft 3 :cornerRadiusTopRight 3 :type "bar"}}

Horizontal Stacked Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:encoding {:color {:field "site"}
:x {:aggregate "sum" :field "yield"}
:y {:field "variety"}}
:mark "bar"}

Normalized (Percentage) Stacked Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:encoding {:color {:field "gender" :scale {:range ["#675193" "#ca8861"]}}
:x {:field "age"}
:y {:aggregate "sum"
:field "people"
:stack "normalize"
:title "population"}}
:mark "bar"
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}]
:width {:step 17}}

Normalized (Percentage) Stacked Bar Chart With Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:encoding {:y {:field "age"}}
:height {:step 17}
:layer [{:encoding {:color {:field "gender"
:scale {:range ["#675193" "#ca8861"]}}
:x {:aggregate "sum"
:field "people"
:stack "normalize"
:title "population"}}
:mark "bar"}
{:encoding {:detail {:field "gender"}
:text {:aggregate "sum"
:field "people"
:title "population"}
:x {:aggregate "sum"
:bandPosition 0.5
:field "people"
:stack "normalize"
:title "population"}}
:mark {:color "white" :opacity 0.9 :type "text"}}]
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}]}

Gantt Chart (Ranged Bar Marks)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:end 3 :start 1 :task "A"}
{:end 8 :start 3 :task "B"}
{:end 10 :start 8 :task "C"}]}
:description "A simple bar chart with ranged data (aka Gantt Chart)."
:encoding {:x {:field "start" :type "quantitative"}
:x2 {:field "end"}
:y {:field "task" :type "ordinal"}}
:mark "bar"}

A Bar Chart Encoding Color Names in the Data

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:b 28 :color "red"}
{:b 55 :color "green"}
{:b 43 :color "blue"}]}
:description "A bar chart that directly encodes color names in the data."
:encoding {:color {:field "color" :scale nil :type "nominal"}
:x {:field "color" :type "nominal"}
:y {:field "b" :type "quantitative"}}
:mark "bar"}

Layered Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:description "A bar chart showing the US population distribution of age groups and gender in 2000."
:encoding {:color {:field "gender" :scale {:range ["#675193" "#ca8861"]}}
:opacity {:value 0.7}
:x {:field "age" :type "ordinal"}
:y {:aggregate "sum" :field "people" :stack nil :title "population"}}
:mark "bar"
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}]
:width {:step 17}}

Diverging Stacked Bar Chart (Population Pyramid)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:grid false} :view {:stroke nil}}
:data {:url "data/population.json"}
:description "A population pyramid for the US in 2000, created using stack. See https://vega.github.io/vega-lite/examples/concat_population_pyramid.html for a variant of this created using concat."
:encoding {:color {:field "gender"
:legend {:orient "top" :title nil}
:scale {:range ["#675193" "#ca8861"]}}
:x {:aggregate "sum"
:axis {:format "s"}
:field "signed_people"
:title "population"}
:y {:axis nil :field "age" :sort "descending"}}
:height 200
:mark "bar"
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}
{:as "signed_people"
:calculate "datum.sex == 2 ? -datum.people : datum.people"}]
:width 300}

Diverging Stacked Bar Chart (with Neutral Parts)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:percentage 0.7
:question "Question 1"
:type "Strongly disagree"
:value 24}
{:percentage 9.1
:question "Question 1"
:type "Disagree"
:value 294}
{:percentage 18.5
:question "Question 1"
:type "Neither agree nor disagree"
:value 594}
{:percentage 59.9
:question "Question 1"
:type "Agree"
:value 1927}
{:percentage 11.7
:question "Question 1"
:type "Strongly agree"
:value 376}
{:percentage 18.2
:question "Question 2"
:type "Strongly disagree"
:value 2}
{:percentage 18.2
:question "Question 2"
:type "Disagree"
:value 2}
{:percentage 0
:question "Question 2"
:type "Neither agree nor disagree"
:value 0}
{:percentage 63.6
:question "Question 2"
:type "Agree"
:value 7}
{:percentage 0
:question "Question 2"
:type "Strongly agree"
:value 11}
{:percentage 20
:question "Question 3"
:type "Strongly disagree"
:value 2}
{:percentage 0
:question "Question 3"
:type "Disagree"
:value 0}
{:percentage 20
:question "Question 3"
:type "Neither agree nor disagree"
:value 2}
{:percentage 40 :question "Question 3" :type "Agree" :value 4}
{:percentage 20
:question "Question 3"
:type "Strongly agree"
:value 2}
{:percentage 0
:question "Question 4"
:type "Strongly disagree"
:value 0}
{:percentage 12.5
:question "Question 4"
:type "Disagree"
:value 2}
{:percentage 6.3
:question "Question 4"
:type "Neither agree nor disagree"
:value 1}
{:percentage 43.8
:question "Question 4"
:type "Agree"
:value 7}
{:percentage 37.5
:question "Question 4"
:type "Strongly agree"
:value 6}
{:percentage 0
:question "Question 5"
:type "Strongly disagree"
:value 0}
{:percentage 4.2
:question "Question 5"
:type "Disagree"
:value 1}
{:percentage 12.5
:question "Question 5"
:type "Neither agree nor disagree"
:value 3}
{:percentage 66.7
:question "Question 5"
:type "Agree"
:value 16}
{:percentage 16.7
:question "Question 5"
:type "Strongly agree"
:value 4}
{:percentage 6.3
:question "Question 6"
:type "Strongly disagree"
:value 1}
{:percentage 6.3
:question "Question 6"
:type "Disagree"
:value 1}
{:percentage 12.5
:question "Question 6"
:type "Neither agree nor disagree"
:value 2}
{:percentage 56.3
:question "Question 6"
:type "Agree"
:value 9}
{:percentage 18.8
:question "Question 6"
:type "Strongly agree"
:value 3}
{:percentage 0
:question "Question 7"
:type "Strongly disagree"
:value 0}
{:percentage 0
:question "Question 7"
:type "Disagree"
:value 0}
{:percentage 20
:question "Question 7"
:type "Neither agree nor disagree"
:value 1}
{:percentage 80 :question "Question 7" :type "Agree" :value 4}
{:percentage 0
:question "Question 7"
:type "Strongly agree"
:value 0}
{:percentage 0
:question "Question 8"
:type "Strongly disagree"
:value 0}
{:percentage 0
:question "Question 8"
:type "Disagree"
:value 0}
{:percentage 0
:question "Question 8"
:type "Neither agree nor disagree"
:value 0}
{:percentage 0 :question "Question 8" :type "Agree" :value 0}
{:percentage 100
:question "Question 8"
:type "Strongly agree"
:value 2}]}
:description "A diverging stacked bar chart for sentiments towards a set of eight questions, displayed as percentages with neutral responses straddling the 0% mark"
:encoding {:color {:field "type"
:scale {:domain ["Strongly disagree"
"Disagree"
"Neither agree nor disagree"
"Agree"
"Strongly agree"]
:range ["#c30d24"
"#f3a583"
"#cccccc"
"#94c6da"
"#1770ab"]
:type "ordinal"}
:title "Response"
:type "nominal"}
:x {:field "nx" :title "Percentage" :type "quantitative"}
:x2 {:field "nx2"}
:y {:axis {:domain false :minExtent 60 :offset 5 :ticks false}
:field "question"
:title "Question"
:type "nominal"}}
:mark "bar"
:transform [{:as "q_order"
:calculate "if(datum.type === 'Strongly disagree',-2,0) + if(datum.type==='Disagree',-1,0) + if(datum.type =='Neither agree nor disagree',0,0) + if(datum.type ==='Agree',1,0) + if(datum.type ==='Strongly agree',2,0)"}
{:as "signed_percentage"
:calculate "if(datum.type === 'Disagree' || datum.type === 'Strongly disagree', datum.percentage,0) + if(datum.type === 'Neither agree nor disagree', datum.percentage / 2,0)"}
{:as ["v1" "v2"] :groupby ["question"] :stack "percentage"}
{:groupby ["question"]
:joinaggregate [{:as "offset"
:field "signed_percentage"
:op "sum"}]}
{:as "nx" :calculate "datum.v1 - datum.offset"}
{:as "nx2" :calculate "datum.v2 - datum.offset"}]}

Bar Chart with Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b 28} {:a "B" :b 55} {:a "C" :b 43}]}
:description "Bar chart with text labels. Set domain to make the frame cover the labels."
:encoding {:x {:field "b" :scale {:domain [0 60]} :type "quantitative"}
:y {:field "a" :type "nominal"}}
:layer [{:mark "bar"}
{:encoding {:text {:field "b" :type "quantitative"}}
:mark {:align "left" :baseline "middle" :dx 3 :type "text"}}]}

Bar Chart with Label Overlays

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:y {:axis nil :field "Major Genre" :type "nominal"}}
:height {:step 16}
:layer [{:encoding {:x {:aggregate "mean"
:field "IMDB Rating"
:scale {:domain [0 10]}
:title "Mean IMDB Ratings"}}
:mark {:color "#ddd" :type "bar"}}
{:encoding {:detail {:aggregate "count"} :text {:field "Major Genre"}}
:mark {:align "left" :type "text" :x 5}}]
:width 200}

Bar Chart showing Initials of Month Names

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:description "Using `labelExpr` to show only initial letters of month names."
:encoding {:x {:axis {:labelAlign "left" :labelExpr "datum.label[0]"}
:field "date"
:timeUnit "month"}
:y {:aggregate "mean" :field "precipitation"}}
:mark "bar"}

Bar Chart with Negative Values and a Zero-Baseline

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b -28}
{:a "B" :b 55}
{:a "C" :b -33}
{:a "D" :b 91}
{:a "E" :b 81}
{:a "F" :b 53}
{:a "G" :b -19}
{:a "H" :b 87}
{:a "I" :b 52}]}
:description "A bar chart with negative values. We can hide the axis domain line, and instead use a conditional grid color to draw a zero baseline."
:encoding {:x {:axis {:domain false :labelAngle 0 :labelPadding 4 :ticks false}
:field "a"
:type "nominal"}
:y {:axis {:gridColor {:condition {:test "datum.value === 0"
:value "black"}
:value "#ddd"}}
:field "b"
:type "quantitative"}}
:mark "bar"}

Horizontal Bar Chart with Negative Values and Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b -28}
{:a "B" :b 55}
{:a "C" :b -33}
{:a "D" :b 91}
{:a "E" :b 81}
{:a "F" :b 53}
{:a "G" :b -19}
{:a "H" :b 87}
{:a "I" :b 52}]}
:description "A bar chart with negative values. We can hide the axis domain line, and instead use a conditional grid color to draw a zero baseline."
:encoding {:x {:axis {:gridColor {:condition {:test "datum.value === 0"
:value "black"}
:value "#ddd"}}
:field "b"
:scale {:padding 20}
:type "quantitative"}
:y {:axis {:domain false :labelAngle 0 :labelPadding 4 :ticks false}
:field "a"
:type "nominal"}}
:layer [{:mark "bar"}
{:encoding {:text {:field "b" :type "quantitative"}}
:mark {:align {:expr "datum.b < 0 ? 'right' : 'left'"}
:dx {:expr "datum.b < 0 ? -2 : 2"}
:type "text"}}]}

Bar Chart with a Spacing-Saving Y-Axis

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Bar Chart with a spacing-saving y-axis"
:encoding {:x {:aggregate "count" :axis {:grid false} :title "Number of Cars"}
:y {:axis {:bandPosition 0
:domain false
:grid true
:labelAlign "left"
:labelBaseline "middle"
:labelOffset -15
:labelPadding -5
:ticks false
:titleAlign "left"
:titleAngle 0
:titleX 5
:titleY -5}
:field "Origin"
:scale {:padding 0}}}
:height {:step 50}
:mark {:cornerRadiusEnd 2 :height {:band 0.5} :type "bar" :yOffset 5}}

Heat Lane Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/"
:encoding {:x {:axis {:grid false}
:field "bin_Horsepower_start"
:title "Horsepower"
:type "quantitative"}
:x2 {:field "bin_Horsepower_end"}
:y {:axis nil :field "y"}
:y2 {:field "y2"}}
:height 150
:layer [{:encoding {:color {:field "max_bin_count_end"
:scale {:scheme "lighttealblue"}
:title "count"
:type "ordinal"}}
:mark {:cornerRadius 3 :type "bar" :x2Offset -2 :xOffset 2}}
{:encoding {:color {:field "bin_count_end"
:title "count"
:type "ordinal"}}
:mark {:type "bar" :x2Offset -2 :xOffset 2 :y2Offset 3 :yOffset -3}}]
:title "Heat Lane of Horsepower"
:transform [{:as ["bin_Horsepower_start" "bin_Horsepower_end"]
:bin true
:field "Horsepower"}
{:aggregate [{:as "count" :op "count"}]
:groupby ["bin_Horsepower_start" "bin_Horsepower_end"]}
{:as ["bin_count_start" "bin_count_end"] :bin true :field "count"}
{:as "y2" :calculate "-datum.bin_count_end/2"}
{:as "y" :calculate "datum.bin_count_end/2"}
{:joinaggregate [{:as "max_bin_count_end"
:field "bin_count_end"
:op "max"}]}]
:width 400}

Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:bin true :field "IMDB Rating"} :y {:aggregate "count"}}
:mark "bar"}

Histogram (from Binned Data)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:bin_end 10 :bin_start 8 :count 7}
{:bin_end 12 :bin_start 10 :count 29}
{:bin_end 14 :bin_start 12 :count 71}
{:bin_end 16 :bin_start 14 :count 127}
{:bin_end 18 :bin_start 16 :count 94}
{:bin_end 20 :bin_start 18 :count 54}
{:bin_end 22 :bin_start 20 :count 17}
{:bin_end 24 :bin_start 22 :count 5}]}
:encoding {:x {:bin {:binned true :step 2} :field "bin_start"}
:x2 {:field "bin_end"}
:y {:field "count" :type "quantitative"}}
:mark "bar"}

Log-scaled Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:x 0.01}
{:x 0.1}
{:x 1}
{:x 1}
{:x 1}
{:x 1}
{:x 10}
{:x 10}
{:x 100}
{:x 500}
{:x 800}]}
:description "Log-scaled Histogram. We may improve the support of this. See https://github.com/vega/vega-lite/issues/4792."
:encoding {:x {:axis {:tickCount 5} :field "x1" :scale {:base 10 :type "log"}}
:x2 {:field "x2"}
:y {:aggregate "count"}}
:mark "bar"
:transform [{:as "log_x" :calculate "log(datum.x)/log(10)"}
{:as "bin_log_x" :bin true :field "log_x"}
{:as "x1" :calculate "pow(10, datum.bin_log_x)"}
{:as "x2" :calculate "pow(10, datum.bin_log_x_end)"}]}

Non-linear Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:endTime "8.33" :residency 0 :startTime "0"}
{:endTime "12.50" :residency 0 :startTime "8.33"}
{:endTime "16.67" :residency 31.17 :startTime "12.50"}
{:endTime "33.33" :residency 38.96 :startTime "16.67"}
{:endTime "50.00" :residency 6.49 :startTime "33.33"}
{:endTime "66.67" :residency 2.9 :startTime "50.00"}
{:endTime "83.33" :residency 2.6 :startTime "66.67"}
{:endTime "" :residency 16.88 :startTime "83.33"}]}
:description "A histogram for a data source that provides non-linear bins. Thanks to [@Saba9](https://github.com/Saba9) who helps create this example."
:encoding {:x {:axis {:labelAngle 0}
:field "startTime"
:scale {:padding 0 :type "point"}
:sort nil
:title ""
:type "ordinal"}
:x2 {:field "endTime"}
:y {:axis {:labelExpr "datum.label + '%'"}
:field "residency"
:scale {:domain [0 100]}
:title ""
:type "quantitative"}}
:height 100
:mark {:cornerRadiusEnd 0 :orient "vertical" :type "bar"}
:title "Distribution of Frame Render Time (ms)"
:width {:step 40}}

Relative Frequency Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Relative frequency histogram. The data is binned with first transform. The number of values per bin and the total number are calculated in the second and third transform to calculate the relative frequency in the last transformation step."
:encoding {:x {:bin {:binned true} :field "bin_Horsepwoer" :title "Horsepower"}
:x2 {:field "bin_Horsepwoer_end"}
:y {:axis {:format ".1~%"}
:field "PercentOfTotal"
:title "Relative Frequency"
:type "quantitative"}}
:mark {:tooltip true :type "bar"}
:transform [{:as "bin_Horsepwoer" :bin true :field "Horsepower"}
{:aggregate [{:as "Count" :op "count"}]
:groupby ["bin_Horsepwoer" "bin_Horsepwoer_end"]}
{:joinaggregate [{:as "TotalCount" :field "Count" :op "sum"}]}
{:as "PercentOfTotal" :calculate "datum.Count/datum.TotalCount"}]}

Density Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:field "value" :title "IMDB Rating" :type "quantitative"}
:y {:field "density" :type "quantitative"}}
:height 100
:mark "area"
:transform [{:bandwidth 0.3 :density "IMDB Rating"}]
:width 400}

Stacked Density Estimates

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/penguins.json"}
:encoding {:color {:field "Species" :type "nominal"}
:x {:field "value" :title "Body Mass (g)" :type "quantitative"}
:y {:field "density" :stack "zero" :type "quantitative"}}
:height 80
:mark "area"
:title "Distribution of Body Mass of Penguins"
:transform [{:density "Body Mass (g)" :extent [2500 6500] :groupby ["Species"]}]
:width 400}

2D Histogram Scatterplot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:size {:aggregate "count"}
:x {:bin {:maxbins 10} :field "IMDB Rating"}
:y {:bin {:maxbins 10} :field "Rotten Tomatoes Rating"}}
:mark "circle"}

2D Histogram Heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke "transparent"}}
:data {:url "data/movies.json"}
:encoding {:color {:aggregate "count" :type "quantitative"}
:x {:bin {:maxbins 60} :field "IMDB Rating" :type "quantitative"}
:y {:bin {:maxbins 40}
:field "Rotten Tomatoes Rating"
:type "quantitative"}}
:height 200
:mark "rect"
:transform [{:filter {:and [{:field "IMDB Rating" :valid true}
{:field "Rotten Tomatoes Rating" :valid true}]}}]
:width 300}

Cumulative Frequency Distribution

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:field "IMDB Rating" :type "quantitative"}
:y {:field "Cumulative Count" :type "quantitative"}}
:mark "area"
:transform [{:frame [nil 0]
:sort [{:field "IMDB Rating"}]
:window [{:as "Cumulative Count" :field "count" :op "count"}]}]}

Layered Histogram and Cumulative Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:bin "binned"
:field "bin_IMDB_Rating"
:scale {:zero false}
:title "IMDB Rating"
:type "quantitative"}
:x2 {:field "bin_IMDB_Rating_end"}}
:layer [{:encoding {:y {:field "Cumulative Count" :type "quantitative"}}
:mark "bar"}
{:encoding {:y {:field "count" :type "quantitative"}}
:mark {:color "yellow" :opacity 0.5 :type "bar"}}]
:transform [{:as "bin_IMDB_Rating" :bin true :field "IMDB Rating"}
{:aggregate [{:as "count" :op "count"}]
:groupby ["bin_IMDB_Rating" "bin_IMDB_Rating_end"]}
{:filter "datum.bin_IMDB_Rating !== null"}
{:frame [nil 0]
:sort [{:field "bin_IMDB_Rating"}]
:window [{:as "Cumulative Count" :field "count" :op "sum"}]}]}

Wilkinson Dot Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [1 1 1 1 1 1 1 1 1 1 2 2 2 3 3 4 4 4 4 4 4]}
:description "A Wilkinson Dot Plot"
:encoding {:x {:field "data" :type "ordinal"}
:y {:axis nil :field "id" :sort "descending" :type "ordinal"}}
:height 100
:mark {:opacity 1 :type "circle"}
:transform [{:groupby ["data"] :window [{:as "id" :op "rank"}]}]}

Isotype Dot Plot

Inspired by this [Only An Ocean Between, 1943](http://www.thomwhite.co.uk/?p=1303). Population Live Stock, p.13. This example was created by [@jwoLondon](https://github.com/jwoLondon).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke ""}}
:data {:values [{:animal "cattle" :col 3 :country "Great Britain"}
{:animal "cattle" :col 2 :country "Great Britain"}
{:animal "cattle" :col 1 :country "Great Britain"}
{:animal "pigs" :col 2 :country "Great Britain"}
{:animal "pigs" :col 1 :country "Great Britain"}
{:animal "sheep" :col 10 :country "Great Britain"}
{:animal "sheep" :col 9 :country "Great Britain"}
{:animal "sheep" :col 8 :country "Great Britain"}
{:animal "sheep" :col 7 :country "Great Britain"}
{:animal "sheep" :col 6 :country "Great Britain"}
{:animal "sheep" :col 5 :country "Great Britain"}
{:animal "sheep" :col 4 :country "Great Britain"}
{:animal "sheep" :col 3 :country "Great Britain"}
{:animal "sheep" :col 2 :country "Great Britain"}
{:animal "sheep" :col 1 :country "Great Britain"}
{:animal "cattle" :col 9 :country "United States"}
{:animal "cattle" :col 8 :country "United States"}
{:animal "cattle" :col 7 :country "United States"}
{:animal "cattle" :col 6 :country "United States"}
{:animal "cattle" :col 5 :country "United States"}
{:animal "cattle" :col 4 :country "United States"}
{:animal "cattle" :col 3 :country "United States"}
{:animal "cattle" :col 2 :country "United States"}
{:animal "cattle" :col 1 :country "United States"}
{:animal "pigs" :col 6 :country "United States"}
{:animal "pigs" :col 5 :country "United States"}
{:animal "pigs" :col 4 :country "United States"}
{:animal "pigs" :col 3 :country "United States"}
{:animal "pigs" :col 2 :country "United States"}
{:animal "pigs" :col 1 :country "United States"}
{:animal "sheep" :col 7 :country "United States"}
{:animal "sheep" :col 6 :country "United States"}
{:animal "sheep" :col 5 :country "United States"}
{:animal "sheep" :col 4 :country "United States"}
{:animal "sheep" :col 3 :country "United States"}
{:animal "sheep" :col 2 :country "United States"}
{:animal "sheep" :col 1 :country "United States"}]}
:encoding {:color {:field "animal"
:legend nil
:scale {:domain ["person" "cattle" "pigs" "sheep"]
:range ["rgb(162,160,152)"
"rgb(194,81,64)"
"rgb(93,93,93)"
"rgb(91,131,149)"]}
:type "nominal"}
:opacity {:value 1}
:row {:field "country" :header {:title ""}}
:shape {:field "animal"
:legend nil
:scale {:domain ["person" "cattle" "pigs" "sheep"]
:range ["M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z"
"M4 -2c0 0 0.9 -0.7 1.1 -0.8c0.1 -0.1 -0.1 0.5 -0.3 0.7c-0.2 0.2 1.1 1.1 1.1 1.2c0 0.2 -0.2 0.8 -0.4 0.7c-0.1 0 -0.8 -0.3 -1.3 -0.2c-0.5 0.1 -1.3 1.6 -1.5 2c-0.3 0.4 -0.6 0.4 -0.6 0.4c0 0.1 0.3 1.7 0.4 1.8c0.1 0.1 -0.4 0.1 -0.5 0c0 0 -0.6 -1.9 -0.6 -1.9c-0.1 0 -0.3 -0.1 -0.3 -0.1c0 0.1 -0.5 1.4 -0.4 1.6c0.1 0.2 0.1 0.3 0.1 0.3c0 0 -0.4 0 -0.4 0c0 0 -0.2 -0.1 -0.1 -0.3c0 -0.2 0.3 -1.7 0.3 -1.7c0 0 -2.8 -0.9 -2.9 -0.8c-0.2 0.1 -0.4 0.6 -0.4 1c0 0.4 0.5 1.9 0.5 1.9l-0.5 0l-0.6 -2l0 -0.6c0 0 -1 0.8 -1 1c0 0.2 -0.2 1.3 -0.2 1.3c0 0 0.3 0.3 0.2 0.3c0 0 -0.5 0 -0.5 0c0 0 -0.2 -0.2 -0.1 -0.4c0 -0.1 0.2 -1.6 0.2 -1.6c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 0 -2.7 -0.2 -2.7c-0.1 0 -0.4 2 -0.4 2c0 0 0 0.2 -0.2 0.5c-0.1 0.4 -0.2 1.1 -0.2 1.1c0 0 -0.2 -0.1 -0.2 -0.2c0 -0.1 -0.1 -0.7 0 -0.7c0.1 -0.1 0.3 -0.8 0.4 -1.4c0 -0.6 0.2 -1.3 0.4 -1.5c0.1 -0.2 0.6 -0.4 0.6 -0.4z"
"M1.2 -2c0 0 0.7 0 1.2 0.5c0.5 0.5 0.4 0.6 0.5 0.6c0.1 0 0.7 0 0.8 0.1c0.1 0 0.2 0.2 0.2 0.2c0 0 -0.6 0.2 -0.6 0.3c0 0.1 0.4 0.9 0.6 0.9c0.1 0 0.6 0 0.6 0.1c0 0.1 0 0.7 -0.1 0.7c-0.1 0 -1.2 0.4 -1.5 0.5c-0.3 0.1 -1.1 0.5 -1.1 0.7c-0.1 0.2 0.4 1.2 0.4 1.2l-0.4 0c0 0 -0.4 -0.8 -0.4 -0.9c0 -0.1 -0.1 -0.3 -0.1 -0.3l-0.2 0l-0.5 1.3l-0.4 0c0 0 -0.1 -0.4 0 -0.6c0.1 -0.1 0.3 -0.6 0.3 -0.7c0 0 -0.8 0 -1.5 -0.1c-0.7 -0.1 -1.2 -0.3 -1.2 -0.2c0 0.1 -0.4 0.6 -0.5 0.6c0 0 0.3 0.9 0.3 0.9l-0.4 0c0 0 -0.4 -0.5 -0.4 -0.6c0 -0.1 -0.2 -0.6 -0.2 -0.5c0 0 -0.4 0.4 -0.6 0.4c-0.2 0.1 -0.4 0.1 -0.4 0.1c0 0 -0.1 0.6 -0.1 0.6l-0.5 0l0 -1c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 -0.7 -1.2 -0.6 -1.4c0.1 -0.1 0.1 -1.1 0.1 -1.1c0 0 -0.2 0.1 -0.2 0.1c0 0 0 0.9 0 1c0 0.1 -0.2 0.3 -0.3 0.3c-0.1 0 0 -0.5 0 -0.9c0 -0.4 0 -0.4 0.2 -0.6c0.2 -0.2 0.6 -0.3 0.8 -0.8c0.3 -0.5 1 -0.6 1 -0.6z"
"M-4.1 -0.5c0.2 0 0.2 0.2 0.5 0.2c0.3 0 0.3 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.4 -0.2c0.1 0 0.2 0.2 0.4 0.1c0.2 0 0.2 -0.2 0.4 -0.3c0.1 0 0.1 -0.1 0.4 0c0.3 0 0.3 -0.4 0.6 -0.4c0.3 0 0.6 -0.3 0.7 -0.2c0.1 0.1 1.4 1 1.3 1.4c-0.1 0.4 -0.3 0.3 -0.4 0.3c-0.1 0 -0.5 -0.4 -0.7 -0.2c-0.3 0.2 -0.1 0.4 -0.2 0.6c-0.1 0.1 -0.2 0.2 -0.3 0.4c0 0.2 0.1 0.3 0 0.5c-0.1 0.2 -0.3 0.2 -0.3 0.5c0 0.3 -0.2 0.3 -0.3 0.6c-0.1 0.2 0 0.3 -0.1 0.5c-0.1 0.2 -0.1 0.2 -0.2 0.3c-0.1 0.1 0.3 1.1 0.3 1.1l-0.3 0c0 0 -0.3 -0.9 -0.3 -1c0 -0.1 -0.1 -0.2 -0.3 -0.2c-0.2 0 -0.3 0.1 -0.4 0.4c0 0.3 -0.2 0.8 -0.2 0.8l-0.3 0l0.3 -1c0 0 0.1 -0.6 -0.2 -0.5c-0.3 0.1 -0.2 -0.1 -0.4 -0.1c-0.2 -0.1 -0.3 0.1 -0.4 0c-0.2 -0.1 -0.3 0.1 -0.5 0c-0.2 -0.1 -0.1 0 -0.3 0.3c-0.2 0.3 -0.4 0.3 -0.4 0.3l0.2 1.1l-0.3 0l-0.2 -1.1c0 0 -0.4 -0.6 -0.5 -0.4c-0.1 0.3 -0.1 0.4 -0.3 0.4c-0.1 -0.1 -0.2 1.1 -0.2 1.1l-0.3 0l0.2 -1.1c0 0 -0.3 -0.1 -0.3 -0.5c0 -0.3 0.1 -0.5 0.1 -0.7c0.1 -0.2 -0.1 -1 -0.2 -1.1c-0.1 -0.2 -0.2 -0.8 -0.2 -0.8c0 0 -0.1 -0.5 0.4 -0.8z"]}
:type "nominal"}
:size {:value 200}
:x {:axis nil :field "col" :type "ordinal"}
:y {:axis nil :field "animal" :type "ordinal"}}
:height 200
:mark {:filled true :type "point"}
:width 800}

Isotype Dot Plot with Emoji

This example was inspired by [@jakevdp](https://github.com/jakevdp) and Isotype Bar Chart by [@jwoLondon](https://github.com/jwoLondon).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke ""}}
:data {:values [{:animal "pigs" :country "Great Britain"}
{:animal "pigs" :country "Great Britain"}
{:animal "cattle" :country "Great Britain"}
{:animal "cattle" :country "Great Britain"}
{:animal "cattle" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "sheep" :country "Great Britain"}
{:animal "pigs" :country "United States"}
{:animal "pigs" :country "United States"}
{:animal "pigs" :country "United States"}
{:animal "pigs" :country "United States"}
{:animal "pigs" :country "United States"}
{:animal "pigs" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "cattle" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}
{:animal "sheep" :country "United States"}]}
:encoding {:row {:field "country" :header {:title ""}}
:size {:value 65}
:text {:field "emoji" :type "nominal"}
:x {:axis nil :field "rank" :type "ordinal"}
:y {:axis nil :field "animal" :sort nil :type "nominal"}}
:height 200
:mark {:baseline "middle" :type "text"}
:transform [{:as "emoji"
:calculate "{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]"}
{:groupby ["country" "animal"] :window [{:as "rank" :op "rank"}]}]
:width 800}

Relative Bar Chart (Calculate Percentage of Total)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:Activity "Sleeping" :Time 8}
{:Activity "Eating" :Time 2}
{:Activity "TV" :Time 4}
{:Activity "Work" :Time 8}
{:Activity "Exercise" :Time 2}]}
:description "A bar graph showing what activites consume what percentage of the day."
:encoding {:x {:field "PercentOfTotal"
:title "% of total Time"
:type "quantitative"}
:y {:field "Activity" :type "nominal"}}
:height {:step 12}
:mark "bar"
:transform [{:joinaggregate [{:as "TotalTime" :field "Time" :op "sum"}]}
{:as "PercentOfTotal"
:calculate "datum.Time/datum.TotalTime * 100"}]}

Scatterplot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "A scatterplot showing horsepower and miles per gallons for various cars."
:encoding {:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"}

1D Strip Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:encoding {:x {:field "precipitation" :type "quantitative"}}
:mark "tick"}

Strip Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Shows the relationship between horsepower and the number of cylinders using tick marks."
:encoding {:x {:field "Horsepower" :type "quantitative"}
:y {:field "Cylinders" :type "ordinal"}}
:mark "tick"}

Colored Scatterplot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/penguins.json"}
:description "A scatterplot showing body mass and flipper lengths of penguins."
:encoding {:color {:field "Species" :type "nominal"}
:shape {:field "Species" :type "nominal"}
:x {:field "Flipper Length (mm)"
:scale {:zero false}
:type "quantitative"}
:y {:field "Body Mass (g)"
:scale {:zero false}
:type "quantitative"}}
:mark "point"}

2D Histogram Scatterplot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:size {:aggregate "count"}
:x {:bin {:maxbins 10} :field "IMDB Rating"}
:y {:bin {:maxbins 10} :field "Rotten Tomatoes Rating"}}
:mark "circle"}

Bubble Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size."
:encoding {:size {:field "Acceleration" :type "quantitative"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"}

Scatterplot with Null Values in Grey

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:mark {:invalid nil}}
:data {:url "data/movies.json"}
:encoding {:color {:condition {:test "datum['IMDB Rating'] === null || datum['Rotten Tomatoes Rating'] === null"
:value "#aaa"}}
:x {:field "IMDB Rating" :type "quantitative"}
:y {:field "Rotten Tomatoes Rating" :type "quantitative"}}
:mark "point"}

Scatterplot with Filled Circles

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "circle"}

Bubble Plot (Gapminder)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/gapminder-health-income.csv"}
:description "A bubble plot showing the correlation between health and income for 187 countries in the world (modified from an example in Lisa Charlotte Rost's blog post 'One Chart, Twelve Charting Libraries' --http://lisacharlotterost.github.io/2016/05/17/one-chart-code/)."
:encoding {:color {:value "#000"}
:size {:field "population" :type "quantitative"}
:x {:field "income" :scale {:type "log"}}
:y {:axis {:minExtent 30}
:field "health"
:scale {:zero false}
:type "quantitative"}}
:height 300
:mark "circle"
:params [{:bind "scales" :name "view" :select "interval"}]
:width 500}

Bubble Plot (Natural Disasters)

Visualization of global deaths from natural disasters. Copy of chart from [Our World in Data](https://ourworldindata.org/natural-catastrophes).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/disasters.csv"}
:encoding {:color {:field "Entity" :legend nil :type "nominal"}
:size {:field "Deaths"
:legend {:clipHeight 30}
:scale {:rangeMax 5000}
:title "Annual Global Deaths"
:type "quantitative"}
:x {:axis {:grid false} :field "Year" :type "temporal"}
:y {:axis {:title ""} :field "Entity" :type "nominal"}}
:height 400
:mark {:opacity 0.8 :stroke "black" :strokeWidth 1 :type "circle"}
:transform [{:filter "datum.Entity !== 'All natural disasters'"}]
:width 600}

Scatter Plot with Text Marks

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:color {:field "Origin" :type "nominal"}
:text {:field "OriginInitial" :type "nominal"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "text"
:transform [{:as "OriginInitial" :calculate "datum.Origin[0]"}]}

Image-based Scatter Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:img "data/ffox.png" :x 0.5 :y 0.5}
{:img "data/gimp.png" :x 1.5 :y 1.5}
{:img "data/7zip.png" :x 2.5 :y 2.5}]}
:encoding {:url {:field "img" :type "nominal"}
:x {:field "x" :type "quantitative"}
:y {:field "y" :type "quantitative"}}
:mark {:height 50 :type "image" :width 50}}

Strip plot with custom axis tick labels

After using the numerical values to calculate the average rating, they are replaced by string labels.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:aggregate "mean"
:axis {:labelExpr "datum.label == 0 ? 'Poor' : datum.label == 5 ? 'Neutral' : 'Great'"
:labelFlush false
:values [0 5 10]}
:field "IMDB Rating"
:scale {:domain [0 10]}
:title nil}
:y {:field "Major Genre" :sort "x" :title nil}}
:mark {:size 80 :type "circle"}}

Dot Plot with Jittering

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering)."
:encoding {:x {:field "Horsepower" :type "quantitative"}
:y {:field "Cylinders" :type "ordinal"}
:yOffset {:field "random" :type "quantitative"}}
:height {:step 50}
:mark "point"
:transform [{:as "random" :calculate "random()"}]}

Line Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Google's stock price over time."
:encoding {:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "line"
:transform [{:filter "datum.symbol==='GOOG'"}]}

Line Chart with Point Markers

By setting the `point` property of the line mark definition to an object defining a property of the overlaying point marks, we can overlay point markers on top of line. Notes&#58; (1) This is equivalent to adding another layer of point marks. (2) While `"point"` marks are normally semi-transparent, the overlay point marker has `opacity` = 1 by default.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time."
:encoding {:color {:field "symbol" :type "nominal"}
:x {:field "date" :timeUnit "year"}
:y {:aggregate "mean" :field "price" :type "quantitative"}}
:mark {:point true :type "line"}}

Line Chart with Stroked Point Markers

By setting the `point` property of the line mark definition to an object defining a property of the overlaying point marks, we can overlay point markers on top of line. Here we create stroked points by setting their `"filled"` to `false` and their `fill` to `"white"`. Notes&#58; (1) This is equivalent to adding another layer of point marks. (2) While `"point"` marks are normally semi-transparent, the overlay point marker has `opacity` = 1 by default.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time."
:encoding {:color {:field "symbol" :type "nominal"}
:x {:field "date" :timeUnit "year"}
:y {:aggregate "mean" :field "price" :type "quantitative"}}
:mark {:point {:fill "white" :filled false} :type "line"}}

Multi Series Line Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time."
:encoding {:color {:field "symbol" :type "nominal"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "line"}

Multi Series Line Chart with Repeat Operator

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:repeat {:layer ["US Gross" "Worldwide Gross"]}
:spec {:encoding {:color {:datum {:repeat "layer"} :type "nominal"}
:x {:bin true :field "IMDB Rating" :type "quantitative"}
:y {:aggregate "mean"
:field {:repeat "layer"}
:title "Mean of US and Worldwide Gross"
:type "quantitative"}}
:mark "line"}}

Multi Series Line Chart with Halo Stroke

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Multi-series Line Chart with Halo. Use pivot and repeat-layer as a workaround to facet groups of lines and their halo strokes. See https://github.com/vega/vega-lite/issues/6192 for more discussion."
:repeat {:layer ["AAPL" "AMZN" "GOOG" "IBM" "MSFT"]}
:spec {:layer [{:encoding {:x {:field "date" :type "temporal"}
:y {:field {:repeat "layer"}
:title "price"
:type "quantitative"}}
:mark {:stroke "white" :strokeWidth 4 :type "line"}}
{:encoding {:stroke {:datum {:repeat "layer"} :type "nominal"}
:x {:field "date" :type "temporal"}
:y {:field {:repeat "layer"}
:title "price"
:type "quantitative"}}
:mark {:type "line"}}]}
:transform [{:groupby ["date"] :pivot "symbol" :value "price"}]}

Slope Graph

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:description "Slope graph showing the change in yield for different barley sites. It shows the error in the year labels for the Morris site."
:encoding {:color {:field "site" :type "nominal"}
:x {:field "year" :scale {:padding 0.5} :type "ordinal"}
:y {:aggregate "median" :field "yield" :type "quantitative"}}
:mark "line"
:width {:step 50}}

Step Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Google's stock price over time."
:encoding {:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark {:interpolate "step-after" :type "line"}
:transform [{:filter "datum.symbol==='GOOG'"}]}

Line Chart with Monotone Interpolation

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:encoding {:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark {:interpolate "monotone" :type "line"}
:transform [{:filter "datum.symbol==='GOOG'"}]}

Line Chart with Conditional Axis Properties

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domainColor "#ddd" :tickColor "#ddd"}}
:data {:url "data/stocks.csv"}
:description "Line chart with conditional axis ticks, labels, and grid."
:encoding {:x {:axis {:gridDash {:condition {:test {:equal 1
:field "value"
:timeUnit "month"}
:value []}
:value [2 2]}
:labelAlign "left"
:labelExpr "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']"
:labelOffset 4
:labelPadding -24
:tickCount 8
:tickDash {:condition {:test {:equal 1
:field "value"
:timeUnit "month"}
:value []}
:value [2 2]}
:tickSize 30}
:field "date"
:type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "line"
:transform [{:filter "datum.symbol==='GOOG'"}
{:filter {:field "date" :range [2006 2007] :timeUnit "year"}}]
:width 400}

Connected Scatterplot (Lines with Custom Paths)

A connected scatterplot can be created by customizing line `order` and adding `point` overlay in the line mark definition.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/driving.json"}
:encoding {:order {:field "year"}
:x {:field "miles" :scale {:zero false} :type "quantitative"}
:y {:field "gas" :scale {:zero false} :type "quantitative"}}
:mark {:point true :type "line"}}

Bump Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:build 1 :result "PASSED"}
{:build 2 :result "PASSED"}
{:build 3 :result "FAILED"}
{:build 4 :result "FAILED"}
{:build 5 :result "SKIPPED"}
{:build 6 :result "PASSED"}
{:build 7 :result "PASSED"}
{:build 8 :result "FAILED"}
{:build 9 :result "PASSED"}
{:build 10 :result "PASSED"}
{:build 11 :result "SKIPPED"}
{:build 12 :result "PASSED"}
{:build 13 :result "PASSED"}
{:build 14 :result "FAILED"}
{:build 15 :result "PASSED"}
{:build 16 :result "SKIPPED"}]}
:description "Bump chart"
:encoding {:order {:field "build" :type "quantitative"}
:x {:field "build" :type "quantitative"}
:y {:field "result" :type "nominal"}}
:mark {:point true :type "line"}}

Line Chart with Varying Size (using the trail mark)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time."
:encoding {:color {:field "symbol" :type "nominal"}
:size {:field "price" :type "quantitative"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "trail"}

A comet chart showing changes between between two states

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:legend {:direction "horizontal" :orient "bottom"}}
:data {:url "data/barley.json"}
:encoding {:color {:field "delta"
:scale {:domainMid 0}
:title "Yield Delta (%)"
:type "quantitative"}
:column {:field "site" :title "Site"}
:size {:field "yield"
:legend {:values [20 60]}
:scale {:range [0 12]}
:title "Barley Yield (bushels/acre)"
:type "quantitative"}
:tooltip [{:field "year" :type "quantitative"} {:field "yield"}]
:x {:field "year" :title nil}
:y {:field "variety" :title "Variety"}}
:mark "trail"
:title "Barley Yield comparison between 1932 and 1931"
:transform [{:groupby ["variety" "site"] :pivot "year" :value "yield"}
{:as ["year" "yield"] :fold ["1931" "1932"]}
{:as "year" :calculate "toNumber(datum.year)"}
{:as "delta" :calculate "datum['1932'] - datum['1931']"}]
:view {:stroke nil}}

Line Chart with Markers and Invalid Values

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:x 1 :y 10}
{:x 2 :y 30}
{:x 3 :y nil}
{:x 4 :y 15}
{:x 5 :y nil}
{:x 6 :y 40}
{:x 7 :y 20}]}
:encoding {:x {:field "x" :type "quantitative"}
:y {:field "y" :type "quantitative"}}
:mark {:point true :type "line"}}

Carbon Dioxide in the Atmosphere

This example was inspired by [Gregor Aisch](https://github.com/gka)'s [Carbon Dioxide Concentration By Decade](https://www.datawrapper.de/_/OHgEm/).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:text {:align "left" :dx 3 :dy 1}}
:data {:format {:parse {:Date "utc:'%Y-%m-%d'"}}
:url "data/co2-concentration.csv"}
:encoding {:color {:field "decade"
:legend nil
:scale {:scheme "magma"}
:type "ordinal"}
:x {:axis {:tickCount 11}
:title "Year into Decade"
:type "quantitative"}
:y {:scale {:zero false}
:title "CO2 concentration in ppm"
:type "quantitative"}}
:height 500
:layer [{:encoding {:x {:field "scaled_date"} :y {:field "CO2"}} :mark "line"}
{:encoding {:text {:aggregate {:argmin "scaled_date"} :field "year"}
:x {:aggregate "min" :field "scaled_date"}
:y {:aggregate {:argmin "scaled_date"} :field "CO2"}}
:mark {:aria false :baseline "top" :type "text"}}
{:encoding {:text {:aggregate {:argmax "scaled_date"} :field "year"}
:x {:aggregate "max" :field "scaled_date"}
:y {:aggregate {:argmax "scaled_date"} :field "CO2"}}
:mark {:aria false :type "text"}}]
:transform [{:as "year" :calculate "year(datum.Date)"}
{:as "decade" :calculate "floor(datum.year / 10)"}
{:as "scaled_date"
:calculate "(datum.year % 10) + (month(datum.Date)/12)"}
{:as "end"
:calculate "datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null"}]
:width 800}

Line Charts Showing Ranks Over Time

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:diff -1 :matchday 1 :point 0 :team "Germany"}
{:diff 1 :matchday 1 :point 3 :team "Mexico"}
{:diff -1 :matchday 1 :point 0 :team "South Korea"}
{:diff 1 :matchday 1 :point 3 :team "Sweden"}
{:diff 0 :matchday 2 :point 3 :team "Germany"}
{:diff 2 :matchday 2 :point 6 :team "Mexico"}
{:diff -2 :matchday 2 :point 0 :team "South Korea"}
{:diff 0 :matchday 2 :point 3 :team "Sweden"}
{:diff -2 :matchday 3 :point 3 :team "Germany"}
{:diff -1 :matchday 3 :point 6 :team "Mexico"}
{:diff 0 :matchday 3 :point 3 :team "South Korea"}
{:diff 3 :matchday 3 :point 6 :team "Sweden"}]}
:encoding {:color {:field "team"
:scale {:domain ["Germany" "Mexico" "South Korea" "Sweden"]
:range ["black" "#127153" "#C91A3C" "#0C71AB"]}
:type "nominal"}
:x {:field "matchday" :type "ordinal"}
:y {:field "rank" :type "ordinal"}}
:mark {:orient "vertical" :type "line"}
:title {:frame "bounds" :text "World Cup 2018: Group F Rankings"}
:transform [{:groupby ["matchday"]
:sort [{:field "point" :order "descending"}
{:field "diff" :order "descending"}]
:window [{:as "rank" :op "rank"}]}]}

Drawing Sine and Cosine Curves with the Sequence Generator

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:sequence {:as "x" :start 0 :step 0.1 :stop 12.7}}
:description "Plots two functions using a generated sequence."
:encoding {:color {:field "key" :title nil :type "nominal"}
:x {:field "x" :type "quantitative"}
:y {:field "value" :type "quantitative"}}
:height 150
:mark "line"
:transform [{:as "sin(x)" :calculate "sin(datum.x)"}
{:as "cos(x)" :calculate "cos(datum.x)"}
{:fold ["sin(x)" "cos(x)"]}]
:width 300}

Line chart with varying stroke dash

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time."
:encoding {:strokeDash {:field "symbol" :type "nominal"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "line"}

Line chart with a dashed part

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b 28 :predicted false}
{:a "B" :b 55 :predicted false}
{:a "D" :b 91 :predicted false}
{:a "E" :b 81 :predicted false}
{:a "E" :b 81 :predicted true}
{:a "G" :b 19 :predicted true}
{:a "H" :b 87 :predicted true}]}
:description "Line chart with a dashed part created by drawing multiple connecting lines. Note that the data source contains the data point at (E, 81) twice."
:encoding {:strokeDash {:field "predicted" :type "nominal"}
:x {:field "a" :type "ordinal"}
:y {:field "b" :type "quantitative"}}
:mark "line"}

Area Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:x {:axis {:format "%Y"} :field "date" :timeUnit "yearmonth"}
:y {:aggregate "sum" :field "count" :title "count"}}
:height 200
:mark "area"
:width 300}

Area Chart with Gradient

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Google's stock price over time."
:encoding {:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark {:color {:gradient "linear"
:stops [{:color "white" :offset 0}
{:color "darkgreen" :offset 1}]
:x1 1
:x2 1
:y1 1
:y2 0}
:line {:color "darkgreen"}
:type "area"}
:transform [{:filter "datum.symbol==='GOOG'"}]}

Area Chart with Overlaying Lines and Point Markers

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Google's stock price over time."
:encoding {:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark {:line true :point true :type "area"}
:transform [{:filter "datum.symbol==='GOOG'"}]}

Stacked Area Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:color {:field "series" :scale {:scheme "category20b"}}
:x {:axis {:format "%Y"} :field "date" :timeUnit "yearmonth"}
:y {:aggregate "sum" :field "count"}}
:height 200
:mark "area"
:width 300}

Normalized Stacked Area Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:color {:field "series" :scale {:scheme "category20b"}}
:x {:axis {:domain false :format "%Y"}
:field "date"
:timeUnit "yearmonth"}
:y {:aggregate "sum" :axis nil :field "count" :stack "normalize"}}
:height 200
:mark "area"
:width 300}

Streamgraph

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:color {:field "series" :scale {:scheme "category20b"}}
:x {:axis {:domain false :format "%Y" :tickSize 0}
:field "date"
:timeUnit "yearmonth"}
:y {:aggregate "sum" :axis nil :field "count" :stack "center"}}
:height 200
:mark "area"
:width 300}

Horizon Graph

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:area {:interpolate "monotone"}}
:data {:values [{:x 1 :y 28}
{:x 2 :y 55}
{:x 3 :y 43}
{:x 4 :y 91}
{:x 5 :y 81}
{:x 6 :y 53}
{:x 7 :y 19}
{:x 8 :y 87}
{:x 9 :y 52}
{:x 10 :y 48}
{:x 11 :y 24}
{:x 12 :y 49}
{:x 13 :y 87}
{:x 14 :y 66}
{:x 15 :y 17}
{:x 16 :y 27}
{:x 17 :y 68}
{:x 18 :y 16}
{:x 19 :y 49}
{:x 20 :y 15}]}
:description "Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)"
:encoding {:x {:field "x"
:scale {:nice false :zero false}
:type "quantitative"}
:y {:axis {:title "y"}
:field "y"
:scale {:domain [0 50]}
:type "quantitative"}}
:height 50
:layer [{:mark {:clip true :opacity 0.6 :orient "vertical" :type "area"}}
{:encoding {:opacity {:value 0.3}
:y {:field "ny"
:scale {:domain [0 50]}
:type "quantitative"}}
:mark {:clip true :orient "vertical" :type "area"}
:transform [{:as "ny" :calculate "datum.y - 50"}]}]
:width 300}

Table Heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:grid true :tickBand "extent"}}
:data {:url "data/cars.json"}
:encoding {:color {:aggregate "mean" :field "Horsepower"}
:x {:field "Cylinders" :type "ordinal"}
:y {:field "Origin" :type "nominal"}}
:mark "rect"}

Annual Weather Heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domain false} :view {:step 13 :strokeWidth 0}}
:data {:url "data/seattle-weather.csv"}
:encoding {:color {:aggregate "max"
:field "temp_max"
:legend {:title nil}
:type "quantitative"}
:x {:axis {:format "%e" :labelAngle 0}
:field "date"
:timeUnit "date"
:title "Day"
:type "ordinal"}
:y {:field "date" :timeUnit "month" :title "Month" :type "ordinal"}}
:mark "rect"
:title "Daily Max Temperatures (C) in Seattle, WA"}

2D Histogram Heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke "transparent"}}
:data {:url "data/movies.json"}
:encoding {:color {:aggregate "count" :type "quantitative"}
:x {:bin {:maxbins 60} :field "IMDB Rating" :type "quantitative"}
:y {:bin {:maxbins 40}
:field "Rotten Tomatoes Rating"
:type "quantitative"}}
:height 200
:mark "rect"
:transform [{:filter {:and [{:field "IMDB Rating" :valid true}
{:field "Rotten Tomatoes Rating" :valid true}]}}]
:width 300}

Table Bubble Plot (Github Punch Card)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/github.csv"}
:description "Punchcard Visualization like on Github. The day on y-axis uses a custom order from Monday to Sunday. The sort property supports both full day names (e.g., 'Monday') and their three letter initials (e.g., 'mon') -- both of which are case insensitive."
:encoding {:size {:aggregate "sum" :field "count" :type "quantitative"}
:x {:field "time" :timeUnit "hours" :type "ordinal"}
:y {:field "time"
:sort ["mon" "tue" "wed" "thu" "fri" "sat" "sun"]
:timeUnit "day"
:type "ordinal"}}
:mark "circle"}

Heatmap with Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:grid true :tickBand "extent"}}
:data {:url "data/cars.json"}
:encoding {:x {:field "Cylinders" :type "ordinal"}
:y {:field "Origin" :type "ordinal"}}
:layer [{:encoding {:color {:field "num_cars"
:legend {:direction "horizontal"
:gradientLength 120}
:title "Count of Records"
:type "quantitative"}}
:mark "rect"}
{:encoding {:color {:condition {:test "datum['num_cars'] < 40"
:value "black"}
:value "white"}
:text {:field "num_cars" :type "quantitative"}}
:mark "text"}]
:transform [{:aggregate [{:as "num_cars" :op "count"}]
:groupby ["Origin" "Cylinders"]}]}

Lasagna Plot (Dense Time-Series Heatmap)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:encoding {:color {:aggregate "sum"
:field "price"
:title "Price"
:type "quantitative"}
:x {:axis {:format "%Y"
:labelAngle 0
:labelColor {:condition {:test {:equal {:date 1 :month 1}
:field "value"
:timeUnit "monthdate"}
:value "black"}
:value nil}
:labelOverlap false
:tickColor {:condition {:test {:equal {:date 1 :month 1}
:field "value"
:timeUnit "monthdate"}
:value "black"}
:value nil}}
:field "date"
:timeUnit "yearmonthdate"
:title "Time"
:type "ordinal"}
:y {:field "symbol" :title nil :type "nominal"}}
:height 100
:mark "rect"
:transform [{:filter "datum.symbol !== 'GOOG'"}]
:width 300}

Mosaic Chart with Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domain false :grid false :labels false :ticks false}
:concat {:spacing 10}
:view {:stroke ""}}
:data {:url "data/cars.json"}
:resolve {:scale {:x "shared"}}
:transform [{:aggregate [{:as "count_*" :op "count"}]
:groupby ["Origin" "Cylinders"]}
{:as ["stack_count_Origin1" "stack_count_Origin2"]
:groupby []
:offset "normalize"
:sort [{:field "Origin" :order "ascending"}]
:stack "count_*"}
{:frame [nil nil]
:groupby ["Origin"]
:sort [{:field "Cylinders" :order "ascending"}]
:window [{:as "x" :field "stack_count_Origin1" :op "min"}
{:as "x2" :field "stack_count_Origin2" :op "max"}
{:as "rank_Cylinders" :op "dense_rank"}
{:as "distinct_Cylinders"
:field "Cylinders"
:op "distinct"}]}
{:frame [nil nil]
:sort [{:field "Origin" :order "ascending"}]
:window [{:as "rank_Origin" :op "dense_rank"}]}
{:as ["y" "y2"]
:groupby ["Origin"]
:offset "normalize"
:sort [{:field "Cylinders" :order "ascending"}]
:stack "count_*"}
{:as "ny"
:calculate "datum.y + (datum.rank_Cylinders - 1) * datum.distinct_Cylinders * 0.01 / 3"}
{:as "ny2"
:calculate "datum.y2 + (datum.rank_Cylinders - 1) * datum.distinct_Cylinders * 0.01 / 3"}
{:as "nx" :calculate "datum.x + (datum.rank_Origin - 1) * 0.01"}
{:as "nx2" :calculate "datum.x2 + (datum.rank_Origin - 1) * 0.01"}
{:as "xc" :calculate "(datum.nx+datum.nx2)/2"}
{:as "yc" :calculate "(datum.ny+datum.ny2)/2"}]
:vconcat [{:encoding {:color {:field "Origin" :legend nil}
:text {:field "Origin"}
:x {:aggregate "min"
:axis {:orient "top"}
:field "xc"
:title "Origin"}}
:mark {:align "center" :baseline "middle" :type "text"}}
{:layer [{:encoding {:color {:field "Origin"
:legend nil
:type "nominal"}
:opacity {:field "Cylinders"
:legend nil
:type "quantitative"}
:tooltip [{:field "Origin" :type "nominal"}
{:field "Cylinders"
:type "quantitative"}]
:x {:axis nil :field "nx" :type "quantitative"}
:x2 {:field "nx2"}
:y {:field "ny" :type "quantitative"}
:y2 {:field "ny2"}}
:mark {:type "rect"}}
{:encoding {:text {:field "Cylinders" :type "nominal"}
:x {:axis nil :field "xc" :type "quantitative"}
:y {:axis {:title "Cylinders"}
:field "yc"
:type "quantitative"}}
:mark {:baseline "middle" :type "text"}}]}]}

Wind Vector Map

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:aria false :view {:fill "black" :step 10}}
:data {:format {:parse {:latitude "number" :longitude "number"} :type "csv"}
:url "data/windvectors.csv"}
:description "Vector array map showing wind speed and direction."
:encoding {:angle {:field "dir"
:scale {:domain [0 360] :range [180 540]}
:type "quantitative"}
:color {:field "dir"
:legend nil
:scale {:domain [0 360] :scheme "rainbow"}
:type "quantitative"}
:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:field "speed" :scale {:rangeMax 500} :type "quantitative"}}
:height 560
:mark {:filled true :shape "wedge" :type "point"}
:projection {:type "equalEarth"}
:width 615}

Pie Chart

A pie chart encodes proportional differences among a set of numeric values as the angular extent and area of a circular slice.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category 1 :value 4}
{:category 2 :value 6}
{:category 3 :value 10}
{:category 4 :value 3}
{:category 5 :value 7}
{:category 6 :value 8}]}
:description "A simple pie chart with embedded data."
:encoding {:color {:field "category" :type "nominal"}
:theta {:field "value" :type "quantitative"}}
:mark "arc"}

Pie Chart with percentage_tooltip

A pie chart with a tooltip that shows the percentage covered by the hovered slice.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category 1 :value 4}
{:category 2 :value 6}
{:category 3 :value 10}
{:category 4 :value 3}
{:category 5 :value 7}
{:category 6 :value 8}]}
:description "Pie Chart with percentage_tooltip"
:encoding {:color {:field "category" :type "nominal"}
:theta {:field "value" :stack "normalize" :type "quantitative"}}
:mark {:tooltip true :type "arc"}}

Donut Chart

A donut chart encodes proportional differences among a set of numeric values using angular extents.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category 1 :value 4}
{:category 2 :value 6}
{:category 3 :value 10}
{:category 4 :value 3}
{:category 5 :value 7}
{:category 6 :value 8}]}
:description "A simple donut chart with embedded data."
:encoding {:color {:field "category" :type "nominal"}
:theta {:field "value" :type "quantitative"}}
:mark {:innerRadius 50 :type "arc"}}

Pie Chart with Labels

Layering text over arc marks to label pie charts. For now, [you need to add `stack: true`](https://github.com/vega/vega-lite/issues/5078) to theta to force the text to apply the same polar stacking layout.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category "a" :value 4}
{:category "b" :value 6}
{:category "c" :value 10}
{:category "d" :value 3}
{:category "e" :value 7}
{:category "f" :value 8}]}
:description "A simple pie chart with labels."
:encoding {:color {:field "category" :legend nil :type "nominal"}
:theta {:field "value" :stack true :type "quantitative"}}
:layer [{:mark {:outerRadius 80 :type "arc"}}
{:encoding {:text {:field "category" :type "nominal"}}
:mark {:radius 90 :type "text"}}]}

Radial Plot

This radial plot uses both angular and radial extent to convey multiple dimensions of data. However, this approach is not perceptually effective, as viewers will most likely be drawn to the total area of the shape, conflating the two dimensions. This example also demonstrates a way to add labels to circular plots.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [12 23 47 6 52 19]}
:description "A simple radial chart with embedded data."
:encoding {:color {:field "data" :legend nil :type "nominal"}
:radius {:field "data"
:scale {:rangeMin 20 :type "sqrt" :zero true}}
:theta {:field "data" :stack true :type "quantitative"}}
:layer [{:mark {:innerRadius 20 :stroke "#fff" :type "arc"}}
{:encoding {:text {:field "data" :type "quantitative"}}
:mark {:radiusOffset 10 :type "text"}}]}

Pyramid Pie Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:category "Sky" :order 3 :value 75}
{:category "Shady side of a pyramid" :order 1 :value 10}
{:category "Sunny side of a pyramid" :order 2 :value 15}]}
:description "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm"
:encoding {:color {:field "category"
:legend {:columns 1
:legendX 200
:legendY 80
:orient "none"
:title nil}
:scale {:domain ["Sky"
"Shady side of a pyramid"
"Sunny side of a pyramid"]
:range ["#416D9D" "#674028" "#DEAC58"]}
:type "nominal"}
:order {:field "order"}
:theta {:field "value"
:scale {:range [2.35619449 8.639379797]}
:stack true
:type "quantitative"}}
:mark {:outerRadius 80 :type "arc"}}

Relative Bar Chart (Calculate Percentage of Total)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:Activity "Sleeping" :Time 8}
{:Activity "Eating" :Time 2}
{:Activity "TV" :Time 4}
{:Activity "Work" :Time 8}
{:Activity "Exercise" :Time 2}]}
:description "A bar graph showing what activites consume what percentage of the day."
:encoding {:x {:field "PercentOfTotal"
:title "% of total Time"
:type "quantitative"}
:y {:field "Activity" :type "nominal"}}
:height {:step 12}
:mark "bar"
:transform [{:joinaggregate [{:as "TotalTime" :field "Time" :op "sum"}]}
{:as "PercentOfTotal"
:calculate "datum.Time/datum.TotalTime * 100"}]}

Calculate Difference from Average

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:layer [{:encoding {:x {:field "IMDB Rating"
:title "IMDB Rating"
:type "quantitative"}
:y {:field "Title" :type "ordinal"}}
:mark "bar"}
{:encoding {:x {:aggregate "average"
:field "AverageRating"
:type "quantitative"}}
:mark {:color "red" :type "rule"}}]
:transform [{:filter "datum['IMDB Rating'] != null"}
{:joinaggregate [{:as "AverageRating"
:field "IMDB Rating"
:op "mean"}]}
{:filter "(datum['IMDB Rating'] - datum.AverageRating) > 2.5"}]}

Calculate Difference from Annual Average

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:description "Bar graph showing the best films for the year they were produced, where best is defined by at least 2.5 points above average for that year. The red point shows the average rating for a film in that year, and the bar is the rating that the film recieved."
:layer [{:encoding {:x {:field "IMDB Rating"
:title "IMDB Rating"
:type "quantitative"}
:y {:field "Title" :type "ordinal"}}
:mark {:clip true :type "bar"}}
{:encoding {:color {:value "red"}
:x {:field "AverageYearRating" :type "quantitative"}
:y {:field "Title" :type "ordinal"}}
:mark "tick"}]
:transform [{:filter "datum['IMDB Rating'] != null"}
{:as "year" :field "Release Date" :timeUnit "year"}
{:groupby ["year"]
:joinaggregate [{:as "AverageYearRating"
:field "IMDB Rating"
:op "mean"}]}
{:filter "(datum['IMDB Rating'] - datum.AverageYearRating) > 2.5"}]}

Calculate Residuals

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:description "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019."
:encoding {:color {:field "RatingDelta"
:scale {:domainMid 0}
:title "Rating Delta"
:type "quantitative"}
:x {:field "Release Date" :type "temporal"}
:y {:field "RatingDelta" :title "Rating Delta" :type "quantitative"}}
:mark "point"
:transform [{:filter "datum['IMDB Rating'] != null"}
{:filter {:field "Release Date" :range [nil 2019] :timeUnit "year"}}
{:joinaggregate [{:as "AverageRating"
:field "IMDB Rating"
:op "mean"}]}
{:as "RatingDelta"
:calculate "datum['IMDB Rating'] - datum.AverageRating"}]}

Line Charts Showing Ranks Over Time

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:diff -1 :matchday 1 :point 0 :team "Germany"}
{:diff 1 :matchday 1 :point 3 :team "Mexico"}
{:diff -1 :matchday 1 :point 0 :team "South Korea"}
{:diff 1 :matchday 1 :point 3 :team "Sweden"}
{:diff 0 :matchday 2 :point 3 :team "Germany"}
{:diff 2 :matchday 2 :point 6 :team "Mexico"}
{:diff -2 :matchday 2 :point 0 :team "South Korea"}
{:diff 0 :matchday 2 :point 3 :team "Sweden"}
{:diff -2 :matchday 3 :point 3 :team "Germany"}
{:diff -1 :matchday 3 :point 6 :team "Mexico"}
{:diff 0 :matchday 3 :point 3 :team "South Korea"}
{:diff 3 :matchday 3 :point 6 :team "Sweden"}]}
:encoding {:color {:field "team"
:scale {:domain ["Germany" "Mexico" "South Korea" "Sweden"]
:range ["black" "#127153" "#C91A3C" "#0C71AB"]}
:type "nominal"}
:x {:field "matchday" :type "ordinal"}
:y {:field "rank" :type "ordinal"}}
:mark {:orient "vertical" :type "line"}
:title {:frame "bounds" :text "World Cup 2018: Group F Rankings"}
:transform [{:groupby ["matchday"]
:sort [{:field "point" :order "descending"}
{:field "diff" :order "descending"}]
:window [{:as "rank" :op "rank"}]}]}

Waterfall Chart of Monthly Profit and Loss

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:text {:color "#404040" :fontWeight "bold"}}
:data {:values [{:amount 4000 :label "Begin"}
{:amount 1707 :label "Jan"}
{:amount -1425 :label "Feb"}
{:amount -1030 :label "Mar"}
{:amount 1812 :label "Apr"}
{:amount -1067 :label "May"}
{:amount -1481 :label "Jun"}
{:amount 1228 :label "Jul"}
{:amount 1176 :label "Aug"}
{:amount 1146 :label "Sep"}
{:amount 1205 :label "Oct"}
{:amount -1388 :label "Nov"}
{:amount 1492 :label "Dec"}
{:amount 0 :label "End"}]}
:encoding {:x {:axis {:labelAngle 0 :title "Months"}
:field "label"
:sort nil
:type "ordinal"}}
:height 450
:layer [{:encoding {:color {:condition [{:test "datum.label === 'Begin' || datum.label === 'End'"
:value "#f7e0b6"}
{:test "datum.sum < datum.previous_sum"
:value "#f78a64"}]
:value "#93c4aa"}
:y {:field "previous_sum"
:title "Amount"
:type "quantitative"}
:y2 {:field "sum"}}
:mark {:size 45 :type "bar"}}
{:encoding {:x2 {:field "lead"} :y {:field "sum" :type "quantitative"}}
:mark {:color "#404040"
:opacity 1
:strokeWidth 2
:type "rule"
:x2Offset 22.5
:xOffset -22.5}}
{:encoding {:text {:field "sum_inc" :type "nominal"}
:y {:field "sum_inc" :type "quantitative"}}
:mark {:baseline "bottom" :dy -4 :type "text"}}
{:encoding {:text {:field "sum_dec" :type "nominal"}
:y {:field "sum_dec" :type "quantitative"}}
:mark {:baseline "top" :dy 4 :type "text"}}
{:encoding {:color {:condition [{:test "datum.label === 'Begin' || datum.label === 'End'"
:value "#725a30"}]
:value "white"}
:text {:field "text_amount" :type "nominal"}
:y {:field "center" :type "quantitative"}}
:mark {:baseline "middle" :fontWeight "bold" :type "text"}}]
:transform [{:window [{:as "sum" :field "amount" :op "sum"}]}
{:window [{:as "lead" :field "label" :op "lead"}]}
{:as "lead"
:calculate "datum.lead === null ? datum.label : datum.lead"}
{:as "previous_sum"
:calculate "datum.label === 'End' ? 0 : datum.sum - datum.amount"}
{:as "amount"
:calculate "datum.label === 'End' ? datum.sum : datum.amount"}
{:as "text_amount"
:calculate "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount"}
{:as "center" :calculate "(datum.sum + datum.previous_sum) / 2"}
{:as "sum_dec"
:calculate "datum.sum < datum.previous_sum ? datum.sum : ''"}
{:as "sum_inc"
:calculate "datum.sum > datum.previous_sum ? datum.sum : ''"}]
:width 800}

Filtering Top-K Items

Here we use window transform to derive the total number of students along with the rank of the current student to determine the top K students and display their score.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:score 100 :student "A"}
{:score 56 :student "B"}
{:score 88 :student "C"}
{:score 65 :student "D"}
{:score 45 :student "E"}
{:score 23 :student "F"}
{:score 66 :student "G"}
{:score 67 :student "H"}
{:score 13 :student "I"}
{:score 12 :student "J"}
{:score 50 :student "K"}
{:score 78 :student "L"}
{:score 66 :student "M"}
{:score 30 :student "N"}
{:score 97 :student "O"}
{:score 75 :student "P"}
{:score 24 :student "Q"}
{:score 42 :student "R"}
{:score 76 :student "S"}
{:score 78 :student "T"}
{:score 21 :student "U"}
{:score 46 :student "V"}]}
:description "A bar graph showing the scores of the top 5 students. This shows an example of the window transform, for how the top K (5) can be filtered, and also how a rank can be computed for each student."
:encoding {:x {:field "score" :type "quantitative"}
:y {:field "student"
:sort {:field "score" :op "average" :order "descending"}
:type "nominal"}}
:mark "bar"
:transform [{:sort [{:field "score" :order "descending"}]
:window [{:as "rank" :op "rank"}]}
{:filter "datum.rank <= 5"}]}

Top-K Plot with "Others"

By @manzt, adapted from https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:description "Top-K plot with \"others\" by Trevor Manz, adapted from https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example."
:encoding {:x {:aggregate "mean"
:field "aggregate_gross"
:title nil
:type "quantitative"}
:y {:field "ranked_director"
:sort {:field "aggregate_gross" :op "mean" :order "descending"}
:title nil
:type "ordinal"}}
:mark "bar"
:title "Top Directors by Average Worldwide Gross"
:transform [{:aggregate [{:as "aggregate_gross"
:field "Worldwide Gross"
:op "mean"}]
:groupby ["Director"]}
{:sort [{:field "aggregate_gross" :order "descending"}]
:window [{:as "rank" :op "row_number"}]}
{:as "ranked_director"
:calculate "datum.rank < 10 ? datum.Director : 'All Others'"}]}

Using the lookup transform to combine data

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/lookup_groups.csv"}
:encoding {:x {:field "group"} :y {:aggregate "mean" :field "age"}}
:mark "bar"
:transform [{:from {:data {:url "data/lookup_people.csv"}
:fields ["age" "height"]
:key "name"}
:lookup "person"}]}

Cumulative Frequency Distribution

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:field "IMDB Rating" :type "quantitative"}
:y {:field "Cumulative Count" :type "quantitative"}}
:mark "area"
:transform [{:frame [nil 0]
:sort [{:field "IMDB Rating"}]
:window [{:as "Cumulative Count" :field "count" :op "count"}]}]}

Layered Histogram and Cumulative Histogram

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:x {:bin "binned"
:field "bin_IMDB_Rating"
:scale {:zero false}
:title "IMDB Rating"
:type "quantitative"}
:x2 {:field "bin_IMDB_Rating_end"}}
:layer [{:encoding {:y {:field "Cumulative Count" :type "quantitative"}}
:mark "bar"}
{:encoding {:y {:field "count" :type "quantitative"}}
:mark {:color "yellow" :opacity 0.5 :type "bar"}}]
:transform [{:as "bin_IMDB_Rating" :bin true :field "IMDB Rating"}
{:aggregate [{:as "count" :op "count"}]
:groupby ["bin_IMDB_Rating" "bin_IMDB_Rating_end"]}
{:filter "datum.bin_IMDB_Rating !== null"}
{:frame [nil 0]
:sort [{:field "bin_IMDB_Rating"}]
:window [{:as "Cumulative Count" :field "count" :op "sum"}]}]}

Parallel Coordinate Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axisX {:domain false :labelAngle 0 :tickColor "#ccc" :title nil}
:style {:label {:align "right" :baseline "middle" :dx -5}
:tick {:orient "horizontal"}}
:view {:stroke nil}}
:data {:url "data/penguins.json"}
:description "Though Vega-Lite supports only one scale per axes, one can create a parallel coordinate plot by folding variables, using `joinaggregate` to normalize their values and using ticks and rules to manually create axes."
:height 300
:layer [{:encoding {:detail {:aggregate "count"} :x {:field "key"}}
:mark {:color "#ccc" :type "rule"}}
{:encoding {:color {:field "Species" :type "nominal"}
:detail {:field "index" :type "nominal"}
:opacity {:value 0.3}
:tooltip [{:field "Beak Length (mm)" :type "quantitative"}
{:field "Beak Depth (mm)" :type "quantitative"}
{:field "Flipper Length (mm)"
:type "quantitative"}
{:field "Body Mass (g)" :type "quantitative"}]
:x {:field "key" :type "nominal"}
:y {:axis nil :field "norm_val" :type "quantitative"}}
:mark "line"}
{:encoding {:x {:field "key" :type "nominal"} :y {:value 0}}
:layer [{:encoding {:text {:aggregate "max" :field "max"}}
:mark {:style "label" :type "text"}}
{:mark {:color "#ccc" :size 8 :style "tick" :type "tick"}}]}
{:encoding {:x {:field "key" :type "nominal"} :y {:value 150}}
:layer [{:encoding {:text {:aggregate "min" :field "mid"}}
:mark {:style "label" :type "text"}}
{:mark {:color "#ccc" :size 8 :style "tick" :type "tick"}}]}
{:encoding {:x {:field "key" :type "nominal"} :y {:value 300}}
:layer [{:encoding {:text {:aggregate "min" :field "min"}}
:mark {:style "label" :type "text"}}
{:mark {:color "#ccc" :size 8 :style "tick" :type "tick"}}]}]
:transform [{:filter "datum['Beak Length (mm)']"}
{:window [{:as "index" :op "count"}]}
{:fold ["Beak Length (mm)"
"Beak Depth (mm)"
"Flipper Length (mm)"
"Body Mass (g)"]}
{:groupby ["key"]
:joinaggregate [{:as "min" :field "value" :op "min"}
{:as "max" :field "value" :op "max"}]}
{:as "norm_val"
:calculate "(datum.value - datum.min) / (datum.max-datum.min)"}
{:as "mid" :calculate "(datum.min + datum.max) / 2"}]
:width 600}

Bar Chart Showing Argmax Value

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:description "The production budget of the movie that has the highest US Gross in each major genre."
:encoding {:x {:aggregate {:argmax "US Gross"}
:field "Production Budget"
:type "quantitative"}
:y {:field "Major Genre" :type "nominal"}}
:mark "bar"}

Layering Averages over Raw Values

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Plot showing average data with raw values in the background."
:layer [{:encoding {:x {:field "date" :timeUnit "year"}
:y {:field "price" :type "quantitative"}}
:mark {:opacity 0.3 :type "point"}}
{:encoding {:x {:field "date" :timeUnit "year"}
:y {:aggregate "mean" :field "price"}}
:mark "line"}]
:transform [{:filter "datum.symbol==='GOOG'"}]}

Layering Rolling Averages over Raw Values

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:description "Plot showing a 30 day rolling average with raw values in the background."
:encoding {:x {:field "date" :title "Date" :type "temporal"}
:y {:axis {:title "Max Temperature and Rolling Mean"}
:type "quantitative"}}
:height 300
:layer [{:encoding {:y {:field "temp_max" :title "Max Temperature"}}
:mark {:opacity 0.3 :type "point"}}
{:encoding {:y {:field "rolling_mean"
:title "Rolling Mean of Max Temperature"}}
:mark {:color "red" :size 3 :type "line"}}]
:transform [{:frame [-15 15]
:window [{:as "rolling_mean" :field "temp_max" :op "mean"}]}]
:width 400}

Line Chart to Show Benchmarking Results

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:datasets {:falcon [16.81999969482422
19.759998321533203
16.079999923706055
19.579999923706055
16.420000076293945
16.200000762939453
16.020000457763672
15.9399995803833
16.280000686645508
16.119998931884766
16.15999984741211
16.119998931884766
16.139999389648438
16.100000381469727
16.200000762939453
16.260000228881836
19.35999870300293
19.700000762939453
15.9399995803833
19.139999389648438
16.200000762939453
16.119998931884766
19.520000457763672
19.700000762939453
16.200000762939453
20.979999542236328
16.299999237060547
16.420000076293945
16.81999969482422
16.5
16.560001373291016
16.18000030517578
16.079999923706055
16.239999771118164
16.040000915527344
16.299999237060547
19.399999618530273
15.699999809265137
16.239999771118164
15.920000076293945
16.259998321533203
16.219999313354492
16.520000457763672
16.459999084472656
16.360000610351562
15.719999313354492
16.060001373291016
15.960000991821289
16.479999542236328
16.600000381469727
16.240001678466797
16.940000534057617
16.220001220703125
15.959999084472656
15.899999618530273
16.479999542236328
16.31999969482422
15.75999927520752
15.999998092651367
16.18000030517578
16.219999313354492
15.800000190734863
16.139999389648438
16.299999237060547
16.360000610351562
16.260000228881836
15.959999084472656
15.9399995803833
16.53999900817871
16.139999389648438
16.259998321533203
16.200000762939453
15.899999618530273
16.079999923706055
16.079999923706055
15.699999809265137
15.660000801086426
16.139999389648438
23.100000381469727
16.600000381469727
16.420000076293945
16.020000457763672
15.619999885559082
16.35999870300293
15.719999313354492
15.920001029968262
15.5600004196167
16.34000015258789
22.82000160217285
15.660000801086426
15.5600004196167
16
16
15.819999694824219
16.399999618530273
16.46000099182129
16.059999465942383
16.239999771118164
15.800000190734863
16.15999984741211
16.360000610351562
19.700000762939453
16.10000228881836
16.139999389648438
15.819999694824219
16.439998626708984
16.139999389648438
16.020000457763672
15.860000610351562
16.059999465942383
16.020000457763672
15.920000076293945
15.819999694824219
16.579999923706055
15.880000114440918
16.579999923706055
15.699999809265137
19.380001068115234
19.239999771118164
16
15.980000495910645
15.959999084472656
16.200000762939453
15.980000495910645
16.34000015258789
16.31999969482422
16.260000228881836
15.920000076293945
15.540000915527344
16.139999389648438
16.459999084472656
16.34000015258789
15.819999694824219
19.719999313354492
15.75999927520752
16.499998092651367
15.719999313354492
16.079999923706055
16.439998626708984
16.200000762939453
15.959999084472656
16
16.100000381469727
19.31999969482422
16.100000381469727
16.18000030517578
15.959999084472656
22.639999389648438
15.899999618530273
16.279998779296875
16.100000381469727
15.920000076293945
16.079999923706055
16.260000228881836
15.899999618530273
15.820001602172852
15.699999809265137
15.979998588562012
16.380001068115234
16.040000915527344
19.420000076293945
15.9399995803833
16.15999984741211
15.960000991821289
16.259998321533203
15.780000686645508
15.880000114440918
15.980000495910645
16.060001373291016
16.119998931884766
23.020000457763672
15.619999885559082
15.920000076293945
16.060001373291016
14.780000686645508
16.260000228881836
19.520000457763672
16.31999969482422
16.600000381469727
16.219999313354492
19.740001678466797
19.46000099182129
15.940000534057617
15.839999198913574
16.100000381469727
16.46000099182129
16.17999839782715
16.100000381469727
15.9399995803833
16.060001373291016
15.860000610351562
15.819999694824219
16.03999900817871
16.17999839782715
15.819999694824219
17.299999237060547
15.9399995803833
15.739999771118164
15.719999313354492
15.679998397827148
15.619999885559082
15.600000381469727
16.03999900817871
15.5
15.600001335144043
19.439998626708984
15.960000991821289
16.239999771118164
16.040000915527344
16.239999771118164]
:square [24.200000762939453
17.899999618530273
15.800000190734863
58.400001525878906
151
2523.10009765625
245.3000030517578
136
72.30000305175781
55.70000076293945
42.400001525878906
37.70000076293945
30.100000381469727
30.100000381469727
21.799999237060547
20.600000381469727
21.799999237060547
17.600000381469727
18.200000762939453
21
941.7000122070312
177.39999389648438
2821.800048828125
359.20001220703125
318
217.10000610351562
126
69
57.79999923706055
45.29999923706055
35.599998474121094
29.100000381469727
23.799999237060547
44.20000076293945
17.700000762939453
17.700000762939453
15.699999809265137
27.799999237060547
22.799999237060547
3853.60009765625
91.5999984741211
181.39999389648438
476.29998779296875
265.8999938964844
254.60000610351562
2583.199951171875
124.80000305175781
73.19999694824219
56.400001525878906
48.70000076293945
41.599998474121094
21.100000381469727
20.299999237060547
21.299999237060547
18.299999237060547
17.100000381469727
19.5
828.2000122070312
162.1999969482422
217.89999389648438
205.5
197.60000610351562
2249.800048828125
103.0999984741211
71.69999694824219
57.599998474121094
41.400001525878906
34.5
22
20.5
21.700000762939453
18.299999237060547
17.299999237060547
19.399999618530273
666.7999877929688
214.89999389648438
212.3000030517578
125.80000305175781
67.69999694824219
56.099998474121094
45.79999923706055
38.29999923706055
33
35.400001525878906
22.700000762939453
19.399999618530273
19.899999618530273
24.100000381469727
19.299999237060547
21.299999237060547
3508.699951171875
204.10000610351562
125.4000015258789
65.30000305175781
60.79999923706055
44.099998474121094
36.29999923706055
30.5
28.600000381469727
16.5
18.600000381469727
23.700000762939453
22.299999237060547
17.600000381469727
19.200000762939453
448.79998779296875
124.4000015258789
66.5999984741211
53.5
51
45.20000076293945
28.399999618530273
29.200000762939453
26.700000762939453
25.899999618530273
18.100000381469727
17.600000381469727
20.100000381469727
25.200000762939453
3332
67.5
53.599998474121094
56.599998474121094
39.900001525878906
27.600000381469727
29.600000381469727
33.5
17.200000762939453
18.799999237060547
25.200000762939453
16.700000762939453
16.899999618530273
240.1999969482422
52.400001525878906
42.099998474121094
33.900001525878906
28
28.600000381469727
17.299999237060547
20
21
22.799999237060547
16.700000762939453
19.200000762939453
175.39999389648438
43.5
34.70000076293945
29.700000762939453
34.900001525878906
25.799999237060547
17.299999237060547
22.600000381469727
17.600000381469727
17.200000762939453
19.200000762939453
111.80000305175781
35.400001525878906
27.600000381469727
25.399999618530273
21.899999618530273
18.600000381469727
18.100000381469727
21.200000762939453
17.899999618530273
17
80.5999984741211
29.799999237060547
30.100000381469727
16
26.799999237060547
17.5
22.299999237060547
16.799999237060547
22.399999618530273
77.4000015258789
31
29.700000762939453
28.700000762939453
26
16.899999618530273
15.800000190734863
19
52.599998474121094
25.200000762939453
16.700000762939453
17.899999618530273
21
19.799999237060547
18.799999237060547
46.5
17.5
16.799999237060547
18.299999237060547
18.299999237060547
14.899999618530273
41
18.299999237060547
17.299999237060547
17
17.5
32.29999923706055
22.600000381469727
16.600000381469727
17.899999618530273
25.600000381469727
17.5
20.299999237060547
25.200000762939453
18.600000381469727
17.700000762939453]}
:encoding {:color {:field "system"
:legend {:orient "bottom-right"}
:title "System"
:type "nominal"}
:size {:value 1}
:x {:axis {:grid false}
:field "row"
:scale {:nice false}
:title "Trial"
:type "quantitative"}
:y {:axis {:grid false}
:field "fps"
:scale {:type "log"}
:title "Frames Per Second (fps)"}}
:height 200
:layer [{:data {:name "falcon"}
:mark "line"
:transform [{:window [{:as "row" :op "row_number"}]}
{:as "fps" :calculate "1000/datum.data"}
{:as "system" :calculate "'Falcon'"}]}
{:data {:name "square"}
:mark "line"
:transform [{:window [{:as "row" :op "row_number"}]}
{:as "fps" :calculate "1000/datum.data"}
{:as "system" :calculate "'Square Crossfilter (3M)'"}]}]
:width 400}

Quantile-Quantile Plot (QQ Plot)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/normal-2d.json"}
:hconcat [{:encoding {:x {:field "unif" :type "quantitative"}
:y {:field "v" :type "quantitative"}}
:mark "point"}
{:encoding {:x {:field "norm" :type "quantitative"}
:y {:field "v" :type "quantitative"}}
:mark "point"}]
:transform [{:as ["p" "v"] :quantile "u" :step 0.01}
{:as "unif" :calculate "quantileUniform(datum.p)"}
{:as "norm" :calculate "quantileNormal(datum.p)"}]}

Linear Regression

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:layer [{:encoding {:x {:field "Rotten Tomatoes Rating" :type "quantitative"}
:y {:field "IMDB Rating" :type "quantitative"}}
:mark {:filled true :type "point"}}
{:encoding {:x {:field "Rotten Tomatoes Rating" :type "quantitative"}
:y {:field "IMDB Rating" :type "quantitative"}}
:mark {:color "firebrick" :type "line"}
:transform [{:on "Rotten Tomatoes Rating" :regression "IMDB Rating"}]}
{:encoding {:text {:field "R2" :type "nominal"}}
:mark {:align "right"
:color "firebrick"
:type "text"
:x "width"
:y -5}
:transform [{:on "Rotten Tomatoes Rating"
:params true
:regression "IMDB Rating"}
{:as "R2"
:calculate "'R²: '+format(datum.rSquared, '.2f')"}]}]}

Loess Regression

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:layer [{:encoding {:x {:field "Rotten Tomatoes Rating" :type "quantitative"}
:y {:field "IMDB Rating" :type "quantitative"}}
:mark {:filled true :type "point"}}
{:encoding {:x {:field "Rotten Tomatoes Rating" :type "quantitative"}
:y {:field "IMDB Rating" :type "quantitative"}}
:mark {:color "firebrick" :type "line"}
:transform [{:loess "IMDB Rating" :on "Rotten Tomatoes Rating"}]}]}

Error Bars Showing Confidence Interval

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:encoding {:y {:field "variety" :type "ordinal"}}
:layer [{:encoding {:color {:value "black"}
:x {:aggregate "mean"
:field "yield"
:scale {:zero false}
:title "Barley Yield"
:type "quantitative"}}
:mark {:filled true :type "point"}}
{:encoding {:x {:field "yield"
:title "Barley Yield"
:type "quantitative"}}
:mark {:extent "ci" :type "errorbar"}}]}

Error Bars Showing Standard Deviation

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:encoding {:y {:field "variety" :type "ordinal"}}
:layer [{:encoding {:color {:value "black"}
:x {:aggregate "mean"
:field "yield"
:scale {:zero false}
:title "Barley Yield"
:type "quantitative"}}
:mark {:filled true :type "point"}}
{:encoding {:x {:field "yield"
:title "Barley Yield"
:type "quantitative"}}
:mark {:extent "stdev" :type "errorbar"}}]}

Line Chart with Confidence Interval Band

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:x {:field "Year" :timeUnit "year"}}
:layer [{:encoding {:y {:field "Miles_per_Gallon"
:title "Mean of Miles per Gallon (95% CIs)"
:type "quantitative"}}
:mark {:extent "ci" :type "errorband"}}
{:encoding {:y {:aggregate "mean" :field "Miles_per_Gallon"}}
:mark "line"}]}

Scatterplot with Mean and Standard Deviation Overlay

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "A scatterplot showing horsepower and miles per gallons for various cars."
:layer [{:encoding {:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"}
{:encoding {:y {:field "Miles_per_Gallon"
:title "Miles per Gallon"
:type "quantitative"}}
:mark {:extent "stdev" :opacity 0.2 :type "errorband"}}
{:encoding {:y {:aggregate "mean"
:field "Miles_per_Gallon"
:type "quantitative"}}
:mark "rule"}]}

Box Plot with Min/Max Whiskers

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/penguins.json"}
:description "A vertical box plot showing median, min, and max body mass of penguins."
:encoding {:color {:field "Species" :legend nil :type "nominal"}
:x {:field "Species" :type "nominal"}
:y {:field "Body Mass (g)"
:scale {:zero false}
:type "quantitative"}}
:mark {:extent "min-max" :type "boxplot"}}

Tukey Box Plot (1.5 IQR)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/penguins.json"}
:description "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins."
:encoding {:color {:field "Species" :legend nil :type "nominal"}
:x {:field "Species" :type "nominal"}
:y {:field "Body Mass (g)"
:scale {:zero false}
:type "quantitative"}}
:mark "boxplot"}

Box Plot with Pre-Calculated Summaries

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:Species "Adelie"
:lower 2850
:median 3700
:outliers []
:q1 3350
:q3 4000
:upper 4775}
{:Species "Chinstrap"
:lower 2700
:median 3700
:outliers [2700 4800]
:q1 3487.5
:q3 3950
:upper 4800}
{:Species "Gentoo"
:lower 3950
:median 5000
:outliers []
:q1 4700
:q3 5500
:upper 6300}]}
:encoding {:y {:field "Species" :title nil :type "nominal"}}
:layer [{:encoding {:x {:field "lower"
:scale {:zero false}
:title nil
:type "quantitative"}
:x2 {:field "upper"}}
:mark {:type "rule"}}
{:encoding {:color {:field "Species" :legend nil :type "nominal"}
:x {:field "q1" :type "quantitative"}
:x2 {:field "q3"}}
:mark {:size 14 :type "bar"}}
{:encoding {:x {:field "median" :type "quantitative"}}
:mark {:color "white" :size 14 :type "tick"}}
{:encoding {:x {:field "outliers" :type "quantitative"}}
:mark {:style "boxplot-outliers" :type "point"}
:transform [{:flatten ["outliers"]}]}]
:title "Body Mass of Penguin Species (g)"}

Simple Bar Chart with Labels

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b 28} {:a "B" :b 55} {:a "C" :b 43}]}
:description "Bar chart with text labels. Set domain to make the frame cover the labels."
:encoding {:x {:field "b" :scale {:domain [0 60]} :type "quantitative"}
:y {:field "a" :type "nominal"}}
:layer [{:mark "bar"}
{:encoding {:text {:field "b" :type "quantitative"}}
:mark {:align "left" :baseline "middle" :dx 3 :type "text"}}]}

Simple Bar Chart with Labels and Emojis

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:count 21 :name "🍊"}
{:count 13 :name "🍇"}
{:count 8 :name "🍏"}
{:count 5 :name "🍌"}
{:count 3 :name "🍐"}
{:count 2 :name "🍋"}
{:count 1 :name "🍎"}
{:count 1 :name "🍉"}]}
:description "Vega-Lite version of bar chart from https://observablehq.com/@d3/learn-d3-scales."
:encoding {:x {:field "count" :title nil :type "quantitative"}
:y {:field "name" :sort "-x" :title nil :type "nominal"}}
:layer [{:encoding {:color {:field "count"
:title "Number of fruit"
:type "quantitative"}}
:mark "bar"}
{:encoding {:color {:condition {:test {:field "count" :gt 10}
:value "white"}
:value "black"}
:text {:field "count" :type "quantitative"}}
:mark {:align "right" :aria false :type "text" :xOffset -4}}]
:width 400}

Layering text over heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:grid true :tickBand "extent"}}
:data {:url "data/cars.json"}
:encoding {:x {:field "Cylinders" :type "ordinal"}
:y {:field "Origin" :type "ordinal"}}
:layer [{:encoding {:color {:field "num_cars"
:legend {:direction "horizontal"
:gradientLength 120}
:title "Count of Records"
:type "quantitative"}}
:mark "rect"}
{:encoding {:color {:condition {:test "datum['num_cars'] < 40"
:value "black"}
:value "white"}
:text {:field "num_cars" :type "quantitative"}}
:mark "text"}]
:transform [{:aggregate [{:as "num_cars" :op "count"}]
:groupby ["Origin" "Cylinders"]}]}

Carbon Dioxide in the Atmosphere

This example was inspired by [Gregor Aisch](https://github.com/gka)'s [Carbon Dioxide Concentration By Decade](https://www.datawrapper.de/_/OHgEm/).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:text {:align "left" :dx 3 :dy 1}}
:data {:format {:parse {:Date "utc:'%Y-%m-%d'"}}
:url "data/co2-concentration.csv"}
:encoding {:color {:field "decade"
:legend nil
:scale {:scheme "magma"}
:type "ordinal"}
:x {:axis {:tickCount 11}
:title "Year into Decade"
:type "quantitative"}
:y {:scale {:zero false}
:title "CO2 concentration in ppm"
:type "quantitative"}}
:height 500
:layer [{:encoding {:x {:field "scaled_date"} :y {:field "CO2"}} :mark "line"}
{:encoding {:text {:aggregate {:argmin "scaled_date"} :field "year"}
:x {:aggregate "min" :field "scaled_date"}
:y {:aggregate {:argmin "scaled_date"} :field "CO2"}}
:mark {:aria false :baseline "top" :type "text"}}
{:encoding {:text {:aggregate {:argmax "scaled_date"} :field "year"}
:x {:aggregate "max" :field "scaled_date"}
:y {:aggregate {:argmax "scaled_date"} :field "CO2"}}
:mark {:aria false :type "text"}}]
:transform [{:as "year" :calculate "year(datum.Date)"}
{:as "decade" :calculate "floor(datum.year / 10)"}
{:as "scaled_date"
:calculate "(datum.year % 10) + (month(datum.Date)/12)"}
{:as "end"
:calculate "datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null"}]
:width 800}

Bar Chart Highlighting Values beyond a Threshold

To create a bar chart that highlights values beyond a threshold, we use two `layer`s of `bar` marks. The lower layer shows all the bars while the upper layer shows bar with values above the threshold in red (`#e45755`). We then `layer` a `rule` mark and a `text` mark over the bars to annotate the threshold value.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:description "The PM2.5 value of Beijing observed 15 days, highlighting the days when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html"
:layer [{:data {:values [{:Day 1 :Value 54.8}
{:Day 2 :Value 112.1}
{:Day 3 :Value 63.6}
{:Day 4 :Value 37.6}
{:Day 5 :Value 79.7}
{:Day 6 :Value 137.9}
{:Day 7 :Value 120.1}
{:Day 8 :Value 103.3}
{:Day 9 :Value 394.8}
{:Day 10 :Value 199.5}
{:Day 11 :Value 72.3}
{:Day 12 :Value 51.1}
{:Day 13 :Value 112.0}
{:Day 14 :Value 174.5}
{:Day 15 :Value 130.5}]}
:layer [{:encoding {:x {:axis {:labelAngle 0}
:field "Day"
:type "ordinal"}
:y {:field "Value" :type "quantitative"}}
:mark "bar"}
{:encoding {:color {:value "#e45755"}
:x {:field "Day" :type "ordinal"}
:y {:field "baseline"
:title "PM2.5 Value"
:type "quantitative"}
:y2 {:field "Value"}}
:mark "bar"
:transform [{:filter "datum.Value >= 300"}
{:as "baseline" :calculate "300"}]}]}
{:data {:values [{}]}
:encoding {:y {:datum 300}}
:layer [{:mark "rule"}
{:mark {:align "right"
:baseline "bottom"
:dx -2
:dy -2
:text "hazardous"
:type "text"
:x "width"}}]}]}

Mean overlay over precipitation chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:layer [{:encoding {:x {:field "date" :timeUnit "month" :type "ordinal"}
:y {:aggregate "mean"
:field "precipitation"
:type "quantitative"}}
:mark "bar"}
{:encoding {:color {:value "red"}
:size {:value 3}
:y {:aggregate "mean"
:field "precipitation"
:type "quantitative"}}
:mark "rule"}]}

Histogram with a Global Mean Overlay

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:layer [{:encoding {:x {:bin true :field "IMDB Rating"}
:y {:aggregate "count"}}
:mark "bar"}
{:encoding {:color {:value "red"}
:size {:value 5}
:x {:aggregate "mean" :field "IMDB Rating"}}
:mark "rule"}]}

Line Chart with Highlighted Rectangles

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:parse {:year "date:'%Y'"}}
:values [{:population 1309 :year "1875"}
{:population 1558 :year "1890"}
{:population 4512 :year "1910"}
{:population 8180 :year "1925"}
{:population 15915 :year "1933"}
{:population 24824 :year "1939"}
{:population 28275 :year "1946"}
{:population 29189 :year "1950"}
{:population 29881 :year "1964"}
{:population 26007 :year "1971"}
{:population 24029 :year "1981"}
{:population 23340 :year "1985"}
{:population 22307 :year "1989"}
{:population 22087 :year "1990"}
{:population 22139 :year "1991"}
{:population 22105 :year "1992"}
{:population 22242 :year "1993"}
{:population 22801 :year "1994"}
{:population 24273 :year "1995"}
{:population 25640 :year "1996"}
{:population 27393 :year "1997"}
{:population 29505 :year "1998"}
{:population 32124 :year "1999"}
{:population 33791 :year "2000"}
{:population 35297 :year "2001"}
{:population 36179 :year "2002"}
{:population 36829 :year "2003"}
{:population 37493 :year "2004"}
{:population 38376 :year "2005"}
{:population 39008 :year "2006"}
{:population 39366 :year "2007"}
{:population 39821 :year "2008"}
{:population 40179 :year "2009"}
{:population 40511 :year "2010"}
{:population 40465 :year "2011"}
{:population 40905 :year "2012"}
{:population 41258 :year "2013"}
{:population 41777 :year "2014"}]}
:description "The population of the German city of Falkensee over time"
:layer [{:data {:format {:parse {:end "date:'%Y'" :start "date:'%Y'"}}
:values [{:end "1945" :event "Nazi Rule" :start "1933"}
{:end "1989"
:event "GDR (East Germany)"
:start "1948"}]}
:encoding {:color {:field "event" :type "nominal"}
:x {:field "start" :timeUnit "year"}
:x2 {:field "end" :timeUnit "year"}}
:mark "rect"}
{:encoding {:color {:value "#333"}
:x {:field "year" :timeUnit "year" :title "year (year)"}
:y {:field "population" :type "quantitative"}}
:mark "line"}
{:encoding {:color {:value "#333"}
:x {:field "year" :timeUnit "year"}
:y {:field "population" :type "quantitative"}}
:mark "point"}]
:width 500}

Layering Averages over Raw Values

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Plot showing average data with raw values in the background."
:layer [{:encoding {:x {:field "date" :timeUnit "year"}
:y {:field "price" :type "quantitative"}}
:mark {:opacity 0.3 :type "point"}}
{:encoding {:x {:field "date" :timeUnit "year"}
:y {:aggregate "mean" :field "price"}}
:mark "line"}]
:transform [{:filter "datum.symbol==='GOOG'"}]}

Layering Rolling Averages over Raw Values

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:description "Plot showing a 30 day rolling average with raw values in the background."
:encoding {:x {:field "date" :title "Date" :type "temporal"}
:y {:axis {:title "Max Temperature and Rolling Mean"}
:type "quantitative"}}
:height 300
:layer [{:encoding {:y {:field "temp_max" :title "Max Temperature"}}
:mark {:opacity 0.3 :type "point"}}
{:encoding {:y {:field "rolling_mean"
:title "Rolling Mean of Max Temperature"}}
:mark {:color "red" :size 3 :type "line"}}]
:transform [{:frame [-15 15]
:window [{:as "rolling_mean" :field "temp_max" :op "mean"}]}]
:width 400}

Distributions and Medians of Likert Scale Ratings

Distributions and Medians of Likert Scale Ratings. (Figure 9 from @jhoffswell and @zcliu's 'Interactive Repair of Tables Extracted from PDF Documents on Mobile Devices' -- http://idl.cs.washington.edu/files/2019-InteractiveTableRepair-CHI.pdf).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:name "medians"}
:datasets {:medians [{:hi "Hard"
:lo "Easy"
:median 1.999976
:name "Identify Errors:"}
{:hi "Hard" :lo "Easy" :median 2 :name "Fix Errors:"}
{:hi "Gesture"
:lo "Toolbar"
:median 1.999969
:name "Easier to Fix:"}
{:hi "Gesture"
:lo "Toolbar"
:median 2.500045
:name "Faster to Fix:"}
{:hi "Gesture"
:lo "Toolbar"
:median 1.500022
:name "Easier on Phone:"}
{:hi "Gesture"
:lo "Toolbar"
:median 2.99998
:name "Easier on Tablet:"}
{:hi "Tablet"
:lo "Phone"
:median 4.500007
:name "Device Preference:"}]
:values [{:id "P1" :name "Participant ID" :value "P1"}
{:id "P1" :name "Identify Errors:" :value 2}
{:id "P1" :name "Fix Errors:" :value 2}
{:id "P1" :name "Easier to Fix:" :value 3}
{:id "P1" :name "Faster to Fix:" :value 4}
{:id "P1" :name "Easier on Phone:" :value 2}
{:id "P1" :name "Easier on Tablet:" :value 5}
{:id "P1" :name "Device Preference:" :value 5}
{:id "P1" :name "Tablet_First" :value 1}
{:id "P1" :name "Toolbar_First" :value 1}
{:id "P2" :name "Participant ID" :value "P2"}
{:id "P2" :name "Identify Errors:" :value 2}
{:id "P2" :name "Fix Errors:" :value 3}
{:id "P2" :name "Easier to Fix:" :value 4}
{:id "P2" :name "Faster to Fix:" :value 5}
{:id "P2" :name "Easier on Phone:" :value 5}
{:id "P2" :name "Easier on Tablet:" :value 5}
{:id "P2" :name "Device Preference:" :value 5}
{:id "P2" :name "Tablet_First" :value 1}
{:id "P2" :name "Toolbar_First" :value 1}
{:id "P3" :name "Participant ID" :value "P3"}
{:id "P3" :name "Identify Errors:" :value 2}
{:id "P3" :name "Fix Errors:" :value 2}
{:id "P3" :name "Easier to Fix:" :value 2}
{:id "P3" :name "Faster to Fix:" :value 1}
{:id "P3" :name "Easier on Phone:" :value 2}
{:id "P3" :name "Easier on Tablet:" :value 1}
{:id "P3" :name "Device Preference:" :value 5}
{:id "P3" :name "Tablet_First" :value 1}
{:id "P3" :name "Toolbar_First" :value 0}
{:id "P4" :name "Participant ID" :value "P4"}
{:id "P4" :name "Identify Errors:" :value 3}
{:id "P4" :name "Fix Errors:" :value 3}
{:id "P4" :name "Easier to Fix:" :value 2}
{:id "P4" :name "Faster to Fix:" :value 2}
{:id "P4" :name "Easier on Phone:" :value 4}
{:id "P4" :name "Easier on Tablet:" :value 1}
{:id "P4" :name "Device Preference:" :value 5}
{:id "P4" :name "Tablet_First" :value 1}
{:id "P4" :name "Toolbar_First" :value 0}
{:id "P5" :name "Participant ID" :value "P5"}
{:id "P5" :name "Identify Errors:" :value 2}
{:id "P5" :name "Fix Errors:" :value 2}
{:id "P5" :name "Easier to Fix:" :value 4}
{:id "P5" :name "Faster to Fix:" :value 4}
{:id "P5" :name "Easier on Phone:" :value 4}
{:id "P5" :name "Easier on Tablet:" :value 5}
{:id "P5" :name "Device Preference:" :value 5}
{:id "P5" :name "Tablet_First" :value 0}
{:id "P5" :name "Toolbar_First" :value 1}
{:id "P6" :name "Participant ID" :value "P6"}
{:id "P6" :name "Identify Errors:" :value 1}
{:id "P6" :name "Fix Errors:" :value 3}
{:id "P6" :name "Easier to Fix:" :value 3}
{:id "P6" :name "Faster to Fix:" :value 4}
{:id "P6" :name "Easier on Phone:" :value 4}
{:id "P6" :name "Easier on Tablet:" :value 4}
{:id "P6" :name "Device Preference:" :value 4}
{:id "P6" :name "Tablet_First" :value 0}
{:id "P6" :name "Toolbar_First" :value 1}
{:id "P7" :name "Participant ID" :value "P7"}
{:id "P7" :name "Identify Errors:" :value 2}
{:id "P7" :name "Fix Errors:" :value 3}
{:id "P7" :name "Easier to Fix:" :value 4}
{:id "P7" :name "Faster to Fix:" :value 5}
{:id "P7" :name "Easier on Phone:" :value 3}
{:id "P7" :name "Easier on Tablet:" :value 2}
{:id "P7" :name "Device Preference:" :value 4}
{:id "P7" :name "Tablet_First" :value 0}
{:id "P7" :name "Toolbar_First" :value 0}
{:id "P8" :name "Participant ID" :value "P8"}
{:id "P8" :name "Identify Errors:" :value 3}
{:id "P8" :name "Fix Errors:" :value 1}
{:id "P8" :name "Easier to Fix:" :value 2}
{:id "P8" :name "Faster to Fix:" :value 4}
{:id "P8" :name "Easier on Phone:" :value 2}
{:id "P8" :name "Easier on Tablet:" :value 5}
{:id "P8" :name "Device Preference:" :value 5}
{:id "P8" :name "Tablet_First" :value 0}
{:id "P8" :name "Toolbar_First" :value 0}
{:id "P9" :name "Participant ID" :value "P9"}
{:id "P9" :name "Identify Errors:" :value 2}
{:id "P9" :name "Fix Errors:" :value 3}
{:id "P9" :name "Easier to Fix:" :value 2}
{:id "P9" :name "Faster to Fix:" :value 4}
{:id "P9" :name "Easier on Phone:" :value 1}
{:id "P9" :name "Easier on Tablet:" :value 4}
{:id "P9" :name "Device Preference:" :value 4}
{:id "P9" :name "Tablet_First" :value 1}
{:id "P9" :name "Toolbar_First" :value 1}
{:id "P10" :name "Participant ID" :value "P10"}
{:id "P10" :name "Identify Errors:" :value 2}
{:id "P10" :name "Fix Errors:" :value 2}
{:id "P10" :name "Easier to Fix:" :value 1}
{:id "P10" :name "Faster to Fix:" :value 1}
{:id "P10" :name "Easier on Phone:" :value 1}
{:id "P10" :name "Easier on Tablet:" :value 1}
{:id "P10" :name "Device Preference:" :value 5}
{:id "P10" :name "Tablet_First" :value 1}
{:id "P10" :name "Toolbar_First" :value 1}
{:id "P11" :name "Participant ID" :value "P11"}
{:id "P11" :name "Identify Errors:" :value 2}
{:id "P11" :name "Fix Errors:" :value 2}
{:id "P11" :name "Easier to Fix:" :value 1}
{:id "P11" :name "Faster to Fix:" :value 1}
{:id "P11" :name "Easier on Phone:" :value 1}
{:id "P11" :name "Easier on Tablet:" :value 1}
{:id "P11" :name "Device Preference:" :value 4}
{:id "P11" :name "Tablet_First" :value 1}
{:id "P11" :name "Toolbar_First" :value 0}
{:id "P12" :name "Participant ID" :value "P12"}
{:id "P12" :name "Identify Errors:" :value 1}
{:id "P12" :name "Fix Errors:" :value 3}
{:id "P12" :name "Easier to Fix:" :value 2}
{:id "P12" :name "Faster to Fix:" :value 3}
{:id "P12" :name "Easier on Phone:" :value 1}
{:id "P12" :name "Easier on Tablet:" :value 3}
{:id "P12" :name "Device Preference:" :value 3}
{:id "P12" :name "Tablet_First" :value 0}
{:id "P12" :name "Toolbar_First" :value 1}
{:id "P13" :name "Participant ID" :value "P13"}
{:id "P13" :name "Identify Errors:" :value 2}
{:id "P13" :name "Fix Errors:" :value 2}
{:id "P13" :name "Easier to Fix:" :value 1}
{:id "P13" :name "Faster to Fix:" :value 1}
{:id "P13" :name "Easier on Phone:" :value 1}
{:id "P13" :name "Easier on Tablet:" :value 1}
{:id "P13" :name "Device Preference:" :value 5}
{:id "P13" :name "Tablet_First" :value 0}
{:id "P13" :name "Toolbar_First" :value 0}
{:id "P14" :name "Participant ID" :value "P14"}
{:id "P14" :name "Identify Errors:" :value 3}
{:id "P14" :name "Fix Errors:" :value 3}
{:id "P14" :name "Easier to Fix:" :value 2}
{:id "P14" :name "Faster to Fix:" :value 2}
{:id "P14" :name "Easier on Phone:" :value 1}
{:id "P14" :name "Easier on Tablet:" :value 1}
{:id "P14" :name "Device Preference:" :value 1}
{:id "P14" :name "Tablet_First" :value 1}
{:id "P14" :name "Toolbar_First" :value 1}
{:id "P15" :name "Participant ID" :value "P15"}
{:id "P15" :name "Identify Errors:" :value 4}
{:id "P15" :name "Fix Errors:" :value 5}
{:id "P15" :name "Easier to Fix:" :value 1}
{:id "P15" :name "Faster to Fix:" :value 1}
{:id "P15" :name "Easier on Phone:" :value 1}
{:id "P15" :name "Easier on Tablet:" :value 1}
{:id "P15" :name "Device Preference:" :value 5}
{:id "P15" :name "Tablet_First" :value 1}
{:id "P15" :name "Toolbar_First" :value 0}
{:id "P16" :name "Participant ID" :value "P16"}
{:id "P16" :name "Identify Errors:" :value 1}
{:id "P16" :name "Fix Errors:" :value 3}
{:id "P16" :name "Easier to Fix:" :value 2}
{:id "P16" :name "Faster to Fix:" :value 2}
{:id "P16" :name "Easier on Phone:" :value 1}
{:id "P16" :name "Easier on Tablet:" :value 4}
{:id "P16" :name "Device Preference:" :value 5}
{:id "P16" :name "Tablet_First" :value 0}
{:id "P16" :name "Toolbar_First" :value 1}
{:id "P17" :name "Participant ID" :value "P17"}
{:id "P17" :name "Identify Errors:" :value 3}
{:id "P17" :name "Fix Errors:" :value 2}
{:id "P17" :name "Easier to Fix:" :value 2}
{:id "P17" :name "Faster to Fix:" :value 2}
{:id "P17" :name "Easier on Phone:" :value 1}
{:id "P17" :name "Easier on Tablet:" :value 3}
{:id "P17" :name "Device Preference:" :value 2}
{:id "P17" :name "Tablet_First" :value 0}
{:id "P17" :name "Toolbar_First" :value 0}]}
:description "Likert Scale Ratings Distributions and Medians. (Figure 9 from @jhoffswell and @zcliu's ['Interactive Repair of Tables Extracted from PDF Documents on Mobile Devices'](https://idl.cs.washington.edu/files/2019-InteractiveTableRepair-CHI.pdf))"
:encoding {:x {:axis {:grid false :title nil :values [1 2 3 4 5]}
:scale {:domain [0 6]}
:type "quantitative"}
:y {:axis {:domain false
:grid true
:labelFontWeight "bold"
:offset 50
:ticks false
:title nil}
:field "name"
:sort nil
:type "nominal"}}
:height 175
:layer [{:data {:name "values"}
:encoding {:color {:value "#6EB4FD"}
:size {:aggregate "count"
:legend {:offset 75}
:title "Number of Ratings"
:type "quantitative"}
:x {:field "value"}}
:mark "circle"
:transform [{:filter "datum.name != 'Toolbar_First'"}
{:filter "datum.name != 'Tablet_First'"}
{:filter "datum.name != 'Participant ID'"}]}
{:encoding {:color {:value "black"} :x {:field "median"}} :mark "tick"}
{:encoding {:text {:field "lo"}}
:mark {:align "right" :type "text" :x -5}}
{:encoding {:text {:field "hi"}}
:mark {:align "left" :type "text" :x 255}}]
:title "Questionnaire Ratings"
:view {:stroke nil}
:width 250}

Comparative Likert Scale Ratings

Comparing Likert scale ratings between two conditions. (Figure 10. from @kanitw et al.'s "Voyager 2: Augmenting Visual Analysis with Partial View Specifications" -- http://idl.cs.washington.edu/files/2017-Voyager2-CHI.pdf).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:style {:arrow-label {:dy 12 :fontSize 9.5}
:arrow-label2 {:dy 24 :fontSize 9.5}}
:title {:fontSize 12}
:view {:stroke "transparent"}}
:data {:values [{:hi 2.37
:lo 1.255
:mean 1.813
:measure "Open Exploration"
:study "PoleStar vs Voyager"}
{:hi -1.05
:lo -2.325
:mean -1.688
:measure "Focused Question Answering"
:study "PoleStar vs Voyager"}
{:hi 2.71
:lo 1.665
:mean 2.1875
:measure "Open Exploration"
:study "PoleStar vs Voyager 2"}
{:hi 0.349
:lo -0.474
:mean -0.0625
:measure "Focused Question Answering"
:study "PoleStar vs Voyager 2"}]}
:spacing 10
:vconcat [{:encoding {:x {:axis {:gridColor {:condition {:test "datum.value === 0"
:value "#666"}
:value "#CCC"}
:gridDash [3 3]
:title ""}
:scale {:domain [-3 3]}
:type "quantitative"}
:y {:axis {:domain false
:grid false
:labelPadding 5
:ticks false
:title nil}
:field "study"
:type "nominal"}}
:layer [{:encoding {:x {:field "lo"} :x2 {:field "hi"}}
:mark "rule"}
{:encoding {:color {:field "measure"
:legend nil
:scale {:range ["black" "white"]}
:type "nominal"}
:x {:field "mean"}}
:mark {:opacity 1 :stroke "black" :type "circle"}}]
:title {:frame "bounds" :text "Mean of Subject Ratings (95% CIs)"}}
{:data {:values [{:from -0.25 :label "PoleStar" :to -2.9}
{:from 0.25 :label "Voyager / Voyager 2" :to 2.9}]}
:encoding {:x {:axis nil :scale {:zero false} :type "quantitative"}}
:layer [{:encoding {:x {:field "from"} :x2 {:field "to"}}
:mark "rule"}
{:encoding {:shape {:condition {:test "datum.to > 0"
:value "triangle-right"}
:value "triangle-left"}
:x {:field "to"}}
:mark {:fill "black" :filled true :size 60 :type "point"}}
{:encoding {:x {:field "from"}}
:mark {:align "right"
:style "arrow-label"
:text ["Polestar" "More Valuable"]
:type "text"}
:transform [{:filter "datum.label === 'PoleStar'"}]}
{:encoding {:x {:field "from"}}
:mark {:align "left"
:style "arrow-label"
:text ["Voyager / Voyager 2" "More Valuable"]
:type "text"}
:transform [{:filter "datum.label !== 'PoleStar'"}]}]}]}

Candlestick Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/ohlc.json"}
:description "A candlestick chart inspired by an example in Protovis (http://mbostock.github.io/protovis/ex/candlestick.html)"
:encoding {:color {:condition {:test "datum.open < datum.close"
:value "#06982d"}
:value "#ae1325"}
:x {:axis {:format "%m/%d" :labelAngle -45 :title "Date in 2009"}
:field "date"
:title "Date in 2009"
:type "temporal"}
:y {:axis {:title "Price"}
:scale {:zero false}
:type "quantitative"}}
:layer [{:encoding {:y {:field "low"} :y2 {:field "high"}} :mark "rule"}
{:encoding {:y {:field "open"} :y2 {:field "close"}} :mark "bar"}]
:width 400}

Ranged Dot Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/countries.json"}
:description "A ranged dot plot that uses 'layer' to convey changing life expectancy for the five most populous countries (between 1955 and 2000)."
:encoding {:x {:field "life_expect"
:title "Life Expectancy (years)"
:type "quantitative"}
:y {:axis {:domain false :minExtent 70 :offset 5 :ticks false}
:field "country"
:title "Country"
:type "nominal"}}
:layer [{:encoding {:color {:value "#db646f"}
:detail {:field "country" :type "nominal"}}
:mark "line"}
{:encoding {:color {:field "year"
:scale {:domain [1955 2000]
:range ["#e6959c" "#911a24"]}
:title "Year"
:type "ordinal"}
:opacity {:value 1}
:size {:value 100}}
:mark {:filled true :type "point"}}]
:transform [{:filter {:field "country"
:oneOf ["China"
"India"
"United States"
"Indonesia"
"Brazil"]}}
{:filter {:field "year" :oneOf [1955 2000]}}]}

Bullet Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:tick {:thickness 2}}
:data {:values [{:markers [250]
:measures [220 270]
:ranges [150 225 300]
:subtitle "US$, in thousands"
:title "Revenue"}
{:markers [26]
:measures [21 23]
:ranges [20 25 30]
:subtitle "%"
:title "Profit"}
{:markers [550]
:measures [100 320]
:ranges [350 500 600]
:subtitle "US$, average"
:title "Order Size"}
{:markers [2100]
:measures [1000 1650]
:ranges [1400 2000 2500]
:subtitle "count"
:title "New Customers"}
{:markers [4.4]
:measures [3.2 4.7]
:ranges [3.5 4.25 5]
:subtitle "out of 5"
:title "Satisfaction"}]}
:facet {:row {:field "title" :header {:labelAngle 0 :title ""} :type "ordinal"}}
:resolve {:scale {:x "independent"}}
:spacing 10
:spec {:encoding {:x {:scale {:nice false} :title nil :type "quantitative"}}
:layer [{:encoding {:x {:field "ranges[2]"}}
:mark {:color "#eee" :type "bar"}}
{:encoding {:x {:field "ranges[1]"}}
:mark {:color "#ddd" :type "bar"}}
{:encoding {:x {:field "ranges[0]"}}
:mark {:color "#ccc" :type "bar"}}
{:encoding {:x {:field "measures[1]"}}
:mark {:color "lightsteelblue" :size 10 :type "bar"}}
{:encoding {:x {:field "measures[0]"}}
:mark {:color "steelblue" :size 10 :type "bar"}}
{:encoding {:x {:field "markers[0]"}}
:mark {:color "black" :type "tick"}}]}}

Layered Plot with Dual-Axis

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/weather.csv"}
:description "A dual axis chart, created by setting y's scale resolution to `\"independent\"`"
:encoding {:x {:axis {:format "%b" :title nil} :field "date" :timeUnit "month"}}
:height 300
:layer [{:encoding {:y {:aggregate "average"
:axis {:titleColor "#85C5A6"}
:field "temp_max"
:scale {:domain [0 30]}
:title "Avg. Temperature (°C)"}
:y2 {:aggregate "average" :field "temp_min"}}
:mark {:color "#85C5A6" :opacity 0.3 :type "area"}}
{:encoding {:y {:aggregate "average"
:axis {:titleColor "#85A9C5"}
:field "precipitation"
:title "Precipitation (inches)"}}
:mark {:interpolate "monotone" :stroke "#85A9C5" :type "line"}}]
:resolve {:scale {:y "independent"}}
:transform [{:filter "datum.location == \"Seattle\""}]
:width 400}

Horizon Graph

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:area {:interpolate "monotone"}}
:data {:values [{:x 1 :y 28}
{:x 2 :y 55}
{:x 3 :y 43}
{:x 4 :y 91}
{:x 5 :y 81}
{:x 6 :y 53}
{:x 7 :y 19}
{:x 8 :y 87}
{:x 9 :y 52}
{:x 10 :y 48}
{:x 11 :y 24}
{:x 12 :y 49}
{:x 13 :y 87}
{:x 14 :y 66}
{:x 15 :y 17}
{:x 16 :y 27}
{:x 17 :y 68}
{:x 18 :y 16}
{:x 19 :y 49}
{:x 20 :y 15}]}
:description "Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)"
:encoding {:x {:field "x"
:scale {:nice false :zero false}
:type "quantitative"}
:y {:axis {:title "y"}
:field "y"
:scale {:domain [0 50]}
:type "quantitative"}}
:height 50
:layer [{:mark {:clip true :opacity 0.6 :orient "vertical" :type "area"}}
{:encoding {:opacity {:value 0.3}
:y {:field "ny"
:scale {:domain [0 50]}
:type "quantitative"}}
:mark {:clip true :orient "vertical" :type "area"}
:transform [{:as "ny" :calculate "datum.y - 50"}]}]
:width 300}

Weekly Weather Plot

Inspired by <a href='https://vega.github.io/vega-editor/?mode=vega&spec=weather'>this Vega example</a>. Weekly weather data plot representing high/low ranges of record temperatures (light grey), average temperatures (dark grey), and both predicted and observed temperatures (black) for the given week. The first five days have high/low ranges of observed temperatures, and the last five days have ranges of predicted temperatures, where the upper barbell represents the range of high temperature predictions and the lower barbell represents the range of low temperature predictions. Created by @melissatdiamond.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:style {:hilo {:size 20}}}
:data {:url "data/weather.json"}
:description "A layered bar chart with floating bars representing weekly weather data"
:encoding {:x {:axis {:domain false
:labels false
:orient "top"
:ticks false
:title nil
:titlePadding 25}
:field "id"
:type "ordinal"}
:y {:axis {:title "Temperature (F)"}
:scale {:domain [10 70]}
:type "quantitative"}}
:height 200
:layer [{:encoding {:y {:field "record.low"} :y2 {:field "record.high"}}
:mark {:color "#ccc" :size 20 :type "bar"}}
{:encoding {:y {:field "normal.low"} :y2 {:field "normal.high"}}
:mark {:color "#999" :size 20 :type "bar"}}
{:encoding {:y {:field "actual.low"} :y2 {:field "actual.high"}}
:mark {:color "#000" :size 12 :type "bar"}}
{:encoding {:y {:field "forecast.low.low"}
:y2 {:field "forecast.low.high"}}
:mark {:color "#000" :size 12 :type "bar"}}
{:encoding {:y {:field "forecast.low.high"}
:y2 {:field "forecast.high.low"}}
:mark {:color "#000" :size 3 :type "bar"}}
{:encoding {:y {:field "forecast.high.low"}
:y2 {:field "forecast.high.high"}}
:mark {:color "#000" :size 12 :type "bar"}}
{:encoding {:text {:field "day"}}
:mark {:align "center" :baseline "bottom" :type "text" :y -5}}]
:title {:frame "group" :text ["Weekly Weather" "Observations and Predictions"]}
:width 250}

Wheat and Wages Example

A recreation of William Playfair’s classic chart visualizing the price of wheat, the wages of a mechanic, and the reigning British monarch. Based on a chart by @manzt.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domain false :gridColor "white" :gridOpacity 0.25 :title nil}
:view {:stroke "transparent"}}
:data {:url "data/wheat.json"}
:encoding {:x {:axis {:format "d" :tickCount 5} :type "quantitative"}
:y {:axis {:zindex 1} :type "quantitative"}}
:height 400
:layer [{:encoding {:x {:bin "binned" :field "year"}
:x2 {:field "year_end"}
:y {:field "wheat"}}
:mark {:fill "#aaa" :stroke "#999" :type "bar"}}
{:data {:values [{:year "1600"}
{:year "1650"}
{:year "1700"}
{:year "1750"}
{:year "1800"}]}
:encoding {:x {:field "year"}}
:mark {:opacity 0.5 :stroke "#000" :strokeWidth 0.6 :type "rule"}}
{:encoding {:x {:field "year"} :y {:field "wages"}}
:mark {:color "#a4cedb" :opacity 0.7 :type "area"}}
{:encoding {:x {:field "year"} :y {:field "wages"}}
:mark {:color "#000" :opacity 0.7 :type "line"}}
{:encoding {:x {:field "year"} :y {:field "wages"}}
:mark {:color "#EE8182" :type "line" :yOffset -2}}
{:data {:url "data/monarchs.json"}
:encoding {:fill {:field "commonwealth"
:legend nil
:scale {:range ["black" "white"]}}
:x {:field "start"}
:x2 {:field "end"}
:y {:field "y"}
:y2 {:field "offset"}}
:mark {:stroke "#000" :type "rect"}
:transform [{:as "offset"
:calculate "((!datum.commonwealth && datum.index % 2) ? -1: 1) * 2 + 95"}
{:as "y" :calculate "95"}]}
{:data {:url "data/monarchs.json"}
:encoding {:text {:field "name"} :x {:field "x"} :y {:field "off2"}}
:mark {:baseline "bottom"
:fontSize 9
:fontStyle "italic"
:type "text"
:yOffset 16}
:transform [{:as "off2"
:calculate "((!datum.commonwealth && datum.index % 2) ? -1: 1) + 95"}
{:as "x"
:calculate "+datum.start + (+datum.end - +datum.start)/2"}]}]
:transform [{:as "year_end" :calculate "+datum.year + 5"}]
:width 900}

Trellis Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/population.json"}
:description "A trellis bar chart showing the US population distribution of age groups and gender in 2000."
:encoding {:color {:field "gender" :scale {:range ["#675193" "#ca8861"]}}
:row {:field "gender"}
:x {:field "age"}
:y {:aggregate "sum" :field "people" :title "population"}}
:mark "bar"
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}]
:width {:step 17}}

Trellis Stacked Bar Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:encoding {:color {:field "site" :type "nominal"}
:column {:field "year"}
:x {:aggregate "sum" :field "yield" :type "quantitative"}
:y {:field "variety" :type "nominal"}}
:mark "bar"}

Trellis Scatter Plot (wrapped)

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:encoding {:facet {:columns 2 :field "MPAA Rating" :type "ordinal"}
:x {:field "Worldwide Gross" :type "quantitative"}
:y {:field "US DVD Sales" :type "quantitative"}}
:mark "point"}

Trellis Histograms

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:row {:field "Origin"}
:x {:bin {:maxbins 15} :field "Horsepower" :type "quantitative"}
:y {:aggregate "count" :type "quantitative"}}
:mark "bar"}

Trellis Scatter Plot Showing Anscombe's Quartet

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/anscombe.json"}
:description "Anscombe's Quartet"
:encoding {:column {:field "Series"}
:opacity {:value 1}
:x {:field "X" :scale {:zero false} :type "quantitative"}
:y {:field "Y" :scale {:zero false} :type "quantitative"}}
:mark "circle"}

Becker's Barley Trellis Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/barley.json"}
:description "The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison."
:encoding {:color {:field "year" :type "nominal"}
:facet {:columns 2
:field "site"
:sort {:field "yield" :op "median"}
:type "ordinal"}
:x {:aggregate "median"
:field "yield"
:scale {:zero false}
:type "quantitative"}
:y {:field "variety" :sort "-x" :type "ordinal"}}
:height {:step 12}
:mark "point"
:name "trellis_barley"}

Trellis Area

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of four large companies as a small multiples of area charts."
:encoding {:color {:field "symbol" :legend nil :type "nominal"}
:row {:field "symbol" :title "Symbol" :type "nominal"}
:x {:axis {:grid false}
:field "date"
:title "Time"
:type "temporal"}
:y {:axis {:grid false}
:field "price"
:title "Price"
:type "quantitative"}}
:height 40
:mark "area"
:transform [{:filter "datum.symbol !== 'GOOG'"}]
:width 300}

Trellis Area Plot Showing Annual Temperatures in Seattle

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domain false :grid false}}
:data {:url "data/seattle-weather-hourly-normals.csv"}
:description "Temperature normals in Seattle. Derived from [Seattle Annual Temperate](https://vega.github.io/vega/examples/annual-temperature/) example from the Vega example gallery."
:facet {:row {:field "date"
:header {:labelAlign "left"
:labelAngle 0
:labelExpr "hours(datum.value) == 0 ? 'Midnight' : hours(datum.value) == 12 ? 'Noon' : timeFormat(datum.value, '%I:%M %p')"
:labelPadding 2
:titlePadding -4}
:sort {:field "order"}
:timeUnit "hours"
:type "nominal"}}
:spacing {:row 1}
:spec {:encoding {:x {:axis {:format "%b"}
:field "date"
:timeUnit "monthdate"
:title "Month"
:type "temporal"}
:y {:aggregate "mean"
:axis {:labels false :ticks false :title nil}
:field "temperature"
:scale {:zero false}
:type "quantitative"}}
:height 25
:mark "area"
:view {:stroke nil}
:width 800}
:title "Seattle Temperature Normals"
:transform [{:as "order" :calculate "(hours(datum.date) + 18) % 24"}]}

Faceted Density Plot

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/penguins.json"}
:encoding {:row {:field "Species"}
:x {:field "value" :title "Body Mass (g)" :type "quantitative"}
:y {:field "density" :stack "zero" :type "quantitative"}}
:height 80
:mark "area"
:title "Distribution of Body Mass of Penguins"
:transform [{:density "Body Mass (g)" :extent [2500 6500] :groupby ["Species"]}]
:width 400}

Compact Trellis Grid of Bar Charts

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "a1" :b "b1" :c "x" :p "0.14"}
{:a "a1" :b "b1" :c "y" :p "0.60"}
{:a "a1" :b "b1" :c "z" :p "0.03"}
{:a "a1" :b "b2" :c "x" :p "0.80"}
{:a "a1" :b "b2" :c "y" :p "0.38"}
{:a "a1" :b "b2" :c "z" :p "0.55"}
{:a "a1" :b "b3" :c "x" :p "0.11"}
{:a "a1" :b "b3" :c "y" :p "0.58"}
{:a "a1" :b "b3" :c "z" :p "0.79"}
{:a "a2" :b "b1" :c "x" :p "0.83"}
{:a "a2" :b "b1" :c "y" :p "0.87"}
{:a "a2" :b "b1" :c "z" :p "0.67"}
{:a "a2" :b "b2" :c "x" :p "0.97"}
{:a "a2" :b "b2" :c "y" :p "0.84"}
{:a "a2" :b "b2" :c "z" :p "0.90"}
{:a "a2" :b "b3" :c "x" :p "0.74"}
{:a "a2" :b "b3" :c "y" :p "0.64"}
{:a "a2" :b "b3" :c "z" :p "0.19"}
{:a "a3" :b "b1" :c "x" :p "0.57"}
{:a "a3" :b "b1" :c "y" :p "0.35"}
{:a "a3" :b "b1" :c "z" :p "0.49"}
{:a "a3" :b "b2" :c "x" :p "0.91"}
{:a "a3" :b "b2" :c "y" :p "0.38"}
{:a "a3" :b "b2" :c "z" :p "0.91"}
{:a "a3" :b "b3" :c "x" :p "0.99"}
{:a "a3" :b "b3" :c "y" :p "0.80"}
{:a "a3" :b "b3" :c "z" :p "0.37"}]}
:description "A simple grid of bar charts to compare performance data."
:encoding {:color {:field "c"
:legend {:orient "bottom" :titleOrient "left"}
:title "settings"
:type "nominal"}
:column {:field "b" :title "Factor B"}
:row {:field "a" :header {:labelAngle 0} :title "Factor A"}
:x {:axis {:format "%"} :field "p" :title nil :type "quantitative"}
:y {:axis nil :field "c" :type "nominal"}}
:height {:step 8}
:mark "bar"
:spacing 5
:width 60}

Repeat and Layer to Show Different Movie Measures

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:repeat {:layer ["US Gross" "Worldwide Gross"]}
:spec {:encoding {:color {:datum {:repeat "layer"} :type "nominal"}
:x {:bin true :field "IMDB Rating" :type "quantitative"}
:y {:aggregate "mean"
:field {:repeat "layer"}
:title "Mean of US and Worldwide Gross"
:type "quantitative"}}
:mark "line"}}

Vertical Concatenation

Two vertically concatenated charts

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/weather.csv"}
:description "Two vertically concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature."
:transform [{:filter "datum.location === 'Seattle'"}]
:vconcat [{:encoding {:x {:field "date" :timeUnit "month" :type "ordinal"}
:y {:aggregate "mean"
:field "precipitation"
:type "quantitative"}}
:mark "bar"}
{:encoding {:size {:aggregate "count" :type "quantitative"}
:x {:bin true :field "temp_min" :type "quantitative"}
:y {:bin true :field "temp_max" :type "quantitative"}}
:mark "point"}]}

Horizontally Repeated Charts

Horizontally repeated charts that show the histograms of different parameters of cars in different countries.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:columns 2
:repeat ["Horsepower" "Miles_per_Gallon" "Acceleration" "Displacement"]
:spec {:data {:url "data/cars.json"}
:encoding {:color {:field "Origin"}
:x {:bin true :field {:repeat "repeat"}}
:y {:aggregate "count"}}
:mark "bar"}}

Interactive Scatterplot Matrix

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:repeat {:column ["Miles_per_Gallon" "Acceleration" "Horsepower"]
:row ["Horsepower" "Acceleration" "Miles_per_Gallon"]}
:spec {:data {:url "data/cars.json"}
:encoding {:color {:condition {:field "Origin"
:param "brush"
:type "nominal"}
:value "grey"}
:x {:field {:repeat "column"} :type "quantitative"}
:y {:axis {:minExtent 30}
:field {:repeat "row"}
:type "quantitative"}}
:mark "point"
:params [{:name "brush"
:select {:on "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!"
:resolve "union"
:translate "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!"
:type "interval"
:zoom "wheel![event.shiftKey]"}}
{:bind "scales"
:name "grid"
:select {:resolve "global"
:translate "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!"
:type "interval"
:zoom "wheel![!event.shiftKey]"}}]}}

Marginal Histograms

Marginal histograms show the counts along the x and y dimension.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:bounds "flush"
:config {:view {:stroke "transparent"}}
:data {:url "data/movies.json"}
:spacing 15
:vconcat [{:encoding {:x {:axis nil :bin true :field "IMDB Rating"}
:y {:aggregate "count"
:scale {:domain [0 1000]}
:title ""}}
:height 60
:mark "bar"}
{:bounds "flush"
:hconcat [{:encoding {:color {:aggregate "count"}
:x {:bin true :field "IMDB Rating"}
:y {:bin true :field "Rotten Tomatoes Rating"}}
:mark "rect"}
{:encoding {:x {:aggregate "count"
:scale {:domain [0 1000]}
:title ""}
:y {:axis nil
:bin true
:field "Rotten Tomatoes Rating"}}
:mark "bar"
:width 60}]
:spacing 15}]}

Discretizing scales

Horizontally concatenated charts that show different types of discretizing scales.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:values [{:a "A" :b 28}
{:a "B" :b 55}
{:a "C" :b 43}
{:a "D" :b 91}
{:a "E" :b 81}
{:a "F" :b 53}
{:a "G" :b 19}
{:a "H" :b 87}
{:a "I" :b 52}]}
:description "Horizontally concatenated charts that show different types of discretizing scales."
:hconcat [{:encoding {:color {:field "b"
:legend {:title "Quantize"}
:scale {:type "quantize" :zero true}
:type "quantitative"}
:size {:field "b"
:scale {:type "quantize"}
:type "quantitative"}
:y {:axis {:domain false :ticks false :title nil}
:field "b"
:sort nil
:type "nominal"}}
:mark "circle"}
{:encoding {:color {:field "b"
:legend {:format "d" :title "Quantile"}
:scale {:scheme "magma" :type "quantile"}
:type "quantitative"}
:size {:field "b"
:scale {:range [80 160 240 320 400]
:type "quantile"}
:type "quantitative"}
:y {:axis {:domain false :ticks false :title nil}
:field "b"
:sort nil
:type "nominal"}}
:mark "circle"}
{:encoding {:color {:field "b"
:legend {:title "Threshold"}
:scale {:domain [30 70]
:scheme "viridis"
:type "threshold"}
:type "quantitative"}
:size {:field "b"
:scale {:domain [30 70]
:range [80 200 320]
:type "threshold"}
:type "quantitative"}
:y {:axis {:domain false :ticks false :title nil}
:field "b"
:sort nil
:type "nominal"}}
:mark "circle"}]
:resolve {:scale {:color "independent" :size "independent"}}}

Nested View Concatenation Aligned with Axis `minExtent`

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axisX {:titleLimit 150} :axisY {:minExtent 40} :countTitle "Count"}
:data {:url "data/movies.json"}
:description "Nested concatenation aligned by setting axis minExtent"
:vconcat [{:repeat {:column ["Rotten Tomatoes Rating" "IMDB Rating"]}
:spec {:encoding {:x {:bin {:maxbins 20} :field {:repeat "column"}}
:y {:aggregate "count"}}
:height 50
:mark "bar"
:width 150}
:title "Ratings"}
{:repeat {:column ["US Gross" "Worldwide Gross"]}
:spec {:encoding {:x {:bin {:maxbins 20} :field {:repeat "column"}}
:y {:aggregate "count"}}
:height 50
:mark "bar"
:width 150}
:title "Gross"}]}

Population Pyramid

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:grid false} :view {:stroke nil}}
:data {:url "data/population.json"}
:description "A population pyramid for the US in 2000."
:hconcat [{:encoding {:color {:field "gender"
:legend nil
:scale {:range ["#675193" "#ca8861"]}}
:x {:aggregate "sum"
:axis {:format "s"}
:field "people"
:sort "descending"
:title "population"}
:y {:axis nil :field "age" :sort "descending"}}
:mark "bar"
:title "Female"
:transform [{:filter {:equal "Female" :field "gender"}}]}
{:encoding {:text {:field "age" :type "quantitative"}
:y {:axis nil
:field "age"
:sort "descending"
:type "ordinal"}}
:mark {:align "center" :type "text"}
:view {:stroke nil}
:width 20}
{:encoding {:color {:field "gender" :legend nil}
:x {:aggregate "sum"
:axis {:format "s"}
:field "people"
:title "population"}
:y {:axis nil :field "age" :sort "descending" :title nil}}
:mark "bar"
:title "Male"
:transform [{:filter {:equal "Male" :field "gender"}}]}]
:spacing 0
:transform [{:filter "datum.year == 2000"}
{:as "gender" :calculate "datum.sex == 2 ? 'Female' : 'Male'"}]}

Choropleth of Unemployment Rate per County

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:feature "counties" :type "topojson"} :url "data/us-10m.json"}
:encoding {:color {:field "rate" :type "quantitative"}}
:height 300
:mark "geoshape"
:projection {:type "albersUsa"}
:transform [{:from {:data {:url "data/unemployment.tsv"}
:fields ["rate"]
:key "id"}
:lookup "id"}]
:width 500}

One Dot per Zipcode in the U.S.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/zipcodes.csv"}
:encoding {:color {:field "digit" :type "nominal"}
:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:value 1}}
:height 300
:mark "circle"
:projection {:type "albersUsa"}
:transform [{:as "digit" :calculate "substring(datum.zip_code, 0, 1)"}]
:width 500}

One Dot per Airport in the U.S. Overlayed on Geoshape

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:height 300
:layer [{:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:mark {:fill "lightgray" :stroke "white" :type "geoshape"}
:projection {:type "albersUsa"}}
{:data {:url "data/airports.csv"}
:encoding {:color {:value "steelblue"}
:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:value 10}}
:mark "circle"
:projection {:type "albersUsa"}}]
:width 500}

Rules (line segments) Connecting SEA to every Airport Reachable via Direct Flights

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:height 500
:layer [{:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:mark {:fill "lightgray" :stroke "white" :type "geoshape"}
:projection {:type "albersUsa"}}
{:data {:url "data/airports.csv"}
:encoding {:color {:value "gray"}
:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:value 5}}
:mark "circle"
:projection {:type "albersUsa"}}
{:data {:url "data/flights-airport.csv"}
:encoding {:latitude {:field "origin_latitude" :type "quantitative"}
:latitude2 {:field "dest_latitude"}
:longitude {:field "origin_longitude" :type "quantitative"}
:longitude2 {:field "dest_longitude"}}
:mark "rule"
:projection {:type "albersUsa"}
:transform [{:filter {:equal "SEA" :field "origin"}}
{:as ["origin_latitude" "origin_longitude"]
:from {:data {:url "data/airports.csv"}
:fields ["latitude" "longitude"]
:key "iata"}
:lookup "origin"}
{:as ["dest_latitude" "dest_longitude"]
:from {:data {:url "data/airports.csv"}
:fields ["latitude" "longitude"]
:key "iata"}
:lookup "destination"}]}]
:width 800}

Three Choropleths Representing Disjoint Data from the Same Table

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:description "the population per state, engineers per state, and hurricanes per state"
:repeat {:row ["population" "engineers" "hurricanes"]}
:resolve {:scale {:color "independent"}}
:spec {:data {:url "data/population_engineers_hurricanes.csv"}
:encoding {:color {:field {:repeat "row"} :type "quantitative"}
:shape {:field "geo" :type "geojson"}}
:height 300
:mark "geoshape"
:projection {:type "albersUsa"}
:transform [{:as "geo"
:from {:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:key "id"}
:lookup "id"}]
:width 500}}

U.S. State Capitals Overlayed on a Map of U.S.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:height 500
:layer [{:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:mark {:fill "lightgray" :stroke "white" :type "geoshape"}}
{:data {:url "data/us-state-capitals.json"}
:encoding {:latitude {:field "lat" :type "quantitative"}
:longitude {:field "lon" :type "quantitative"}}
:layer [{:mark {:color "orange" :type "circle"}}
{:encoding {:text {:field "city" :type "nominal"}}
:mark {:dy -10 :type "text"}}]}]
:projection {:type "albersUsa"}
:width 800}

Line between Airports in the U.S.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:description "Line drawn between airports in the U.S. simulating a flight itinerary"
:height 500
:layer [{:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:mark {:fill "#eee" :stroke "white" :type "geoshape"}
:projection {:type "albersUsa"}}
{:data {:url "data/airports.csv"}
:encoding {:color {:value "gray"}
:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:value 5}}
:mark "circle"
:projection {:type "albersUsa"}}
{:data {:values [{:airport "SEA" :order 1}
{:airport "SFO" :order 2}
{:airport "LAX" :order 3}
{:airport "LAS" :order 4}
{:airport "DFW" :order 5}
{:airport "DEN" :order 6}
{:airport "ORD" :order 7}
{:airport "JFK" :order 8}]}
:encoding {:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:order {:field "order"}}
:mark "line"
:projection {:type "albersUsa"}
:transform [{:from {:data {:url "data/airports.csv"}
:fields ["latitude" "longitude"]
:key "iata"}
:lookup "airport"}]}]
:width 800}

Income in the U.S. by State, Faceted over Income Brackets

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/income.json"}
:encoding {:color {:field "pct" :type "quantitative"}
:row {:field "group"}
:shape {:field "geo" :type "geojson"}}
:height 300
:mark "geoshape"
:projection {:type "albersUsa"}
:transform [{:as "geo"
:from {:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:key "id"}
:lookup "id"}]
:width 500}

London Tube Lines

This example was created by @jwoLondon.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:height 500
:layer [{:data {:format {:feature "boroughs" :type "topojson"}
:url "data/londonBoroughs.json"}
:encoding {:color {:value "#eee"}}
:mark {:stroke "white" :strokeWidth 2 :type "geoshape"}}
{:data {:format {:type "json"} :url "data/londonCentroids.json"}
:encoding {:latitude {:field "cy" :type "quantitative"}
:longitude {:field "cx" :type "quantitative"}
:opacity {:value 0.6}
:size {:value 8}
:text {:field "bLabel" :type "nominal"}}
:mark "text"
:transform [{:as "bLabel"
:calculate "indexof (datum.name,' ') > 0 ? substring(datum.name,0,indexof(datum.name, ' ')) : datum.name"}]}
{:data {:format {:feature "line" :type "topojson"}
:url "data/londonTubeLines.json"}
:encoding {:color {:field "id"
:legend {:offset 0
:orient "bottom-right"
:title nil}
:scale {:domain ["Bakerloo"
"Central"
"Circle"
"District"
"DLR"
"Hammersmith & City"
"Jubilee"
"Metropolitan"
"Northern"
"Piccadilly"
"Victoria"
"Waterloo & City"]
:range ["rgb(137,78,36)"
"rgb(220,36,30)"
"rgb(255,206,0)"
"rgb(1,114,41)"
"rgb(0,175,173)"
"rgb(215,153,175)"
"rgb(106,114,120)"
"rgb(114,17,84)"
"rgb(0,0,0)"
"rgb(0,24,168)"
"rgb(0,160,226)"
"rgb(106,187,170)"]}
:type "nominal"}}
:mark {:filled false :strokeWidth 2 :type "geoshape"}}]
:view {:stroke "transparent"}
:width 700}

Projection explorer

Compare different projections.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:feature "countries" :type "topojson"}
:url "data/world-110m.json"}
:height 300
:mark {:fill "lightgray" :stroke "gray" :type "geoshape"}
:params [{:bind {:input "select"
:options ["albers"
"albersUsa"
"azimuthalEqualArea"
"azimuthalEquidistant"
"conicConformal"
"conicEqualArea"
"conicEquidistant"
"equalEarth"
"equirectangular"
"gnomonic"
"mercator"
"naturalEarth1"
"orthographic"
"stereographic"
"transverseMercator"]}
:name "projection"
:value "equalEarth"}]
:projection {:type {:expr "projection"}}
:width 500}

Earthquakes Example

Interactive globe visualization of earthquakes

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:height 300
:layer [{:data {:sphere true} :mark {:fill "aliceblue" :type "geoshape"}}
{:data {:format {:feature "countries" :type "topojson"}
:name "world"
:url "data/world-110m.json"}
:mark {:fill "mintcream" :stroke "black" :type "geoshape"}}
{:data {:format {:property "features" :type "json"}
:name "earthquakes"
:url "data/earthquakes.json"}
:encoding {:latitude {:field "latitude" :type "quantitative"}
:longitude {:field "longitude" :type "quantitative"}
:size {:field "magnitude"
:legend nil
:scale {:domain [0 100]
:range [0 {:expr "pow(earthquakeSize, 3)"}]
:type "sqrt"}
:type "quantitative"}
:tooltip [{:field "magnitude"}]}
:mark {:color "red" :opacity 0.25 :type "circle"}
:transform [{:as "longitude"
:calculate "datum.geometry.coordinates[0]"}
{:as "latitude"
:calculate "datum.geometry.coordinates[1]"}
{:filter "(rotate0 * -1) - 90 < datum.longitude && datum.longitude < (rotate0 * -1) + 90 && (rotate1 * -1) - 90 < datum.latitude && datum.latitude < (rotate1 * -1) + 90"}
{:as "magnitude" :calculate "datum.properties.mag"}]}]
:params [{:bind {:input "range" :max 90 :min -90 :step 1}
:name "rotate0"
:value 0}
{:bind {:input "range" :max 90 :min -90 :step 1}
:name "rotate1"
:value 0}
{:bind {:input "range" :max 12 :min 0 :step 0.1}
:name "earthquakeSize"
:value 6}]
:projection {:rotate {:expr "[rotate0, rotate1, 0]"} :type "orthographic"}
:width 300}

Bar Chart with Highlighting on Hover and Selection on Click

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:scale {:bandPaddingInner 0.2}}
:data {:values [{:a "A" :b 28}
{:a "B" :b 55}
{:a "C" :b 43}
{:a "D" :b 91}
{:a "E" :b 81}
{:a "F" :b 53}
{:a "G" :b 19}
{:a "H" :b 87}
{:a "I" :b 52}]}
:description "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)"
:encoding {:fillOpacity {:condition {:param "select" :value 1} :value 0.3}
:strokeWidth {:condition [{:empty false :param "select" :value 2}
{:empty false :param "highlight" :value 1}]
:value 0}
:x {:field "a" :type "ordinal"}
:y {:field "b" :type "quantitative"}}
:mark {:cursor "pointer" :fill "#4C78A8" :stroke "black" :type "bar"}
:params [{:name "highlight" :select {:on "mouseover" :type "point"}}
{:name "select" :select "point"}]}

Histogram with Full-Height Hover Targets for Tooltip

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:layer [{:encoding {:detail [{:aggregate "count"}]
:opacity {:condition {:test {:empty false :param "hover"}
:value 0.5}
:value 0}
:x {:bin true :field "IMDB Rating"}}
:mark {:color "#eee" :tooltip true :type "bar"}
:params [{:name "hover"
:select {:clear "mouseout" :on "mouseover" :type "point"}}]}
{:encoding {:x {:bin true :field "IMDB Rating"}
:y {:aggregate "count"}}
:mark "bar"}]}

Interactive Legend

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:color {:field "series" :scale {:scheme "category20b"}}
:opacity {:condition {:param "industry" :value 1} :value 0.2}
:x {:axis {:domain false :format "%Y" :tickSize 0}
:field "date"
:timeUnit "yearmonth"}
:y {:aggregate "sum" :axis nil :field "count" :stack "center"}}
:height 200
:mark "area"
:params [{:bind "legend"
:name "industry"
:select {:fields ["series"] :type "point"}}]
:width 300}

Scatterplot with External Links and Tooltips

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "A scatterplot showing horsepower and miles per gallons that opens a Google search for the car that you click on."
:encoding {:color {:field "Origin" :type "nominal"}
:href {:field "url" :type "nominal"}
:tooltip {:field "Name" :type "nominal"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"
:transform [{:as "url"
:calculate "'https://www.google.com/search?q=' + datum.Name"}]}

Rectangular Brush

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Drag out a rectangular brush to highlight points."
:encoding {:color {:condition {:field "Cylinders"
:param "brush"
:type "ordinal"}
:value "grey"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"
:params [{:name "brush" :select "interval" :value {:x [55 160] :y [13 37]}}]}

Area Chart with Rectangular Brush

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/unemployment-across-industries.json"}
:encoding {:x {:field "date" :timeUnit "yearmonth"}
:y {:aggregate "sum" :field "count"}}
:layer [{:mark "area"
:params [{:name "brush" :select {:encodings ["x"] :type "interval"}}]}
{:mark {:color "goldenrod" :type "area"}
:transform [{:filter {:param "brush"}}]}]}

Paintbrush Highlight

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Select multiple points with the shift key."
:encoding {:size {:condition {:param "paintbrush" :value 300} :value 50}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"
:params [{:name "paintbrush"
:select {:nearest true :on "mouseover" :type "point"}}]}

Scatterplot Pan & Zoom

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:encoding {:size {:field "Cylinders" :type "quantitative"}
:x {:field "Horsepower"
:scale {:domain [75 150]}
:type "quantitative"}
:y {:field "Miles_per_Gallon"
:scale {:domain [20 40]}
:type "quantitative"}}
:mark "circle"
:params [{:bind "scales" :name "grid" :select "interval"}]}

Query Widgets

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Drag the sliders to highlight points."
:layer [{:encoding {:color {:condition {:field "Origin"
:param "CylYr"
:type "nominal"}
:value "grey"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "circle"
:params [{:bind {:Cylinders {:input "range" :max 8 :min 3 :step 1}
:Year {:input "range" :max 1981 :min 1969 :step 1}}
:name "CylYr"
:select {:fields ["Cylinders" "Year"] :type "point"}
:value [{:Cylinders 4 :Year 1977}]}]}
{:encoding {:color {:field "Origin" :type "nominal"}
:size {:value 100}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "circle"
:transform [{:filter {:param "CylYr"}}]}]
:transform [{:as "Year" :calculate "year(datum.Year)"}]}

Interactive Average

The plot below uses an interval selection, which causes the chart to include an interactive brush (shown in grey). The brush selection parameterizes the red guideline, which visualizes the average value within the selected interval.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:layer [{:encoding {:opacity {:condition {:param "brush" :value 1} :value 0.7}
:x {:field "date" :timeUnit "month" :type "ordinal"}
:y {:aggregate "mean"
:field "precipitation"
:type "quantitative"}}
:mark "bar"
:params [{:name "brush" :select {:encodings ["x"] :type "interval"}}]}
{:encoding {:color {:value "firebrick"}
:size {:value 3}
:y {:aggregate "mean"
:field "precipitation"
:type "quantitative"}}
:mark "rule"
:transform [{:filter {:param "brush"}}]}]}

Multi Series Line Chart with an Interactive Line Highlight

The plot below uses argmax to position text labels at the end of line. It also applies single selection to highlight a hovered line. Note that we can hidden thick lines to make it easier to hover.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke nil}}
:data {:url "data/stocks.csv"}
:description "Multi-series line chart with labels and interactive highlight on hover. We also set the selection's initial value to provide a better screenshot"
:encoding {:color {:condition {:field "symbol"
:legend nil
:param "hover"
:type "nominal"}
:value "grey"}
:opacity {:condition {:param "hover" :value 1} :value 0.2}
:x {:field "date" :title "date" :type "temporal"}
:y {:field "price" :title "price" :type "quantitative"}}
:layer [{:description "transparent layer to make it easier to trigger selection"
:mark {:stroke "transparent" :strokeWidth 8 :type "line"}
:params [{:name "hover"
:select {:fields ["symbol"] :on "mouseover" :type "point"}
:value [{:symbol "AAPL"}]}]}
{:mark "line"}
{:encoding {:x {:aggregate "max" :field "date"}
:y {:aggregate {:argmax "date"} :field "price"}}
:layer [{:mark {:type "circle"}}
{:encoding {:text {:field "symbol" :type "nominal"}}
:mark {:align "left" :dx 4 :type "text"}}]}]
:transform [{:filter "datum.symbol!=='IBM'"}]}

Multi Series Line Chart with an Interactive Point Highlight

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:description "Stock prices of 5 Tech Companies over Time, with a point marker on hover. Note that the hidden markers are intentionally bigger to make it easier for readers to hover."
:encoding {:color {:field "symbol" :type "nominal"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:layer [{:mark "line"}
{:encoding {:opacity {:condition {:test {:empty false :param "hover"}
:value 1}
:value 0}
:size {:condition {:test {:empty false :param "hover"}
:value 48}
:value 100}}
:mark {:tooltip true :type "circle"}
:params [{:name "hover"
:select {:clear "mouseout" :on "mouseover" :type "point"}}]}]}

Multi Series Line Chart with Labels

The plot displays labels for all stock prices of the hovered time. The example is forked/modified from [@jakevdp's block](https://bl.ocks.org/jakevdp/a414950f61e4b224765f2439dd1f09b9).

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:height 300
:layer [{:encoding {:color {:field "symbol" :type "nominal"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:layer [{:mark "line"}
{:encoding {:opacity {:condition {:empty false
:param "label"
:value 1}
:value 0}}
:mark "point"
:params [{:name "label"
:select {:encodings ["x"]
:nearest true
:on "mouseover"
:type "point"}}]}]}
{:layer [{:encoding {:x {:aggregate "min"
:field "date"
:type "temporal"}}
:mark {:color "gray" :type "rule"}}
{:encoding {:text {:field "price" :type "quantitative"}
:x {:field "date" :type "temporal"}
:y {:field "price" :type "quantitative"}}
:layer [{:mark {:align "left"
:dx 5
:dy -5
:stroke "white"
:strokeWidth 2
:type "text"}}
{:encoding {:color {:field "symbol" :type "nominal"}}
:mark {:align "left" :dx 5 :dy -5 :type "text"}}]}]
:transform [{:filter {:empty false :param "label"}}]}]
:width 400}

Multi Series Line Chart with Tooltip

The plot displays labels for all stock prices of the hovered time. This example uses a pivot transform to compute the data for the tooltip.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/stocks.csv"}
:encoding {:x {:field "date" :type "temporal"}}
:height 300
:layer [{:encoding {:color {:field "symbol" :type "nominal"}
:y {:field "price" :type "quantitative"}}
:layer [{:mark "line"}
{:mark "point"
:transform [{:filter {:empty false :param "hover"}}]}]}
{:encoding {:opacity {:condition {:empty false
:param "hover"
:value 0.3}
:value 0}
:tooltip [{:field "AAPL" :type "quantitative"}
{:field "AMZN" :type "quantitative"}
{:field "GOOG" :type "quantitative"}
{:field "IBM" :type "quantitative"}
{:field "MSFT" :type "quantitative"}]}
:mark "rule"
:params [{:name "hover"
:select {:clear "mouseout"
:fields ["date"]
:nearest true
:on "mouseover"
:type "point"}}]
:transform [{:groupby ["date"] :pivot "symbol" :value "price"}]}]
:width 400}

Multi Series Line Chart with Tooltip

This plot requires the data to have different series in different fields. See [#1274](https://github.com/vega/vega-lite/issues/1274) and [#1552](https://github.com/vega/vega-lite/issues/1552) for relevant future syntax improvements.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axisY {:minExtent 30}}
:data {:url "data/seattle-weather.csv"}
:encoding {:tooltip [{:field "date" :timeUnit "yearmonthdate"}
{:field "temp_max" :type "quantitative"}
{:field "temp_min" :type "quantitative"}]
:x {:field "date" :timeUnit "yearmonthdate"}}
:layer [{:encoding {:y {:field "temp_max" :type "quantitative"}}
:mark {:color "orange" :type "line"}}
{:encoding {:y {:field "temp_min" :type "quantitative"}}
:mark {:color "red" :type "line"}}
{:encoding {:color {:condition {:empty false
:param "hover"
:value "black"}
:value "transparent"}}
:mark "rule"
:params [{:name "hover" :select {:on "mouseover" :type "point"}}]}]}

Isotype Grid

Inspired by this [D3 example by Alan Smith](http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4). Drag region to select. This example was created by @jwoLondon.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:view {:stroke ""}}
:data {:values [{:id 1}
{:id 2}
{:id 3}
{:id 4}
{:id 5}
{:id 6}
{:id 7}
{:id 8}
{:id 9}
{:id 10}
{:id 11}
{:id 12}
{:id 13}
{:id 14}
{:id 15}
{:id 16}
{:id 17}
{:id 18}
{:id 19}
{:id 20}
{:id 21}
{:id 22}
{:id 23}
{:id 24}
{:id 25}
{:id 26}
{:id 27}
{:id 28}
{:id 29}
{:id 30}
{:id 31}
{:id 32}
{:id 33}
{:id 34}
{:id 35}
{:id 36}
{:id 37}
{:id 38}
{:id 39}
{:id 40}
{:id 41}
{:id 42}
{:id 43}
{:id 44}
{:id 45}
{:id 46}
{:id 47}
{:id 48}
{:id 49}
{:id 50}
{:id 51}
{:id 52}
{:id 53}
{:id 54}
{:id 55}
{:id 56}
{:id 57}
{:id 58}
{:id 59}
{:id 60}
{:id 61}
{:id 62}
{:id 63}
{:id 64}
{:id 65}
{:id 66}
{:id 67}
{:id 68}
{:id 69}
{:id 70}
{:id 71}
{:id 72}
{:id 73}
{:id 74}
{:id 75}
{:id 76}
{:id 77}
{:id 78}
{:id 79}
{:id 80}
{:id 81}
{:id 82}
{:id 83}
{:id 84}
{:id 85}
{:id 86}
{:id 87}
{:id 88}
{:id 89}
{:id 90}
{:id 91}
{:id 92}
{:id 93}
{:id 94}
{:id 95}
{:id 96}
{:id 97}
{:id 98}
{:id 99}
{:id 100}]}
:encoding {:color {:condition {:param "highlight" :value "rgb(194,81,64)"}
:value "rgb(167,165,156)"}
:shape {:value "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z"}
:size {:value 90}
:x {:axis nil :field "col" :type "ordinal"}
:y {:axis nil :field "row" :type "ordinal"}}
:height 400
:mark {:filled true :type "point"}
:params [{:name "highlight" :select "interval"}]
:transform [{:as "col" :calculate "ceil (datum.id/10)"}
{:as "row" :calculate "datum.id - datum.col*10"}]
:width 400}

Brushing Scatter Plot to show data on a table

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:description "Drag a rectangular brush to show (first 20) selected points in a table."
:hconcat [{:encoding {:color {:condition {:field "Cylinders"
:param "brush"
:type "ordinal"}
:value "grey"}
:x {:field "Horsepower" :type "quantitative"}
:y {:field "Miles_per_Gallon" :type "quantitative"}}
:mark "point"
:params [{:name "brush" :select "interval"}]}
{:hconcat [{:encoding {:text {:field "Horsepower" :type "nominal"}
:y {:axis nil
:field "row_number"
:type "ordinal"}}
:mark "text"
:title "Horsepower"
:width 50}
{:encoding {:text {:field "Miles_per_Gallon"
:type "nominal"}
:y {:axis nil
:field "row_number"
:type "ordinal"}}
:mark "text"
:title "MPG"
:width 50}
{:encoding {:text {:field "Origin" :type "nominal"}
:y {:axis nil
:field "row_number"
:type "ordinal"}}
:mark "text"
:title "Origin"
:width 50}]
:transform [{:filter {:param "brush"}}
{:window [{:as "rank" :op "rank"}]}
{:filter {:field "rank" :lt 20}}]}]
:resolve {:legend {:color "independent"}}
:transform [{:window [{:as "row_number" :op "row_number"}]}]}

Selectable Heatmap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:config {:axis {:domain false}
:range {:ramp {:scheme "yellowgreenblue"}}
:scale {:bandPaddingInner 0 :bandPaddingOuter 0}
:view {:step 40}}
:data {:values [{:actual "A" :count 13 :predicted "A"}
{:actual "A" :count 0 :predicted "B"}
{:actual "A" :count 0 :predicted "C"}
{:actual "B" :count 0 :predicted "A"}
{:actual "B" :count 10 :predicted "B"}
{:actual "B" :count 6 :predicted "C"}
{:actual "C" :count 0 :predicted "A"}
{:actual "C" :count 0 :predicted "B"}
{:actual "C" :count 9 :predicted "C"}]}
:encoding {:fill {:field "count" :type "quantitative"}
:opacity {:condition {:param "highlight" :value 1} :value 0.5}
:order {:condition {:param "highlight" :value 1} :value 0}
:stroke {:condition {:empty false :param "highlight" :value "black"}
:value nil}
:x {:field "predicted" :type "nominal"}
:y {:field "actual" :type "nominal"}}
:mark {:strokeWidth 2 :type "rect"}
:params [{:name "highlight" :select "point"}]}

Bar Chart with a Minimap

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/cars.json"}
:hconcat [{:encoding {:x {:aggregate "count"
:axis {:orient "top"}
:scale {:domain [0 6]}}
:y {:axis {:minExtent 200 :title nil}
:field "Name"
:sort "-x"
:type "nominal"}}
:mark "bar"
:transform [{:filter {:param "brush"}}]}
{:encoding {:x {:aggregate "count" :axis nil}
:y {:axis nil :field "Name" :sort "-x" :type "nominal"}}
:height 200
:mark "bar"
:params [{:name "brush" :select {:encodings ["y"] :type "interval"}}]
:width 50}]}

Interactive Index Chart

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:parse {:date "date"}} :url "data/stocks.csv"}
:height 300
:layer [{:encoding {:opacity {:value 0}
:x {:axis nil :field "date" :type "temporal"}}
:mark "point"
:params [{:name "index"
:select {:encodings ["x"]
:nearest true
:on "mouseover"
:type "point"}
:value [{:x {:date 1 :month 1 :year 2005}}]}]}
{:encoding {:color {:field "symbol" :type "nominal"}
:x {:axis nil :field "date" :type "temporal"}
:y {:axis {:format "%"}
:field "indexed_price"
:type "quantitative"}}
:mark "line"
:transform [{:from {:key "symbol" :param "index"} :lookup "symbol"}
{:as "indexed_price"
:calculate "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"}]}
{:encoding {:color {:value "firebrick"}
:x {:axis nil :field "date" :type "temporal"}}
:layer [{:mark {:strokeWidth 0.5 :type "rule"}}
{:encoding {:text {:field "date" :timeUnit "yearmonth"}
:y {:value 310}}
:mark {:align "center" :fontWeight 100 :type "text"}}]
:transform [{:filter {:param "index"}}]}]
:width 650}

Focus + Context - Smooth Histogram Zooming

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:parse {:date "date"}} :url "data/flights-5k.json"}
:transform [{:as "time"
:calculate "hours(datum.date) + minutes(datum.date) / 60"}]
:vconcat [{:encoding {:x {:bin {:maxbins 30} :field "time"}
:y {:aggregate "count"}}
:height 100
:mark "bar"
:params [{:name "brush" :select {:encodings ["x"] :type "interval"}}]
:width 963}
{:encoding {:x {:bin {:extent {:param "brush"} :maxbins 30}
:field "time"}
:y {:aggregate "count"}}
:height 100
:mark "bar"
:width 963}]}

Overview and Detail

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/sp500.csv"}
:vconcat [{:encoding {:x {:axis {:title ""}
:field "date"
:scale {:domain {:param "brush"}}
:type "temporal"}
:y {:field "price" :type "quantitative"}}
:mark "area"
:width 480}
{:encoding {:x {:field "date" :type "temporal"}
:y {:axis {:grid false :tickCount 3}
:field "price"
:type "quantitative"}}
:height 60
:mark "area"
:params [{:name "brush" :select {:encodings ["x"] :type "interval"}}]
:width 480}]}

Crossfilter

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:format {:parse {:date "date"}} :url "data/flights-2k.json"}
:repeat {:column ["distance" "delay" "time"]}
:spec {:layer [{:encoding {:color {:value "#ddd"}
:x {:bin {:maxbins 20} :field {:repeat "column"}}
:y {:aggregate "count"}}
:mark "bar"
:params [{:name "brush"
:select {:encodings ["x"] :type "interval"}}]}
{:encoding {:x {:bin {:maxbins 20} :field {:repeat "column"}}
:y {:aggregate "count"}}
:mark "bar"
:transform [{:filter {:param "brush"}}]}]}
:transform [{:as "time" :calculate "hours(datum.date)"}]}

Interactive Scatterplot Matrix

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:repeat {:column ["Miles_per_Gallon" "Acceleration" "Horsepower"]
:row ["Horsepower" "Acceleration" "Miles_per_Gallon"]}
:spec {:data {:url "data/cars.json"}
:encoding {:color {:condition {:field "Origin"
:param "brush"
:type "nominal"}
:value "grey"}
:x {:field {:repeat "column"} :type "quantitative"}
:y {:axis {:minExtent 30}
:field {:repeat "row"}
:type "quantitative"}}
:mark "point"
:params [{:name "brush"
:select {:on "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!"
:resolve "union"
:translate "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!"
:type "interval"
:zoom "wheel![event.shiftKey]"}}
{:bind "scales"
:name "grid"
:select {:resolve "global"
:translate "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!"
:type "interval"
:zoom "wheel![!event.shiftKey]"}}]}}

Interactive Dashboard with Cross Highlight

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/movies.json"}
:description "A dashboard with cross-highlighting."
:resolve {:legend {:color "independent" :size "independent"}}
:vconcat [{:layer [{:encoding {:color {:aggregate "count"
:legend {:direction "horizontal"
:gradientLength 120
:title "All Movies Count"}}
:x {:bin {:maxbins 10} :field "IMDB Rating"}
:y {:bin {:maxbins 10}
:field "Rotten Tomatoes Rating"}}
:mark "rect"}
{:encoding {:color {:value "#666"}
:size {:aggregate "count"
:legend {:title "Selected Category Count"}}
:x {:bin {:maxbins 10} :field "IMDB Rating"}
:y {:bin {:maxbins 10}
:field "Rotten Tomatoes Rating"}}
:mark "point"
:transform [{:filter {:param "pts"}}]}]}
{:encoding {:color {:condition {:param "pts" :value "steelblue"}
:value "grey"}
:x {:axis {:labelAngle -40} :field "Major Genre"}
:y {:aggregate "count"}}
:height 120
:mark "bar"
:params [{:name "pts" :select {:encodings ["x"] :type "point"}}]
:width 330}]}

Seattle Weather Exploration

This graph shows an interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather. By clicking and dragging on the scatter plot, you can see the proportion of days in that range that have sun, rain, fog, snow, etc. Created by @jakevdp.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/seattle-weather.csv"}
:title "Seattle Weather, 2012-2015"
:vconcat [{:encoding {:color {:condition {:field "weather"
:param "brush"
:scale {:domain ["sun"
"fog"
"drizzle"
"rain"
"snow"]
:range ["#e7ba52"
"#a7a7a7"
"#aec7e8"
"#1f77b4"
"#9467bd"]}
:title "Weather"
:type "nominal"}
:value "lightgray"}
:size {:field "precipitation"
:scale {:domain [-1 50]}
:title "Precipitation"
:type "quantitative"}
:x {:axis {:format "%b"}
:field "date"
:timeUnit "monthdate"
:title "Date"}
:y {:field "temp_max"
:scale {:domain [-5 40]}
:title "Maximum Daily Temperature (C)"
:type "quantitative"}}
:height 300
:mark "point"
:params [{:name "brush" :select {:encodings ["x"] :type "interval"}}]
:transform [{:filter {:param "click"}}]
:width 600}
{:encoding {:color {:condition {:field "weather"
:param "click"
:scale {:domain ["sun"
"fog"
"drizzle"
"rain"
"snow"]
:range ["#e7ba52"
"#a7a7a7"
"#aec7e8"
"#1f77b4"
"#9467bd"]}}
:value "lightgray"}
:x {:aggregate "count"}
:y {:field "weather" :title "Weather"}}
:mark "bar"
:params [{:name "click"
:select {:encodings ["color"] :type "point"}}]
:transform [{:filter {:param "brush"}}]
:width 600}]}

Connections among Major U.S. Airports.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:description "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock."
:height 500
:layer [{:data {:format {:feature "states" :type "topojson"}
:url "data/us-10m.json"}
:mark {:fill "#ddd" :stroke "#fff" :strokeWidth 1 :type "geoshape"}}
{:data {:url "data/flights-airport.csv"}
:encoding {:latitude {:field "latitude"}
:latitude2 {:field "lat2"}
:longitude {:field "longitude"}
:longitude2 {:field "lon2"}}
:mark {:color "#000" :opacity 0.35 :type "rule"}
:transform [{:filter {:empty false :param "org"}}
{:from {:data {:url "data/airports.csv"}
:fields ["latitude" "longitude"]
:key "iata"}
:lookup "origin"}
{:as ["lat2" "lon2"]
:from {:data {:url "data/airports.csv"}
:fields ["latitude" "longitude"]
:key "iata"}
:lookup "destination"}]}
{:data {:url "data/flights-airport.csv"}
:encoding {:latitude {:field "latitude"}
:longitude {:field "longitude"}
:order {:field "routes" :sort "descending"}
:size {:field "routes"
:legend nil
:scale {:rangeMax 1000}
:type "quantitative"}}
:mark {:type "circle"}
:params [{:name "org"
:select {:fields ["origin"]
:nearest true
:on "mouseover"
:type "point"}}]
:transform [{:aggregate [{:as "routes" :op "count"}]
:groupby ["origin"]}
{:from {:data {:url "data/airports.csv"}
:fields ["state" "latitude" "longitude"]
:key "iata"}
:lookup "origin"}
{:filter "datum.state !== 'PR' && datum.state !== 'VI'"}]}]
:projection {:type "albersUsa"}
:width 900}

An interactive scatter plot of global health statistics by country and year.

Similar to the Vega version at https://vega.github.io/vega/examples/global-development/.

View this example in the online editor
edn
{:$schema "https://vega.github.io/schema/vega-lite/v5.json"
:data {:url "data/gapminder.json"}
:description "An interactive scatter plot of global health statistics by country and year."
:height 500
:layer [{:encoding {:text {:field "year"}}
:mark {:fontSize 100 :opacity 0.06 :type "text" :x 420 :y 250}
:transform [{:filter {:equal "Afghanistan" :field "country"}}
{:filter {:param "year"}}]}
{:encoding {:x {:axis {:tickCount 5 :title "Fertility"}
:field "fertility"
:scale {:domain [0 9]}
:type "quantitative"}
:y {:axis {:tickCount 5 :title "Life Expectancy"}
:field "life_expect"
:scale {:domain [20 85]}
:type "quantitative"}}
:layer [{:encoding {:detail {:field "country"}
:opacity {:condition {:test {:or [{:empty false
:param "hovered"}
{:empty false
:param "clicked"}]}
:value 0.8}
:value 0}
:order {:field "year"}}
:mark {:color "lightgray"
:size 4
:strokeCap "round"
:type "line"}}
{:encoding {:color {:field "name" :title "Region"}}
:mark {:opacity 0.9 :size 100 :type "circle"}
:params [{:bind {:input "range"
:max 2005
:min 1955
:name "Year"
:step 5}
:name "year"
:select {:fields ["year"] :type "point"}
:value [{:year 1955}]}
{:name "hovered"
:select {:fields ["country"]
:on "mouseover"
:toggle false
:type "point"}}
{:name "clicked"
:select {:fields ["country"] :type "point"}}]
:transform [{:filter {:param "year"}}]}
{:encoding {:color {:field "name" :title "Region"}
:text {:field "country"}}
:mark {:fontSize 12
:fontWeight "bold"
:type "text"
:yOffset -12}
:transform [{:filter {:and [{:param "year"}
{:or [{:empty false
:param "clicked"}
{:empty false
:param "hovered"}]}]}}]}
{:layer [{:encoding {:text {:field "year"}}
:mark {:color "gray"
:fontSize 12
:type "text"
:yOffset -12}}
{:mark {:color "gray" :type "circle"}}]
:transform [{:filter {:empty false :param "hovered"}}
{:filter {:not {:param "year"}}}]}]
:transform [{:from {:data {:values [{:id 0 :name "South Asia"}
{:id 1
:name "Europe & Central Asia"}
{:id 2 :name "Sub-Saharan Africa"}
{:id 3 :name "America"}
{:id 4
:name "East Asia & Pacific"}
{:id 5
:name "Middle East & North Africa"}]}
:fields ["name"]
:key "id"}
:lookup "cluster"}]}]
:width 800}