[ { "gallery_name": "altair", "example_name": "2D Histogram Heatmap", "example_url": "https://altair-viz.github.io/gallery/histogram_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/histogram_heatmap.py", "categories": [ "distributions" ], "description": "This example shows how to make a heatmap from binned quantitative data.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "2D Histogram Scatter Plot", "example_url": "https://altair-viz.github.io/gallery/histogram_scatterplot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/histogram_scatterplot.py", "categories": [ "distributions" ], "description": "This example shows how to make a 2d histogram scatter plot.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Andrews Curves", "example_url": "https://altair-viz.github.io/gallery/andrews_curves.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/andrews_curves.py", "categories": [ "advanced calculations" ], "description": "`Andrews curves `_ visualize\nclusters in multivariate data by mapping each observation to a finite Fourier\nseries and drawing it as a single line. Observations that belong to the same\ngroup tend to trace out similar shapes.\n\nA curve has the functional form::\n\n f(t) = x_1/sqrt(2) + x_2 sin(t) + x_3 cos(t) + x_4 sin(2t) + ...\n\nwhere the ``x`` coefficients are the (normalized) values of each dimension and\n``t`` is spaced linearly between ``-pi`` and ``+pi``.\n\nThis example shows an Andrews curves chart of the Penguins dataset, where each\nspecies traces a recognizable band of curves.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Annual Weather Heatmap", "example_url": "https://altair-viz.github.io/gallery/annual_weather_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/annual_weather_heatmap.py", "categories": [ "tables" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Anscombe's Quartet", "example_url": "https://altair-viz.github.io/gallery/anscombe_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/anscombe_plot.py", "categories": [ "case studies" ], "description": "`Anscombe's Quartet `_\nis a famous dataset constructed by Francis Anscombe.\nIt is made of 4 different subsets of data.\nEach subset has very different characteristics, even though common summary\nstatistics such as mean and variance are identical.\n\nThis example shows how to make a faceted plot, with each facet\nshowing a different subset of the data.", "datasets": [ "anscombe" ] }, { "gallery_name": "altair", "example_name": "Area Chart with Gradient", "example_url": "https://altair-viz.github.io/gallery/area_chart_gradient.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/area_chart_gradient.py", "categories": [ "area charts" ], "description": "This example shows how to make an area chart with a gradient fill.\nFor more information about gradient options see the Vega-Lite `Gradient documentation `_.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Atmospheric CO2 Concentration", "example_url": "https://altair-viz.github.io/gallery/co2_concentration.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/co2_concentration.py", "categories": [ "case studies" ], "description": "This example is a fully developed line chart that uses a window transformation.\nIt was inspired by `Gregor Aisch's work at datawrapper\n`_.", "datasets": [ "co2_concentration" ] }, { "gallery_name": "altair", "example_name": "Bar Chart Highlighting Values beyond a Threshold", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_single_threshold.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_single_threshold.py", "categories": [ "bar charts" ], "description": "This example shows a bar chart highlighting values beyond a threshold.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Bar Chart with Highlighted Bar", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_highlighted_bar.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_highlighted_bar.py", "categories": [ "bar charts" ], "description": "This example shows a basic bar chart with a single bar highlighted.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Highlighted Segment", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_highlighted_segment.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_highlighted_segment.py", "categories": [ "bar charts" ], "description": "This example shows a bar chart that highlights values beyond a threshold.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Highlighting on Hover and Selection on Click", "example_url": "https://altair-viz.github.io/gallery/interactive_bar_select_highlight.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_bar_select_highlight.py", "categories": [ "interactive charts" ], "description": "This example shows a bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)\n\nBased on https://vega.github.io/vega-lite/examples/interactive_bar_select_highlight.html", "datasets": [] }, { "gallery_name": "altair", "example_name": "Bar Chart with Labels", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_labels.py", "categories": [ "bar charts" ], "description": "This example shows a basic horizontal bar chart with labels created with Altair.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Labels based on Measured Luminance", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_labels_measured_luminance.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_labels_measured_luminance.py", "categories": [ "bar charts" ], "description": "This example shows a basic horizontal bar chart with labels where the measured luminance to decides if the text overlay is be colored ``black`` or ``white``.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Line at Mean", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_mean_line.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_mean_line.py", "categories": [ "bar charts" ], "description": "This example shows the mean value overlaid on a bar chart.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Line on Dual Axis", "example_url": "https://altair-viz.github.io/gallery/bar_and_line_with_dual_axis.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_and_line_with_dual_axis.py", "categories": [ "bar charts" ], "description": "This example shows how to combine two plots and keep their axes.\n\nFor a more polished version of this chart, see :ref:`gallery_wheat_wages`.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Negative Values", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_negatives.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_negatives.py", "categories": [ "bar charts" ], "description": "This example shows a bar chart with both positive and negative values.", "datasets": [ "us_employment" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Range", "example_url": "https://altair-viz.github.io/gallery/bar_chart_with_range.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_with_range.py", "categories": [ "bar charts" ], "description": "This example shows a range bar chart where each bar displays information of a low and high value.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Rolling Mean", "example_url": "https://altair-viz.github.io/gallery/bar_with_rolling_mean.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_with_rolling_mean.py", "categories": [ "bar charts" ], "description": "A bar chart overlaid with a rolling mean. In this example the average of values over the previous decade is displayed as a line.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Bar Chart with Rounded Edges", "example_url": "https://altair-viz.github.io/gallery/bar_rounded.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_rounded.py", "categories": [ "bar charts" ], "description": "This example shows how to create a bar chart with rounded edges.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Bar and Tick Chart", "example_url": "https://altair-viz.github.io/gallery/layered_chart_bar_mark.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_chart_bar_mark.py", "categories": [ "bar charts" ], "description": "How to layer a tick chart on top of a bar chart.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Becker's Barley Faceted Plot", "example_url": "https://altair-viz.github.io/gallery/beckers_barley_facet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/beckers_barley_facet.py", "categories": [ "case studies" ], "description": "The example demonstrates the faceted charts created by Richard Becker,\nWilliam Cleveland and others in the 1990s. Using the visualization technique\nwhere each row is a different site (i.e. the chart is faceted by site),\nthey identified an anomaly in a widely used agriculatural dataset,\nwhere the \"Morris\" site accidentally had the years 1931 and 1932 swapped.\nThey named this\n`\"The Morris Mistake.\" `_.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Becker's Barley Wrapped Facet Plot", "example_url": "https://altair-viz.github.io/gallery/beckers_barley_wrapped_facet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/beckers_barley_wrapped_facet.py", "categories": [ "case studies" ], "description": "The example demonstrates the faceted charts created by Richard Becker,\nWilliam Cleveland and others in the 1990s. Using the visualization technique\nwhere each row is a different site (i.e. the chart is faceted by site),\nthey identified an anomaly in a widely used agriculatural dataset,\nwhere the \"Morris\" site accidentally had the years 1931 and 1932 swapped.\nThey named this\n`\"The Morris Mistake.\" `_.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Boxplot with Min/Max Whiskers", "example_url": "https://altair-viz.github.io/gallery/boxplot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/boxplot.py", "categories": [ "distributions" ], "description": "This example shows how to make a boxplot using US Population data from 2000.\nNote that the default value of the `extent` property is 1.5,\nwhich represents the convention of extending the whiskers\nto the furthest points within 1.5 * IQR from the first and third quartile.", "datasets": [ "population" ] }, { "gallery_name": "altair", "example_name": "Brushing Scatter Plot to Show Data on a Table", "example_url": "https://altair-viz.github.io/gallery/scatter_linked_table.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_linked_table.py", "categories": [ "scatter plots" ], "description": "A scatter plot of the cars dataset, with data tables for horsepower, MPG, and origin.\nThe tables update to reflect the selection on the scatter plot.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Bubble Plot", "example_url": "https://altair-viz.github.io/gallery/bubble_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bubble_plot.py", "categories": [ "scatter plots" ], "description": "This example shows how to make a bubble plot.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Bump Chart", "example_url": "https://altair-viz.github.io/gallery/bump_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bump_chart.py", "categories": [ "line charts" ], "description": "This example shows a bump chart. The data is first grouped into six-month\nintervals using pandas. The ranks are computed by Altair using a\nwindow transform.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Calculate Residuals", "example_url": "https://altair-viz.github.io/gallery/calculate_residuals.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/calculate_residuals.py", "categories": [ "advanced calculations" ], "description": "A dot plot showing each movie in the database, and the difference from the average movie rating.\nThe display is sorted by year to visualize everything in sequential order.\nThe graph is for all Movies before 2019.\nAdapted from `Calculate Residuals `_.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Calculating Percentage of Total", "example_url": "https://altair-viz.github.io/gallery/percentage_of_total.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/percentage_of_total.py", "categories": [ "bar charts" ], "description": "This chart demonstrates how to use a joinaggregate transform to display\ndata values as a percentage of total.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Candlestick Chart", "example_url": "https://altair-viz.github.io/gallery/candlestick_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/candlestick_chart.py", "categories": [ "advanced calculations" ], "description": "A candlestick chart inspired from `Protovis `_.\nThis example shows the performance of the Chicago Board Options Exchange `Volatility Index `_ (VIX)\nin the summer of 2009. The thick bar represents the opening and closing prices,\nwhile the thin bar shows intraday high and low prices; if the index closed higher on a given day, the bars are colored green rather than red.", "datasets": [ "ohlc" ] }, { "gallery_name": "altair", "example_name": "Choropleth Map", "example_url": "https://altair-viz.github.io/gallery/choropleth.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/choropleth.py", "categories": [ "maps" ], "description": "A choropleth map of unemployment rate per county in the US", "datasets": [ "unemployment", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Comet Chart", "example_url": "https://altair-viz.github.io/gallery/comet_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/comet_chart.py", "categories": [ "advanced calculations" ], "description": "Inspired by `Zan Armstrong's comet chart `_\nthis plot uses ``mark_trail`` to visualize change of grouped data over time.\nA more elaborate example and explanation of creating comet charts in Altair\nis shown in `this blogpost `_.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Compact Faceted Grid of Bar Charts", "example_url": "https://altair-viz.github.io/gallery/bar_chart_faceted_compact.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_faceted_compact.py", "categories": [ "bar charts" ], "description": "A simple grid of bar charts to compare performance data,\none subchart for each subset of the data.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Confidence Interval Ellipses", "example_url": "https://altair-viz.github.io/gallery/deviation_ellipses.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/deviation_ellipses.py", "categories": [ "case studies" ], "description": "This example shows bivariate deviation ellipses of flipper length and body mass of three penguin species.\n\nInspired by `ggplot2.stat_ellipse`_ and directly based on `Deviation ellipses example`_ by `@essicolo`_\n\n.. _ggplot2.stat_ellipse:\n https://ggplot2.tidyverse.org/reference/stat_ellipse.html#ref-examples\n.. _Deviation ellipses example:\n https://github.com/vega/altair/pull/514\n.. _@essicolo:\n https://github.com/essicolo", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Connections Among U.S. Airports Interactive", "example_url": "https://altair-viz.github.io/gallery/airport_connections.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/airport_connections.py", "categories": [ "case studies" ], "description": "This example shows all the connections between major U.S. airports. Lookup transformations\nare used to find the coordinates of each airport and connecting airports. Connections\nare displayed on pointerover via a single selection.", "datasets": [ "airports", "flights_airport", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Cumulative Count Chart", "example_url": "https://altair-viz.github.io/gallery/cumulative_count_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/cumulative_count_chart.py", "categories": [ "distributions" ], "description": "This example shows an area chart with cumulative count.\nAdapted from https://vega.github.io/vega-lite/examples/area_cumulative_freq.html", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Dendrogram of Hierarchical Clustering", "example_url": "https://altair-viz.github.io/gallery/dendrogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/dendrogram.py", "categories": [ "case studies" ], "description": "This is a dendrogram from the result of a hierarchical clustering. It's based on the example from\nhttps://scikit-learn.org/stable/auto_examples/cluster/plot_agglomerative_dendrogram.html", "datasets": [] }, { "gallery_name": "altair", "example_name": "Distributions and Medians of Likert Scale Ratings", "example_url": "https://altair-viz.github.io/gallery/distributions_and_medians_of_likert_scale_ratings.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/distributions_and_medians_of_likert_scale_ratings.py", "categories": [ "distributions" ], "description": "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).\n\nAdapted from `Distributions and Medians of Likert Scale Ratings `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Diverging Stacked Bar Chart", "example_url": "https://altair-viz.github.io/gallery/diverging_stacked_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/diverging_stacked_bar_chart.py", "categories": [ "bar charts" ], "description": "This example shows a diverging stacked bar chart for sentiments towards a set of eight questions, displayed as percentages with neutral responses straddling the 0% mark.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Donut Chart", "example_url": "https://altair-viz.github.io/gallery/donut_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/donut_chart.py", "categories": [ "circular plots" ], "description": "This example shows how to make a Donut Chart using ``mark_arc``.\nThis is adapted from a corresponding Vega-Lite Example:\n`Donut Chart `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Dot Dash Plot", "example_url": "https://altair-viz.github.io/gallery/dot_dash_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/dot_dash_plot.py", "categories": [ "distributions" ], "description": "How to make the dot-dash plot presented in Edward Tufte's `Visual Display of Quantitative Information `_. Based\non a JavaScript implementation by `g3o2 `_.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Empirical Cumulative Distribution Function", "example_url": "https://altair-viz.github.io/gallery/empirical_cumulative_distribution_function.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/empirical_cumulative_distribution_function.py", "categories": [ "distributions" ], "description": "This example shows an empirical cumulative distribution function.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Error Bars with Confidence Interval", "example_url": "https://altair-viz.github.io/gallery/errorbars_with_ci.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/errorbars_with_ci.py", "categories": [ "uncertainties and trends" ], "description": "This example shows how to show error bars using confidence intervals.\nThe confidence intervals are computed internally in vega by a non-parametric\n`bootstrap of the mean `_.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Error Bars with Standard Deviation", "example_url": "https://altair-viz.github.io/gallery/errorbars_with_std.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/errorbars_with_std.py", "categories": [ "uncertainties and trends" ], "description": "This example shows how to show error bars with standard deviation using crop yields data of different\nin the years of 1930s.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Faceted Area Chart", "example_url": "https://altair-viz.github.io/gallery/area_faceted.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/area_faceted.py", "categories": [ "area charts" ], "description": "Multiple area subcharts, one for each company.\nWe also show filtering out one of the companies,\nand sorting the companies in a custom order.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Faceted County-Level Choropleth Maps", "example_url": "https://altair-viz.github.io/gallery/maps_faceted_species.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/maps_faceted_species.py", "categories": [ "maps" ], "description": "A set of maps arranged in a grid, each showing the distribution of a species' projected habitat across US counties. Each choropleth map uses color intensity to represent the percentage values within county boundaries.", "datasets": [ "species", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Faceted Histogram", "example_url": "https://altair-viz.github.io/gallery/distributions_faceted_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/distributions_faceted_histogram.py", "categories": [ "distributions" ], "description": "This example shows how to make a basic faceted histogram,\nwith one histogram subplot for different subsets of the data.\n\nBased off the vega-lite example:\nhttps://vega.github.io/vega-lite/examples/trellis_bar_histogram.html", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Faceted Line Chart with Cumulative Sum", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_cumsum_faceted.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_cumsum_faceted.py", "categories": [ "advanced calculations" ], "description": "This chart creates one facet per natural disaster and shows the cumulative number of deaths for that category.\nNote the use of different predicates to filter based on both a list and a range.", "datasets": [ "disasters" ] }, { "gallery_name": "altair", "example_name": "Faceted Scatter Plot", "example_url": "https://altair-viz.github.io/gallery/scatter_faceted.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_faceted.py", "categories": [ "scatter plots" ], "description": "A series of scatter plots, one for each country/area of origin.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Faceted Stacked Bar Chart", "example_url": "https://altair-viz.github.io/gallery/bar_faceted_stacked.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_faceted_stacked.py", "categories": [ "bar charts" ], "description": "A horizontal stacked bar chart using barley crop yield data.\nThe chart is horizontally faceted based on the year,\nand vertically faceted based on variety.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Filled Step Chart", "example_url": "https://altair-viz.github.io/gallery/filled_step_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/filled_step_chart.py", "categories": [ "line charts" ], "description": "This example shows Google's stock price over time as a step chart with its area filled in and its line emphasized.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Filter a Time Series with Date and Number Inputs", "example_url": "https://altair-viz.github.io/gallery/interactive_date_input.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_date_input.py", "categories": [ "interactive charts" ], "description": "This example shows how to bind HTML date and number inputs to parameters and\nuse the selected values to filter a time-series chart.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Gantt Chart", "example_url": "https://altair-viz.github.io/gallery/gantt_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/gantt_chart.py", "categories": [ "advanced calculations" ], "description": "This example shows how to make a simple Gantt chart.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Gapminder Bubble Plot", "example_url": "https://altair-viz.github.io/gallery/gapminder_bubble_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/gapminder_bubble_plot.py", "categories": [ "case studies" ], "description": "This example shows how to make a bubble plot showing the correlation between\nhealth and income for 187 countries in the world (modified from an example\nin Lisa Charlotte Rost's blog post `'One Chart, Twelve Charting Libraries' `_.", "datasets": [ "gapminder_health_income" ] }, { "gallery_name": "altair", "example_name": "Global Deaths from Natural Disasters", "example_url": "https://altair-viz.github.io/gallery/natural_disasters.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/natural_disasters.py", "categories": [ "case studies" ], "description": "This example shows a proportional symbols visualization of deaths from natural disasters by year and type.", "datasets": [ "disasters" ] }, { "gallery_name": "altair", "example_name": "Grouped Bar Chart", "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/grouped_bar_chart.py", "categories": [ "bar charts" ], "description": "This example shows a grouped bar chart.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Grouped Bar Chart with Error Bars", "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart_with_error_bars.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/grouped_bar_chart_with_error_bars.py", "categories": [ "bar charts" ], "description": "This example shows a grouped bar chart with error bars.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Grouped Bar Chart with xOffset", "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart2.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/grouped_bar_chart2.py", "categories": [ "bar charts" ], "description": "Like :ref:`gallery_grouped_bar_chart`, this example shows a grouped bar chart. Whereas :ref:`gallery_grouped_bar_chart` used the ``column`` encoding channel, this example uses the ``xOffset`` encoding channel. This is adapted from a corresponding Vega-Lite Example:\n`Grouped Bar Chart `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Grouped Bar Chart with xOffset and overlapping bars", "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart_overlapping_bars.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/grouped_bar_chart_overlapping_bars.py", "categories": [ "bar charts" ], "description": "Like :ref:`gallery_grouped_bar_chart2`, this example shows a grouped bar chart using the ``xOffset`` encoding channel, but in this example the bars are partly overlapping within each group.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Grouped Points with Proportional Symbols Map", "example_url": "https://altair-viz.github.io/gallery/groupby-map.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/groupby-map.py", "categories": [ "maps" ], "description": "This is a layered geographic visualization that groups points by state.", "datasets": [ "airports", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Heat Lane Chart", "example_url": "https://altair-viz.github.io/gallery/heat_lane.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/heat_lane.py", "categories": [ "distributions" ], "description": "This example shows how to make an alternative form of a histogram `designed at Google `_ with the goal of increasing accessibility.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Hexbin Chart", "example_url": "https://altair-viz.github.io/gallery/hexbins.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/hexbins.py", "categories": [ "tables" ], "description": "This example shows a hexbin chart.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Histogram with Adjustable Bin Size", "example_url": "https://altair-viz.github.io/gallery/interactive_bin_size.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_bin_size.py", "categories": [ "distributions" ], "description": "This example shows a 2D histogram heatmap whose bin size can be changed with a\nslider. Vega-Lite does not allow a parameter to drive ``maxbins`` directly, so\nwe draw one layer per available bin count and only show the layer that matches\nthe slider value.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Histogram with Gradient Color", "example_url": "https://altair-viz.github.io/gallery/histogram_gradient_color.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/histogram_gradient_color.py", "categories": [ "distributions" ], "description": "This example shows how to make a histogram with gradient color.\nThe low-high IMDB rating is represented with the color scheme `pinkyellowgreen`.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Histogram with Responsive Bins", "example_url": "https://altair-viz.github.io/gallery/histogram_responsive.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/histogram_responsive.py", "categories": [ "distributions" ], "description": "This shows an example of a histogram with bins that are responsive to a\nselection domain. Click and drag on the bottom panel to see the bins\nchange on the top panel.", "datasets": [ "flights_5k" ] }, { "gallery_name": "altair", "example_name": "Histogram with a Global Mean Overlay", "example_url": "https://altair-viz.github.io/gallery/histogram_with_a_global_mean_overlay.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/histogram_with_a_global_mean_overlay.py", "categories": [ "distributions" ], "description": "This example shows a histogram with a global mean overlay.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Horizon Graph", "example_url": "https://altair-viz.github.io/gallery/horizon_graph.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/horizon_graph.py", "categories": [ "area charts" ], "description": "This example shows how to make a Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)", "datasets": [] }, { "gallery_name": "altair", "example_name": "Horizontal Bar Chart", "example_url": "https://altair-viz.github.io/gallery/bar_chart_horizontal.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_horizontal.py", "categories": [ "bar charts" ], "description": "This example is a bar chart drawn horizontally by putting the quantitative value on the x axis.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Horizontal Grouped Bar Chart", "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart_horizontal.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/grouped_bar_chart_horizontal.py", "categories": [ "bar charts" ], "description": "This example shows a horizontal grouped bar chart.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Horizontal Stacked Bar Chart", "example_url": "https://altair-viz.github.io/gallery/horizontal_stacked_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/horizontal_stacked_bar_chart.py", "categories": [ "bar charts" ], "description": "This is an example of a horizontal stacked bar chart using data which contains crop yields over different regions and different years in the 1930s.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Interactive Average", "example_url": "https://altair-viz.github.io/gallery/selection_layer_bar_month.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/selection_layer_bar_month.py", "categories": [ "interactive charts" ], "description": "The plot below uses an interval selection, which causes the chart to include an interactive brush\n(shown in grey). The brush selection parameterizes the red guideline, which visualizes the average\nvalue within the selected interval.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Interactive Chart with Aggregation", "example_url": "https://altair-viz.github.io/gallery/interactive_aggregation.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_aggregation.py", "categories": [ "interactive charts" ], "description": "This example shows an interactive chart where the range binder controls a\nthreshold as rule where the datapoints on the left-side are aggregated and on the\nright-side are drawn as is.\nThe ability to slide back and fourth may help you understand how the visualization\nrepresents the aggregation. Adapted from an example by @dwootton.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Interactive Chart with Cross-Highlight", "example_url": "https://altair-viz.github.io/gallery/interactive_cross_highlight.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_cross_highlight.py", "categories": [ "interactive charts" ], "description": "This example shows an interactive chart where selections in one portion of\nthe chart affect what is shown in other panels. Click on the bar chart to\nsee a detail of the distribution in the upper panel.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Interactive Crossfilter", "example_url": "https://altair-viz.github.io/gallery/interactive_layered_crossfilter.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_layered_crossfilter.py", "categories": [ "interactive charts" ], "description": "This example shows a multi-panel view of the same data, where you can interactively\nselect a portion of the data in any of the panels to highlight that portion in any\nof the other panels.", "datasets": [ "flights_2k" ] }, { "gallery_name": "altair", "example_name": "Interactive Legend", "example_url": "https://altair-viz.github.io/gallery/interactive_legend.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_legend.py", "categories": [ "interactive charts" ], "description": "The following shows how to create a chart with an interactive legend, by\nbinding the selection to ``\"legend\"``. Such a binding only works with\n``selection_point`` when projected over a single field or encoding.", "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "altair", "example_name": "Interactive Rectangular Brush", "example_url": "https://altair-viz.github.io/gallery/interactive_brush.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_brush.py", "categories": [ "interactive charts" ], "description": "This example shows how to add a simple rectangular brush to a scatter plot.\nBy clicking and dragging on the plot, you can highlight points within the\nrange.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Interactive Scatter Plot and Linked Layered Histogram", "example_url": "https://altair-viz.github.io/gallery/scatter_with_layered_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_layered_histogram.py", "categories": [ "interactive charts" ], "description": "This example shows how to link a scatter plot and a histogram\ntogether such that clicking on a point in the scatter plot will\nisolate the distribution corresponding to that point, and vice versa.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Interactive Selection of Columns", "example_url": "https://altair-viz.github.io/gallery/interactive_column_selection.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_column_selection.py", "categories": [ "interactive charts" ], "description": "This example shows how columns can be selected interactively\nby accessing the values from selector widgets,\nand then compute the difference of the selected columns.\nIt also illustrates how to use `indexof` to filter\ncolumns based on active selection values.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Interval Selection on a Map", "example_url": "https://altair-viz.github.io/gallery/interval_selection_map_quakes.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interval_selection_map_quakes.py", "categories": [ "interactive charts" ], "description": "This is an example of a binned bar chart on the right where the filtered overlay\nis adjusted by interacting with the map on the left.", "datasets": [ "earthquakes", "world_110m" ] }, { "gallery_name": "altair", "example_name": "Interval Selection with Initial Date Range", "example_url": "https://altair-viz.github.io/gallery/interval_selection.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interval_selection.py", "categories": [ "interactive charts" ], "description": "This is an example of creating a stacked chart for which the domain of the\ntop chart can be selected by interacting with the bottom chart. The initial\nselection range is set using Python's native datetime objects.", "datasets": [ "sp500" ] }, { "gallery_name": "altair", "example_name": "Iowa's Renewable Energy Boom", "example_url": "https://altair-viz.github.io/gallery/iowa_electricity.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/iowa_electricity.py", "categories": [ "case studies" ], "description": "This example is a fully developed stacked chart using the sample dataset of Iowa's electricity sources.", "datasets": [ "iowa_electricity" ] }, { "gallery_name": "altair", "example_name": "Isotype Grid", "example_url": "https://altair-viz.github.io/gallery/isotype_grid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/isotype_grid.py", "categories": [ "advanced calculations" ], "description": "This example is a grid of isotype figures.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Isotype Visualization", "example_url": "https://altair-viz.github.io/gallery/isotype.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/isotype.py", "categories": [ "advanced calculations" ], "description": "Isotype Visualization shows the distribution of animals across UK and US.\nInspired by `Only An Ocean Between, 1943 `_. Population Live Stock, p.13.\nThis is adapted from Vega-Lite example https://vega.github.io/editor/#/examples/vega-lite/isotype_bar_chart", "datasets": [] }, { "gallery_name": "altair", "example_name": "Isotype Visualization with Emoji", "example_url": "https://altair-viz.github.io/gallery/isotype_emoji.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/isotype_emoji.py", "categories": [ "advanced calculations" ], "description": "Isotype Visualization shows the distribution of animals across UK and US, using unicode emoji\nmarks rather than custom SVG paths (see https://altair-viz.github.io/gallery/isotype.html).\nThis is adapted from Vega-Lite example https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Lasagna Plot (Dense Time-Series Heatmap)", "example_url": "https://altair-viz.github.io/gallery/lasagna_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/lasagna_plot.py", "categories": [ "tables" ], "description": null, "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Layered Area Chart", "example_url": "https://altair-viz.github.io/gallery/layered_area_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_area_chart.py", "categories": [ "area charts" ], "description": "This example shows a layered area chart.", "datasets": [ "iowa_electricity" ] }, { "gallery_name": "altair", "example_name": "Layered Bar Chart", "example_url": "https://altair-viz.github.io/gallery/layered_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_bar_chart.py", "categories": [ "bar charts" ], "description": "This example shows a segmented bar chart that is layered rather than stacked.", "datasets": [ "iowa_electricity" ] }, { "gallery_name": "altair", "example_name": "Layered Histogram", "example_url": "https://altair-viz.github.io/gallery/layered_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_histogram.py", "categories": [ "distributions" ], "description": "This example shows how to use opacity to make a layered histogram in Altair.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Layered chart with Dual-Axis", "example_url": "https://altair-viz.github.io/gallery/layered_chart_with_dual_axis.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_chart_with_dual_axis.py", "categories": [ "advanced calculations" ], "description": "This example shows how to create a second independent y axis.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Arrows", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_arrows.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_arrows.py", "categories": [ "line charts" ], "description": "This example shows a simple line chart with two types of arrow annotations.\nThe Unicode character approach is simpler,\nwhile the line plus triangle :ref:`point mark ` allows for greater flexibility,\nsuch as customizable arrowheads.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Line Chart with Confidence Interval Band", "example_url": "https://altair-viz.github.io/gallery/line_with_ci.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_with_ci.py", "categories": [ "uncertainties and trends" ], "description": "How to make a line chart with a bootstrapped 95% confidence interval band.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Cumulative Sum", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_cumsum.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_cumsum.py", "categories": [ "line charts" ], "description": "This chart creates a simple line chart from the cumulative sum of a fields.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Custom Legend", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_custom_legend.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_custom_legend.py", "categories": [ "line charts" ], "description": "This example uses the argmax aggregation function in order to create a custom\nlegend for a line chart.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Custom Order", "example_url": "https://altair-viz.github.io/gallery/line_custom_order.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_custom_order.py", "categories": [ "line charts" ], "description": "By default, the line's path (order of points in the line) is\ndetermined by data values on the temporal/ordinal field.\nHowever, a field can be mapped to the order channel for a custom path.\n\nFor example, to show a pattern of data change over time between\ngasoline price and average miles driven per capita we use\norder channel to sort the points in the line by time field (year).\nThe earliest year (1956) is one endpoint and the latest year (2010)\nis the other endpoint.\n\nThis is based on Hannah Fairfield's article 'Driving Shifts Into Reverse'.\nSee https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html.", "datasets": [ "driving" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Datum", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_datum.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_datum.py", "categories": [ "line charts" ], "description": "An example of using ``datum`` to highlight certain values, including a ``DateTime`` value.\nThis is adapted from two corresponding Vega-Lite Examples:\n`Highlight a Specific Value `_.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Datum for Color", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_color_datum.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_color_datum.py", "categories": [ "line charts" ], "description": "An example of using ``datum`` and ``repeat`` to color a multi-series line chart.\nThis is adapted from this corresponding Vega-Lite Example:\n`Repeat and Layer to Show Different Movie Measures `_.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Interpolation", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_interpolation.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_interpolation.py", "categories": [ "line charts" ], "description": "This chart shows a line chart with the path interpolated. A full list of interpolation methods is available `in the documentation `_.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Last Value Labeled", "example_url": "https://altair-viz.github.io/gallery/line_with_last_value_labeled.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_with_last_value_labeled.py", "categories": [ "line charts" ], "description": "This chart shows a line chart with a label annotating the final value", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Layered Aggregates", "example_url": "https://altair-viz.github.io/gallery/layer_line_color_rule.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layer_line_color_rule.py", "categories": [ "line charts" ], "description": "This example shows how to make a multi-series line chart of the daily closing\nstock prices for AAPL, AMZN, GOOG, IBM, and MSFT between 2000 and 2010, along\nwith a layered rule showing the average values.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Logarithmic Scale", "example_url": "https://altair-viz.github.io/gallery/line_with_log_scale.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_with_log_scale.py", "categories": [ "line charts" ], "description": "How to make a line chart on a `Logarithmic scale `_.", "datasets": [ "population" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Percent axis", "example_url": "https://altair-viz.github.io/gallery/line_percent.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_percent.py", "categories": [ "line charts" ], "description": "This example shows how to format the tick labels of the y-axis of a chart as percentages.", "datasets": [ "jobs" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Point Markers", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_points.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_points.py", "categories": [ "line charts" ], "description": "This chart shows a simple line chart with points marking each value.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Sequence Generator", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_generator.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_generator.py", "categories": [ "line charts" ], "description": "This examples shows how to create multiple lines using the sequence generator.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Line Chart with Stroked Point Markers", "example_url": "https://altair-viz.github.io/gallery/line_chart_with_points_stroked.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/line_chart_with_points_stroked.py", "categories": [ "line charts" ], "description": "This example shows a simple line chart with points in a different color.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Line Chart with Varying Size", "example_url": "https://altair-viz.github.io/gallery/trail_marker.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/trail_marker.py", "categories": [ "line charts" ], "description": "This is example of using the ``trail`` marker to vary the size of a line.", "datasets": [ "wheat" ] }, { "gallery_name": "altair", "example_name": "London Tube Lines", "example_url": "https://altair-viz.github.io/gallery/london_tube.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/london_tube.py", "categories": [ "case studies" ], "description": "This example shows the London tube lines against the background of the\nborough boundaries. It is based on the vega-lite example at\nhttps://vega.github.io/vega-lite/examples/geo_layer_line_london.html.", "datasets": [ "london_boroughs", "london_centroids", "london_tube_lines" ] }, { "gallery_name": "altair", "example_name": "Mosaic Chart with Labels", "example_url": "https://altair-viz.github.io/gallery/mosaic_with_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/mosaic_with_labels.py", "categories": [ "tables" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Multi-Line Highlight", "example_url": "https://altair-viz.github.io/gallery/multiline_highlight.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multiline_highlight.py", "categories": [ "interactive charts" ], "description": "This multi-line chart uses an invisible Voronoi tessellation to handle pointerover to\nidentify the nearest point and then highlight the line on which the point falls.\nIt is adapted from the Vega-Lite example found at\nhttps://bl.ocks.org/amitkaps/fe4238e716db53930b2f1a70d3401701", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Multi-Line Tooltip", "example_url": "https://altair-viz.github.io/gallery/multiline_tooltip.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multiline_tooltip.py", "categories": [ "interactive charts" ], "description": "This example shows how you can use selections and layers to create a\ntooltip-like behavior tied to the x position of the cursor.\nIf you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.\n\nIn this example, we'll employ a little trick to isolate the x-position of the\ncursor: we add some transparent points with only an x encoding (no y encoding)\nand tie a *nearest* selection to these, tied to the \"x\" field.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Multi-Line Tooltip (Standard)", "example_url": "https://altair-viz.github.io/gallery/multiline_tooltip_standard.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multiline_tooltip_standard.py", "categories": [ "interactive charts" ], "description": "This example shows how to add a standard tooltip to the same chart\nas in :ref:`gallery_multiline_tooltip`. You can find another example\nusing this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Multi-panel Scatter Plot with Linked Brushing", "example_url": "https://altair-viz.github.io/gallery/scatter_linked_brush.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_linked_brush.py", "categories": [ "interactive charts" ], "description": "This is an example of using an interval selection to control the color of\npoints across multiple panels.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Multifeature Scatter Plot", "example_url": "https://altair-viz.github.io/gallery/multifeature_scatter_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multifeature_scatter_plot.py", "categories": [ "scatter plots" ], "description": "This example shows how to make a scatter plot with multiple feature encodings.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Multiple Interactions", "example_url": "https://altair-viz.github.io/gallery/multiple_interactions.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multiple_interactions.py", "categories": [ "interactive charts" ], "description": "This example shows how multiple user inputs can be layered onto a chart. The four inputs have functionality as follows:\n\n* Dropdown: Filters the movies by genre\n* Radio Buttons: Highlights certain films by Worldwide Gross\n* Mouse Drag and Scroll: Zooms the x and y scales to allow for panning.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Multiple Series Line Chart", "example_url": "https://altair-viz.github.io/gallery/multi_series_line.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/multi_series_line.py", "categories": [ "line charts" ], "description": "This example shows how to make a line chart with multiple series of data.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Normalized Parallel Coordinates", "example_url": "https://altair-viz.github.io/gallery/normed_parallel_coordinates.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/normed_parallel_coordinates.py", "categories": [ "advanced calculations" ], "description": "A `Parallel Coordinates `_\nchart is a chart that lets you visualize the individual data points by drawing\na single line for each of them.\n\nSuch a chart can be created in Altair by first transforming the data into a\nsuitable representation.\n\nThis example shows a modified parallel coordinates chart with the Penguins dataset,\nwhere the y-axis shows the value after min-max rather than the raw value. It's a\nsimplified Altair version of `the VegaLite version `_", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Normalized Stacked Area Chart", "example_url": "https://altair-viz.github.io/gallery/normalized_stacked_area_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/normalized_stacked_area_chart.py", "categories": [ "area charts" ], "description": "This example shows how to make a normalized stacked area chart.", "datasets": [ "iowa_electricity" ] }, { "gallery_name": "altair", "example_name": "Normalized Stacked Bar Chart", "example_url": "https://altair-viz.github.io/gallery/normalized_stacked_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/normalized_stacked_bar_chart.py", "categories": [ "bar charts" ], "description": "This is an example of a normalized stacked bar chart using data which contains crop yields over different regions and different years in the 1930s.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "One Dot Per Zipcode", "example_url": "https://altair-viz.github.io/gallery/one_dot_per_zipcode.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/one_dot_per_zipcode.py", "categories": [ "case studies" ], "description": "This example shows a geographical plot with one dot per zipcode.", "datasets": [ "zipcodes" ] }, { "gallery_name": "altair", "example_name": "Pacman Chart", "example_url": "https://altair-viz.github.io/gallery/pacman_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/pacman_chart.py", "categories": [ "circular plots" ], "description": "Chart made using ``mark_arc`` and constant values.\nThis could also be made using\n``alt.Chart(source).mark_arc(color = \"gold\", theta = (5/8)*np.pi, theta2 = (19/8)*np.pi,radius=100)``.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Parallel Coordinates", "example_url": "https://altair-viz.github.io/gallery/parallel_coordinates.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/parallel_coordinates.py", "categories": [ "advanced calculations" ], "description": "A `Parallel Coordinates `_\nchart is a chart that lets you visualize the individual data points by drawing\na single line for each of them.\nSuch a chart can be created in Altair by first transforming the data into a\nsuitable representation.\nThis example shows a parallel coordinates chart with the Penguins dataset.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Pie Chart", "example_url": "https://altair-viz.github.io/gallery/pie_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/pie_chart.py", "categories": [ "circular plots" ], "description": "This example shows how to make a Pie Chart using ``mark_arc``.\nThis is adapted from a corresponding Vega-Lite Example:\n`Pie Chart `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Pie Chart with Labels", "example_url": "https://altair-viz.github.io/gallery/pie_chart_with_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/pie_chart_with_labels.py", "categories": [ "circular plots" ], "description": "This example shows how to layer text over arc marks (``mark_arc``) to label pie charts.\nThis is adapted from a corresponding Vega-Lite Example:\n`Pie Chart with Labels `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Point map", "example_url": "https://altair-viz.github.io/gallery/point_map.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/point_map.py", "categories": [ "maps" ], "description": "This is a layered map that shows the positions of airports on a background of U.S. states.", "datasets": [ "airports", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Polar Bar Chart", "example_url": "https://altair-viz.github.io/gallery/polar_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/polar_bar_chart.py", "categories": [ "circular plots" ], "description": "This example shows how to make a polar bar chart using ``mark_arc``.\nThis could also have been called a \"pie chart with axis labels\",\nbut is more commonly referred to as a polar bar chart.\nThe axis lines are created using pie charts with only the stroke visible.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Polynomial Fit Plot with Regression Transform", "example_url": "https://altair-viz.github.io/gallery/poly_fit_regression.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/poly_fit_regression.py", "categories": [ "uncertainties and trends" ], "description": "This example shows how to overlay data with multiple fitted polynomials using\nthe regression transform.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Population of Falkensee from 1875 to 2014", "example_url": "https://altair-viz.github.io/gallery/falkensee.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/falkensee.py", "categories": [ "case studies" ], "description": "This example is a reproduction of the Falkensee plot found in the Vega-Lite examples.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Pyramid Pie Chart", "example_url": "https://altair-viz.github.io/gallery/pyramid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/pyramid.py", "categories": [ "case studies" ], "description": "Altair reproduction of http://robslink.com/SAS/democd91/pyramid_pie.htm", "datasets": [] }, { "gallery_name": "altair", "example_name": "Quantile-Quantile Plot", "example_url": "https://altair-viz.github.io/gallery/scatter_qq.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_qq.py", "categories": [ "distributions" ], "description": "A quantile-quantile plot comparing input data to theoretical distributions.", "datasets": [ "normal_2d" ] }, { "gallery_name": "altair", "example_name": "Radial Chart", "example_url": "https://altair-viz.github.io/gallery/radial_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/radial_chart.py", "categories": [ "circular plots" ], "description": "This radial plot uses both angular and radial extent to convey multiple dimensions of data.\nThis is adapted from a corresponding Vega-Lite Example:\n`Radial Plot `_.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Ranged Dot Plot", "example_url": "https://altair-viz.github.io/gallery/ranged_dot_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/ranged_dot_plot.py", "categories": [ "advanced calculations" ], "description": "This example shows a ranged dot plot to convey changing life expectancy for the five most populous countries (between 1955 and 2000).", "datasets": [ "countries" ] }, { "gallery_name": "altair", "example_name": "Reorder stacked bar segments", "example_url": "https://altair-viz.github.io/gallery/interactive_reorder_stacked_bars.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_reorder_stacked_bars.py", "categories": [ "interactive charts" ], "description": "This example uses a calculate transform\nto check the values of the \"site\" column\nvs the clicked values in the legend,\nand assigns a lower order (0)\nif there is a match.\nThe use of \"indexOf\" checks for equality in an array,\nwhich here allows for multiple segments to be reordered\nby holding down the shift key while clicking the legend.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Repeated Choropleth Map", "example_url": "https://altair-viz.github.io/gallery/choropleth_repeat.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/choropleth_repeat.py", "categories": [ "maps" ], "description": "Three choropleths representing disjoint data from the same table.", "datasets": [ "population_engineers_hurricanes", "us_10m" ] }, { "gallery_name": "altair", "example_name": "Repeated Density Estimates", "example_url": "https://altair-viz.github.io/gallery/density_repeat.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/density_repeat.py", "categories": [ "distributions" ], "description": "Density estimates for each measurement of penguins.\nThis is what we call a \"repeated\" plot, with one subplot\nfor each measurement type. All measurements are in millimeters,\nmaking them directly comparable on a shared x-axis.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Ridgeline plot", "example_url": "https://altair-viz.github.io/gallery/ridgeline_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/ridgeline_plot.py", "categories": [ "distributions" ], "description": "A `Ridgeline plot `_\nlets you visualize distribution of a numeric value for different\nsubsets of data (what we call \"facets\" in Altair).\n\nSuch a chart can be created in Altair by first transforming the data into a\nsuitable representation.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Scatter Matrix", "example_url": "https://altair-viz.github.io/gallery/scatter_matrix.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_matrix.py", "categories": [ "scatter plots" ], "description": "An example of using a RepeatChart to construct a multi-panel scatter plot\nwith linked panning and zooming.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Scatter Plot and Histogram with Interval Selection", "example_url": "https://altair-viz.github.io/gallery/scatter_with_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_histogram.py", "categories": [ "interactive charts" ], "description": "This example shows how to link a scatter plot and a histogram\ntogether such that an interval selection in the histogram will\nplot the selected values in the scatter plot.\n\nNote that both subplots need to know about the `mbin` field created\nby the `transform_bin` method. In order to achieve this, the data is\nnot passed to the `Chart()` instances creating the subplots, but\ndirectly in the `hconcat()` function, which joins the two plots together.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Scatter Plot with Faceted Marginal Histograms", "example_url": "https://altair-viz.github.io/gallery/scatter_marginal_hist.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_marginal_hist.py", "categories": [ "distributions" ], "description": "This example demonstrates how to generate a scatter plot,\nwith faceted marginal histograms that share their respective x- and y-limits.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Scatter Plot with Href", "example_url": "https://altair-viz.github.io/gallery/scatter_href.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_href.py", "categories": [ "scatter plots" ], "description": "This example shows a scatter plot with an ``href`` encoding constructed from\nthe car name. With this encoding, you can click on any of the points to open\na google search for the car name.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Scatter Plot with LOESS Lines", "example_url": "https://altair-viz.github.io/gallery/scatter_with_loess.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_loess.py", "categories": [ "uncertainties and trends" ], "description": "This example shows how to add a trend line to a scatter plot using\nthe LOESS transform (LOcally Estimated Scatter Plot Smoothing).", "datasets": [] }, { "gallery_name": "altair", "example_name": "Scatter Plot with Minimap", "example_url": "https://altair-viz.github.io/gallery/scatter_with_minimap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_minimap.py", "categories": [ "scatter plots" ], "description": "This example shows how to create a miniature version of a plot\nsuch that creating a selection in the miniature version\nadjusts the axis limits in another, more detailed view.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Scatter Plot with Rolling Mean", "example_url": "https://altair-viz.github.io/gallery/scatter_with_rolling_mean.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_rolling_mean.py", "categories": [ "scatter plots" ], "description": "A scatter plot with a rolling mean overlay. In this example a 30 day window\nis used to calculate the mean of the maximum temperature around each date.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Scatter Plot with Shaded Area", "example_url": "https://altair-viz.github.io/gallery/scatter_with_shaded_area.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_shaded_area.py", "categories": [ "scatter plots" ], "description": "This example shows a scatter plot with shaded area,\nconstructed using :ref:`area mark ` and :ref:`rect mark `.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Scatter plot with point paths on hover and search box", "example_url": "https://altair-viz.github.io/gallery/scatter_point_paths_hover.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_point_paths_hover.py", "categories": [ "interactive charts" ], "description": "This example combines cross-sectional analysis (comparing countries at a single point in time)\nwith longitudinal analysis (tracking changes in individual countries over time), using\nan interactive visualization technique inspired by [this Vega example](https://vega.github.io/vega/examples/global-development/).\n\nKey features:\n1. Point Paths. On hover, shows data trajectories using a trail mark that\nthickens from past to present, clearly indicating the direction of time.\n2. Search Box. Implements a case-insensitive regex filter for country names,\nenabling dynamic, flexible data point selection to enhance exploratory analysis.", "datasets": [ "gapminder" ] }, { "gallery_name": "altair", "example_name": "Seattle Weather Interactive", "example_url": "https://altair-viz.github.io/gallery/seattle_weather_interactive.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/seattle_weather_interactive.py", "categories": [ "case studies" ], "description": "This chart provides an interactive exploration of Seattle weather over the\ncourse of the year. It includes a one-axis brush selection to easily\nsee the distribution of weather types in a particular date range.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "altair", "example_name": "Selection Detail", "example_url": "https://altair-viz.github.io/gallery/select_detail.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/select_detail.py", "categories": [ "interactive charts" ], "description": "This example shows a selection that links two views of data: the left panel\ncontains one point per object, and the right panel contains one line per\nobject. Clicking on either the points or lines will select the corresponding\nobjects in both views of the data.\n\nThe challenge lies in expressing such hierarchical data in a way that Altair\ncan handle. We do this by merging the data into a \"long form\" dataframe, and\naggregating identical metadata for the final plot.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Selection Histogram", "example_url": "https://altair-viz.github.io/gallery/selection_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/selection_histogram.py", "categories": [ "interactive charts" ], "description": "This chart shows an example of using an interval selection to filter the\ncontents of an attached histogram, allowing the user to see the proportion\nof items in each category within the selection.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Selection zorder", "example_url": "https://altair-viz.github.io/gallery/selection_zorder.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/selection_zorder.py", "categories": [ "interactive charts" ], "description": "This example shows how to bring selected points to the front/foreground\nby using a condition to change the point's (z)order\nas it is hovered over with the pointer.\nThis prevents that the selected points are obscured\nby those that are not selected.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Simple Bar Chart", "example_url": "https://altair-viz.github.io/gallery/simple_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_bar_chart.py", "categories": [ "simple charts" ], "description": "This example shows a basic bar chart created with Altair.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Simple Heatmap", "example_url": "https://altair-viz.github.io/gallery/simple_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_heatmap.py", "categories": [ "simple charts" ], "description": "This example shows a simple heatmap for showing gridded data.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Simple Histogram", "example_url": "https://altair-viz.github.io/gallery/simple_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_histogram.py", "categories": [ "simple charts" ], "description": "This example shows how to make a basic histogram, based on the vega-lite docs\nhttps://vega.github.io/vega-lite/examples/histogram.html", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Simple Interactive Colored Scatter Plot", "example_url": "https://altair-viz.github.io/gallery/interactive_scatter_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/interactive_scatter_plot.py", "categories": [ "interactive charts" ], "description": "This example shows how to make an interactive scatter plot.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Simple Line Chart", "example_url": "https://altair-viz.github.io/gallery/simple_line_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_line_chart.py", "categories": [ "simple charts" ], "description": "This chart shows the most basic line chart, made from a dataframe with two\ncolumns.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Simple Scatter Plot with Errorbars", "example_url": "https://altair-viz.github.io/gallery/simple_scatter_with_errorbars.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_scatter_with_errorbars.py", "categories": [ "uncertainties and trends" ], "description": "A simple scatter plot of a data set with errorbars.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Simple Scatter Plot with Labels", "example_url": "https://altair-viz.github.io/gallery/scatter_with_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_with_labels.py", "categories": [ "scatter plots" ], "description": "This example shows a basic scatter plot with labels created with Altair.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Simple Scatter Plot with Tooltips", "example_url": "https://altair-viz.github.io/gallery/scatter_tooltips.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/scatter_tooltips.py", "categories": [ "simple charts" ], "description": "A scatter plot of the cars dataset, with tooltips showing selected column\nvalues when you hover over points. We make the points larger so that it is\neasier to hover over them.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Simple Stacked Area Chart", "example_url": "https://altair-viz.github.io/gallery/simple_stacked_area_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/simple_stacked_area_chart.py", "categories": [ "simple charts" ], "description": "This example shows how to make a simple stacked area chart.", "datasets": [ "iowa_electricity" ] }, { "gallery_name": "altair", "example_name": "Simple Strip Plot", "example_url": "https://altair-viz.github.io/gallery/strip_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/strip_plot.py", "categories": [ "simple charts" ], "description": "A simple example of how to make a strip plot.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Slider Cutoff", "example_url": "https://altair-viz.github.io/gallery/slider_cutoff.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/slider_cutoff.py", "categories": [ "interactive charts" ], "description": "This example shows how to bind a variable parameter to a slider, and how to use the corresponding bound value to color data points. This example is based on an example from the Altair 4 documentation for Interactions, in which the interactivity was accomplished using a selection. The version below has been simplified significantly through the use of a variable parameter. Variable parameters were added in Altair 5.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Slope Graph", "example_url": "https://altair-viz.github.io/gallery/slope_graph.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/slope_graph.py", "categories": [ "line charts" ], "description": "This example shows how to make Slope Graph.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Sorted Bar Chart", "example_url": "https://altair-viz.github.io/gallery/bar_chart_sorted.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/bar_chart_sorted.py", "categories": [ "bar charts" ], "description": "This example shows a bar chart sorted by a calculated value.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Sorted Error Bars showing Confidence Interval", "example_url": "https://altair-viz.github.io/gallery/sorted_error_bars_with_ci.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/sorted_error_bars_with_ci.py", "categories": [ "advanced calculations" ], "description": "This example shows how to show error bars using confidence intervals, while also sorting the y-axis based on x-axis values.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Stacked Bar Chart", "example_url": "https://altair-viz.github.io/gallery/stacked_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/stacked_bar_chart.py", "categories": [ "bar charts" ], "description": "This is an example of a stacked bar chart using data which contains crop yields over different regions and different years in the 1930s.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Stacked Bar Chart with Sorted Segments", "example_url": "https://altair-viz.github.io/gallery/stacked_bar_chart_sorted_segments.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/stacked_bar_chart_sorted_segments.py", "categories": [ "bar charts" ], "description": "This is an example of a stacked-bar chart with the segments of each bar resorted.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Stacked Bar Chart with Text Overlay", "example_url": "https://altair-viz.github.io/gallery/stacked_bar_chart_with_text.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/stacked_bar_chart_with_text.py", "categories": [ "bar charts" ], "description": "This example shows how to overlay text on a stacked bar chart. For both the\nbar and text marks, we use the ``stack`` argument in the ``x`` encoding to\ncause the values to be stacked horizontally.", "datasets": [ "barley" ] }, { "gallery_name": "altair", "example_name": "Stacked Density Estimates", "example_url": "https://altair-viz.github.io/gallery/density_stack.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/density_stack.py", "categories": [ "distributions" ], "description": "To plot a stacked graph of estimates, use a shared ``extent`` and a fixed\nnumber of subdivision ``steps`` to ensure that the points for each area align\nwell. Density estimates of body mass for each penguin species are plotted\nin a stacked method. In addition, setting ``counts`` to true multiplies the\ndensities by the number of data points in each group, preserving proportional\ndifferences.", "datasets": [ "penguins" ] }, { "gallery_name": "altair", "example_name": "Stem and Leaf Plot", "example_url": "https://altair-viz.github.io/gallery/stem_and_leaf.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/stem_and_leaf.py", "categories": [ "advanced calculations" ], "description": "This example shows how to make a stem and leaf plot.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Step Chart", "example_url": "https://altair-viz.github.io/gallery/step_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/step_chart.py", "categories": [ "line charts" ], "description": "This example shows Google's stock price over time.\nThis uses the \"step-after\" interpolation scheme.\nThe full list of interpolation options includes 'linear',\n'linear-closed', 'step', 'step-before', 'step-after', 'basis',\n'basis-open', 'basis-closed', 'cardinal', 'cardinal-open',\n'cardinal-closed', 'bundle', and 'monotone'.", "datasets": [ "stocks" ] }, { "gallery_name": "altair", "example_name": "Streamgraph", "example_url": "https://altair-viz.github.io/gallery/streamgraph.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/streamgraph.py", "categories": [ "area charts" ], "description": "This example shows the streamgraph from vega-lite examples.", "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "altair", "example_name": "Strip Plot with Jitter", "example_url": "https://altair-viz.github.io/gallery/strip_plot_jitter.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/strip_plot_jitter.py", "categories": [ "distributions" ], "description": "In this chart, we encode the ``Major Genre`` column from the ``movies`` dataset\nin the ``y``-channel. In the default presentation of this data, it would be\ndifficult to gauge the relative frequencies with which different values occur\nbecause there would be so much overlap. To address this, we use the ``yOffset``\nchannel to incorporate a random offset (jittering). The example is shown twice,\non the left side using normally distributed and on the right side using\nuniformally distributed jitter.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Table Bubble Plot (Github Punch Card)", "example_url": "https://altair-viz.github.io/gallery/table_bubble_plot_github.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/table_bubble_plot_github.py", "categories": [ "distributions" ], "description": "This example shows github contributions by the day of week and hour of the day.", "datasets": [ "github" ] }, { "gallery_name": "altair", "example_name": "Text over a Heatmap", "example_url": "https://altair-viz.github.io/gallery/layered_heatmap_text.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/layered_heatmap_text.py", "categories": [ "tables" ], "description": "An example of a layered chart of text over a heatmap using the cars dataset.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "The U.S. Employment Crash During the Great Recession", "example_url": "https://altair-viz.github.io/gallery/us_employment.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_employment.py", "categories": [ "case studies" ], "description": "This example is a fully developed bar chart with negative values using the sample dataset of U.S. employment changes during the Great Recession.", "datasets": [ "us_employment" ] }, { "gallery_name": "altair", "example_name": "Top K Items", "example_url": "https://altair-viz.github.io/gallery/top_k_items.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/top_k_items.py", "categories": [ "advanced calculations" ], "description": "This example shows how to use the window and transformation filter to display\nthe Top items of a long list of items in decreasing order.\nHere we sort the top 10 highest ranking movies of IMDB.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "Top K Letters", "example_url": "https://altair-viz.github.io/gallery/top_k_letters.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/top_k_letters.py", "categories": [ "advanced calculations" ], "description": "This example shows how to use a window transform in order to display only the\ntop K categories by number of entries. In this case, we rank the characters in\nthe first paragraph of Dickens' *A Tale of Two Cities* by number of occurrences.", "datasets": [] }, { "gallery_name": "altair", "example_name": "Top-K Plot with Others", "example_url": "https://altair-viz.github.io/gallery/top_k_with_others.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/top_k_with_others.py", "categories": [ "advanced calculations" ], "description": "This example shows how to use aggregate, window, and calculate transformations\nto display the top-k directors by average worldwide gross while grouping the\nremaining directors as 'All Others'.", "datasets": [ "movies" ] }, { "gallery_name": "altair", "example_name": "U.S. State Capitals Overlaid on a Map of the U.S", "example_url": "https://altair-viz.github.io/gallery/us_state_capitals.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_state_capitals.py", "categories": [ "case studies" ], "description": "This is a layered geographic visualization that shows US capitals\noverlaid on a map.", "datasets": [ "us_10m", "us_state_capitals" ] }, { "gallery_name": "altair", "example_name": "US Income by State: Wrapped Facet", "example_url": "https://altair-viz.github.io/gallery/us_incomebrackets_by_state_facet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_incomebrackets_by_state_facet.py", "categories": [ "maps" ], "description": "This example shows how to create a map of income in the US by state,\nfaceted over income brackets", "datasets": [ "income", "us_10m" ] }, { "gallery_name": "altair", "example_name": "US Population Pyramid Over Time", "example_url": "https://altair-viz.github.io/gallery/us_population_pyramid_over_time.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_population_pyramid_over_time.py", "categories": [ "case studies" ], "description": "A population pyramid shows the distribution of age groups within a population.\nIt uses a slider widget that is bound to the year to visualize the age\ndistribution over time.", "datasets": [ "population" ] }, { "gallery_name": "altair", "example_name": "US Population by Age and Sex", "example_url": "https://altair-viz.github.io/gallery/us_population_over_time.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_population_over_time.py", "categories": [ "case studies" ], "description": "This chart visualizes the age distribution of the US population over time.\nIt uses a slider widget that is bound to the year to visualize the age\ndistribution over time.", "datasets": [ "population" ] }, { "gallery_name": "altair", "example_name": "US Population: Wrapped Facet", "example_url": "https://altair-viz.github.io/gallery/us_population_over_time_facet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/us_population_over_time_facet.py", "categories": [ "case studies" ], "description": "This chart visualizes the age distribution of the US population over time,\nusing a wrapped faceting of the data by decade.", "datasets": [ "population" ] }, { "gallery_name": "altair", "example_name": "Using Selection Interval with mark_area", "example_url": "https://altair-viz.github.io/gallery/select_mark_area.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/select_mark_area.py", "categories": [ "interactive charts" ], "description": "Because area is considered one object, just using the plain\nselector will select the entire area instead of just one part of it.\n\nThis example shows how to use two areas, one on top of the other, and a\n`transform_filter` to fake out this effect.", "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "altair", "example_name": "Violin Plot", "example_url": "https://altair-viz.github.io/gallery/violin_plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/violin_plot.py", "categories": [ "distributions" ], "description": "This example shows how to make a Violin Plot using Altair's density transform.", "datasets": [ "cars" ] }, { "gallery_name": "altair", "example_name": "Waterfall Chart", "example_url": "https://altair-viz.github.io/gallery/waterfall_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/waterfall_chart.py", "categories": [ "advanced calculations" ], "description": "This example shows how to recreate a Vega-Lite implementation of a waterfall chart.\nOriginal inspiration is from https://vega.github.io/vega-lite/examples/waterfall_chart.html", "datasets": [] }, { "gallery_name": "altair", "example_name": "Wheat and Wages", "example_url": "https://altair-viz.github.io/gallery/wheat_wages.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/wheat_wages.py", "categories": [ "case studies" ], "description": "A recreation of William Playfair's classic chart visualizing\nthe price of wheat, the wages of a mechanic, and the reigning British monarch.\n\nThis is a more polished version of the simpler chart in :ref:`gallery_bar_and_line_with_dual_axis`.", "datasets": [ "monarchs", "wheat" ] }, { "gallery_name": "altair", "example_name": "Wilkinson Dot Plot", "example_url": "https://altair-viz.github.io/gallery/wilkinson-dot-plot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/wilkinson-dot-plot.py", "categories": [ "advanced calculations" ], "description": "An example of a `Wilkinson Dot Plot `_", "datasets": [] }, { "gallery_name": "altair", "example_name": "Wind Vector Map", "example_url": "https://altair-viz.github.io/gallery/wind_vector_map.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/wind_vector_map.py", "categories": [ "maps" ], "description": "An example showing a vector array map showing wind speed and direction using ``wedge``\nas shape for ``mark_point`` and ``angle`` encoding for the wind direction.\nThis is adapted from this corresponding Vega-Lite Example:\n`Wind Vector Map `_\nwith an added base map.", "datasets": [ "windvectors", "world_110m" ] }, { "gallery_name": "altair", "example_name": "Window Rank Line Chart", "example_url": "https://altair-viz.github.io/gallery/window_rank.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/window_rank.py", "categories": [ "line charts" ], "description": "This example shows the Group F rankings in the 2018 World Cup after each matchday.\nA window transformation is used to rank each after each match day, sorting by points and difference.", "datasets": [] }, { "gallery_name": "altair", "example_name": "World Map", "example_url": "https://altair-viz.github.io/gallery/world_map.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/world_map.py", "categories": [ "maps" ], "description": "This example shows how to create a world map using data generators for\ndifferent background layers.", "datasets": [ "world_110m" ] }, { "gallery_name": "altair", "example_name": "World Projections", "example_url": "https://altair-viz.github.io/gallery/world_projections.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/altair@fde4b47a4eb219dd51aeff934e5289faab587a19/tests/examples_arguments_syntax/world_projections.py", "categories": [ "maps" ], "description": "This example shows a map of the countries of the world.\nUse the dropdown menu to compare projections. For more details on the `project` arguments, see the API of `altair.Projection `_.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega", "example_name": "Airport Connections", "example_url": "https://vega.github.io/vega/examples/airport-connections/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/airport-connections.vg.json", "categories": [ "Network Diagrams" ], "description": "Interactive map of U.S. airport connections in 2008.", "datasets": [ "us_10m", "flights_airport", "airports" ] }, { "gallery_name": "vega", "example_name": "Annual Precipitation", "example_url": "https://vega.github.io/vega/examples/annual-precipitation/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/annual-precipitation.vg.json", "categories": [ "Geographic Maps" ], "description": "A plot of 2016 annual global precipitation data from the NOAA Climate Forecast System (CFS) v2.", "datasets": [ "annual_precip", "world_110m" ] }, { "gallery_name": "vega", "example_name": "Annual Temperature", "example_url": "https://vega.github.io/vega/examples/annual-temperature/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/annual-temperature.vg.json", "categories": [ "Custom Designs" ], "description": "Area charts showing average daily temperatures in Seattle for each hour of the day.", "datasets": [ "seattle_weather_hourly_normals" ] }, { "gallery_name": "vega", "example_name": "Arc Diagram", "example_url": "https://vega.github.io/vega/examples/arc-diagram/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/arc-diagram.vg.json", "categories": [ "Network Diagrams" ], "description": "An arc diagram depicting character co-occurrence in the novel Les Misérables.", "datasets": [ "miserables" ] }, { "gallery_name": "vega", "example_name": "Area Chart", "example_url": "https://vega.github.io/vega/examples/area-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/area-chart.vg.json", "categories": [ "Line & Area Charts" ], "description": "A basic area chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Bar Chart", "example_url": "https://vega.github.io/vega/examples/bar-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/bar-chart.vg.json", "categories": [ "Bar Charts" ], "description": "A basic bar chart example, with value labels shown upon pointer hover.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Bar Line Toggle", "example_url": "https://vega.github.io/vega/examples/bar-line-toggle/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/bar-line-toggle.vg.json", "categories": [ "Interaction Techniques" ], "description": "An example of Vega visualization that automatically switches between a column chart and a line chart depending on the number of data points", "datasets": [] }, { "gallery_name": "vega", "example_name": "Barley Trellis Plot", "example_url": "https://vega.github.io/vega/examples/barley-trellis-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/barley-trellis-plot.vg.json", "categories": [ "Scatter Plots" ], "description": "A small multiples view of barley yields by site and variety.", "datasets": [ "barley" ] }, { "gallery_name": "vega", "example_name": "Beeswarm Plot", "example_url": "https://vega.github.io/vega/examples/beeswarm-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/beeswarm-plot.vg.json", "categories": [ "Other Chart Types" ], "description": "A beeswarm chart example that uses a force-directed layout to group items by category.", "datasets": [ "miserables" ] }, { "gallery_name": "vega", "example_name": "Binned Scatter Plot", "example_url": "https://vega.github.io/vega/examples/binned-scatter-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/binned-scatter-plot.vg.json", "categories": [ "Distributions" ], "description": "A binned scatter plot example showing aggregate counts per binned cell.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "Box Plot", "example_url": "https://vega.github.io/vega/examples/box-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/box-plot.vg.json", "categories": [ "Distributions" ], "description": "A box plot example showing aggregate statistics for penguin body mass.", "datasets": [ "penguins" ] }, { "gallery_name": "vega", "example_name": "Brushing Scatter Plots", "example_url": "https://vega.github.io/vega/examples/brushing-scatter-plots/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/brushing-scatter-plots.vg.json", "categories": [ "Interaction Techniques" ], "description": "A scatter plot matrix of penguin data with interactive linked selections.", "datasets": [ "penguins" ] }, { "gallery_name": "vega", "example_name": "Budget Forecasts", "example_url": "https://vega.github.io/vega/examples/budget-forecasts/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/budget-forecasts.vg.json", "categories": [ "Custom Designs" ], "description": "A recreation of a New York Times chart showing U.S. budget forecasts versus reality.", "datasets": [ "budgets" ] }, { "gallery_name": "vega", "example_name": "Calendar View", "example_url": "https://vega.github.io/vega/examples/calendar-view/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/calendar-view.vg.json", "categories": [ "Other Chart Types" ], "description": "A calendar visualization of daily changes to the S&P 500 since 2000.", "datasets": [ "sp500_2000" ] }, { "gallery_name": "vega", "example_name": "Circle Packing", "example_url": "https://vega.github.io/vega/examples/circle-packing/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/circle-packing.vg.json", "categories": [ "Tree Diagrams" ], "description": "An example of a circle packing layout for hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "Clock", "example_url": "https://vega.github.io/vega/examples/clock/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/clock.vg.json", "categories": [ "Custom Designs" ], "description": "A circular clock visualization showing the current time.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Connected Scatter Plot", "example_url": "https://vega.github.io/vega/examples/connected-scatter-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/connected-scatter-plot.vg.json", "categories": [ "Scatter Plots" ], "description": "An example of a connected scatter plot, tracking changes in miles driven versus the price of gasoline.", "datasets": [ "driving" ] }, { "gallery_name": "vega", "example_name": "Contour Plot", "example_url": "https://vega.github.io/vega/examples/contour-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/contour-plot.vg.json", "categories": [ "Distributions" ], "description": "A contour plot example, overlaying a density estimate on scatter plot points.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "County Unemployment", "example_url": "https://vega.github.io/vega/examples/county-unemployment/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/county-unemployment.vg.json", "categories": [ "Geographic Maps" ], "description": "A choropleth map depicting U.S. unemployment rates by county in 2009.", "datasets": [ "unemployment", "us_10m" ] }, { "gallery_name": "vega", "example_name": "Crossfilter Flights", "example_url": "https://vega.github.io/vega/examples/crossfilter-flights/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/crossfilter-flights.vg.json", "categories": [ "Interaction Techniques" ], "description": "Interactive cross-filtering among histograms of flight statistics.", "datasets": [ "flights_200k_json" ] }, { "gallery_name": "vega", "example_name": "Density Heatmaps", "example_url": "https://vega.github.io/vega/examples/density-heatmaps/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/density-heatmaps.vg.json", "categories": [ "Other Chart Types" ], "description": "A small multiples view of 2D density heatmaps of automobile statistics.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "Distortion Comparison", "example_url": "https://vega.github.io/vega/examples/distortion-comparison/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/distortion-comparison.vg.json", "categories": [ "Geographic Maps" ], "description": "A map view comparing area distortions between two projections.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega", "example_name": "Donut Chart", "example_url": "https://vega.github.io/vega/examples/donut-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/donut-chart.vg.json", "categories": [ "Circular Charts" ], "description": "A basic donut chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Donut Chart Labelled", "example_url": "https://vega.github.io/vega/examples/donut-chart-labelled/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/donut-chart-labelled.vg.json", "categories": [ "Circular Charts" ], "description": "Donut with non-overlapping labels.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Dorling Cartogram", "example_url": "https://vega.github.io/vega/examples/dorling-cartogram/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/dorling-cartogram.vg.json", "categories": [ "Geographic Maps" ], "description": "A Dorling cartogram depicting U.S. state obesity rates.", "datasets": [ "us_10m", "obesity" ] }, { "gallery_name": "vega", "example_name": "Dot Plot", "example_url": "https://vega.github.io/vega/examples/dot-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/dot-plot.vg.json", "categories": [ "Distributions" ], "description": "A dot plot example depicting the distribution of animal sleep times.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Earthquakes", "example_url": "https://vega.github.io/vega/examples/earthquakes/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/earthquakes.vg.json", "categories": [ "Geographic Maps" ], "description": "An interactive globe depicting earthquake locations and magnitudes.", "datasets": [ "world_110m", "earthquakes" ] }, { "gallery_name": "vega", "example_name": "Earthquakes Globe", "example_url": "https://vega.github.io/vega/examples/earthquakes-globe/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/earthquakes-globe.vg.json", "categories": [ "Custom Designs" ], "description": "Rotating globe animation depicting earthquake locations. Background - pseudorandomly distributed 'stars'.", "datasets": [ "world_110m", "earthquakes" ] }, { "gallery_name": "vega", "example_name": "Edge Bundling", "example_url": "https://vega.github.io/vega/examples/edge-bundling/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/edge-bundling.vg.json", "categories": [ "Network Diagrams" ], "description": "A network diagram of software dependencies, with edges grouped via hierarchical edge bundling.", "datasets": [ "flare", "flare_dependencies" ] }, { "gallery_name": "vega", "example_name": "Error Bars", "example_url": "https://vega.github.io/vega/examples/error-bars/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/error-bars.vg.json", "categories": [ "Scatter Plots" ], "description": "A basic error bar visualization example.", "datasets": [ "barley" ] }, { "gallery_name": "vega", "example_name": "Falkensee Population", "example_url": "https://vega.github.io/vega/examples/falkensee-population/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/falkensee-population.vg.json", "categories": [ "Custom Designs" ], "description": "An annotated line chart of the population of Falkensee, Germany.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Flight Passengers", "example_url": "https://vega.github.io/vega/examples/flight-passengers/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/flight-passengers.vg.json", "categories": [ "Custom Designs" ], "description": "Passenger Traffic at Seattle-Tacoma International Airport, Percentage Change from October 2019 to March 2020", "datasets": [] }, { "gallery_name": "vega", "example_name": "Force Directed Layout", "example_url": "https://vega.github.io/vega/examples/force-directed-layout/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/force-directed-layout.vg.json", "categories": [ "Network Diagrams" ], "description": "A node-link diagram with force-directed layout, depicting character co-occurrence in the novel Les Misérables.", "datasets": [ "miserables" ] }, { "gallery_name": "vega", "example_name": "Global Development", "example_url": "https://vega.github.io/vega/examples/global-development/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/global-development.vg.json", "categories": [ "Interaction Techniques" ], "description": "An interactive scatter plot of global health statistics by country and year.", "datasets": [ "gapminder" ] }, { "gallery_name": "vega", "example_name": "Grouped Bar Chart", "example_url": "https://vega.github.io/vega/examples/grouped-bar-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/grouped-bar-chart.vg.json", "categories": [ "Bar Charts" ], "description": "A basic grouped bar chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Heatmap", "example_url": "https://vega.github.io/vega/examples/heatmap/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/heatmap.vg.json", "categories": [ "Other Chart Types" ], "description": "A heatmap showing average daily temperatures in Seattle for each hour of the day.", "datasets": [ "seattle_weather_hourly_normals" ] }, { "gallery_name": "vega", "example_name": "Histogram", "example_url": "https://vega.github.io/vega/examples/histogram/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/histogram.vg.json", "categories": [ "Distributions" ], "description": "An interactive histogram for visualizing a univariate distribution.", "datasets": [ "normal_2d" ] }, { "gallery_name": "vega", "example_name": "Histogram Null Values", "example_url": "https://vega.github.io/vega/examples/histogram-null-values/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/histogram-null-values.vg.json", "categories": [ "Distributions" ], "description": "A histogram of film ratings, modified to include null values.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Horizon Graph", "example_url": "https://vega.github.io/vega/examples/horizon-graph/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/horizon-graph.vg.json", "categories": [ "Line & Area Charts" ], "description": "A horizon graph, which preserves resolution by layering slices of an area chart.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Hypothetical Outcome Plots", "example_url": "https://vega.github.io/vega/examples/hypothetical-outcome-plots/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/hypothetical-outcome-plots.vg.json", "categories": [ "Distributions" ], "description": "A hypothetical outcome plot that uses animated samples to convey uncertainty.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Interactive Legend", "example_url": "https://vega.github.io/vega/examples/interactive-legend/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/interactive-legend.vg.json", "categories": [ "Interaction Techniques" ], "description": "A scatter plot example with interactive legend and x-axis.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "Job Voyager", "example_url": "https://vega.github.io/vega/examples/job-voyager/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/job-voyager.vg.json", "categories": [ "Line & Area Charts" ], "description": "A searchable, stacked area chart of U.S. occupations from 1850 to 2000.", "datasets": [ "jobs" ] }, { "gallery_name": "vega", "example_name": "Labeled Scatter Plot", "example_url": "https://vega.github.io/vega/examples/labeled-scatter-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/labeled-scatter-plot.vg.json", "categories": [ "Scatter Plots" ], "description": "A labeled scatter plot of films showing Rotten Tomatoes ratings versus IMDB ratings.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Line Chart", "example_url": "https://vega.github.io/vega/examples/line-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/line-chart.vg.json", "categories": [ "Line & Area Charts" ], "description": "A basic line chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Loess Regression", "example_url": "https://vega.github.io/vega/examples/loess-regression/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/loess-regression.vg.json", "categories": [ "Scatter Plots" ], "description": "A scatter plot with trend line calculated via locally-weighted (loess) regression.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Map With Tooltip", "example_url": "https://vega.github.io/vega/examples/map-with-tooltip/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/map-with-tooltip.vg.json", "categories": [ "Interaction Techniques" ], "description": "An example of a custom tooltip (on a map)", "datasets": [ "unemployment", "us_10m" ] }, { "gallery_name": "vega", "example_name": "Nested Bar Chart", "example_url": "https://vega.github.io/vega/examples/nested-bar-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/nested-bar-chart.vg.json", "categories": [ "Bar Charts" ], "description": "A nested bar chart example, with bars grouped by category.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Overview Plus Detail", "example_url": "https://vega.github.io/vega/examples/overview-plus-detail/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/overview-plus-detail.vg.json", "categories": [ "Interaction Techniques" ], "description": "Area charts of stock prices, with an interactive overview and filtered detail views.", "datasets": [ "sp500" ] }, { "gallery_name": "vega", "example_name": "Packed Bubble Chart", "example_url": "https://vega.github.io/vega/examples/packed-bubble-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/packed-bubble-chart.vg.json", "categories": [ "Other Chart Types" ], "description": "A packed bubble chart.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Pacman", "example_url": "https://vega.github.io/vega/examples/pacman/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/pacman.vg.json", "categories": [ "Interaction Techniques" ], "description": "An implementation of the classic video game Pacman.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Parallel Coordinates", "example_url": "https://vega.github.io/vega/examples/parallel-coordinates/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/parallel-coordinates.vg.json", "categories": [ "Other Chart Types" ], "description": "Parallel coordinates plot showing 7 dimensions of automobile statistics.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "Pi Monte Carlo", "example_url": "https://vega.github.io/vega/examples/pi-monte-carlo/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/pi-monte-carlo.vg.json", "categories": [ "Interaction Techniques" ], "description": "Estimating the value of π via random sampling methods.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Pie Chart", "example_url": "https://vega.github.io/vega/examples/pie-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/pie-chart.vg.json", "categories": [ "Circular Charts" ], "description": "A basic pie chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Platformer", "example_url": "https://vega.github.io/vega/examples/platformer/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/platformer.vg.json", "categories": [ "Interaction Techniques" ], "description": "A simple platformer. WASD to move, shift to dash.", "datasets": [ "platformer_terrain" ] }, { "gallery_name": "vega", "example_name": "Population Pyramid", "example_url": "https://vega.github.io/vega/examples/population-pyramid/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/population-pyramid.vg.json", "categories": [ "Bar Charts" ], "description": "A population pyramid showing U.S. demographics from 1850 to 2000.", "datasets": [ "population" ] }, { "gallery_name": "vega", "example_name": "Probability Density", "example_url": "https://vega.github.io/vega/examples/probability-density/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/probability-density.vg.json", "categories": [ "Distributions" ], "description": "Area chart using density estimation to show a probability density or cumulative distribution.", "datasets": [ "normal_2d" ] }, { "gallery_name": "vega", "example_name": "Projections", "example_url": "https://vega.github.io/vega/examples/projections/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/projections.vg.json", "categories": [ "Geographic Maps" ], "description": "A gallery of maps showcasing different cartographic projections.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega", "example_name": "Quantile Dot Plot", "example_url": "https://vega.github.io/vega/examples/quantile-dot-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/quantile-dot-plot.vg.json", "categories": [ "Distributions" ], "description": "A quantile dot plot conveying the uncertainty of bus arrival times.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Quantile Quantile Plot", "example_url": "https://vega.github.io/vega/examples/quantile-quantile-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/quantile-quantile-plot.vg.json", "categories": [ "Distributions" ], "description": "A quantile-quantile plot example, comparing distributions by quantile values.", "datasets": [ "normal_2d", "uniform_2d" ] }, { "gallery_name": "vega", "example_name": "Radar Chart", "example_url": "https://vega.github.io/vega/examples/radar-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/radar-chart.vg.json", "categories": [ "Circular Charts" ], "description": "A radar chart example, showing multiple dimensions in a radial layout.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Radial Plot", "example_url": "https://vega.github.io/vega/examples/radial-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/radial-plot.vg.json", "categories": [ "Circular Charts" ], "description": "A basic radial plot that encodes two values as the angle and radius of an arc.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Radial Tree Layout", "example_url": "https://vega.github.io/vega/examples/radial-tree-layout/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/radial-tree-layout.vg.json", "categories": [ "Tree Diagrams" ], "description": "An example of a radial layout for a node-link diagram of hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "Regression", "example_url": "https://vega.github.io/vega/examples/regression/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/regression.vg.json", "categories": [ "Scatter Plots" ], "description": "A scatter plot with trend line calculated via user-configurable regression methods.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Reorderable Matrix", "example_url": "https://vega.github.io/vega/examples/reorderable-matrix/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/reorderable-matrix.vg.json", "categories": [ "Network Diagrams" ], "description": "A re-orderable adjacency matrix depicting character co-occurrence in the novel Les Misérables.", "datasets": [ "miserables" ] }, { "gallery_name": "vega", "example_name": "Scatter Plot", "example_url": "https://vega.github.io/vega/examples/scatter-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/scatter-plot.vg.json", "categories": [ "Scatter Plots" ], "description": "A basic scatter plot example depicting automobile statistics.", "datasets": [ "cars" ] }, { "gallery_name": "vega", "example_name": "Scatter Plot Null Values", "example_url": "https://vega.github.io/vega/examples/scatter-plot-null-values/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/scatter-plot-null-values.vg.json", "categories": [ "Scatter Plots" ], "description": "A scatter plot of film statistics, with null values visualized along the axes.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Serpentine Timeline", "example_url": "https://vega.github.io/vega/examples/serpentine-timeline/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/serpentine-timeline.vg.json", "categories": [ "Custom Designs" ], "description": "a serpentine timeline. The serpentine shape can be an option for instances where an oblong canvas is not ideal. The shape can be customized using many of the signals below. Input bindings have been included for demonstration purposes", "datasets": [] }, { "gallery_name": "vega", "example_name": "Stacked Area Chart", "example_url": "https://vega.github.io/vega/examples/stacked-area-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/stacked-area-chart.vg.json", "categories": [ "Line & Area Charts" ], "description": "A basic stacked area chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Stacked Bar Chart", "example_url": "https://vega.github.io/vega/examples/stacked-bar-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/stacked-bar-chart.vg.json", "categories": [ "Bar Charts" ], "description": "A basic stacked bar chart example.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Stock Index Chart", "example_url": "https://vega.github.io/vega/examples/stock-index-chart/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/stock-index-chart.vg.json", "categories": [ "Interaction Techniques" ], "description": "An interactive line chart of stock prices, with returns shown relative to a selected date.", "datasets": [ "stocks" ] }, { "gallery_name": "vega", "example_name": "Sunburst", "example_url": "https://vega.github.io/vega/examples/sunburst/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/sunburst.vg.json", "categories": [ "Tree Diagrams" ], "description": "An example of a space-fulling radial layout for hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "Table Scrollbar", "example_url": "https://vega.github.io/vega/examples/table-scrollbar/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/table-scrollbar.vg.json", "categories": [ "Interaction Techniques" ], "description": "An example of a simple table with a scrollbar", "datasets": [] }, { "gallery_name": "vega", "example_name": "Time Units", "example_url": "https://vega.github.io/vega/examples/time-units/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/time-units.vg.json", "categories": [ "Distributions" ], "description": "A bar chart of flight statistics, aggregated by the selected time unit.", "datasets": [ "flights_20k" ] }, { "gallery_name": "vega", "example_name": "Timelines", "example_url": "https://vega.github.io/vega/examples/timelines/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/timelines.vg.json", "categories": [ "Custom Designs" ], "description": "A timeline visualization of the lives of the first five U.S. presidents.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Top K Plot", "example_url": "https://vega.github.io/vega/examples/top-k-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/top-k-plot.vg.json", "categories": [ "Distributions" ], "description": "A top-k bar chart ranking film directors by revenue.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Top K Plot With Others", "example_url": "https://vega.github.io/vega/examples/top-k-plot-with-others/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/top-k-plot-with-others.vg.json", "categories": [ "Distributions" ], "description": "A top-k bar chart ranking film directors by revenue, including an aggregate others category.", "datasets": [ "movies" ] }, { "gallery_name": "vega", "example_name": "Tree Layout", "example_url": "https://vega.github.io/vega/examples/tree-layout/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/tree-layout.vg.json", "categories": [ "Tree Diagrams" ], "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "Treemap", "example_url": "https://vega.github.io/vega/examples/treemap/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/treemap.vg.json", "categories": [ "Tree Diagrams" ], "description": "An example of treemap layout for hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "U District Cuisine", "example_url": "https://vega.github.io/vega/examples/u-district-cuisine/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/u-district-cuisine.vg.json", "categories": [ "Custom Designs" ], "description": "Area charts showing the density of cuisine options in Seattle's U-District.", "datasets": [ "udistrict" ] }, { "gallery_name": "vega", "example_name": "Violin Plot", "example_url": "https://vega.github.io/vega/examples/violin-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/violin-plot.vg.json", "categories": [ "Distributions" ], "description": "A violin plot example showing distributions for pengiun body mass.", "datasets": [ "penguins" ] }, { "gallery_name": "vega", "example_name": "Volcano Contours", "example_url": "https://vega.github.io/vega/examples/volcano-contours/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/volcano-contours.vg.json", "categories": [ "Geographic Maps" ], "description": "A contour plot of the Maungawhau volcano in New Zealand.", "datasets": [ "volcano" ] }, { "gallery_name": "vega", "example_name": "Warming Stripes", "example_url": "https://vega.github.io/vega/examples/warming-stripes/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/warming-stripes.vg.json", "categories": [ "Custom Designs" ], "description": "Warming Stripes Chart. Originally designed by Ed Hawkins.", "datasets": [ "global_temp" ] }, { "gallery_name": "vega", "example_name": "Watch", "example_url": "https://vega.github.io/vega/examples/watch/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/watch.vg.json", "categories": [ "Custom Designs" ], "description": "A watch face clock visualization showing the current time.", "datasets": [] }, { "gallery_name": "vega", "example_name": "Weekly Temperature", "example_url": "https://vega.github.io/vega/examples/weekly-temperature/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/weekly-temperature.vg.json", "categories": [ "Custom Designs" ], "description": "Overlaid plots of weekly record, normal, actual, and forecasted temperatures.", "datasets": [ "weekly_weather" ] }, { "gallery_name": "vega", "example_name": "Wheat And Wages", "example_url": "https://vega.github.io/vega/examples/wheat-and-wages/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/wheat-and-wages.vg.json", "categories": [ "Custom Designs" ], "description": "A recreation of William Playfair's classic chart of wheat prices and wages.", "datasets": [ "wheat", "monarchs" ] }, { "gallery_name": "vega", "example_name": "Wheat Plot", "example_url": "https://vega.github.io/vega/examples/wheat-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/wheat-plot.vg.json", "categories": [ "Distributions" ], "description": "A wheat plot example, which combines elements of dot plots and histograms.", "datasets": [ "normal_2d" ] }, { "gallery_name": "vega", "example_name": "Wind Vectors", "example_url": "https://vega.github.io/vega/examples/wind-vectors/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/wind-vectors.vg.json", "categories": [ "Geographic Maps" ], "description": "A flow map of wind direction and speed over northwest Europe.", "datasets": [ "windvectors" ] }, { "gallery_name": "vega", "example_name": "Word Cloud", "example_url": "https://vega.github.io/vega/examples/word-cloud/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/word-cloud.vg.json", "categories": [ "Other Chart Types" ], "description": "A word cloud visualization depicting Vega research paper abstracts.", "datasets": [] }, { "gallery_name": "vega", "example_name": "World Map", "example_url": "https://vega.github.io/vega/examples/world-map/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/world-map.vg.json", "categories": [ "Geographic Maps" ], "description": "A configurable map of countries of the world.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega", "example_name": "Zoomable Binned Plot", "example_url": "https://vega.github.io/vega/examples/zoomable-binned-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/zoomable-binned-plot.vg.json", "categories": [ "Interaction Techniques" ], "description": "An interactive scatter plot example with binned aggregation supporting pan and zoom.", "datasets": [ "normal_2d" ] }, { "gallery_name": "vega", "example_name": "Zoomable Circle Packing", "example_url": "https://vega.github.io/vega/examples/zoomable-circle-packing/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/zoomable-circle-packing.vg.json", "categories": [ "Interaction Techniques" ], "description": "An example of a zoomable circle packing layout for hierarchical data.", "datasets": [ "flare" ] }, { "gallery_name": "vega", "example_name": "Zoomable Scatter Plot", "example_url": "https://vega.github.io/vega/examples/zoomable-scatter-plot/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/zoomable-scatter-plot.vg.json", "categories": [ "Interaction Techniques" ], "description": "An interactive scatter plot example supporting pan and zoom.", "datasets": [ "normal_2d" ] }, { "gallery_name": "vega", "example_name": "Zoomable World Map", "example_url": "https://vega.github.io/vega/examples/zoomable-world-map/", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega@79aa7d9de7b09604c5f881a09fd528d2b561d12f/docs/examples/zoomable-world-map.vg.json", "categories": [ "Geographic Maps" ], "description": "An interactive world map supporting pan and zoom.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega-lite", "example_name": "1D Strip Plot", "example_url": "https://vega.github.io/vega-lite/examples/tick_dot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/tick_dot.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "2D Histogram Heatmap", "example_url": "https://vega.github.io/vega-lite/examples/rect_binned_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/rect_binned_heatmap.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots", "Table-based Plots" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "2D Histogram Scatterplot", "example_url": "https://vega.github.io/vega-lite/examples/circle_binned.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_binned.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots", "Scatter & Strip Plots" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "A Bar Chart Encoding Color Names in the Data", "example_url": "https://vega.github.io/vega-lite/examples/bar_color_disabled_scale.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_color_disabled_scale.vl.json", "categories": [ "Bar Charts" ], "description": "A bar chart that directly encodes color names in the data.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "A comet chart showing changes between between two states", "example_url": "https://vega.github.io/vega-lite/examples/trail_comet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trail_comet.vl.json", "categories": [ "Line Charts" ], "description": null, "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Aggregate Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar_aggregate.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_aggregate.vl.json", "categories": [ "Bar Charts" ], "description": "A bar chart showing the US population distribution of age groups in 2000.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Aggregate Bar Chart (Sorted)", "example_url": "https://vega.github.io/vega-lite/examples/bar_aggregate_sort_by_encoding.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_aggregate_sort_by_encoding.vl.json", "categories": [ "Bar Charts" ], "description": "A bar chart that sorts the y-values by the x-values.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "An interactive scatter plot of global health statistics by country and year.", "example_url": "https://vega.github.io/vega-lite/examples/interactive_global_development.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_global_development.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": "Similar to the Vega version at https://vega.github.io/vega/examples/global-development/.", "datasets": [ "gapminder" ] }, { "gallery_name": "vega-lite", "example_name": "Annual Weather Heatmap", "example_url": "https://vega.github.io/vega-lite/examples/rect_heatmap_weather.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/rect_heatmap_weather.vl.json", "categories": [ "Table-based Plots" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Area Chart", "example_url": "https://vega.github.io/vega-lite/examples/area.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": null, "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "Area Chart with Gradient", "example_url": "https://vega.github.io/vega-lite/examples/area_gradient.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_gradient.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": "Google's stock price over time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Area Chart with Overlaying Lines and Point Markers", "example_url": "https://vega.github.io/vega-lite/examples/area_overlay.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_overlay.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": "Google's stock price over time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Area Chart with Rectangular Brush", "example_url": "https://vega.github.io/vega-lite/examples/interactive_area_brush.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_area_brush.vl.json", "categories": [ "Interactive Charts" ], "description": "In this example, we apply an `interval` selection to select subset of data in an area chart. The selected data is highlighted in gold by the second layer of an area mark that `filter`s its data by the `brush` selection.", "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart Highlighting Values beyond a Threshold", "example_url": "https://vega.github.io/vega-lite/examples/layer_bar_annotations.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_bar_annotations.vl.json", "categories": [ "Labeling & Annotation" ], "description": "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart Showing Argmax Value", "example_url": "https://vega.github.io/vega-lite/examples/bar_argmax.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_argmax.vl.json", "categories": [ "Advanced Calculations" ], "description": "The production budget of the movie that has the highest US Gross in each major genre.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart showing Initials of Month Names", "example_url": "https://vega.github.io/vega-lite/examples/bar_month_temporal_initial.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_month_temporal_initial.vl.json", "categories": [ "Bar Charts" ], "description": "Using `labelExpr` to show only initial letters of month names.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with Highlighting on Hover and Selection on Click", "example_url": "https://vega.github.io/vega-lite/examples/interactive_bar_select_highlight.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_bar_select_highlight.vl.json", "categories": [ "Interactive Charts" ], "description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with Label Overlays", "example_url": "https://vega.github.io/vega-lite/examples/layer_bar_labels_grey.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_bar_labels_grey.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with Negative Values and a Zero-Baseline", "example_url": "https://vega.github.io/vega-lite/examples/bar_negative.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_negative.vl.json", "categories": [ "Bar Charts" ], "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with a Minimap", "example_url": "https://vega.github.io/vega-lite/examples/bar_count_minimap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_count_minimap.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with a Spacing-Saving Y-Axis", "example_url": "https://vega.github.io/vega-lite/examples/bar_axis_space_saving.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_axis_space_saving.vl.json", "categories": [ "Bar Charts" ], "description": "Bar Chart with a spacing-saving y-axis", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Bar Chart with bars center-aligned with time unit ticks", "example_url": "https://vega.github.io/vega-lite/examples/bar_month_temporal_band_center.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_month_temporal_band_center.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Becker's Barley Trellis Plot", "example_url": "https://vega.github.io/vega-lite/examples/trellis_barley.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_barley.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "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.", "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Box Plot with Min/Max Whiskers", "example_url": "https://vega.github.io/vega-lite/examples/boxplot_minmax_2D_vertical.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/boxplot_minmax_2D_vertical.vl.json", "categories": [ "Box Plots" ], "description": "A vertical box plot showing median, min, and max body mass of penguins.", "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "Box Plot with Pre-Calculated Summaries", "example_url": "https://vega.github.io/vega-lite/examples/boxplot_preaggregated.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/boxplot_preaggregated.vl.json", "categories": [ "Box Plots" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Brushing Scatter Plot to show data on a table", "example_url": "https://vega.github.io/vega-lite/examples/brush_table.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/brush_table.vl.json", "categories": [ "Interactive Charts" ], "description": "Drag a rectangular brush to show (first 20) selected points in a table.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Bubble Plot", "example_url": "https://vega.github.io/vega-lite/examples/point_bubble.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_bubble.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Bubble Plot (Gapminder)", "example_url": "https://vega.github.io/vega-lite/examples/circle_bubble_health_income.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_bubble_health_income.vl.json", "categories": [ "Scatter & Strip Plots" ], "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/).", "datasets": [ "gapminder_health_income" ] }, { "gallery_name": "vega-lite", "example_name": "Bubble Plot (Natural Disasters)", "example_url": "https://vega.github.io/vega-lite/examples/circle_natural_disasters.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_natural_disasters.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "Visualization of global deaths from natural disasters. Copy of chart from [Our World in Data](https://ourworldindata.org/natural-catastrophes).", "datasets": [ "disasters" ] }, { "gallery_name": "vega-lite", "example_name": "Bullet Chart", "example_url": "https://vega.github.io/vega-lite/examples/facet_bullet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/facet_bullet.vl.json", "categories": [ "Other Layered Plots" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Bump Chart", "example_url": "https://vega.github.io/vega-lite/examples/line_bump.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_bump.vl.json", "categories": [ "Line Charts" ], "description": "Bump chart", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Calculate Difference from Annual Average", "example_url": "https://vega.github.io/vega-lite/examples/joinaggregate_mean_difference_by_year.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/joinaggregate_mean_difference_by_year.vl.json", "categories": [ "Advanced Calculations" ], "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.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Calculate Difference from Average", "example_url": "https://vega.github.io/vega-lite/examples/joinaggregate_mean_difference.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/joinaggregate_mean_difference.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Calculate Residuals", "example_url": "https://vega.github.io/vega-lite/examples/joinaggregate_residual_graph.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/joinaggregate_residual_graph.vl.json", "categories": [ "Advanced Calculations" ], "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.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Candlestick Chart", "example_url": "https://vega.github.io/vega-lite/examples/layer_candlestick.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_candlestick.vl.json", "categories": [ "Other Layered Plots" ], "description": "A candlestick chart inspired by an example in Protovis (http://mbostock.github.io/protovis/ex/candlestick.html)", "datasets": [ "ohlc" ] }, { "gallery_name": "vega-lite", "example_name": "Carbon Dioxide in the Atmosphere", "example_url": "https://vega.github.io/vega-lite/examples/layer_line_co2_concentration.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_line_co2_concentration.vl.json", "categories": [ "Line Charts", "Labeling & Annotation" ], "description": "This example was inspired by [Gregor Aisch](https://github.com/gka)'s [Carbon Dioxide Concentration By Decade](https://www.datawrapper.de/_/OHgEm/).", "datasets": [ "co2_concentration" ] }, { "gallery_name": "vega-lite", "example_name": "Change zorder on hover", "example_url": "https://vega.github.io/vega-lite/examples/selection_type_point_zorder.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/selection_type_point_zorder.vl.json", "categories": [ "Interactive Charts" ], "description": "Show points on top when hovered over with the pointer", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Choropleth of Unemployment Rate per County", "example_url": "https://vega.github.io/vega-lite/examples/geo_choropleth.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_choropleth.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "us_10m", "unemployment" ] }, { "gallery_name": "vega-lite", "example_name": "Colored Scatterplot", "example_url": "https://vega.github.io/vega-lite/examples/point_color_with_shape.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_color_with_shape.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "A scatterplot showing body mass and flipper lengths of penguins.", "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "Compact Trellis Grid of Bar Charts", "example_url": "https://vega.github.io/vega-lite/examples/facet_grid_bar.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/facet_grid_bar.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": "A simple grid of bar charts to compare performance data.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Comparative Likert Scale Ratings", "example_url": "https://vega.github.io/vega-lite/examples/concat_layer_voyager_result.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/concat_layer_voyager_result.vl.json", "categories": [ "Labeling & Annotation" ], "description": "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).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Connected Scatterplot (Lines with Custom Paths)", "example_url": "https://vega.github.io/vega-lite/examples/connected_scatterplot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/connected_scatterplot.vl.json", "categories": [ "Line Charts" ], "description": "A connected scatterplot can be created by customizing line `order` and adding `point` overlay in the line mark definition.", "datasets": [ "driving" ] }, { "gallery_name": "vega-lite", "example_name": "Connections among Major U.S. Airports.", "example_url": "https://vega.github.io/vega-lite/examples/airport_connections.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/airport_connections.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.", "datasets": [ "us_10m", "flights_airport", "airports" ] }, { "gallery_name": "vega-lite", "example_name": "Crossfilter (Filter)", "example_url": "https://vega.github.io/vega-lite/examples/interactive_crossfilter.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_crossfilter.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": null, "datasets": [ "flights_2k" ] }, { "gallery_name": "vega-lite", "example_name": "Crossfilter (Highlight)", "example_url": "https://vega.github.io/vega-lite/examples/interactive_layered_crossfilter.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_layered_crossfilter.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": null, "datasets": [ "flights_2k" ] }, { "gallery_name": "vega-lite", "example_name": "Cumulative Frequency Distribution", "example_url": "https://vega.github.io/vega-lite/examples/area_cumulative_freq.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_cumulative_freq.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots", "Advanced Calculations" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Density Plot", "example_url": "https://vega.github.io/vega-lite/examples/area_density.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_density.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Discretizing scales", "example_url": "https://vega.github.io/vega-lite/examples/concat_bar_scales_discretize.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/concat_bar_scales_discretize.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "Horizontally concatenated charts that show different types of discretizing scales.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Distributions and Medians of Likert Scale Ratings", "example_url": "https://vega.github.io/vega-lite/examples/layer_likert.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_likert.vl.json", "categories": [ "Labeling & Annotation" ], "description": "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).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Diverging Stacked Bar Chart (Population Pyramid)", "example_url": "https://vega.github.io/vega-lite/examples/bar_diverging_stack_population_pyramid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_diverging_stack_population_pyramid.vl.json", "categories": [ "Bar Charts" ], "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.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Diverging Stacked Bar Chart (with Neutral Parts)", "example_url": "https://vega.github.io/vega-lite/examples/bar_diverging_stack_transform.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_diverging_stack_transform.vl.json", "categories": [ "Bar Charts" ], "description": "A diverging stacked bar chart for sentiments towards a set of eight questions, displayed as percentages with neutral responses straddling the 0% mark", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Donut Chart", "example_url": "https://vega.github.io/vega-lite/examples/arc_donut.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/arc_donut.vl.json", "categories": [ "Circular Plots" ], "description": "A donut chart encodes proportional differences among a set of numeric values using angular extents.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Dot Plot with Jittering", "example_url": "https://vega.github.io/vega-lite/examples/point_offset_random.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_offset_random.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering).", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Drawing Sine and Cosine Curves with the Sequence Generator", "example_url": "https://vega.github.io/vega-lite/examples/sequence_line_fold.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/sequence_line_fold.vl.json", "categories": [ "Line Charts" ], "description": "Plots two functions using a generated sequence.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Dynamic Color Legend", "example_url": "https://vega.github.io/vega-lite/examples/dynamic_color_legend.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/dynamic_color_legend.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Earthquakes Example", "example_url": "https://vega.github.io/vega-lite/examples/interactive_geo_earthquakes.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_geo_earthquakes.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "Interactive globe visualization of earthquakes", "datasets": [ "world_110m", "earthquakes" ] }, { "gallery_name": "vega-lite", "example_name": "Error Bars Showing Confidence Interval", "example_url": "https://vega.github.io/vega-lite/examples/layer_point_errorbar_ci.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_point_errorbar_ci.vl.json", "categories": [ "Error Bars & Error Bands" ], "description": null, "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Error Bars Showing Standard Deviation", "example_url": "https://vega.github.io/vega-lite/examples/layer_point_errorbar_stdev.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_point_errorbar_stdev.vl.json", "categories": [ "Error Bars & Error Bands" ], "description": null, "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Faceted County-Level Species Habitat Maps", "example_url": "https://vega.github.io/vega-lite/examples/interactive_geo_facet_species.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_geo_facet_species.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "A grid of choropleth maps, each displaying the projected habitat distribution for a different species across US counties. Color intensity within each county represents the percentage of suitable habitat.", "datasets": [ "species", "us_10m" ] }, { "gallery_name": "vega-lite", "example_name": "Faceted Density Plot", "example_url": "https://vega.github.io/vega-lite/examples/area_density_facet.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_density_facet.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": null, "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "Filtering Top-K Items", "example_url": "https://vega.github.io/vega-lite/examples/window_top_k.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/window_top_k.vl.json", "categories": [ "Advanced Calculations" ], "description": "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Focus + Context - Smooth Histogram Zooming", "example_url": "https://vega.github.io/vega-lite/examples/interactive_bin_extent.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_bin_extent.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "flights_5k" ] }, { "gallery_name": "vega-lite", "example_name": "Gantt Chart (Ranged Bar Marks)", "example_url": "https://vega.github.io/vega-lite/examples/bar_gantt.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_gantt.vl.json", "categories": [ "Bar Charts" ], "description": "A simple bar chart with ranged data (aka Gantt Chart).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Grouped Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar_grouped.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_grouped.vl.json", "categories": [ "Bar Charts" ], "description": "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. ", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Grouped Bar Chart (Multiple Measure with Repeat)", "example_url": "https://vega.github.io/vega-lite/examples/bar_grouped_repeated.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_grouped_repeated.vl.json", "categories": [ "Bar Charts" ], "description": "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. ", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Heat Lane Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar_heatlane.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_heatlane.vl.json", "categories": [ "Bar Charts" ], "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Histogram", "example_url": "https://vega.github.io/vega-lite/examples/histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/histogram.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Histogram (from Binned Data)", "example_url": "https://vega.github.io/vega-lite/examples/bar_binned_data.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_binned_data.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Histogram with Full-Height Hover Targets for Tooltip", "example_url": "https://vega.github.io/vega-lite/examples/interactive_histogram_full_height_hover.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_histogram_full_height_hover.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Histogram with a Global Mean Overlay", "example_url": "https://vega.github.io/vega-lite/examples/layer_histogram_global_mean.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_histogram_global_mean.vl.json", "categories": [ "Labeling & Annotation" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Horizon Graph", "example_url": "https://vega.github.io/vega-lite/examples/area_horizon.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_horizon.vl.json", "categories": [ "Area Charts & Streamgraphs", "Other Layered Plots" ], "description": "Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Horizontal Bar Chart with Negative Values and Labels", "example_url": "https://vega.github.io/vega-lite/examples/bar_negative_horizontal_label.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_negative_horizontal_label.vl.json", "categories": [ "Bar Charts" ], "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Horizontal Stacked Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/stacked_bar_h.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_bar_h.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Horizontally Repeated Charts", "example_url": "https://vega.github.io/vega-lite/examples/repeat_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/repeat_histogram.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "Horizontally repeated charts that show the histograms of different parameters of cars in different countries.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Image-based Scatter Plot", "example_url": "https://vega.github.io/vega-lite/examples/scatter_image.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/scatter_image.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": null, "datasets": [ "ffox", "gimp", "icon_7zip" ] }, { "gallery_name": "vega-lite", "example_name": "Income in the U.S. by State, Faceted over Income Brackets", "example_url": "https://vega.github.io/vega-lite/examples/geo_trellis.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_trellis.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "income", "us_10m" ] }, { "gallery_name": "vega-lite", "example_name": "Interactive Average", "example_url": "https://vega.github.io/vega-lite/examples/selection_layer_bar_month.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/selection_layer_bar_month.vl.json", "categories": [ "Interactive Charts" ], "description": "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.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Interactive Dashboard with Cross Highlight", "example_url": "https://vega.github.io/vega-lite/examples/interactive_concat_layer.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_concat_layer.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": "A dashboard with cross-highlighting.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Interactive Index Chart", "example_url": "https://vega.github.io/vega-lite/examples/interactive_index_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_index_chart.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Interactive Legend", "example_url": "https://vega.github.io/vega-lite/examples/interactive_legend.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_legend.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "Interactive Scatterplot Matrix", "example_url": "https://vega.github.io/vega-lite/examples/interactive_splom.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_splom.vl.json", "categories": [ "Repeat & Concatenation", "Interactive Multi-View Displays" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Isotype Dot Plot", "example_url": "https://vega.github.io/vega-lite/examples/isotype_bar_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/isotype_bar_chart.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": "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).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Isotype Dot Plot with Emoji", "example_url": "https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/isotype_bar_chart_emoji.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": "This example was inspired by [@jakevdp](https://github.com/jakevdp) and Isotype Bar Chart by [@jwoLondon](https://github.com/jwoLondon).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Isotype Grid", "example_url": "https://vega.github.io/vega-lite/examples/isotype_grid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/isotype_grid.vl.json", "categories": [ "Interactive Charts" ], "description": "Inspired by this [D3 example by Alan Smith](http://bl.ocks.org/alansmithy/d832fc03f6e6a91e99f4). Drag region to select. This example was created by @jwoLondon.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Lasagna Plot (Dense Time-Series Heatmap)", "example_url": "https://vega.github.io/vega-lite/examples/rect_lasagna.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/rect_lasagna.vl.json", "categories": [ "Table-based Plots" ], "description": null, "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Layered Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar_layered_transparent.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_layered_transparent.vl.json", "categories": [ "Bar Charts" ], "description": "A bar chart showing the US population distribution of age groups and gender in 2000.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Layered Histogram and Cumulative Histogram", "example_url": "https://vega.github.io/vega-lite/examples/layer_cumulative_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_cumulative_histogram.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots", "Advanced Calculations" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Layered Plot with Dual-Axis", "example_url": "https://vega.github.io/vega-lite/examples/layer_dual_axis.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_dual_axis.vl.json", "categories": [ "Other Layered Plots" ], "description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`", "datasets": [ "weather" ] }, { "gallery_name": "vega-lite", "example_name": "Layering Averages over Raw Values", "example_url": "https://vega.github.io/vega-lite/examples/layer_line_mean_point_raw.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_line_mean_point_raw.vl.json", "categories": [ "Advanced Calculations", "Labeling & Annotation" ], "description": "Plot showing average data with raw values in the background.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Layering Rolling Averages over Raw Values", "example_url": "https://vega.github.io/vega-lite/examples/layer_line_rolling_mean_point_raw.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_line_rolling_mean_point_raw.vl.json", "categories": [ "Advanced Calculations", "Labeling & Annotation" ], "description": "Plot showing a 30 day rolling average with raw values in the background.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Layering text over heatmap", "example_url": "https://vega.github.io/vega-lite/examples/layer_text_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_text_heatmap.vl.json", "categories": [ "Table-based Plots", "Labeling & Annotation" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart", "example_url": "https://vega.github.io/vega-lite/examples/line.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line.vl.json", "categories": [ "Line Charts" ], "description": "Google's stock price over time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart to Show Benchmarking Results", "example_url": "https://vega.github.io/vega-lite/examples/layer_line_window.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_line_window.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Conditional Axis Properties", "example_url": "https://vega.github.io/vega-lite/examples/line_conditional_axis.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_conditional_axis.vl.json", "categories": [ "Line Charts" ], "description": "Line chart with conditional axis ticks, labels, and grid.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Confidence Interval Band", "example_url": "https://vega.github.io/vega-lite/examples/layer_line_errorband_ci.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_line_errorband_ci.vl.json", "categories": [ "Error Bars & Error Bands" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Highlighted Rectangles", "example_url": "https://vega.github.io/vega-lite/examples/layer_falkensee.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_falkensee.vl.json", "categories": [ "Labeling & Annotation" ], "description": "The population of the German city of Falkensee over time", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Markers and Invalid Values", "example_url": "https://vega.github.io/vega-lite/examples/line_skip_invalid_mid_overlay.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_skip_invalid_mid_overlay.vl.json", "categories": [ "Line Charts" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Monotone Interpolation", "example_url": "https://vega.github.io/vega-lite/examples/line_monotone.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_monotone.vl.json", "categories": [ "Line Charts" ], "description": null, "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Point Markers", "example_url": "https://vega.github.io/vega-lite/examples/line_overlay.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_overlay.vl.json", "categories": [ "Line Charts" ], "description": "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. \n\n Notes: (1) This is equivalent to adding another layer of point marks. \n (2) While `\"point\"` marks are normally semi-transparent, the overlay point marker has `opacity` = 1 by default.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Stroked Point Markers", "example_url": "https://vega.github.io/vega-lite/examples/line_overlay_stroked.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_overlay_stroked.vl.json", "categories": [ "Line Charts" ], "description": "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\"`. \n\n Notes: (1) This is equivalent to adding another layer of point marks. \n (2) While `\"point\"` marks are normally semi-transparent, the overlay point marker has `opacity` = 1 by default.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Chart with Varying Size (using the trail mark)", "example_url": "https://vega.github.io/vega-lite/examples/trail_color.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trail_color.vl.json", "categories": [ "Line Charts" ], "description": "Stock prices of 5 Tech Companies over Time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Line Charts Showing Ranks Over Time", "example_url": "https://vega.github.io/vega-lite/examples/window_rank.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/window_rank.vl.json", "categories": [ "Line Charts", "Advanced Calculations" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Line between Airports in the U.S.", "example_url": "https://vega.github.io/vega-lite/examples/geo_line.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_line.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "Line drawn between airports in the U.S. simulating a flight itinerary", "datasets": [ "us_10m", "airports" ] }, { "gallery_name": "vega-lite", "example_name": "Line chart with a dashed part", "example_url": "https://vega.github.io/vega-lite/examples/line_dashed_part.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_dashed_part.vl.json", "categories": [ "Line Charts" ], "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Line chart with varying stroke dash", "example_url": "https://vega.github.io/vega-lite/examples/line_strokedash.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_strokedash.vl.json", "categories": [ "Line Charts" ], "description": "Stock prices of 5 Tech Companies over Time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Linear Regression", "example_url": "https://vega.github.io/vega-lite/examples/layer_point_line_regression.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_point_line_regression.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Loess Regression", "example_url": "https://vega.github.io/vega-lite/examples/layer_point_line_loess.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_point_line_loess.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Log-scaled Histogram", "example_url": "https://vega.github.io/vega-lite/examples/histogram_log.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/histogram_log.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": "Log-scaled Histogram. We may improve the support of this. See https://github.com/vega/vega-lite/issues/4792.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "London Tube Lines", "example_url": "https://vega.github.io/vega-lite/examples/geo_layer_line_london.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_layer_line_london.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "This example was created by @jwoLondon.", "datasets": [ "london_boroughs", "london_centroids", "london_tube_lines" ] }, { "gallery_name": "vega-lite", "example_name": "Marginal Histograms", "example_url": "https://vega.github.io/vega-lite/examples/concat_marginal_histograms.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/concat_marginal_histograms.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "Marginal histograms show the counts along the x and y dimension.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Mean overlay over precipitation chart", "example_url": "https://vega.github.io/vega-lite/examples/layer_precipitation_mean.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_precipitation_mean.vl.json", "categories": [ "Labeling & Annotation" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Mosaic Chart with Labels", "example_url": "https://vega.github.io/vega-lite/examples/rect_mosaic_labelled_with_offset.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/rect_mosaic_labelled_with_offset.vl.json", "categories": [ "Table-based Plots" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart", "example_url": "https://vega.github.io/vega-lite/examples/line_color.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_color.vl.json", "categories": [ "Line Charts" ], "description": "Stock prices of 5 Tech Companies over Time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with Halo Stroke", "example_url": "https://vega.github.io/vega-lite/examples/line_color_halo.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_color_halo.vl.json", "categories": [ "Line Charts" ], "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.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with Labels", "example_url": "https://vega.github.io/vega-lite/examples/interactive_multi_line_label.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_multi_line_label.vl.json", "categories": [ "Interactive Charts" ], "description": "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).", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with Tooltip", "example_url": "https://vega.github.io/vega-lite/examples/interactive_multi_line_tooltip.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_multi_line_tooltip.vl.json", "categories": [ "Interactive Charts" ], "description": "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.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with Tooltip via Pivot", "example_url": "https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_multi_line_pivot_tooltip.vl.json", "categories": [ "Interactive Charts" ], "description": "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.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with an Interactive Line Highlight", "example_url": "https://vega.github.io/vega-lite/examples/interactive_line_hover.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_line_hover.vl.json", "categories": [ "Interactive Charts" ], "description": "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.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Multi Series Line Chart with an Interactive Point Highlight", "example_url": "https://vega.github.io/vega-lite/examples/interactive_line_point_hover.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_line_point_hover.vl.json", "categories": [ "Interactive Charts" ], "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.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Nested View Concatenation Aligned with Axis `minExtent`", "example_url": "https://vega.github.io/vega-lite/examples/nested_concat_align.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/nested_concat_align.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "Nested concatenation aligned by setting axis minExtent", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Non-linear Histogram", "example_url": "https://vega.github.io/vega-lite/examples/histogram_nonlinear.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/histogram_nonlinear.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": "A histogram for a data source that provides non-linear bins. Thanks to [@Saba9](https://github.com/Saba9) who helps create this example.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Normalized (Percentage) Stacked Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/stacked_bar_normalize.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_bar_normalize.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Normalized (Percentage) Stacked Bar Chart With Labels", "example_url": "https://vega.github.io/vega-lite/examples/stacked_bar_h_normalized_labeled.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_bar_h_normalized_labeled.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Normalized Stacked Area Chart", "example_url": "https://vega.github.io/vega-lite/examples/stacked_area_normalize.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_area_normalize.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": null, "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "One Dot per Airport in the U.S. Overlayed on Geoshape", "example_url": "https://vega.github.io/vega-lite/examples/geo_layer.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_layer.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "us_10m", "airports" ] }, { "gallery_name": "vega-lite", "example_name": "One Dot per Zipcode in the U.S.", "example_url": "https://vega.github.io/vega-lite/examples/geo_circle.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_circle.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "zipcodes" ] }, { "gallery_name": "vega-lite", "example_name": "Overview and Detail", "example_url": "https://vega.github.io/vega-lite/examples/interactive_overview_detail.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_overview_detail.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": null, "datasets": [ "sp500" ] }, { "gallery_name": "vega-lite", "example_name": "Paintbrush Highlight", "example_url": "https://vega.github.io/vega-lite/examples/interactive_paintbrush.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_paintbrush.vl.json", "categories": [ "Interactive Charts" ], "description": "Select multiple points with the shift key.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Parallel Coordinate Plot", "example_url": "https://vega.github.io/vega-lite/examples/parallel_coordinate.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/parallel_coordinate.vl.json", "categories": [ "Advanced Calculations" ], "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.", "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "Pie Chart", "example_url": "https://vega.github.io/vega-lite/examples/arc_pie.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/arc_pie.vl.json", "categories": [ "Circular Plots" ], "description": "A pie chart encodes proportional differences among a set of numeric values as the angular extent and area of a circular slice.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Pie Chart with Labels", "example_url": "https://vega.github.io/vega-lite/examples/layer_arc_label.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_arc_label.vl.json", "categories": [ "Circular Plots" ], "description": "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Pie Chart with percentage_tooltip", "example_url": "https://vega.github.io/vega-lite/examples/arc_pie_normalize_tooltip.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/arc_pie_normalize_tooltip.vl.json", "categories": [ "Circular Plots" ], "description": "A pie chart with a tooltip that shows the percentage covered by the hovered slice.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Population Pyramid", "example_url": "https://vega.github.io/vega-lite/examples/concat_population_pyramid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/concat_population_pyramid.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "A population pyramid for the US in 2000.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Projection explorer", "example_url": "https://vega.github.io/vega-lite/examples/geo_params_projections.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_params_projections.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "Compare different projections.", "datasets": [ "world_110m" ] }, { "gallery_name": "vega-lite", "example_name": "Pyramid Pie Chart", "example_url": "https://vega.github.io/vega-lite/examples/arc_pie_pyramid.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/arc_pie_pyramid.vl.json", "categories": [ "Circular Plots" ], "description": "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Quantile-Quantile Plot (QQ Plot)", "example_url": "https://vega.github.io/vega-lite/examples/point_quantile_quantile.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_quantile_quantile.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [ "normal_2d" ] }, { "gallery_name": "vega-lite", "example_name": "Query Widgets", "example_url": "https://vega.github.io/vega-lite/examples/interactive_query_widgets.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_query_widgets.vl.json", "categories": [ "Interactive Charts" ], "description": "Drag the sliders to highlight points.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Radial Plot", "example_url": "https://vega.github.io/vega-lite/examples/arc_radial.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/arc_radial.vl.json", "categories": [ "Circular Plots" ], "description": "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.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Ranged Dot Plot", "example_url": "https://vega.github.io/vega-lite/examples/layer_ranged_dot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_ranged_dot.vl.json", "categories": [ "Other Layered Plots" ], "description": "A ranged dot plot that uses 'layer' to convey changing life expectancy for the five most populous countries (between 1955 and 2000).", "datasets": [ "countries" ] }, { "gallery_name": "vega-lite", "example_name": "Rectangular Brush", "example_url": "https://vega.github.io/vega-lite/examples/interactive_brush.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_brush.vl.json", "categories": [ "Interactive Charts" ], "description": "Drag out a rectangular brush to highlight points.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Relative Bar Chart (Calculate Percentage of Total)", "example_url": "https://vega.github.io/vega-lite/examples/bar_percent_of_total.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_percent_of_total.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots", "Advanced Calculations" ], "description": "A bar graph showing what activites consume what percentage of the day.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Relative Frequency Histogram", "example_url": "https://vega.github.io/vega-lite/examples/histogram_rel_freq.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/histogram_rel_freq.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "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.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Repeat and Layer to Show Different Movie Measures", "example_url": "https://vega.github.io/vega-lite/examples/repeat_layer.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/repeat_layer.vl.json", "categories": [ "Line Charts", "Repeat & Concatenation" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Responsive Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar_size_responsive.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_size_responsive.vl.json", "categories": [ "Bar Charts" ], "description": "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).", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Rules (line segments) Connecting SEA to every Airport Reachable via Direct Flights", "example_url": "https://vega.github.io/vega-lite/examples/geo_rule.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_rule.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "us_10m", "airports", "flights_airport" ] }, { "gallery_name": "vega-lite", "example_name": "Scatter Plot with Text Marks", "example_url": "https://vega.github.io/vega-lite/examples/text_scatterplot_colored.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/text_scatterplot_colored.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot", "example_url": "https://vega.github.io/vega-lite/examples/point_2d.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_2d.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "A scatterplot showing horsepower and miles per gallons for various cars.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot Pan & Zoom", "example_url": "https://vega.github.io/vega-lite/examples/selection_translate_scatterplot_drag.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/selection_translate_scatterplot_drag.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot with External Links and Tooltips", "example_url": "https://vega.github.io/vega-lite/examples/point_href.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_href.vl.json", "categories": [ "Interactive Charts" ], "description": "A scatterplot showing horsepower and miles per gallons that opens a Google search for the car that you click on.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot with Filled Circles", "example_url": "https://vega.github.io/vega-lite/examples/circle.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot with Mean and Standard Deviation Overlay", "example_url": "https://vega.github.io/vega-lite/examples/layer_scatter_errorband_1D_stdev_global_mean.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_scatter_errorband_1D_stdev_global_mean.vl.json", "categories": [ "Error Bars & Error Bands" ], "description": "A scatterplot showing horsepower and miles per gallons for various cars.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Scatterplot with Null Values in Grey", "example_url": "https://vega.github.io/vega-lite/examples/point_invalid_color.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_invalid_color.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Search Input", "example_url": "https://vega.github.io/vega-lite/examples/param_search_input.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/param_search_input.vl.json", "categories": [ "Interactive Charts" ], "description": "Search to highlight the relevant car models. Regexes are supported so you can type e.g. `mazda|ford`", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Seattle Weather Exploration", "example_url": "https://vega.github.io/vega-lite/examples/interactive_seattle_weather.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/interactive_seattle_weather.vl.json", "categories": [ "Interactive Multi-View Displays" ], "description": "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.", "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Selectable Heatmap", "example_url": "https://vega.github.io/vega-lite/examples/selection_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/selection_heatmap.vl.json", "categories": [ "Interactive Charts" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Simple Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/bar.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar.vl.json", "categories": [ "Bar Charts" ], "description": "A bar chart encodes quantitative values as the extent of rectangular bars.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Simple Bar Chart with Labels", "example_url": "https://vega.github.io/vega-lite/examples/layer_bar_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_bar_labels.vl.json", "categories": [ "Bar Charts", "Labeling & Annotation" ], "description": "Bar chart with text labels. Set domain to make the frame cover the labels.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Simple Bar Chart with Labels and Emojis", "example_url": "https://vega.github.io/vega-lite/examples/layer_bar_fruit.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/layer_bar_fruit.vl.json", "categories": [ "Labeling & Annotation" ], "description": "Vega-Lite version of bar chart from https://observablehq.com/@d3/learn-d3-scales.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Slope Graph", "example_url": "https://vega.github.io/vega-lite/examples/line_slope.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_slope.vl.json", "categories": [ "Line Charts" ], "description": "Slope graph showing the change in yield for different barley sites. It shows the error in the year labels for the Morris site.", "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Stacked Area Chart", "example_url": "https://vega.github.io/vega-lite/examples/stacked_area.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_area.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": null, "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "Stacked Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/stacked_bar_weather.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_bar_weather.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Stacked Bar Chart with Rounded Corners", "example_url": "https://vega.github.io/vega-lite/examples/stacked_bar_count_corner_radius_mark.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_bar_count_corner_radius_mark.vl.json", "categories": [ "Bar Charts" ], "description": null, "datasets": [ "seattle_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Stacked Density Estimates", "example_url": "https://vega.github.io/vega-lite/examples/area_density_stacked.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/area_density_stacked.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": null, "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "Step Chart", "example_url": "https://vega.github.io/vega-lite/examples/line_step.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/line_step.vl.json", "categories": [ "Line Charts" ], "description": "Google's stock price over time.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Streamgraph", "example_url": "https://vega.github.io/vega-lite/examples/stacked_area_stream.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/stacked_area_stream.vl.json", "categories": [ "Area Charts & Streamgraphs" ], "description": null, "datasets": [ "unemployment_across_industries" ] }, { "gallery_name": "vega-lite", "example_name": "Strip Plot", "example_url": "https://vega.github.io/vega-lite/examples/tick_strip.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/tick_strip.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "Shows the relationship between horsepower and the number of cylinders using tick marks.", "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Strip plot with custom axis tick labels", "example_url": "https://vega.github.io/vega-lite/examples/circle_custom_tick_labels.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_custom_tick_labels.vl.json", "categories": [ "Scatter & Strip Plots" ], "description": "After using the numerical values to calculate the average rating, they are replaced by string labels.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Table Bubble Plot (Github Punch Card)", "example_url": "https://vega.github.io/vega-lite/examples/circle_github_punchcard.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_github_punchcard.vl.json", "categories": [ "Table-based Plots" ], "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.", "datasets": [ "github" ] }, { "gallery_name": "vega-lite", "example_name": "Table Heatmap", "example_url": "https://vega.github.io/vega-lite/examples/rect_heatmap.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/rect_heatmap.vl.json", "categories": [ "Table-based Plots" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Ternary chart", "example_url": "https://vega.github.io/vega-lite/examples/ternary.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/ternary.vl.json", "categories": [ "Advanced Calculations" ], "description": "A ternary chart example created by [Adrián Bazzana](https://www.linkedin.com/in/adrian-bazzana/).", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Three Choropleths Representing Disjoint Data from the Same Table", "example_url": "https://vega.github.io/vega-lite/examples/geo_repeat.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_repeat.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": "the population per state, engineers per state, and hurricanes per state", "datasets": [ "population_engineers_hurricanes", "us_10m" ] }, { "gallery_name": "vega-lite", "example_name": "Top-K Plot with \"Others\"", "example_url": "https://vega.github.io/vega-lite/examples/window_top_k_others.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/window_top_k_others.vl.json", "categories": [ "Advanced Calculations" ], "description": "By @manzt, adapted from https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example.", "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Area", "example_url": "https://vega.github.io/vega-lite/examples/trellis_area.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_area.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": "Stock prices of four large companies as a small multiples of area charts.", "datasets": [ "stocks" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Area Plot Showing Annual Temperatures in Seattle", "example_url": "https://vega.github.io/vega-lite/examples/trellis_area_seattle.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_area_seattle.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": "Temperature normals in Seattle. Derived from [Seattle Annual Temperate](https://vega.github.io/vega/examples/annual-temperature/) example from the Vega example gallery.", "datasets": [ "seattle_weather_hourly_normals" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/trellis_bar.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_bar.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": "A trellis bar chart showing the US population distribution of age groups and gender in 2000.", "datasets": [ "population" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Histograms", "example_url": "https://vega.github.io/vega-lite/examples/trellis_bar_histogram.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_bar_histogram.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": null, "datasets": [ "cars" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Scatter Plot (wrapped)", "example_url": "https://vega.github.io/vega-lite/examples/trellis_scatter.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_scatter.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": null, "datasets": [ "movies" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Scatter Plot Showing Anscombe's Quartet", "example_url": "https://vega.github.io/vega-lite/examples/trellis_anscombe.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_anscombe.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": "Anscombe's Quartet", "datasets": [ "anscombe" ] }, { "gallery_name": "vega-lite", "example_name": "Trellis Stacked Bar Chart", "example_url": "https://vega.github.io/vega-lite/examples/trellis_stacked_bar.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/trellis_stacked_bar.vl.json", "categories": [ "Faceting (Trellis Plot / Small Multiples)" ], "description": null, "datasets": [ "barley" ] }, { "gallery_name": "vega-lite", "example_name": "Tukey Box Plot (1.5 IQR)", "example_url": "https://vega.github.io/vega-lite/examples/boxplot_2D_vertical.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/boxplot_2D_vertical.vl.json", "categories": [ "Box Plots" ], "description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", "datasets": [ "penguins" ] }, { "gallery_name": "vega-lite", "example_name": "U.S. State Capitals Overlayed on a Map of U.S.", "example_url": "https://vega.github.io/vega-lite/examples/geo_text.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/geo_text.vl.json", "categories": [ "Maps (Geographic Displays)" ], "description": null, "datasets": [ "us_10m", "us_state_capitals" ] }, { "gallery_name": "vega-lite", "example_name": "Using the lookup transform to combine data", "example_url": "https://vega.github.io/vega-lite/examples/lookup.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/lookup.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [ "lookup_groups", "lookup_people" ] }, { "gallery_name": "vega-lite", "example_name": "Using window transform to impute missing values by averaging the previous and next values.", "example_url": "https://vega.github.io/vega-lite/examples/window_impute_null.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/window_impute_null.vl.json", "categories": [ "Advanced Calculations" ], "description": "Using window transform to impute missing values in a line chart by averaging the previous and next values.", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Vertical Concatenation", "example_url": "https://vega.github.io/vega-lite/examples/vconcat_weather.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/vconcat_weather.vl.json", "categories": [ "Repeat & Concatenation" ], "description": "Two vertically concatenated charts", "datasets": [ "weather" ] }, { "gallery_name": "vega-lite", "example_name": "Waterfall Chart of Monthly Profit and Loss", "example_url": "https://vega.github.io/vega-lite/examples/waterfall_chart.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/waterfall_chart.vl.json", "categories": [ "Advanced Calculations" ], "description": null, "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Weekly Weather Plot", "example_url": "https://vega.github.io/vega-lite/examples/bar_layered_weather.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/bar_layered_weather.vl.json", "categories": [ "Other Layered Plots" ], "description": "Inspired by this Vega example. 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.", "datasets": [ "weekly_weather" ] }, { "gallery_name": "vega-lite", "example_name": "Wheat and Wages Example", "example_url": "https://vega.github.io/vega-lite/examples/wheat_wages.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/wheat_wages.vl.json", "categories": [ "Other Layered Plots" ], "description": "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.", "datasets": [ "wheat", "monarchs" ] }, { "gallery_name": "vega-lite", "example_name": "Wilkinson Dot Plot", "example_url": "https://vega.github.io/vega-lite/examples/circle_wilkinson_dotplot.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/circle_wilkinson_dotplot.vl.json", "categories": [ "Histograms, Density Plots, and Dot Plots" ], "description": "A Wilkinson Dot Plot", "datasets": [] }, { "gallery_name": "vega-lite", "example_name": "Wind Vector Map", "example_url": "https://vega.github.io/vega-lite/examples/point_angle_windvector.html", "spec_url": "https://cdn.jsdelivr.net/gh/vega/vega-lite@91eeeb8c2b8a4cf2cf9c1ea238667da0216d7a1c/examples/specs/point_angle_windvector.vl.json", "categories": [ "Table-based Plots" ], "description": "Vector array map showing wind speed and direction.", "datasets": [ "windvectors" ] } ]