vega-lite example Gallery in EDN

Simple Bar Chart

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

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: (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: (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}

vega-lite example Gallery in EDN

Examples

Simple Bar Chart

edn

Responsive Bar Chart

edn

Aggregate Bar Chart

edn

Aggregate Bar Chart (Sorted)

edn

Grouped Bar Chart

edn

Grouped Bar Chart (Multiple Measure with Repeat)

edn

Stacked Bar Chart

edn

Stacked Bar Chart with Rounded Corners

edn

Horizontal Stacked Bar Chart

edn

Normalized (Percentage) Stacked Bar Chart

edn

Normalized (Percentage) Stacked Bar Chart With Labels

edn

Gantt Chart (Ranged Bar Marks)

edn

A Bar Chart Encoding Color Names in the Data

edn

Layered Bar Chart

edn

Diverging Stacked Bar Chart (Population Pyramid)

edn

Diverging Stacked Bar Chart (with Neutral Parts)

edn

Bar Chart with Labels

edn

Bar Chart with Label Overlays

edn

Bar Chart showing Initials of Month Names

edn

Bar Chart with Negative Values and a Zero-Baseline

edn

Horizontal Bar Chart with Negative Values and Labels

edn

Bar Chart with a Spacing-Saving Y-Axis

edn

Heat Lane Chart

edn

Histogram

edn

Histogram (from Binned Data)

edn

Log-scaled Histogram

edn

Non-linear Histogram

edn

Relative Frequency Histogram

edn

Density Plot

edn

Stacked Density Estimates

edn

2D Histogram Scatterplot

edn

2D Histogram Heatmap

edn

Cumulative Frequency Distribution

edn

Layered Histogram and Cumulative Histogram

edn

Wilkinson Dot Plot

edn

Isotype Dot Plot

edn

Isotype Dot Plot with Emoji

edn

Relative Bar Chart (Calculate Percentage of Total)

edn

Scatterplot

edn