A bar chart encodes quantitative values as the extent of rectangular bars.
View this example in the online editorThe 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 editorRead [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 editorRead [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 editorInspired 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 editorThis 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 editorVisualization 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 editorAfter using the numerical values to calculate the average rating, they are replaced by string labels.
View this example in the online editorBy 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 editorBy 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 editorA connected scatterplot can be created by customizing line `order` and adding `point` overlay in the line mark definition.
View this example in the online editorThis 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 editorA 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 editorA pie chart with a tooltip that shows the percentage covered by the hovered slice.
View this example in the online editorA donut chart encodes proportional differences among a set of numeric values using angular extents.
View this example in the online editorLayering 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 editorThis 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 editorHere 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 editorBy @manzt, adapted from https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example.
View this example in the online editorThis 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 editorTo 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 editorDistributions 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 editorComparing 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 editorInspired 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 editorA 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 editorTwo vertically concatenated charts
View this example in the online editorHorizontally repeated charts that show the histograms of different parameters of cars in different countries.
View this example in the online editorMarginal histograms show the counts along the x and y dimension.
View this example in the online editorHorizontally concatenated charts that show different types of discretizing scales.
View this example in the online editorThis example was created by @jwoLondon.
View this example in the online editorCompare different projections.
View this example in the online editorInteractive globe visualization of earthquakes
View this example in the online editorThe 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 editorThe 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 editorThe 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 editorThe 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 editorThis 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 editorInspired 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 editorThis 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 editorSimilar to the Vega version at https://vega.github.io/vega/examples/global-development/.
View this example in the online editor