diff --git a/.gitignore b/.gitignore index a719d313..b5e35c29 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ build node_modules */**/__pycache__ .venv -*/**/*.ipynb \ No newline at end of file +*/**/*.ipynb +.worktrees \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7692f9e7..79aaec41 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -50,6 +50,23 @@ For datasets requiring processing: - Ensure reproducibility with deterministic outputs and fixed random seeds when applicable - See `scripts/flights.py` as an example +### Gallery Examples Registry + +The `gallery_examples.json` file catalogs examples from Vega, Vega-Lite, and Altair galleries, tracking which datasets each example uses. + +**When to regenerate:** +- After new releases of Vega, Vega-Lite, or Altair that add/remove examples +- When examples are renamed or reorganized upstream +- Periodically (e.g., quarterly) to pick up new examples + +**Commands:** +```bash +npm run update-gallery # Regenerate the file +npm run update-gallery -- --dry-run --verbose # Test without writing +``` + +Configuration lives in `_data/gallery_examples.toml`. Runtime is ~2-4 minutes (fetches ~470 specs). + ## Metadata and Documentation We follow the [Data Package Standard 2.0](https://datapackage.org/) with: diff --git a/README.md b/README.md index 837c9bab..f1591208 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,8 @@ Visualizations built with these datasets are showcased in several galleries: - [Altair Example Gallery](https://altair-viz.github.io/gallery/index.html) - [Observable Vega Examples](https://observablehq.com/@vega) +The [gallery_examples.json](gallery_examples.json) file provides a cross-reference catalog mapping ~470 gallery examples to the datasets they use, enabling dataset-first exploration across all three ecosystems. + ## Data Usage Note - The datasets are designed for instructional and demonstration purposes. diff --git a/_data/datapackage_additions.toml b/_data/datapackage_additions.toml index 22431870..08278804 100644 --- a/_data/datapackage_additions.toml +++ b/_data/datapackage_additions.toml @@ -1888,3 +1888,80 @@ path = "https://download.geonames.org/export/zip/" name = "CC-BY-4.0" title = "Creative Commons Attribution 4.0 International" path = "https://creativecommons.org/licenses/by/4.0/" + +# ============================================================================== +# Gallery Examples Registry (meta-resource, not in /data/) +# ============================================================================== + +[[resources]] +path = "gallery_examples.json" +description = """Cross-reference catalog mapping gallery examples to vega-datasets resources. +Tracks which datasets from the vega-datasets collection are used in example +visualizations across Vega, Vega-Lite, and Altair galleries. Enables discovery +of visualization patterns by dataset or technique, supports learning paths, +and provides structured context for AI coding assistants.""" + +[[resources.sources]] +title = "Vega Gallery" +path = "https://vega.github.io/vega/examples/" + +[[resources.sources]] +title = "Vega-Lite Gallery" +path = "https://vega.github.io/vega-lite/examples/" + +[[resources.sources]] +title = "Altair Gallery" +path = "https://altair-viz.github.io/gallery/" + +[[resources.licenses]] +name = "BSD-3-Clause" +title = "The 3-Clause BSD License" +path = "https://opensource.org/license/bsd-3-clause" + +[resources.schema] + +[[resources.schema.fields]] +name = "id" +type = "integer" +description = "Unique sequential identifier for the example" + +[[resources.schema.fields]] +name = "gallery_name" +type = "string" +description = "Name of the gallery this example belongs to" +constraints = { enum = ["vega", "vega-lite", "altair"] } + +[[resources.schema.fields]] +name = "example_name" +type = "string" +description = "Human-readable example title" + +[[resources.schema.fields]] +name = "example_url" +type = "string" +description = "URL to rendered example in the gallery" + +[[resources.schema.fields]] +name = "spec_url" +type = "string" +description = "URL to source specification or code" + +[[resources.schema.fields]] +name = "categories" +type = "array" +description = "Tags or categories for the example (e.g., 'Bar Charts', 'Interactive')" + +[[resources.schema.fields]] +name = "description" +type = "string" +description = "Optional description of what the example demonstrates (may be null)" + +[[resources.schema.fields]] +name = "datasets" +type = "array" +description = "Dataset names referencing resource.name in this package" + +[[resources.schema.fields]] +name = "techniques" +type = "array" +description = "Visualization techniques used (e.g., 'transform:window', 'interaction:selection')" diff --git a/_data/gallery_examples.toml b/_data/gallery_examples.toml new file mode 100644 index 00000000..30ab129d --- /dev/null +++ b/_data/gallery_examples.toml @@ -0,0 +1,103 @@ +# Configuration for gallery_examples collection script +# This file externalizes URLs, mappings, and settings to make maintenance easier. + +# ============================================================================ +# Altair Dataset Name Mappings +# ============================================================================ +# +# LEGACY SUPPORT: This section provides backward compatibility for Altair v5.x. +# +# As of Altair v6 (PR #3859, merged 2025-10-26), Altair uses canonical +# vega-datasets names directly. When tracking Altair main branch (v6+), +# this mapping section should remain empty. +# +# Manual mappings may be added if: +# 1. Tracking older Altair releases (v5.x) that use camelCase API names +# 2. Custom Altair forks with different naming conventions +# 3. Testing against historical Altair versions +# +# Format: altair_api_name = "canonical_datapackage_name" + +[altair.name_mapping] +# Empty mapping section - kept for backward compatibility with Altair v5.x +# +# Altair v6+ (PR #3859, merged 2025-10-26) uses canonical vega-datasets names +# directly, so no mappings are needed when tracking Altair main branch. +# +# VERSION TRACKING: This configuration currently tracks Altair main branch (v6+). +# The git reference is hardcoded in generate_gallery_examples.py (line 1135). +# To track a specific Altair version, you must modify the Python script to use +# a different git ref (e.g., "v5.4.1" or "v6.0.0" instead of "main"). +# +# TESTING WITH ALTAIR V5: If you need to regenerate examples from Altair v5.x +# (e.g., for comparison or regression testing): +# 1. Modify generate_gallery_examples.py to fetch from Altair v5.x tag +# 2. Uncomment the camelCase mappings below +# 3. Run the script to regenerate gallery_examples.json +# 4. After testing, restore this section and the script to v6+ configuration +# +# Altair v5.x mappings (uncomment if testing with v5.x): +# londonBoroughs = "london_boroughs" +# londonCentroids = "london_centroids" +# londonTubeLines = "london_tube_lines" + +# ============================================================================ +# Data Source URLs +# ============================================================================ +# +# URLs for fetching gallery metadata and dataset catalog. +# All URLs point to the main/master branch for stable releases. + +[sources] +# Vega-datasets canonical dataset catalog +datapackage_url = "https://raw.githubusercontent.com/vega/vega-datasets/main/datapackage.json" + +# Vega-Lite gallery examples metadata +vega_lite_examples_url = "https://raw.githubusercontent.com/vega/vega-lite/main/site/_data/examples.json" + +# Vega gallery examples metadata +vega_examples_url = "https://raw.githubusercontent.com/vega/vega/main/docs/_data/examples.json" + +# Altair example directories +# The script fetches Python files from both syntax styles +# +# STABILITY NOTE: The script currently fetches from Altair's main branch +# (hardcoded in generate_gallery_examples.py). This tracks the latest Altair v6+ +# development but creates a moving target dependency. For production stability, +# consider pinning to a specific Altair release tag after v6.0.0 is released. +# +# Current approach assumes Altair main is stable post-v6 merge (PR #3859). +altair_examples_dirs = [ + "tests/examples_methods_syntax", + "tests/examples_arguments_syntax", +] + +# ============================================================================ +# Output Configuration +# ============================================================================ +# +# Default output settings for the generated JSON file. + +[output] +# Default output file path (relative to repository root) +# Can be overridden with --output CLI argument +default_output_path = "gallery_examples.json" + +# Dry run mode (doesn't write output file) +# Can be overridden with --dry-run CLI flag +dry_run = false + +# ============================================================================ +# Network Settings +# ============================================================================ +# +# HTTP request configuration for fetching remote resources. + +[network] +# Timeout in seconds for HTTP requests +# Used for fetching metadata files and individual example specifications +timeout = 30 + +# Maximum number of retries for failed requests (future use) +# Currently not implemented, but reserved for potential retry logic +max_retries = 3 diff --git a/datapackage.json b/datapackage.json index 041e2645..2528da25 100644 --- a/datapackage.json +++ b/datapackage.json @@ -20,7 +20,7 @@ } ], "version": "3.2.1", - "created": "2026-02-02T13:19:39.437222+00:00", + "created": "2026-02-06T03:35:56.119502+00:00", "resources": [ { "name": "icon_7zip", @@ -3993,6 +3993,95 @@ } ] } + }, + { + "name": "gallery_examples", + "type": "json", + "description": "Cross-reference catalog mapping gallery examples to vega-datasets resources.\nTracks which datasets from the vega-datasets collection are used in example\nvisualizations across Vega, Vega-Lite, and Altair galleries. Enables discovery\nof visualization patterns by dataset or technique, supports learning paths,\nand provides structured context for AI coding assistants.", + "licenses": [ + { + "name": "BSD-3-Clause", + "title": "The 3-Clause BSD License", + "path": "https://opensource.org/license/bsd-3-clause" + } + ], + "sources": [ + { + "title": "Vega Gallery", + "path": "https://vega.github.io/vega/examples/" + }, + { + "title": "Vega-Lite Gallery", + "path": "https://vega.github.io/vega-lite/examples/" + }, + { + "title": "Altair Gallery", + "path": "https://altair-viz.github.io/gallery/" + } + ], + "path": "gallery_examples.json", + "scheme": "file", + "format": "json", + "mediatype": "application/json", + "encoding": "utf-8", + "hash": "sha1:35e63b2ef7e5d9d802710e81bb10ab62898563f0", + "bytes": 300960, + "schema": { + "fields": [ + { + "name": "id", + "type": "integer", + "description": "Unique sequential identifier for the example" + }, + { + "name": "gallery_name", + "type": "string", + "description": "Name of the gallery this example belongs to", + "constraints": { + "enum": [ + "vega", + "vega-lite", + "altair" + ] + } + }, + { + "name": "example_name", + "type": "string", + "description": "Human-readable example title" + }, + { + "name": "example_url", + "type": "string", + "description": "URL to rendered example in the gallery" + }, + { + "name": "spec_url", + "type": "string", + "description": "URL to source specification or code" + }, + { + "name": "categories", + "type": "array", + "description": "Tags or categories for the example (e.g., 'Bar Charts', 'Interactive')" + }, + { + "name": "description", + "type": "string", + "description": "Optional description of what the example demonstrates (may be null)" + }, + { + "name": "datasets", + "type": "array", + "description": "Dataset names referencing resource.name in this package" + }, + { + "name": "techniques", + "type": "array", + "description": "Visualization techniques used (e.g., 'transform:window', 'interaction:selection')" + } + ] + } } ] } \ No newline at end of file diff --git a/datapackage.md b/datapackage.md index cff14ecf..1079eab7 100644 --- a/datapackage.md +++ b/datapackage.md @@ -1,5 +1,5 @@ # vega-datasets -`3.2.1` | [GitHub](git+http://github.com/vega/vega-datasets.git) | 2026-02-02 13:19:39 [UTC] +`3.2.1` | [GitHub](git+http://github.com/vega/vega-datasets.git) | 2026-02-06 03:35:56 [UTC] Common repository for example datasets used by Vega related projects. BSD-3-Clause license applies only to package code and infrastructure. Users should verify their use of datasets @@ -1712,9 +1712,9 @@ in turn is a redistribution of the Census Bureau's cartographic boundary shapefi | TopoJSON US Atlas | https://github.com/topojson/us-atlas | | US Census Bureau Cartographic Boundary FIles | https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html | ### licenses -| name | title | path | -|:-------|:------------------------------|:------------------------------------------------------------| -| ISC | TopoJSON US Atlas ISC License | https://github.com/topojson/us-atlas/blob/master/LICENSE.md | +| name | title | path | +|:-------|:------------------------------|:---------------------------------------------------------| +| ISC | TopoJSON US Atlas ISC License | https://github.com/topojson/us-atlas/blob/master/LICENSE | ## `us_employment` ### path us-employment.csv @@ -1911,10 +1911,10 @@ resource for creating web-based world maps where precise boundary detail isn't r | TopoJSON World Atlas (Likely original source, processed from Natural Earth data) | https://github.com/topojson/world-atlas | | Natural Earth Data - Admin 0 Countries (1:110m) | https://www.naturalearthdata.com/downloads/110m-cultural-vectors/110m-admin-0-countries/ | ### licenses -| name | title | path | -|:---------|:---------------------------------|:---------------------------------------------------------------| -| ISC | TopoJSON World Atlas ISC License | https://github.com/topojson/world-atlas/blob/master/LICENSE.md | -| other-pd | Natural Earth Data Public Domain | https://www.naturalearthdata.com/about/terms-of-use/ | +| name | title | path | +|:---------|:---------------------------------|:------------------------------------------------------------| +| ISC | TopoJSON World Atlas ISC License | https://github.com/topojson/world-atlas/blob/master/LICENSE | +| other-pd | Natural Earth Data Public Domain | https://www.naturalearthdata.com/about/terms-of-use/ | ## `zipcodes` ### path zipcodes.csv @@ -1945,4 +1945,36 @@ data was collected. For current postal code data, refer to the main GeoNames dat ### licenses | name | title | path | |:----------|:-----------------------------------------------|:---------------------------------------------| -| CC-BY-4.0 | Creative Commons Attribution 4.0 International | https://creativecommons.org/licenses/by/4.0/ | \ No newline at end of file +| CC-BY-4.0 | Creative Commons Attribution 4.0 International | https://creativecommons.org/licenses/by/4.0/ | +## `gallery_examples` +### path +gallery_examples.json +### description +Cross-reference catalog mapping gallery examples to vega-datasets resources. +Tracks which datasets from the vega-datasets collection are used in example +visualizations across Vega, Vega-Lite, and Altair galleries. Enables discovery +of visualization patterns by dataset or technique, supports learning paths, +and provides structured context for AI coding assistants. +### schema + +| name | type | description | constraints | +|:-------------|:--------|:----------------------------------------------------------------------------------|:------------------------------------------| +| id | integer | Unique sequential identifier for the example | | +| gallery_name | string | Name of the gallery this example belongs to | {'enum': ['vega', 'vega-lite', 'altair']} | +| example_name | string | Human-readable example title | | +| example_url | string | URL to rendered example in the gallery | | +| spec_url | string | URL to source specification or code | | +| categories | array | Tags or categories for the example (e.g., 'Bar Charts', 'Interactive') | | +| description | string | Optional description of what the example demonstrates (may be null) | | +| datasets | array | Dataset names referencing resource.name in this package | | +| techniques | array | Visualization techniques used (e.g., 'transform:window', 'interaction:selection') | | +### sources +| title | path | +|:------------------|:-------------------------------------------| +| Vega Gallery | https://vega.github.io/vega/examples/ | +| Vega-Lite Gallery | https://vega.github.io/vega-lite/examples/ | +| Altair Gallery | https://altair-viz.github.io/gallery/ | +### licenses +| name | title | path | +|:-------------|:-------------------------|:--------------------------------------------| +| BSD-3-Clause | The 3-Clause BSD License | https://opensource.org/license/bsd-3-clause | \ No newline at end of file diff --git a/gallery_examples.json b/gallery_examples.json new file mode 100644 index 00000000..35e63b2e --- /dev/null +++ b/gallery_examples.json @@ -0,0 +1,8570 @@ +[ + { + "gallery_name": "altair", + "example_name": "2D Histogram Heatmap", + "example_url": "https://altair-viz.github.io/gallery/histogram_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/histogram_heatmap.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a heatmap from binned quantitative data.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 1 + }, + { + "gallery_name": "altair", + "example_name": "2D Histogram Scatter Plot", + "example_url": "https://altair-viz.github.io/gallery/histogram_scatterplot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/histogram_scatterplot.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a 2d histogram scatter plot.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 2 + }, + { + "gallery_name": "altair", + "example_name": "Annual Weather Heatmap", + "example_url": "https://altair-viz.github.io/gallery/annual_weather_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/annual_weather_heatmap.py", + "categories": [ + "Tables" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [], + "id": 3 + }, + { + "gallery_name": "altair", + "example_name": "Anscombe's Quartet", + "example_url": "https://altair-viz.github.io/gallery/anscombe_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/anscombe_plot.py", + "categories": [ + "Case Studies" + ], + "description": "`Anscombe's Quartet `_ is a famous dataset constructed by Francis Anscombe. It is made of 4 different subsets of data. Each subset has very different characteristics, even though common summary statistics such as mean and variance are identical. This example shows how to make a faceted plot, with each facet showing a different subset of the data.", + "datasets": [ + "anscombe" + ], + "techniques": [ + "composition:facet" + ], + "id": 4 + }, + { + "gallery_name": "altair", + "example_name": "Area Chart with Gradient", + "example_url": "https://altair-viz.github.io/gallery/area_chart_gradient.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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. For more information about gradient options see the Vega-Lite `Gradient documentation `_.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 5 + }, + { + "gallery_name": "altair", + "example_name": "Atmospheric CO2 Concentration", + "example_url": "https://altair-viz.github.io/gallery/co2_concentration.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/co2_concentration.py", + "categories": [ + "Case Studies" + ], + "description": "This example is a fully developed line chart that uses a window transformation. It was inspired by `Gregor Aisch's work at datawrapper `_.", + "datasets": [ + "co2_concentration" + ], + "techniques": [ + "transform:calculate", + "transform:filter", + "transform:window" + ], + "id": 6 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/bar_chart_with_single_threshold.py", + "categories": [ + "Bar Charts" + ], + "description": "This example shows a bar chart highlighting values beyond a threshold.", + "datasets": [], + "techniques": [ + "transform:filter" + ], + "id": 7 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "interaction:conditional" + ], + "id": 8 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "transform:calculate", + "transform:filter" + ], + "id": 9 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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.) Based on https://vega.github.io/vega-lite/examples/interactive_bar_select_highlight.html", + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 10 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 11 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:stack" + ], + "id": 12 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 13 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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. For a more polished version of this chart, see :ref:`gallery_wheat_wages`.", + "datasets": [ + "wheat" + ], + "techniques": [], + "id": 14 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "interaction:conditional" + ], + "id": 15 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [], + "id": 16 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "transform:window" + ], + "id": 17 + }, + { + "gallery_name": "altair", + "example_name": "Bar Chart with Rounded Edges", + "example_url": "https://altair-viz.github.io/gallery/bar_rounded.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 18 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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": [], + "techniques": [], + "id": 19 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/beckers_barley_facet.py", + "categories": [ + "Case Studies" + ], + "description": "The example demonstrates the faceted charts created by Richard Becker, William Cleveland and others in the 1990s. Using the visualization technique where each row is a different site (i.e. the chart is faceted by site), they identified an anomaly in a widely used agriculatural dataset, where the \"Morris\" site accidentally had the years 1931 and 1932 swapped. They named this `\"The Morris Mistake.\" `_.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet" + ], + "id": 20 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/beckers_barley_wrapped_facet.py", + "categories": [ + "Case Studies" + ], + "description": "The example demonstrates the faceted charts created by Richard Becker, William Cleveland and others in the 1990s. Using the visualization technique where each row is a different site (i.e. the chart is faceted by site), they identified an anomaly in a widely used agriculatural dataset, where the \"Morris\" site accidentally had the years 1931 and 1932 swapped. They named this `\"The Morris Mistake.\" `_.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet" + ], + "id": 21 + }, + { + "gallery_name": "altair", + "example_name": "Boxplot with Min/Max Whiskers", + "example_url": "https://altair-viz.github.io/gallery/boxplot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/boxplot.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a boxplot using US Population data from 2000. Note that the default value of the `extent` property is 1.5, which represents the convention of extending the whiskers to the furthest points within 1.5 * IQR from the first and third quartile.", + "datasets": [ + "population" + ], + "techniques": [ + "mark:boxplot" + ], + "id": 22 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/scatter_linked_table.py", + "categories": [ + "Scatter Plots" + ], + "description": "A scatter plot of the cars dataset, with data tables for horsepower, MPG, and origin. The tables update to reflect the selection on the scatter plot.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter", + "transform:window" + ], + "id": 23 + }, + { + "gallery_name": "altair", + "example_name": "Bubble Plot", + "example_url": "https://altair-viz.github.io/gallery/bubble_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/bubble_plot.py", + "categories": [ + "Scatter Plots" + ], + "description": "This example shows how to make a bubble plot.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 24 + }, + { + "gallery_name": "altair", + "example_name": "Bump Chart", + "example_url": "https://altair-viz.github.io/gallery/bump_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/bump_chart.py", + "categories": [ + "Line Charts" + ], + "description": "This example shows a bump chart. The data is first grouped into six-month intervals using pandas. The ranks are computed by Altair using a window transform.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:window" + ], + "id": 25 + }, + { + "gallery_name": "altair", + "example_name": "Calculate Residuals", + "example_url": "https://altair-viz.github.io/gallery/calculate_residuals.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019. Adapted from `Calculate Residuals `_.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:calculate", + "transform:filter", + "transform:joinaggregate" + ], + "id": 26 + }, + { + "gallery_name": "altair", + "example_name": "Calculating Percentage of Total", + "example_url": "https://altair-viz.github.io/gallery/percentage_of_total.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/percentage_of_total.py", + "categories": [ + "Bar Charts" + ], + "description": "This chart demonstrates how to use a joinaggregate transform to display data values as a percentage of total.", + "datasets": [], + "techniques": [ + "transform:calculate", + "transform:joinaggregate" + ], + "id": 27 + }, + { + "gallery_name": "altair", + "example_name": "Candlestick Chart", + "example_url": "https://altair-viz.github.io/gallery/candlestick_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/candlestick_chart.py", + "categories": [ + "Advanced Calculations" + ], + "description": "A candlestick chart inspired from `Protovis `_. This example shows the performance of the Chicago Board Options Exchange `Volatility Index `_ (VIX) in the summer of 2009. The thick bar represents the opening and closing prices, while 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" + ], + "techniques": [ + "interaction:conditional" + ], + "id": 28 + }, + { + "gallery_name": "altair", + "example_name": "Choropleth Map", + "example_url": "https://altair-viz.github.io/gallery/choropleth.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/choropleth.py", + "categories": [ + "Maps" + ], + "description": "A choropleth map of unemployment rate per county in the US", + "datasets": [ + "unemployment", + "us_10m" + ], + "techniques": [ + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 29 + }, + { + "gallery_name": "altair", + "example_name": "Comet Chart", + "example_url": "https://altair-viz.github.io/gallery/comet_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/comet_chart.py", + "categories": [ + "Advanced Calculations" + ], + "description": "Inspired by `Zan Armstrong's comet chart `_ this plot uses ``mark_trail`` to visualize change of grouped data over time. A more elaborate example and explanation of creating comet charts in Altair is shown in `this blogpost `_.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet", + "mark:trail", + "transform:calculate", + "transform:fold", + "transform:pivot" + ], + "id": 30 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/bar_chart_faceted_compact.py", + "categories": [ + "Bar Charts" + ], + "description": "A simple grid of bar charts to compare performance data, one subchart for each subset of the data.", + "datasets": [], + "techniques": [ + "composition:facet" + ], + "id": 31 + }, + { + "gallery_name": "altair", + "example_name": "Confidence Interval Ellipses", + "example_url": "https://altair-viz.github.io/gallery/deviation_ellipses.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/deviation_ellipses.py", + "categories": [ + "Case Studies" + ], + "description": "This example shows bivariate deviation ellipses of flipper length and body mass of three penguin species. Inspired by `ggplot2.stat_ellipse`_ and directly based on `Deviation ellipses example`_ by `@essicolo`_ .. _ggplot2.stat_ellipse: https://ggplot2.tidyverse.org/reference/stat_ellipse.html#ref-examples .. _Deviation ellipses example: https://github.com/vega/altair/pull/514 .. _@essicolo: https://github.com/essicolo", + "datasets": [ + "penguins" + ], + "techniques": [], + "id": 32 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/airport_connections.py", + "categories": [ + "Case Studies" + ], + "description": "This example shows all the connections between major U.S. airports. Lookup transformations are used to find the coordinates of each airport and connecting airports. Connections are displayed on pointerover via a single selection.", + "datasets": [ + "airports", + "flights_airport", + "us_10m" + ], + "techniques": [ + "geo:coordinates", + "geo:shape", + "geo:topojson", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:filter", + "transform:lookup" + ], + "id": 33 + }, + { + "gallery_name": "altair", + "example_name": "Cumulative Count Chart", + "example_url": "https://altair-viz.github.io/gallery/cumulative_count_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/cumulative_count_chart.py", + "categories": [ + "Distributions" + ], + "description": "This example shows an area chart with cumulative count. Adapted from https://vega.github.io/vega-lite/examples/area_cumulative_freq.html", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:stack", + "transform:window" + ], + "id": 34 + }, + { + "gallery_name": "altair", + "example_name": "Dendrogram of Hierarchical Clustering", + "example_url": "https://altair-viz.github.io/gallery/dendrogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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 https://scikit-learn.org/stable/auto_examples/cluster/plot_agglomerative_dendrogram.html", + "datasets": [], + "techniques": [], + "id": 35 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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). Adapted from `Distributions and Medians of Likert Scale Ratings `_.", + "datasets": [], + "techniques": [ + "transform:aggregate", + "transform:filter" + ], + "id": 36 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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": [], + "techniques": [], + "id": 37 + }, + { + "gallery_name": "altair", + "example_name": "Donut Chart", + "example_url": "https://altair-viz.github.io/gallery/donut_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/donut_chart.py", + "categories": [ + "Circular Plots" + ], + "description": "This example shows how to make a Donut Chart using ``mark_arc``. This is adapted from a corresponding Vega-Lite Example: `Donut Chart `_.", + "datasets": [], + "techniques": [ + "mark:arc" + ], + "id": 38 + }, + { + "gallery_name": "altair", + "example_name": "Dot Dash Plot", + "example_url": "https://altair-viz.github.io/gallery/dot_dash_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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 on a JavaScript implementation by `g3o2 `_.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 39 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/empirical_cumulative_distribution_function.py", + "categories": [ + "Distributions" + ], + "description": "This example shows an empirical cumulative distribution function.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:window" + ], + "id": 40 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/errorbars_with_ci.py", + "categories": [ + "Uncertainties And Trends" + ], + "description": "This example shows how to show error bars using confidence intervals. The confidence intervals are computed internally in vega by a non-parametric `bootstrap of the mean `_.", + "datasets": [ + "barley" + ], + "techniques": [ + "mark:error" + ], + "id": 41 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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 in the years of 1930s.", + "datasets": [ + "barley" + ], + "techniques": [ + "mark:error" + ], + "id": 42 + }, + { + "gallery_name": "altair", + "example_name": "Faceted Area Chart", + "example_url": "https://altair-viz.github.io/gallery/area_faceted.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/area_faceted.py", + "categories": [ + "Area Charts" + ], + "description": "Multiple area subcharts, one for each company. We also show filtering out one of the companies, and sorting the companies in a custom order.", + "datasets": [ + "stocks" + ], + "techniques": [ + "composition:facet", + "transform:filter" + ], + "id": 43 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "composition:facet", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 44 + }, + { + "gallery_name": "altair", + "example_name": "Faceted Histogram", + "example_url": "https://altair-viz.github.io/gallery/distributions_faceted_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/distributions_faceted_histogram.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a basic faceted histogram, with one histogram subplot for different subsets of the data. Based off the vega-lite example: https://vega.github.io/vega-lite/examples/trellis_bar_histogram.html", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:facet", + "transform:aggregate", + "transform:bin" + ], + "id": 45 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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. Note the use of different predicates to filter based on both a list and a range.", + "datasets": [ + "disasters" + ], + "techniques": [ + "composition:facet", + "transform:filter", + "transform:window" + ], + "id": 46 + }, + { + "gallery_name": "altair", + "example_name": "Faceted Scatter Plot", + "example_url": "https://altair-viz.github.io/gallery/scatter_faceted.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "composition:facet" + ], + "id": 47 + }, + { + "gallery_name": "altair", + "example_name": "Faceted Stacked Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/bar_faceted_stacked.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/bar_faceted_stacked.py", + "categories": [ + "Bar Charts" + ], + "description": "A horizontal stacked bar chart using barley crop yield data. The chart is horizontally faceted based on the year, and vertically faceted based on variety.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet" + ], + "id": 48 + }, + { + "gallery_name": "altair", + "example_name": "Filled Step Chart", + "example_url": "https://altair-viz.github.io/gallery/filled_step_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "transform:filter" + ], + "id": 49 + }, + { + "gallery_name": "altair", + "example_name": "Gantt Chart", + "example_url": "https://altair-viz.github.io/gallery/gantt_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/gantt_chart.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example shows how to make a simple Gantt chart.", + "datasets": [], + "techniques": [], + "id": 50 + }, + { + "gallery_name": "altair", + "example_name": "Gapminder Bubble Plot", + "example_url": "https://altair-viz.github.io/gallery/gapminder_bubble_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/gapminder_bubble_plot.py", + "categories": [ + "Case Studies" + ], + "description": "This example shows how to make 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' `_.", + "datasets": [ + "gapminder_health_income" + ], + "techniques": [], + "id": 51 + }, + { + "gallery_name": "altair", + "example_name": "Global Deaths from Natural Disasters", + "example_url": "https://altair-viz.github.io/gallery/natural_disasters.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:filter" + ], + "id": 52 + }, + { + "gallery_name": "altair", + "example_name": "Grouped Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/grouped_bar_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/grouped_bar_chart.py", + "categories": [ + "Bar Charts" + ], + "description": "This example shows a grouped bar chart.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet" + ], + "id": 53 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/grouped_bar_chart_with_error_bars.py", + "categories": [ + "Bar Charts" + ], + "description": "This example shows a grouped bar chart with error bars.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet", + "composition:layer", + "mark:error" + ], + "id": 54 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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: `Grouped Bar Chart `_.", + "datasets": [], + "techniques": [], + "id": 55 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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": [], + "techniques": [ + "composition:layer" + ], + "id": 56 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/groupby-map.py", + "categories": [ + "Maps" + ], + "description": "This is a layered geographic visualization that groups points by state.", + "datasets": [ + "airports", + "us_10m" + ], + "techniques": [ + "geo:coordinates", + "geo:shape", + "geo:topojson", + "transform:aggregate" + ], + "id": 57 + }, + { + "gallery_name": "altair", + "example_name": "Heat Lane Chart", + "example_url": "https://altair-viz.github.io/gallery/heat_lane.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:joinaggregate" + ], + "id": 58 + }, + { + "gallery_name": "altair", + "example_name": "Hexbin Chart", + "example_url": "https://altair-viz.github.io/gallery/hexbins.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/hexbins.py", + "categories": [ + "Tables" + ], + "description": "This example shows a hexbin chart.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:calculate" + ], + "id": 59 + }, + { + "gallery_name": "altair", + "example_name": "Histogram with Gradient Color", + "example_url": "https://altair-viz.github.io/gallery/histogram_gradient_color.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/histogram_gradient_color.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a histogram with gradient color. The low-high IMDB rating is represented with the color scheme `pinkyellowgreen`.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 60 + }, + { + "gallery_name": "altair", + "example_name": "Histogram with Responsive Bins", + "example_url": "https://altair-viz.github.io/gallery/histogram_responsive.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/histogram_responsive.py", + "categories": [ + "Distributions" + ], + "description": "This shows an example of a histogram with bins that are responsive to a selection domain. Click and drag on the bottom panel to see the bins change on the top panel.", + "datasets": [ + "flights_5k" + ], + "techniques": [ + "composition:concat", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:bin", + "transform:calculate" + ], + "id": 61 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/histogram_with_a_global_mean_overlay.py", + "categories": [ + "Distributions" + ], + "description": "This example shows a histogram with a global mean overlay.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 62 + }, + { + "gallery_name": "altair", + "example_name": "Horizon Graph", + "example_url": "https://altair-viz.github.io/gallery/horizon_graph.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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": [], + "techniques": [ + "transform:calculate" + ], + "id": 63 + }, + { + "gallery_name": "altair", + "example_name": "Horizontal Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/bar_chart_horizontal.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 64 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/grouped_bar_chart_horizontal.py", + "categories": [ + "Bar Charts" + ], + "description": "This example shows a horizontal grouped bar chart.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet" + ], + "id": 65 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 66 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Average", + "example_url": "https://altair-viz.github.io/gallery/selection_layer_bar_month.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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 (shown in grey). The brush selection parameterizes the red guideline, which visualizes the average value within the selected interval.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter" + ], + "id": 67 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Chart with Aggregation", + "example_url": "https://altair-viz.github.io/gallery/interactive_aggregation.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interactive_aggregation.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows an interactive chart where the range binder controls a threshold as rule where the datapoints on the left-side are aggregated and on the right-side are drawn as is. The ability to slide back and fourth may help you understand how the visualization represents the aggregation. Adapted from an example by @dwootton.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:filter" + ], + "id": 68 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interactive_cross_highlight.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows an interactive chart where selections in one portion of the chart affect what is shown in other panels. Click on the bar chart to see a detail of the distribution in the upper panel.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:bin", + "transform:filter" + ], + "id": 69 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Crossfilter", + "example_url": "https://altair-viz.github.io/gallery/interactive_layered_crossfilter.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interactive_layered_crossfilter.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows a multi-panel view of the same data, where you can interactively select a portion of the data in any of the panels to highlight that portion in any of the other panels.", + "datasets": [ + "flights_2k" + ], + "techniques": [ + "composition:facet", + "composition:layer", + "composition:repeat", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:filter" + ], + "id": 70 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Legend", + "example_url": "https://altair-viz.github.io/gallery/interactive_legend.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interactive_legend.py", + "categories": [ + "Interactive Charts" + ], + "description": "The following shows how to create a chart with an interactive legend, by binding the selection to ``\"legend\"``. Such a binding only works with ``selection_point`` when projected over a single field or encoding.", + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:stack" + ], + "id": 71 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Rectangular Brush", + "example_url": "https://altair-viz.github.io/gallery/interactive_brush.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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. By clicking and dragging on the plot, you can highlight points within the range.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 72 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/scatter_with_layered_histogram.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how to link a scatter plot and a histogram together such that clicking on a point in the scatter plot will isolate the distribution corresponding to that point, and vice versa.", + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:bin", + "transform:filter", + "transform:stack" + ], + "id": 73 + }, + { + "gallery_name": "altair", + "example_name": "Interactive Selection of Columns", + "example_url": "https://altair-viz.github.io/gallery/interactive_column_selection.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interactive_column_selection.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how columns can be selected interactively by accessing the values from selector widgets, and then compute the difference of the selected columns. It also illustrates how to use `indexof` to filter columns based on active selection values.", + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:calculate", + "transform:filter", + "transform:pivot", + "transform:stack" + ], + "id": 74 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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 is adjusted by interacting with the map on the left.", + "datasets": [ + "earthquakes", + "world_110m" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:shape", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:bin", + "transform:calculate", + "transform:filter" + ], + "id": 75 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/interval_selection.py", + "categories": [ + "Interactive Charts" + ], + "description": "This is an example of creating a stacked chart for which the domain of the top chart can be selected by interacting with the bottom chart. The initial selection range is set using Python's native datetime objects.", + "datasets": [ + "sp500" + ], + "techniques": [ + "interaction:param", + "interaction:selection" + ], + "id": 76 + }, + { + "gallery_name": "altair", + "example_name": "Iowa's Renewable Energy Boom", + "example_url": "https://altair-viz.github.io/gallery/iowa_electricity.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:stack" + ], + "id": 77 + }, + { + "gallery_name": "altair", + "example_name": "Isotype", + "example_url": "https://altair-viz.github.io/gallery/isotype.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/isotype.py", + "categories": [ + "Advanced Calculations" + ], + "description": "Isotype Visualization shows the distribution of animals across UK and US. Inspired by `Only An Ocean Between, 1943 `_. Population Live Stock, p.13. This is adapted from Vega-Lite example https://vega.github.io/editor/#/examples/vega-lite/isotype_bar_chart", + "datasets": [], + "techniques": [ + "composition:facet", + "transform:window" + ], + "id": 78 + }, + { + "gallery_name": "altair", + "example_name": "Isotype Emoji", + "example_url": "https://altair-viz.github.io/gallery/isotype_emoji.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/isotype_emoji.py", + "categories": [ + "Advanced Calculations" + ], + "description": "Isotype Visualization shows the distribution of animals across UK and US, using unicode emoji marks rather than custom SVG paths (see https://altair-viz.github.io/gallery/isotype.html). This is adapted from Vega-Lite example https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html.", + "datasets": [], + "techniques": [ + "composition:facet", + "transform:calculate", + "transform:window" + ], + "id": 79 + }, + { + "gallery_name": "altair", + "example_name": "Isotype Grid", + "example_url": "https://altair-viz.github.io/gallery/isotype_grid.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/isotype_grid.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example is a grid of isotype figures.", + "datasets": [], + "techniques": [ + "composition:facet", + "transform:calculate" + ], + "id": 80 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/lasagna_plot.py", + "categories": [ + "Tables" + ], + "description": null, + "datasets": [ + "stocks" + ], + "techniques": [ + "interaction:conditional", + "transform:filter" + ], + "id": 81 + }, + { + "gallery_name": "altair", + "example_name": "Layered Area Chart", + "example_url": "https://altair-viz.github.io/gallery/layered_area_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/layered_area_chart.py", + "categories": [ + "Area Charts" + ], + "description": "This example shows a layered area chart.", + "datasets": [ + "iowa_electricity" + ], + "techniques": [ + "transform:stack" + ], + "id": 82 + }, + { + "gallery_name": "altair", + "example_name": "Layered Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/layered_bar_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:stack" + ], + "id": 83 + }, + { + "gallery_name": "altair", + "example_name": "Layered Histogram", + "example_url": "https://altair-viz.github.io/gallery/layered_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/layered_histogram.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to use opacity to make a layered histogram in Altair.", + "datasets": [], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:fold", + "transform:stack" + ], + "id": 84 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "composition:layer" + ], + "id": 85 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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. The Unicode character approach is simpler, while the line plus triangle :ref:`point mark ` allows for greater flexibility, such as customizable arrowheads.", + "datasets": [], + "techniques": [ + "composition:layer" + ], + "id": 86 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "mark:error" + ], + "id": 87 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:window" + ], + "id": 88 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/line_chart_with_custom_legend.py", + "categories": [ + "Line Charts" + ], + "description": "This example uses the argmax aggregation function in order to create a custom legend for a line chart.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:aggregate", + "transform:filter" + ], + "id": 89 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/line_custom_order.py", + "categories": [ + "Line Charts" + ], + "description": "By default, the line's path (order of points in the line) is determined by data values on the temporal/ordinal field. However, a field can be mapped to the order channel for a custom path. For example, to show a pattern of data change over time between gasoline price and average miles driven per capita we use order channel to sort the points in the line by time field (year). The earliest year (1956) is one endpoint and the latest year (2010) is the other endpoint. This is based on Hannah Fairfield's article 'Driving Shifts Into Reverse'. See https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html.", + "datasets": [ + "driving" + ], + "techniques": [], + "id": 90 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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. This is adapted from two corresponding Vega-Lite Examples: `Highlight a Specific Value `_.", + "datasets": [ + "stocks" + ], + "techniques": [], + "id": 91 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/line_chart_with_color_datum.py", + "categories": [ + "Line Charts" + ], + "description": "An example of using ``repeat`` inside ``datum`` to color a multi-series line chart. This is adapted from this corresponding Vega-Lite Example: `Repeat and Layer to Show Different Movie Measures `_.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:repeat", + "transform:bin" + ], + "id": 92 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 93 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:filter" + ], + "id": 94 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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 stock prices for AAPL, AMZN, GOOG, IBM, and MSFT between 2000 and 2010, along with a layered rule showing the average values.", + "datasets": [ + "stocks" + ], + "techniques": [], + "id": 95 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/line_with_log_scale.py", + "categories": [ + "Line Charts" + ], + "description": "How to make a line chart on a `Logarithmic scale `_.", + "datasets": [ + "population" + ], + "techniques": [], + "id": 96 + }, + { + "gallery_name": "altair", + "example_name": "Line Chart with Percent axis", + "example_url": "https://altair-viz.github.io/gallery/line_percent.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:filter" + ], + "id": 97 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 98 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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": [], + "techniques": [ + "transform:calculate", + "transform:fold" + ], + "id": 99 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 100 + }, + { + "gallery_name": "altair", + "example_name": "Line Chart with Varying Size", + "example_url": "https://altair-viz.github.io/gallery/trail_marker.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "mark:trail" + ], + "id": 101 + }, + { + "gallery_name": "altair", + "example_name": "London Tube Lines", + "example_url": "https://altair-viz.github.io/gallery/london_tube.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/london_tube.py", + "categories": [ + "Case Studies" + ], + "description": "This example shows the London tube lines against the background of the borough boundaries. It is based on the vega-lite example at https://vega.github.io/vega-lite/examples/geo_layer_line_london.html.", + "datasets": [ + "london_tube_lines", + "london_boroughs", + "london_centroids" + ], + "techniques": [ + "geo:shape", + "geo:topojson", + "transform:calculate" + ], + "id": 102 + }, + { + "gallery_name": "altair", + "example_name": "Mosaic Chart with Labels", + "example_url": "https://altair-viz.github.io/gallery/mosaic_with_labels.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/mosaic_with_labels.py", + "categories": [ + "Tables" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:window" + ], + "id": 103 + }, + { + "gallery_name": "altair", + "example_name": "Multi-Line Highlight", + "example_url": "https://altair-viz.github.io/gallery/multiline_highlight.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/multiline_highlight.py", + "categories": [ + "Interactive Charts" + ], + "description": "This multi-line chart uses an invisible Voronoi tessellation to handle pointerover to identify the nearest point and then highlight the line on which the point falls. It is adapted from the Vega-Lite example found at https://bl.ocks.org/amitkaps/fe4238e716db53930b2f1a70d3401701", + "datasets": [ + "stocks" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 104 + }, + { + "gallery_name": "altair", + "example_name": "Multi-Line Tooltip", + "example_url": "https://altair-viz.github.io/gallery/multiline_tooltip.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/multiline_tooltip.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how you can use selections and layers to create a tooltip-like behavior tied to the x position of the cursor. If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example. In this example, we'll employ a little trick to isolate the x-position of the cursor: we add some transparent points with only an x encoding (no y encoding) and tie a *nearest* selection to these, tied to the \"x\" field.", + "datasets": [], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter" + ], + "id": 105 + }, + { + "gallery_name": "altair", + "example_name": "Multi-Line Tooltip (Standard)", + "example_url": "https://altair-viz.github.io/gallery/multiline_tooltip_standard.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/multiline_tooltip_standard.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how to add a standard tooltip to the same chart as in :ref:`gallery_multiline_tooltip`. You can find another example using this approach in the documentation on the :ref:`user-guide-pivot-transform` transformation.", + "datasets": [], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:pivot" + ], + "id": 106 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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 points across multiple panels.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 107 + }, + { + "gallery_name": "altair", + "example_name": "Multifeature Scatter Plot", + "example_url": "https://altair-viz.github.io/gallery/multifeature_scatter_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/multifeature_scatter_plot.py", + "categories": [ + "Scatter Plots" + ], + "description": "This example shows how to make a scatter plot with multiple feature encodings.", + "datasets": [ + "penguins" + ], + "techniques": [], + "id": 108 + }, + { + "gallery_name": "altair", + "example_name": "Multiple Interactions", + "example_url": "https://altair-viz.github.io/gallery/multiple_interactions.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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: * Dropdown: Filters the movies by genre * Radio Buttons: Highlights certain films by Worldwide Gross * Mouse Drag and Scroll: Zooms the x and y scales to allow for panning * Checkbox: Scales the marker size of big budget films", + "datasets": [ + "movies" + ], + "techniques": [ + "interaction:binding", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:calculate", + "transform:filter" + ], + "id": 109 + }, + { + "gallery_name": "altair", + "example_name": "Multiple Series Line Chart", + "example_url": "https://altair-viz.github.io/gallery/multi_series_line.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 110 + }, + { + "gallery_name": "altair", + "example_name": "Normalized Parallel Coordinates", + "example_url": "https://altair-viz.github.io/gallery/normed_parallel_coordinates.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/normed_parallel_coordinates.py", + "categories": [ + "Advanced Calculations" + ], + "description": "A `Parallel Coordinates `_ chart is a chart that lets you visualize the individual data points by drawing a single line for each of them. Such a chart can be created in Altair by first transforming the data into a suitable representation. This example shows a modified parallel coordinates chart with the Penguins dataset, where the y-axis shows the value after min-max rather than the raw value. It's a simplified Altair version of `the VegaLite version `_", + "datasets": [ + "penguins" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:fold", + "transform:joinaggregate", + "transform:window" + ], + "id": 111 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/normalized_stacked_area_chart.py", + "categories": [ + "Area Charts" + ], + "description": "This example shows how to make a normalized stacked area chart.", + "datasets": [ + "iowa_electricity" + ], + "techniques": [ + "transform:stack" + ], + "id": 112 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:stack" + ], + "id": 113 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "geo:coordinates", + "transform:calculate" + ], + "id": 114 + }, + { + "gallery_name": "altair", + "example_name": "Pacman Chart", + "example_url": "https://altair-viz.github.io/gallery/pacman_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/pacman_chart.py", + "categories": [ + "Circular Plots" + ], + "description": "Chart made using ``mark_arc`` and constant values. This could also be made using ``alt.Chart(source).mark_arc(color = \"gold\", theta = (5/8)*np.pi, theta2 = (19/8)*np.pi,radius=100)``.", + "datasets": [], + "techniques": [ + "mark:arc" + ], + "id": 115 + }, + { + "gallery_name": "altair", + "example_name": "Parallel Coordinates", + "example_url": "https://altair-viz.github.io/gallery/parallel_coordinates.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/parallel_coordinates.py", + "categories": [ + "Advanced Calculations" + ], + "description": "A `Parallel Coordinates `_ chart is a chart that lets you visualize the individual data points by drawing a single line for each of them. Such a chart can be created in Altair by first transforming the data into a suitable representation. This example shows a parallel coordinates chart with the Penguins dataset.", + "datasets": [ + "penguins" + ], + "techniques": [ + "transform:aggregate", + "transform:fold", + "transform:window" + ], + "id": 116 + }, + { + "gallery_name": "altair", + "example_name": "Pie Chart", + "example_url": "https://altair-viz.github.io/gallery/pie_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/pie_chart.py", + "categories": [ + "Circular Plots" + ], + "description": "This example shows how to make a Pie Chart using ``mark_arc``. This is adapted from a corresponding Vega-Lite Example: `Pie Chart `_.", + "datasets": [], + "techniques": [ + "mark:arc" + ], + "id": 117 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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. This is adapted from a corresponding Vega-Lite Example: `Pie Chart with Labels `_.", + "datasets": [], + "techniques": [ + "mark:arc", + "transform:stack" + ], + "id": 118 + }, + { + "gallery_name": "altair", + "example_name": "Point map", + "example_url": "https://altair-viz.github.io/gallery/point_map.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "geo:coordinates", + "geo:shape", + "geo:topojson" + ], + "id": 119 + }, + { + "gallery_name": "altair", + "example_name": "Polar Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/polar_bar_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/polar_bar_chart.py", + "categories": [ + "Circular Plots" + ], + "description": "This example shows how to make a polar bar chart using ``mark_arc``. This could also have been called a \"pie chart with axis labels\", but is more commonly referred to as a polar bar chart. The axis lines are created using pie charts with only the stroke visible.", + "datasets": [], + "techniques": [ + "composition:layer", + "mark:arc", + "transform:stack" + ], + "id": 120 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/poly_fit_regression.py", + "categories": [ + "Uncertainties And Trends" + ], + "description": "This example shows how to overlay data with multiple fitted polynomials using the regression transform.", + "datasets": [], + "techniques": [ + "composition:layer", + "transform:fold", + "transform:regression" + ], + "id": 121 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/falkensee.py", + "categories": [ + "Case Studies" + ], + "description": "This example is a reproduction of the Falkensee plot found in the Vega-Lite examples.", + "datasets": [], + "techniques": [], + "id": 122 + }, + { + "gallery_name": "altair", + "example_name": "Pyramid Pie Chart", + "example_url": "https://altair-viz.github.io/gallery/pyramid.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/pyramid.py", + "categories": [ + "Case Studies" + ], + "description": "Altair reproduction of http://robslink.com/SAS/democd91/pyramid_pie.htm", + "datasets": [], + "techniques": [ + "mark:arc" + ], + "id": 123 + }, + { + "gallery_name": "altair", + "example_name": "Quantile-Quantile Plot", + "example_url": "https://altair-viz.github.io/gallery/scatter_qq.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_qq.py", + "categories": [ + "Distributions" + ], + "description": "A quantile-quantile plot comparing input data to theoretical distributions.", + "datasets": [ + "normal_2d" + ], + "techniques": [ + "transform:calculate", + "transform:quantile" + ], + "id": 124 + }, + { + "gallery_name": "altair", + "example_name": "Radial Chart", + "example_url": "https://altair-viz.github.io/gallery/radial_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/radial_chart.py", + "categories": [ + "Circular Plots" + ], + "description": "This radial plot uses both angular and radial extent to convey multiple dimensions of data. This is adapted from a corresponding Vega-Lite Example: `Radial Plot `_.", + "datasets": [], + "techniques": [ + "mark:arc", + "transform:stack" + ], + "id": 125 + }, + { + "gallery_name": "altair", + "example_name": "Ranged Dot Plot", + "example_url": "https://altair-viz.github.io/gallery/ranged_dot_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "transform:filter" + ], + "id": 126 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/interactive_reorder_stacked_bars.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example uses a calculate transform to check the values of the \"site\" column vs the clicked values in the legend, and assigns a lower order (0) if there is a match. The use of \"indexOf\" checks for equality in an array, which here allows for multiple segments to be reordered by holding down the shift key while clicking the legend.", + "datasets": [ + "barley" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:calculate" + ], + "id": 127 + }, + { + "gallery_name": "altair", + "example_name": "Repeated Choropleth Map", + "example_url": "https://altair-viz.github.io/gallery/choropleth_repeat.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [ + "composition:facet", + "composition:repeat", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 128 + }, + { + "gallery_name": "altair", + "example_name": "Repeated Density Estimates", + "example_url": "https://altair-viz.github.io/gallery/density_repeat.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/density_repeat.py", + "categories": [ + "Distributions" + ], + "description": "Density estimates for each measurement of penguins. This is what we call a \"repeated\" plot, with one subplot for each measurement type. All measurements are in millimeters, making them directly comparable on a shared x-axis.", + "datasets": [ + "penguins" + ], + "techniques": [ + "composition:facet", + "transform:density", + "transform:fold" + ], + "id": 129 + }, + { + "gallery_name": "altair", + "example_name": "Ridgeline plot", + "example_url": "https://altair-viz.github.io/gallery/ridgeline_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/ridgeline_plot.py", + "categories": [ + "Distributions" + ], + "description": "A `Ridgeline plot `_ lets you visualize distribution of a numeric value for different subsets of data (what we call \"facets\" in Altair). Such a chart can be created in Altair by first transforming the data into a suitable representation.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:facet", + "transform:aggregate", + "transform:bin", + "transform:impute", + "transform:joinaggregate", + "transform:timeunit" + ], + "id": 130 + }, + { + "gallery_name": "altair", + "example_name": "Scatter Matrix", + "example_url": "https://altair-viz.github.io/gallery/scatter_matrix.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_matrix.py", + "categories": [ + "Scatter Plots" + ], + "description": "An example of using a RepeatChart to construct a multi-panel scatter plot with linked panning and zooming.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:facet", + "composition:repeat" + ], + "id": 131 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_with_histogram.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how to link a scatter plot and a histogram together such that an interval selection in the histogram will plot the selected values in the scatter plot. Note that both subplots need to know about the `mbin` field created by the `transform_bin` method. In order to achieve this, the data is not passed to the `Chart()` instances creating the subplots, but directly in the `hconcat()` function, which joins the two plots together.", + "datasets": [], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:bin", + "transform:filter" + ], + "id": 132 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/scatter_marginal_hist.py", + "categories": [ + "Distributions" + ], + "description": "This example demonstrates how to generate a scatter plot, with faceted marginal histograms that share their respective x- and y-limits.", + "datasets": [ + "penguins" + ], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:stack" + ], + "id": 133 + }, + { + "gallery_name": "altair", + "example_name": "Scatter Plot with Href", + "example_url": "https://altair-viz.github.io/gallery/scatter_href.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_href.py", + "categories": [ + "Scatter Plots" + ], + "description": "This example shows a scatter plot with an ``href`` encoding constructed from the car name. With this encoding, you can click on any of the points to open a google search for the car name.", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:calculate" + ], + "id": 134 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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 the LOESS transform (LOcally Estimated Scatter Plot Smoothing).", + "datasets": [], + "techniques": [ + "transform:fold", + "transform:loess" + ], + "id": 135 + }, + { + "gallery_name": "altair", + "example_name": "Scatter Plot with Minimap", + "example_url": "https://altair-viz.github.io/gallery/scatter_with_minimap.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/scatter_with_minimap.py", + "categories": [ + "Scatter Plots" + ], + "description": "This example shows how to create a miniature version of a plot such that creating a selection in the miniature version adjusts the axis limits in another, more detailed view.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 136 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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 is used to calculate the mean of the maximum temperature around each date.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:window" + ], + "id": 137 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_with_shaded_area.py", + "categories": [ + "Scatter Plots" + ], + "description": "This example shows a scatter plot with shaded area, constructed using :ref:`area mark ` and :ref:`rect mark `.", + "datasets": [], + "techniques": [], + "id": 138 + }, + { + "gallery_name": "altair", + "example_name": "Scatter plot with point paths on hover with search box", + "example_url": "https://altair-viz.github.io/gallery/scatter_point_paths_hover.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/scatter_point_paths_hover.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example combines cross-sectional analysis (comparing countries at a single point in time) with longitudinal analysis (tracking changes in individual countries over time), using an interactive visualization technique inspired by [this Vega example](https://vega.github.io/vega/examples/global-development/) Key features: 1. Point Paths. On hover, shows data trajectories using a trail mark that thickens from past to present, clearly indicating the direction of time. 2. Search Box. Implements a case-insensitive regex filter for country names, enabling dynamic, flexible data point selection to enhance exploratory analysis.", + "datasets": [ + "gapminder" + ], + "techniques": [ + "composition:layer", + "interaction:binding", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "mark:trail", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:window" + ], + "id": 139 + }, + { + "gallery_name": "altair", + "example_name": "Seattle Weather Interactive", + "example_url": "https://altair-viz.github.io/gallery/seattle_weather_interactive.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/seattle_weather_interactive.py", + "categories": [ + "Case Studies" + ], + "description": "This chart provides an interactive exploration of Seattle weather over the course of the year. It includes a one-axis brush selection to easily see the distribution of weather types in a particular date range.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:aggregate", + "transform:filter" + ], + "id": 140 + }, + { + "gallery_name": "altair", + "example_name": "Selection Detail", + "example_url": "https://altair-viz.github.io/gallery/select_detail.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/select_detail.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows a selection that links two views of data: the left panel contains one point per object, and the right panel contains one line per object. Clicking on either the points or lines will select the corresponding objects in both views of the data. The challenge lies in expressing such hierarchical data in a way that Altair can handle. We do this by merging the data into a \"long form\" dataframe, and aggregating identical metadata for the final plot.", + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter" + ], + "id": 141 + }, + { + "gallery_name": "altair", + "example_name": "Selection Histogram", + "example_url": "https://altair-viz.github.io/gallery/selection_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/selection_histogram.py", + "categories": [ + "Interactive Charts" + ], + "description": "This chart shows an example of using an interval selection to filter the contents of an attached histogram, allowing the user to see the proportion of items in each category within the selection.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter" + ], + "id": 142 + }, + { + "gallery_name": "altair", + "example_name": "Selection zorder", + "example_url": "https://altair-viz.github.io/gallery/selection_zorder.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/selection_zorder.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how to bring selected points to the front/foreground by using a condition to change the point's (z)order as it is hovered over with the pointer. This prevents that the selected points are obscured by those that are not selected.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 143 + }, + { + "gallery_name": "altair", + "example_name": "Simple Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/simple_bar_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/simple_bar_chart.py", + "categories": [ + "Simple Charts" + ], + "description": "This example shows a basic bar chart created with Altair.", + "datasets": [], + "techniques": [], + "id": 144 + }, + { + "gallery_name": "altair", + "example_name": "Simple Heatmap", + "example_url": "https://altair-viz.github.io/gallery/simple_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/simple_heatmap.py", + "categories": [ + "Simple Charts" + ], + "description": "This example shows a simple heatmap for showing gridded data.", + "datasets": [], + "techniques": [], + "id": 145 + }, + { + "gallery_name": "altair", + "example_name": "Simple Histogram", + "example_url": "https://altair-viz.github.io/gallery/simple_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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 https://vega.github.io/vega-lite/examples/histogram.html", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 146 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/interactive_scatter_plot.py", + "categories": [ + "Interactive Charts" + ], + "description": "This example shows how to make an interactive scatter plot.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 147 + }, + { + "gallery_name": "altair", + "example_name": "Simple Line Chart", + "example_url": "https://altair-viz.github.io/gallery/simple_line_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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 columns.", + "datasets": [], + "techniques": [], + "id": 148 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/simple_scatter_with_errorbars.py", + "categories": [ + "Uncertainties And Trends" + ], + "description": "A simple scatter plot of a data set with errorbars.", + "datasets": [], + "techniques": [ + "mark:error", + "transform:calculate" + ], + "id": 149 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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": [], + "techniques": [], + "id": 150 + }, + { + "gallery_name": "altair", + "example_name": "Simple Scatter Plot with Tooltips", + "example_url": "https://altair-viz.github.io/gallery/scatter_tooltips.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/scatter_tooltips.py", + "categories": [ + "Simple Charts" + ], + "description": "A scatter plot of the cars dataset, with tooltips showing selected column values when you hover over points. We make the points larger so that it is easier to hover over them.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 151 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 152 + }, + { + "gallery_name": "altair", + "example_name": "Simple Strip Plot", + "example_url": "https://altair-viz.github.io/gallery/strip_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/strip_plot.py", + "categories": [ + "Simple Charts" + ], + "description": "A simple example of how to make a strip plot.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 153 + }, + { + "gallery_name": "altair", + "example_name": "Slider Cutoff", + "example_url": "https://altair-viz.github.io/gallery/slider_cutoff.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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": [], + "techniques": [ + "interaction:binding", + "interaction:conditional", + "interaction:param" + ], + "id": 154 + }, + { + "gallery_name": "altair", + "example_name": "Slope Graph", + "example_url": "https://altair-viz.github.io/gallery/slope_graph.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/slope_graph.py", + "categories": [ + "Line Charts" + ], + "description": "This example shows how to make Slope Graph.", + "datasets": [ + "barley" + ], + "techniques": [], + "id": 155 + }, + { + "gallery_name": "altair", + "example_name": "Sorted Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/bar_chart_sorted.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/bar_chart_sorted.py", + "categories": [ + "Bar Charts" + ], + "description": "This example shows a bar chart sorted by a calculated value.", + "datasets": [ + "barley" + ], + "techniques": [], + "id": 156 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [], + "id": 157 + }, + { + "gallery_name": "altair", + "example_name": "Stacked Bar Chart", + "example_url": "https://altair-viz.github.io/gallery/stacked_bar_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 158 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [], + "id": 159 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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 bar and text marks, we use the ``stack`` argument in the ``x`` encoding to cause the values to be stacked horizontally.", + "datasets": [ + "barley" + ], + "techniques": [ + "transform:stack" + ], + "id": 160 + }, + { + "gallery_name": "altair", + "example_name": "Stacked Density Estimates", + "example_url": "https://altair-viz.github.io/gallery/density_stack.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/density_stack.py", + "categories": [ + "Distributions" + ], + "description": "To plot a stacked graph of estimates, use a shared ``extent`` and a fixed number of subdivision ``steps`` to ensure that the points for each area align well. Density estimates of body mass for each penguin species are plotted in a stacked method. In addition, setting ``counts`` to true multiplies the densities by the number of data points in each group, preserving proportional differences.", + "datasets": [ + "penguins" + ], + "techniques": [ + "transform:density" + ], + "id": 161 + }, + { + "gallery_name": "altair", + "example_name": "Stem and Leaf Plot", + "example_url": "https://altair-viz.github.io/gallery/stem_and_leaf.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/stem_and_leaf.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example shows how to make a stem and leaf plot.", + "datasets": [], + "techniques": [ + "transform:aggregate" + ], + "id": 162 + }, + { + "gallery_name": "altair", + "example_name": "Step Chart", + "example_url": "https://altair-viz.github.io/gallery/step_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/step_chart.py", + "categories": [ + "Line Charts" + ], + "description": "This example shows Google's stock price over time. This uses the \"step-after\" interpolation scheme. The full list of interpolation options includes 'linear', 'linear-closed', 'step', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed', 'cardinal', 'cardinal-open', 'cardinal-closed', 'bundle', and 'monotone'.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 163 + }, + { + "gallery_name": "altair", + "example_name": "Streamgraph", + "example_url": "https://altair-viz.github.io/gallery/streamgraph.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/streamgraph.py", + "categories": [ + "Area Charts" + ], + "description": "This example shows the streamgraph from vega-lite examples.", + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "transform:stack" + ], + "id": 164 + }, + { + "gallery_name": "altair", + "example_name": "Strip Plot with Jitter", + "example_url": "https://altair-viz.github.io/gallery/strip_plot_jitter.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/strip_plot_jitter.py", + "categories": [ + "Distributions" + ], + "description": "In this chart, we encode the ``Major_Genre`` column from the ``movies`` dataset in the ``y``-channel. In the default presentation of this data, it would be difficult to gauge the relative frequencies with which different values occur because there would be so much overlap. To address this, we use the ``yOffset`` channel to incorporate a random offset (jittering). The example is shown twice, on the left side using normally distributed and on the right side using uniformally distributed jitter.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:calculate" + ], + "id": 165 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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" + ], + "techniques": [], + "id": 166 + }, + { + "gallery_name": "altair", + "example_name": "Text over a Heatmap", + "example_url": "https://altair-viz.github.io/gallery/layered_heatmap_text.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "interaction:conditional", + "transform:aggregate" + ], + "id": 167 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_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" + ], + "techniques": [ + "interaction:conditional", + "transform:filter" + ], + "id": 168 + }, + { + "gallery_name": "altair", + "example_name": "Top K Items", + "example_url": "https://altair-viz.github.io/gallery/top_k_items.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/top_k_items.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example shows how to use the window and transformation filter to display the Top items of a long list of items in decreasing order. Here we sort the top 10 highest ranking movies of IMDB.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:filter", + "transform:window" + ], + "id": 169 + }, + { + "gallery_name": "altair", + "example_name": "Top K Letters", + "example_url": "https://altair-viz.github.io/gallery/top_k_letters.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/top_k_letters.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example shows how to use a window transform in order to display only the top K categories by number of entries. In this case, we rank the characters in the first paragraph of Dickens' *A Tale of Two Cities* by number of occurrences.", + "datasets": [], + "techniques": [ + "transform:aggregate", + "transform:filter", + "transform:window" + ], + "id": 170 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/top_k_with_others.py", + "categories": [ + "Advanced Calculations" + ], + "description": "This example shows how to use aggregate, window, and calculate transformations to display the top-k directors by average worldwide gross while grouping the remaining directors as 'All Others'.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:window" + ], + "id": 171 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/us_state_capitals.py", + "categories": [ + "Case Studies" + ], + "description": "This is a layered geographic visualization that shows US capitals overlaid on a map.", + "datasets": [ + "us_state_capitals", + "us_10m" + ], + "techniques": [ + "geo:shape", + "geo:topojson", + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 172 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/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, faceted over income brackets", + "datasets": [ + "income", + "us_10m" + ], + "techniques": [ + "composition:facet", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 173 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/us_population_over_time.py", + "categories": [ + "Case Studies" + ], + "description": "This chart visualizes the age distribution of the US population over time. It uses a slider widget that is bound to the year to visualize the age distribution over time.", + "datasets": [ + "population" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "interaction:selection", + "transform:calculate", + "transform:filter" + ], + "id": 174 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/us_population_over_time_facet.py", + "categories": [ + "Case Studies" + ], + "description": "This chart visualizes the age distribution of the US population over time, using a wrapped faceting of the data by decade.", + "datasets": [ + "population" + ], + "techniques": [ + "composition:facet" + ], + "id": 175 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/us_population_pyramid_over_time.py", + "categories": [ + "Case Studies" + ], + "description": "A population pyramid shows the distribution of age groups within a population. It uses a slider widget that is bound to the year to visualize the age distribution over time.", + "datasets": [ + "population" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "interaction:selection", + "transform:calculate", + "transform:filter" + ], + "id": 176 + }, + { + "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://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/select_mark_area.py", + "categories": [ + "Interactive Charts" + ], + "description": "Because area is considered one object, just using the plain selector will select the entire area instead of just one part of it. This example shows how to use two areas, one on top of the other, and a `transform_filter` to fake out this effect.", + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "interaction:param", + "interaction:selection", + "transform:filter" + ], + "id": 177 + }, + { + "gallery_name": "altair", + "example_name": "Violin Plot", + "example_url": "https://altair-viz.github.io/gallery/violin_plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/violin_plot.py", + "categories": [ + "Distributions" + ], + "description": "This example shows how to make a Violin Plot using Altair's density transform.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:facet", + "transform:density", + "transform:stack" + ], + "id": 178 + }, + { + "gallery_name": "altair", + "example_name": "Waterfall Chart", + "example_url": "https://altair-viz.github.io/gallery/waterfall_chart.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/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. Original inspiration is from https://vega.github.io/vega-lite/examples/waterfall_chart.html", + "datasets": [], + "techniques": [ + "composition:layer", + "interaction:conditional", + "transform:calculate", + "transform:window" + ], + "id": 179 + }, + { + "gallery_name": "altair", + "example_name": "Wheat and Wages", + "example_url": "https://altair-viz.github.io/gallery/wheat_wages.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/wheat_wages.py", + "categories": [ + "Case Studies" + ], + "description": "A recreation of William Playfair's classic chart visualizing the price of wheat, the wages of a mechanic, and the reigning British monarch. This is a more polished version of the simpler chart in :ref:`gallery_bar_and_line_with_dual_axis`.", + "datasets": [ + "wheat", + "monarchs" + ], + "techniques": [ + "transform:bin", + "transform:calculate" + ], + "id": 180 + }, + { + "gallery_name": "altair", + "example_name": "Wilkinson Dot Plot", + "example_url": "https://altair-viz.github.io/gallery/wilkinson-dot-plot.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/wilkinson-dot-plot.py", + "categories": [ + "Advanced Calculations" + ], + "description": "An example of a `Wilkinson Dot Plot `_", + "datasets": [], + "techniques": [ + "transform:window" + ], + "id": 181 + }, + { + "gallery_name": "altair", + "example_name": "Wind Vector Map", + "example_url": "https://altair-viz.github.io/gallery/wind_vector_map.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/wind_vector_map.py", + "categories": [ + "Maps" + ], + "description": "An example showing a vector array map showing wind speed and direction using ``wedge`` as shape for ``mark_point`` and ``angle`` encoding for the wind direction. This is adapted from this corresponding Vega-Lite Example: `Wind Vector Map `_ with an added base map.", + "datasets": [ + "world_110m", + "windvectors" + ], + "techniques": [ + "geo:coordinates", + "geo:shape", + "geo:topojson" + ], + "id": 182 + }, + { + "gallery_name": "altair", + "example_name": "Window Rank Line Chart", + "example_url": "https://altair-viz.github.io/gallery/window_rank.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/window_rank.py", + "categories": [ + "Line Charts" + ], + "description": "This example shows the Group F rankings in the 2018 World Cup after each matchday. A window transformation is used to rank each after each match day, sorting by points and difference.", + "datasets": [], + "techniques": [ + "transform:window" + ], + "id": 183 + }, + { + "gallery_name": "altair", + "example_name": "World Map", + "example_url": "https://altair-viz.github.io/gallery/world_map.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/world_map.py", + "categories": [ + "Maps" + ], + "description": "This example shows how to create a world map using data generators for different background layers.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "composition:layer", + "geo:shape", + "geo:topojson" + ], + "id": 184 + }, + { + "gallery_name": "altair", + "example_name": "World Projections", + "example_url": "https://altair-viz.github.io/gallery/world_projections.html", + "spec_url": "https://raw.githubusercontent.com/vega/altair/main/tests/examples_arguments_syntax/world_projections.py", + "categories": [ + "Maps" + ], + "description": "This example shows a map of the countries of the world. Use the dropdown menu to compare projections. For more details on the `project` arguments, see the API of `altair.Projection `_.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param" + ], + "id": 185 + }, + { + "gallery_name": "vega", + "example_name": "Airport Connections", + "example_url": "https://vega.github.io/vega/examples/airport-connections/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "geo:coordinates", + "geo:geopath", + "geo:geopoint", + "geo:projection", + "geo:topojson", + "interaction:binding", + "interaction:param", + "layout:linkpath", + "layout:voronoi", + "transform:aggregate", + "transform:filter", + "transform:lookup" + ], + "id": 186 + }, + { + "gallery_name": "vega", + "example_name": "Annual Precipitation", + "example_url": "https://vega.github.io/vega/examples/annual-precipitation/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param", + "layout:contour" + ], + "id": 187 + }, + { + "gallery_name": "vega", + "example_name": "Annual Temperature", + "example_url": "https://vega.github.io/vega/examples/annual-temperature/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:calculate" + ], + "id": 188 + }, + { + "gallery_name": "vega", + "example_name": "Arc Diagram", + "example_url": "https://vega.github.io/vega/examples/arc-diagram/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "layout:linkpath", + "mark:arc", + "transform:aggregate", + "transform:calculate", + "transform:lookup", + "transform:window" + ], + "id": 189 + }, + { + "gallery_name": "vega", + "example_name": "Area Chart", + "example_url": "https://vega.github.io/vega/examples/area-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/area-chart.vg.json", + "categories": [ + "Line & Area Charts" + ], + "description": "A basic area chart example.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param" + ], + "id": 190 + }, + { + "gallery_name": "vega", + "example_name": "Bar Chart", + "example_url": "https://vega.github.io/vega/examples/bar-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/bar-chart.vg.json", + "categories": [ + "Bar Charts" + ], + "description": "A basic bar chart example, with value labels shown upon pointer hover.", + "datasets": [], + "techniques": [ + "interaction:param" + ], + "id": 191 + }, + { + "gallery_name": "vega", + "example_name": "Bar Line Toggle", + "example_url": "https://vega.github.io/vega/examples/bar-line-toggle/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:filter" + ], + "id": 192 + }, + { + "gallery_name": "vega", + "example_name": "Barley Trellis Plot", + "example_url": "https://vega.github.io/vega/examples/barley-trellis-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/barley-trellis-plot.vg.json", + "categories": [ + "Scatter Plots" + ], + "description": "A small multiples view of barley yields by site and variety.", + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet", + "interaction:param" + ], + "id": 193 + }, + { + "gallery_name": "vega", + "example_name": "Beeswarm Plot", + "example_url": "https://vega.github.io/vega/examples/beeswarm-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:force" + ], + "id": 194 + }, + { + "gallery_name": "vega", + "example_name": "Binned Scatter Plot", + "example_url": "https://vega.github.io/vega/examples/binned-scatter-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/binned-scatter-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A binned scatter plot example showing aggregate counts per binned cell.", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:extent", + "transform:filter" + ], + "id": 195 + }, + { + "gallery_name": "vega", + "example_name": "Box Plot", + "example_url": "https://vega.github.io/vega/examples/box-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/box-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A box plot example showing aggregate statistics for penguin body mass.", + "datasets": [ + "penguins" + ], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:aggregate", + "transform:filter" + ], + "id": 196 + }, + { + "gallery_name": "vega", + "example_name": "Brushing Scatter Plots", + "example_url": "https://vega.github.io/vega/examples/brushing-scatter-plots/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/brushing-scatter-plots.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "A scatter plot matrix of penguin data with interactive linked selections.", + "datasets": [ + "penguins" + ], + "techniques": [ + "interaction:param", + "transform:calculate", + "transform:cross", + "transform:filter" + ], + "id": 197 + }, + { + "gallery_name": "vega", + "example_name": "Budget Forecasts", + "example_url": "https://vega.github.io/vega/examples/budget-forecasts/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:lookup" + ], + "id": 198 + }, + { + "gallery_name": "vega", + "example_name": "Calendar View", + "example_url": "https://vega.github.io/vega/examples/calendar-view/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:timeunit", + "transform:window" + ], + "id": 199 + }, + { + "gallery_name": "vega", + "example_name": "Circle Packing", + "example_url": "https://vega.github.io/vega/examples/circle-packing/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/circle-packing.vg.json", + "categories": [ + "Tree Diagrams" + ], + "description": "An example of a circle packing layout for hierarchical data.", + "datasets": [ + "flare" + ], + "techniques": [ + "layout:pack", + "transform:stratify" + ], + "id": 200 + }, + { + "gallery_name": "vega", + "example_name": "Clock", + "example_url": "https://vega.github.io/vega/examples/clock/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/clock.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "A circular clock visualization showing the current time.", + "datasets": [], + "techniques": [ + "interaction:param", + "mark:arc", + "transform:calculate" + ], + "id": 201 + }, + { + "gallery_name": "vega", + "example_name": "Connected Scatter Plot", + "example_url": "https://vega.github.io/vega/examples/connected-scatter-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [], + "id": 202 + }, + { + "gallery_name": "vega", + "example_name": "Contour Plot", + "example_url": "https://vega.github.io/vega/examples/contour-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/contour-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A contour plot example, overlaying a density estimate on scatter plot points.", + "datasets": [ + "cars" + ], + "techniques": [ + "geo:geopath", + "interaction:binding", + "interaction:param", + "layout:contour", + "transform:filter", + "transform:kde2d" + ], + "id": 203 + }, + { + "gallery_name": "vega", + "example_name": "County Unemployment", + "example_url": "https://vega.github.io/vega/examples/county-unemployment/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:filter", + "transform:lookup" + ], + "id": 204 + }, + { + "gallery_name": "vega", + "example_name": "Crossfilter Flights", + "example_url": "https://vega.github.io/vega/examples/crossfilter-flights/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/crossfilter-flights.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "Interactive cross-filtering among histograms of flight statistics.", + "datasets": [ + "flights_200k_json" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:crossfilter", + "transform:filter" + ], + "id": 205 + }, + { + "gallery_name": "vega", + "example_name": "Density Heatmaps", + "example_url": "https://vega.github.io/vega/examples/density-heatmaps/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/density-heatmaps.vg.json", + "categories": [ + "Other Chart Types" + ], + "description": "A small multiples view of 2D density heatmaps of automobile statistics.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:filter", + "transform:kde2d" + ], + "id": 206 + }, + { + "gallery_name": "vega", + "example_name": "Distortion Comparison", + "example_url": "https://vega.github.io/vega/examples/distortion-comparison/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/distortion-comparison.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A map view comparing area distortions between two projections.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:graticule", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param", + "transform:calculate" + ], + "id": 207 + }, + { + "gallery_name": "vega", + "example_name": "Donut Chart", + "example_url": "https://vega.github.io/vega/examples/donut-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/donut-chart.vg.json", + "categories": [ + "Circular Charts" + ], + "description": "A basic donut chart example.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:pie", + "mark:arc" + ], + "id": 208 + }, + { + "gallery_name": "vega", + "example_name": "Donut Chart Labelled", + "example_url": "https://vega.github.io/vega/examples/donut-chart-labelled/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/donut-chart-labelled.vg.json", + "categories": [ + "Circular Charts" + ], + "description": "Donut with non-overlapping labels.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:pie", + "mark:arc", + "transform:bin", + "transform:calculate", + "transform:extent", + "transform:filter", + "transform:joinaggregate", + "transform:window" + ], + "id": 209 + }, + { + "gallery_name": "vega", + "example_name": "Dorling Cartogram", + "example_url": "https://vega.github.io/vega/examples/dorling-cartogram/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/dorling-cartogram.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A Dorling cartogram depicting U.S. state obesity rates.", + "datasets": [ + "us_10m", + "obesity" + ], + "techniques": [ + "geo:projection", + "geo:topojson", + "layout:force", + "transform:calculate", + "transform:filter", + "transform:lookup" + ], + "id": 210 + }, + { + "gallery_name": "vega", + "example_name": "Dot Plot", + "example_url": "https://vega.github.io/vega/examples/dot-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/dot-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A dot plot example depicting the distribution of animal sleep times.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:bin", + "transform:dotbin", + "transform:extent", + "transform:stack" + ], + "id": 211 + }, + { + "gallery_name": "vega", + "example_name": "Earthquakes", + "example_url": "https://vega.github.io/vega/examples/earthquakes/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/earthquakes.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "An interactive globe depicting earthquake locations and magnitudes.", + "datasets": [ + "world_110m", + "earthquakes" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param" + ], + "id": 212 + }, + { + "gallery_name": "vega", + "example_name": "Earthquakes Globe", + "example_url": "https://vega.github.io/vega/examples/earthquakes-globe/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/earthquakes-globe.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "Rotating globe animation depicting earthquake locations. Background - pseudorandomly distributed 'stars'.", + "datasets": [ + "world_110m", + "earthquakes" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:param", + "transform:calculate" + ], + "id": 213 + }, + { + "gallery_name": "vega", + "example_name": "Edge Bundling", + "example_url": "https://vega.github.io/vega/examples/edge-bundling/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "layout:tree", + "transform:calculate", + "transform:filter", + "transform:stratify" + ], + "id": 214 + }, + { + "gallery_name": "vega", + "example_name": "Error Bars", + "example_url": "https://vega.github.io/vega/examples/error-bars/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/error-bars.vg.json", + "categories": [ + "Scatter Plots" + ], + "description": "A basic error bar visualization example.", + "datasets": [ + "barley" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:calculate" + ], + "id": 215 + }, + { + "gallery_name": "vega", + "example_name": "Falkensee Population", + "example_url": "https://vega.github.io/vega/examples/falkensee-population/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/falkensee-population.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "An annotated line chart of the population of Falkensee, Germany.", + "datasets": [], + "techniques": [ + "transform:extent" + ], + "id": 216 + }, + { + "gallery_name": "vega", + "example_name": "Flight Passengers", + "example_url": "https://vega.github.io/vega/examples/flight-passengers/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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": [], + "techniques": [ + "transform:calculate", + "transform:timeunit" + ], + "id": 217 + }, + { + "gallery_name": "vega", + "example_name": "Force Directed Layout", + "example_url": "https://vega.github.io/vega/examples/force-directed-layout/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:force", + "layout:linkpath" + ], + "id": 218 + }, + { + "gallery_name": "vega", + "example_name": "Global Development", + "example_url": "https://vega.github.io/vega/examples/global-development/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/global-development.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An interactive scatter plot of global health statistics by country and year.", + "datasets": [ + "gapminder" + ], + "techniques": [ + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:lookup" + ], + "id": 219 + }, + { + "gallery_name": "vega", + "example_name": "Grouped Bar Chart", + "example_url": "https://vega.github.io/vega/examples/grouped-bar-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/grouped-bar-chart.vg.json", + "categories": [ + "Bar Charts" + ], + "description": "A basic grouped bar chart example.", + "datasets": [], + "techniques": [ + "composition:facet", + "interaction:param" + ], + "id": 220 + }, + { + "gallery_name": "vega", + "example_name": "Heatmap", + "example_url": "https://vega.github.io/vega/examples/heatmap/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate" + ], + "id": 221 + }, + { + "gallery_name": "vega", + "example_name": "Histogram", + "example_url": "https://vega.github.io/vega/examples/histogram/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/histogram.vg.json", + "categories": [ + "Distributions" + ], + "description": "An interactive histogram for visualizing a univariate distribution.", + "datasets": [ + "normal_2d" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:bin" + ], + "id": 222 + }, + { + "gallery_name": "vega", + "example_name": "Histogram Null Values", + "example_url": "https://vega.github.io/vega/examples/histogram-null-values/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/histogram-null-values.vg.json", + "categories": [ + "Distributions" + ], + "description": "A histogram of film ratings, modified to include null values.", + "datasets": [ + "movies" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:extent", + "transform:filter" + ], + "id": 223 + }, + { + "gallery_name": "vega", + "example_name": "Horizon Graph", + "example_url": "https://vega.github.io/vega/examples/horizon-graph/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:filter" + ], + "id": 224 + }, + { + "gallery_name": "vega", + "example_name": "Hypothetical Outcome Plots", + "example_url": "https://vega.github.io/vega/examples/hypothetical-outcome-plots/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/hypothetical-outcome-plots.vg.json", + "categories": [ + "Distributions" + ], + "description": "A hypothetical outcome plot that uses animated samples to convey uncertainty.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate" + ], + "id": 225 + }, + { + "gallery_name": "vega", + "example_name": "Interactive Legend", + "example_url": "https://vega.github.io/vega/examples/interactive-legend/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/interactive-legend.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "A scatter plot example with interactive legend and x-axis.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:param", + "transform:filter" + ], + "id": 226 + }, + { + "gallery_name": "vega", + "example_name": "Job Voyager", + "example_url": "https://vega.github.io/vega/examples/job-voyager/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:quantile", + "transform:stack" + ], + "id": 227 + }, + { + "gallery_name": "vega", + "example_name": "Labeled Scatter Plot", + "example_url": "https://vega.github.io/vega/examples/labeled-scatter-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "transform:filter", + "transform:regression" + ], + "id": 228 + }, + { + "gallery_name": "vega", + "example_name": "Line Chart", + "example_url": "https://vega.github.io/vega/examples/line-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/line-chart.vg.json", + "categories": [ + "Line & Area Charts" + ], + "description": "A basic line chart example.", + "datasets": [], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param" + ], + "id": 229 + }, + { + "gallery_name": "vega", + "example_name": "Loess Regression", + "example_url": "https://vega.github.io/vega/examples/loess-regression/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/loess-regression.vg.json", + "categories": [ + "Scatter Plots" + ], + "description": "A scatter plot with trend line calculated via locally-weighted (loess) regression.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:filter", + "transform:loess" + ], + "id": 230 + }, + { + "gallery_name": "vega", + "example_name": "Map With Tooltip", + "example_url": "https://vega.github.io/vega/examples/map-with-tooltip/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/map-with-tooltip.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An example of a custom tooltip (on a map)", + "datasets": [ + "unemployment", + "us_10m" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:param", + "transform:calculate", + "transform:filter", + "transform:lookup" + ], + "id": 231 + }, + { + "gallery_name": "vega", + "example_name": "Nested Bar Chart", + "example_url": "https://vega.github.io/vega/examples/nested-bar-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/nested-bar-chart.vg.json", + "categories": [ + "Bar Charts" + ], + "description": "A nested bar chart example, with bars grouped by category.", + "datasets": [], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:extent", + "transform:stack" + ], + "id": 232 + }, + { + "gallery_name": "vega", + "example_name": "Overview Plus Detail", + "example_url": "https://vega.github.io/vega/examples/overview-plus-detail/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:param" + ], + "id": 233 + }, + { + "gallery_name": "vega", + "example_name": "Packed Bubble Chart", + "example_url": "https://vega.github.io/vega/examples/packed-bubble-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/packed-bubble-chart.vg.json", + "categories": [ + "Other Chart Types" + ], + "description": "A packed bubble chart.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:force" + ], + "id": 234 + }, + { + "gallery_name": "vega", + "example_name": "Pacman", + "example_url": "https://vega.github.io/vega/examples/pacman/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/pacman.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An implementation of the classic video game Pacman.", + "datasets": [], + "techniques": [ + "interaction:param", + "mark:arc", + "transform:calculate" + ], + "id": 235 + }, + { + "gallery_name": "vega", + "example_name": "Parallel Coordinates", + "example_url": "https://vega.github.io/vega/examples/parallel-coordinates/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/parallel-coordinates.vg.json", + "categories": [ + "Other Chart Types" + ], + "description": "Parallel coordinates plot showing 7 dimensions of automobile statistics.", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:calculate", + "transform:filter" + ], + "id": 236 + }, + { + "gallery_name": "vega", + "example_name": "Pi Monte Carlo", + "example_url": "https://vega.github.io/vega/examples/pi-monte-carlo/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/pi-monte-carlo.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "Estimating the value of π via random sampling methods.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "mark:arc", + "transform:calculate", + "transform:filter", + "transform:window" + ], + "id": 237 + }, + { + "gallery_name": "vega", + "example_name": "Pie Chart", + "example_url": "https://vega.github.io/vega/examples/pie-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/pie-chart.vg.json", + "categories": [ + "Circular Charts" + ], + "description": "A basic pie chart example.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:pie", + "mark:arc" + ], + "id": 238 + }, + { + "gallery_name": "vega", + "example_name": "Platformer", + "example_url": "https://vega.github.io/vega/examples/platformer/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/platformer.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "A simple platformer. WASD to move, shift to dash.", + "datasets": [ + "platformer_terrain" + ], + "techniques": [ + "interaction:param", + "transform:calculate" + ], + "id": 239 + }, + { + "gallery_name": "vega", + "example_name": "Population Pyramid", + "example_url": "https://vega.github.io/vega/examples/population-pyramid/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/population-pyramid.vg.json", + "categories": [ + "Bar Charts" + ], + "description": "A population pyramid showing U.S. demographics from 1850 to 2000.", + "datasets": [ + "population" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:filter" + ], + "id": 240 + }, + { + "gallery_name": "vega", + "example_name": "Probability Density", + "example_url": "https://vega.github.io/vega/examples/probability-density/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate" + ], + "id": 241 + }, + { + "gallery_name": "vega", + "example_name": "Projections", + "example_url": "https://vega.github.io/vega/examples/projections/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/projections.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A gallery of maps showcasing different cartographic projections.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:graticule", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:param" + ], + "id": 242 + }, + { + "gallery_name": "vega", + "example_name": "Quantile Dot Plot", + "example_url": "https://vega.github.io/vega/examples/quantile-dot-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/quantile-dot-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A quantile dot plot conveying the uncertainty of bus arrival times.", + "datasets": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:dotbin", + "transform:extent", + "transform:stack" + ], + "id": 243 + }, + { + "gallery_name": "vega", + "example_name": "Quantile Quantile Plot", + "example_url": "https://vega.github.io/vega/examples/quantile-quantile-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:quantile" + ], + "id": 244 + }, + { + "gallery_name": "vega", + "example_name": "Radar Chart", + "example_url": "https://vega.github.io/vega/examples/radar-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/radar-chart.vg.json", + "categories": [ + "Circular Charts" + ], + "description": "A radar chart example, showing multiple dimensions in a radial layout.", + "datasets": [], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:aggregate" + ], + "id": 245 + }, + { + "gallery_name": "vega", + "example_name": "Radial Plot", + "example_url": "https://vega.github.io/vega/examples/radial-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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": [], + "techniques": [ + "layout:pie", + "mark:arc" + ], + "id": 246 + }, + { + "gallery_name": "vega", + "example_name": "Radial Tree Layout", + "example_url": "https://vega.github.io/vega/examples/radial-tree-layout/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:linkpath", + "layout:tree", + "transform:calculate", + "transform:stratify", + "transform:treelinks" + ], + "id": 247 + }, + { + "gallery_name": "vega", + "example_name": "Regression", + "example_url": "https://vega.github.io/vega/examples/regression/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/regression.vg.json", + "categories": [ + "Scatter Plots" + ], + "description": "A scatter plot with trend line calculated via user-configurable regression methods.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:filter", + "transform:regression" + ], + "id": 248 + }, + { + "gallery_name": "vega", + "example_name": "Reorderable Matrix", + "example_url": "https://vega.github.io/vega/examples/reorderable-matrix/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:param", + "transform:calculate", + "transform:cross", + "transform:lookup", + "transform:window" + ], + "id": 249 + }, + { + "gallery_name": "vega", + "example_name": "Scatter Plot", + "example_url": "https://vega.github.io/vega/examples/scatter-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/scatter-plot.vg.json", + "categories": [ + "Scatter Plots" + ], + "description": "A basic scatter plot example depicting automobile statistics.", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:filter" + ], + "id": 250 + }, + { + "gallery_name": "vega", + "example_name": "Scatter Plot Null Values", + "example_url": "https://vega.github.io/vega/examples/scatter-plot-null-values/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:filter" + ], + "id": 251 + }, + { + "gallery_name": "vega", + "example_name": "Serpentine Timeline", + "example_url": "https://vega.github.io/vega/examples/serpentine-timeline/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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": [], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:filter", + "transform:flatten", + "transform:joinaggregate", + "transform:lookup", + "transform:window" + ], + "id": 252 + }, + { + "gallery_name": "vega", + "example_name": "Stacked Area Chart", + "example_url": "https://vega.github.io/vega/examples/stacked-area-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/stacked-area-chart.vg.json", + "categories": [ + "Line & Area Charts" + ], + "description": "A basic stacked area chart example.", + "datasets": [], + "techniques": [ + "composition:facet", + "transform:stack" + ], + "id": 253 + }, + { + "gallery_name": "vega", + "example_name": "Stacked Bar Chart", + "example_url": "https://vega.github.io/vega/examples/stacked-bar-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/stacked-bar-chart.vg.json", + "categories": [ + "Bar Charts" + ], + "description": "A basic stacked bar chart example.", + "datasets": [], + "techniques": [ + "transform:stack" + ], + "id": 254 + }, + { + "gallery_name": "vega", + "example_name": "Stock Index Chart", + "example_url": "https://vega.github.io/vega/examples/stock-index-chart/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:calculate", + "transform:filter", + "transform:lookup" + ], + "id": 255 + }, + { + "gallery_name": "vega", + "example_name": "Sunburst", + "example_url": "https://vega.github.io/vega/examples/sunburst/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/sunburst.vg.json", + "categories": [ + "Tree Diagrams" + ], + "description": "An example of a space-fulling radial layout for hierarchical data.", + "datasets": [ + "flare" + ], + "techniques": [ + "layout:partition", + "mark:arc", + "transform:stratify" + ], + "id": 256 + }, + { + "gallery_name": "vega", + "example_name": "Table Scrollbar", + "example_url": "https://vega.github.io/vega/examples/table-scrollbar/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/table-scrollbar.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An example of a simple table with a scrollbar", + "datasets": [], + "techniques": [ + "interaction:param", + "transform:filter" + ], + "id": 257 + }, + { + "gallery_name": "vega", + "example_name": "Time Units", + "example_url": "https://vega.github.io/vega/examples/time-units/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/time-units.vg.json", + "categories": [ + "Distributions" + ], + "description": "A bar chart of flight statistics, aggregated by the selected time unit.", + "datasets": [ + "flights_20k" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:timeunit" + ], + "id": 258 + }, + { + "gallery_name": "vega", + "example_name": "Timelines", + "example_url": "https://vega.github.io/vega/examples/timelines/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/timelines.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "A timeline visualization of the lives of the first five U.S. presidents.", + "datasets": [], + "techniques": [], + "id": 259 + }, + { + "gallery_name": "vega", + "example_name": "Top K Plot", + "example_url": "https://vega.github.io/vega/examples/top-k-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/top-k-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A top-k bar chart ranking film directors by revenue.", + "datasets": [ + "movies" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:window" + ], + "id": 260 + }, + { + "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://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:lookup", + "transform:window" + ], + "id": 261 + }, + { + "gallery_name": "vega", + "example_name": "Tree Layout", + "example_url": "https://vega.github.io/vega/examples/tree-layout/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:linkpath", + "layout:tree", + "transform:stratify", + "transform:treelinks" + ], + "id": 262 + }, + { + "gallery_name": "vega", + "example_name": "Treemap", + "example_url": "https://vega.github.io/vega/examples/treemap/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/treemap.vg.json", + "categories": [ + "Tree Diagrams" + ], + "description": "An example of treemap layout for hierarchical data.", + "datasets": [ + "flare" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "layout:treemap", + "transform:filter", + "transform:stratify" + ], + "id": 263 + }, + { + "gallery_name": "vega", + "example_name": "U District Cuisine", + "example_url": "https://vega.github.io/vega/examples/u-district-cuisine/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "composition:facet", + "interaction:param", + "transform:aggregate" + ], + "id": 264 + }, + { + "gallery_name": "vega", + "example_name": "Violin Plot", + "example_url": "https://vega.github.io/vega/examples/violin-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/violin-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A violin plot example showing distributions for pengiun body mass.", + "datasets": [ + "penguins" + ], + "techniques": [ + "composition:facet", + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:density", + "transform:filter" + ], + "id": 265 + }, + { + "gallery_name": "vega", + "example_name": "Volcano Contours", + "example_url": "https://vega.github.io/vega/examples/volcano-contours/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/volcano-contours.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A contour plot of the Maungawhau volcano in New Zealand.", + "datasets": [ + "volcano" + ], + "techniques": [ + "geo:geopath", + "interaction:binding", + "interaction:param", + "layout:contour" + ], + "id": 266 + }, + { + "gallery_name": "vega", + "example_name": "Warming Stripes", + "example_url": "https://vega.github.io/vega/examples/warming-stripes/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/warming-stripes.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "Warming Stripes Chart. Originally designed by Ed Hawkins.", + "datasets": [ + "global_temp" + ], + "techniques": [ + "interaction:param" + ], + "id": 267 + }, + { + "gallery_name": "vega", + "example_name": "Watch", + "example_url": "https://vega.github.io/vega/examples/watch/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/watch.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "A watch face clock visualization showing the current time.", + "datasets": [], + "techniques": [ + "interaction:param", + "mark:arc", + "transform:calculate" + ], + "id": 268 + }, + { + "gallery_name": "vega", + "example_name": "Weekly Temperature", + "example_url": "https://vega.github.io/vega/examples/weekly-temperature/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/weekly-temperature.vg.json", + "categories": [ + "Custom Designs" + ], + "description": "Overlaid plots of weekly record, normal, actual, and forecasted temperatures.", + "datasets": [ + "weekly_weather" + ], + "techniques": [ + "transform:filter" + ], + "id": 269 + }, + { + "gallery_name": "vega", + "example_name": "Wheat And Wages", + "example_url": "https://vega.github.io/vega/examples/wheat-and-wages/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "transform:calculate", + "transform:filter" + ], + "id": 270 + }, + { + "gallery_name": "vega", + "example_name": "Wheat Plot", + "example_url": "https://vega.github.io/vega/examples/wheat-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/wheat-plot.vg.json", + "categories": [ + "Distributions" + ], + "description": "A wheat plot example, which combines elements of dot plots and histograms.", + "datasets": [ + "normal_2d" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:bin", + "transform:extent", + "transform:stack" + ], + "id": 271 + }, + { + "gallery_name": "vega", + "example_name": "Wind Vectors", + "example_url": "https://vega.github.io/vega/examples/wind-vectors/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/wind-vectors.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A flow map of wind direction and speed over northwest Europe.", + "datasets": [ + "windvectors" + ], + "techniques": [ + "geo:coordinates", + "interaction:binding", + "interaction:param" + ], + "id": 272 + }, + { + "gallery_name": "vega", + "example_name": "Word Cloud", + "example_url": "https://vega.github.io/vega/examples/word-cloud/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/word-cloud.vg.json", + "categories": [ + "Other Chart Types" + ], + "description": "A word cloud visualization depicting Vega research paper abstracts.", + "datasets": [], + "techniques": [ + "layout:wordcloud", + "transform:calculate", + "transform:countpattern" + ], + "id": 273 + }, + { + "gallery_name": "vega", + "example_name": "World Map", + "example_url": "https://vega.github.io/vega/examples/world-map/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/world-map.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "A configurable map of countries of the world.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:graticule", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param" + ], + "id": 274 + }, + { + "gallery_name": "vega", + "example_name": "Zoomable Binned Plot", + "example_url": "https://vega.github.io/vega/examples/zoomable-binned-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:extent", + "transform:filter" + ], + "id": 275 + }, + { + "gallery_name": "vega", + "example_name": "Zoomable Circle Packing", + "example_url": "https://vega.github.io/vega/examples/zoomable-circle-packing/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/zoomable-circle-packing.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An example of a zoomable circle packing layout for hierarchical data.", + "datasets": [ + "flare" + ], + "techniques": [ + "interaction:param", + "layout:pack", + "transform:calculate", + "transform:filter", + "transform:stratify", + "transform:window" + ], + "id": 276 + }, + { + "gallery_name": "vega", + "example_name": "Zoomable Scatter Plot", + "example_url": "https://vega.github.io/vega/examples/zoomable-scatter-plot/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/zoomable-scatter-plot.vg.json", + "categories": [ + "Interaction Techniques" + ], + "description": "An interactive scatter plot example supporting pan and zoom.", + "datasets": [ + "normal_2d" + ], + "techniques": [ + "interaction:param", + "transform:extent", + "transform:filter" + ], + "id": 277 + }, + { + "gallery_name": "vega", + "example_name": "Zoomable World Map", + "example_url": "https://vega.github.io/vega/examples/zoomable-world-map/", + "spec_url": "https://raw.githubusercontent.com/vega/vega/main/docs/examples/zoomable-world-map.vg.json", + "categories": [ + "Geographic Maps" + ], + "description": "An interactive world map supporting pan and zoom.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:graticule", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:param" + ], + "id": 278 + }, + { + "gallery_name": "vega-lite", + "example_name": "1D Strip Plot", + "example_url": "https://vega.github.io/vega-lite/examples/tick_dot.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/tick_dot.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [], + "id": 279 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/rect_binned_heatmap.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots", + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:filter" + ], + "id": 280 + }, + { + "gallery_name": "vega-lite", + "example_name": "2D Histogram Scatterplot", + "example_url": "https://vega.github.io/vega-lite/examples/circle_binned.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_binned.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots", + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 281 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_color_disabled_scale.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A bar chart that directly encodes color names in the data.", + "datasets": [], + "techniques": [], + "id": 282 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trail_comet.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": null, + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet", + "mark:trail", + "transform:calculate", + "transform:fold", + "transform:pivot" + ], + "id": 283 + }, + { + "gallery_name": "vega-lite", + "example_name": "Aggregate Bar Chart", + "example_url": "https://vega.github.io/vega-lite/examples/bar_aggregate.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_aggregate.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A bar chart showing the US population distribution of age groups in 2000.", + "datasets": [ + "population" + ], + "techniques": [ + "transform:aggregate", + "transform:filter" + ], + "id": 284 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_aggregate_sort_by_encoding.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A bar chart that sorts the y-values by the x-values.", + "datasets": [ + "population" + ], + "techniques": [ + "transform:aggregate", + "transform:filter" + ], + "id": 285 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_global_development.vl.json", + "categories": [ + "Interactive - Interactive Multi-View Displays" + ], + "description": "Similar to the Vega version at https://vega.github.io/vega/examples/global-development/.", + "datasets": [ + "gapminder" + ], + "techniques": [ + "composition:layer", + "interaction:binding", + "interaction:param", + "transform:filter", + "transform:lookup" + ], + "id": 286 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/rect_heatmap_weather.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 287 + }, + { + "gallery_name": "vega-lite", + "example_name": "Area Chart", + "example_url": "https://vega.github.io/vega-lite/examples/area.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 288 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_gradient.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": "Google's stock price over time.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 289 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_overlay.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": "Google's stock price over time.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 290 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_area_brush.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "composition:layer", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 291 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_bar_annotations.vl.json", + "categories": [ + "Layered Plots - 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": [], + "techniques": [ + "composition:layer", + "transform:calculate", + "transform:filter" + ], + "id": 292 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_argmax.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": "The production budget of the movie that has the highest US Gross in each major genre.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 293 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_month_temporal_initial.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "Using `labelExpr` to show only initial letters of month names.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 294 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_bar_select_highlight.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)", + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 295 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_bar_labels_grey.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:aggregate" + ], + "id": 296 + }, + { + "gallery_name": "vega-lite", + "example_name": "Bar Chart with Labels", + "example_url": "https://vega.github.io/vega-lite/examples/layer_bar_labels.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_bar_labels.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "Bar chart with text labels. Set domain to make the frame cover the labels.", + "datasets": [], + "techniques": [ + "composition:layer" + ], + "id": 297 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_negative.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [], + "id": 298 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_count_minimap.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:concat", + "interaction:param", + "transform:aggregate", + "transform:filter" + ], + "id": 299 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_axis_space_saving.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "Bar Chart with a spacing-saving y-axis", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 300 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_month_temporal_band_center.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 301 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_barley.vl.json", + "categories": [ + "Multi-View Displays - 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" + ], + "techniques": [ + "composition:facet", + "transform:aggregate" + ], + "id": 302 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/boxplot_minmax_2D_vertical.vl.json", + "categories": [ + "Composite Marks - Box Plots" + ], + "description": "A vertical box plot showing median, min, and max body mass of penguins.", + "datasets": [ + "penguins" + ], + "techniques": [ + "mark:boxplot" + ], + "id": 303 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/boxplot_preaggregated.vl.json", + "categories": [ + "Composite Marks - Box Plots" + ], + "description": null, + "datasets": [], + "techniques": [ + "composition:layer", + "transform:flatten" + ], + "id": 304 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/brush_table.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Drag a rectangular brush to show (first 20) selected points in a table.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:filter", + "transform:window" + ], + "id": 305 + }, + { + "gallery_name": "vega-lite", + "example_name": "Bubble Plot", + "example_url": "https://vega.github.io/vega-lite/examples/point_bubble.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_bubble.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "A bubbleplot showing horsepower on x, miles per gallons on y, and binned acceleration on size.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 306 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_bubble_health_income.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "interaction:selection" + ], + "id": 307 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_natural_disasters.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:filter" + ], + "id": 308 + }, + { + "gallery_name": "vega-lite", + "example_name": "Bullet Chart", + "example_url": "https://vega.github.io/vega-lite/examples/facet_bullet.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/facet_bullet.vl.json", + "categories": [ + "Layered Plots - Other Layered Plots" + ], + "description": null, + "datasets": [], + "techniques": [ + "composition:facet", + "composition:layer" + ], + "id": 309 + }, + { + "gallery_name": "vega-lite", + "example_name": "Bump Chart", + "example_url": "https://vega.github.io/vega-lite/examples/line_bump.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_bump.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Bump chart", + "datasets": [], + "techniques": [], + "id": 310 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/joinaggregate_mean_difference_by_year.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "composition:layer", + "transform:filter", + "transform:joinaggregate", + "transform:timeunit" + ], + "id": 311 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/joinaggregate_mean_difference.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:filter", + "transform:joinaggregate" + ], + "id": 312 + }, + { + "gallery_name": "vega-lite", + "example_name": "Calculate Residuals", + "example_url": "https://vega.github.io/vega-lite/examples/joinaggregate_residual_graph.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/joinaggregate_residual_graph.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:calculate", + "transform:filter", + "transform:joinaggregate", + "transform:timeunit" + ], + "id": 313 + }, + { + "gallery_name": "vega-lite", + "example_name": "Candlestick Chart", + "example_url": "https://vega.github.io/vega-lite/examples/layer_candlestick.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_candlestick.vl.json", + "categories": [ + "Layered Plots - Other Layered Plots" + ], + "description": "A candlestick chart inspired by an example in Protovis (http://mbostock.github.io/protovis/ex/candlestick.html)", + "datasets": [ + "ohlc" + ], + "techniques": [ + "composition:layer" + ], + "id": 314 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_line_co2_concentration.vl.json", + "categories": [ + "Single-View Plots - Line Charts", + "Layered Plots - 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" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:calculate" + ], + "id": 315 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/selection_type_point_zorder.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Show points on top when hovered over with the pointer", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param" + ], + "id": 316 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_choropleth.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "us_10m", + "unemployment" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 317 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_color_with_shape.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "A scatterplot showing body mass and flipper lengths of penguins.", + "datasets": [ + "penguins" + ], + "techniques": [], + "id": 318 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/facet_grid_bar.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": "A simple grid of bar charts to compare performance data.", + "datasets": [], + "techniques": [ + "composition:facet" + ], + "id": 319 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/concat_layer_voyager_result.vl.json", + "categories": [ + "Layered Plots - 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": [], + "techniques": [ + "composition:concat", + "composition:layer", + "transform:filter" + ], + "id": 320 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/connected_scatterplot.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "A connected scatterplot can be created by customizing line `order` and adding `point` overlay in the line mark definition.", + "datasets": [ + "driving" + ], + "techniques": [], + "id": 321 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/airport_connections.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:lookup" + ], + "id": 322 + }, + { + "gallery_name": "vega-lite", + "example_name": "Crossfilter (Filter)", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_crossfilter.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_crossfilter.vl.json", + "categories": [ + "Interactive - Interactive Multi-View Displays" + ], + "description": null, + "datasets": [ + "flights_2k" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:filter" + ], + "id": 323 + }, + { + "gallery_name": "vega-lite", + "example_name": "Crossfilter (Highlight)", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_layered_crossfilter.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_layered_crossfilter.vl.json", + "categories": [ + "Interactive - Interactive Multi-View Displays" + ], + "description": null, + "datasets": [ + "flights_2k" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:filter" + ], + "id": 324 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_cumulative_freq.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots", + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:window" + ], + "id": 325 + }, + { + "gallery_name": "vega-lite", + "example_name": "Density Plot", + "example_url": "https://vega.github.io/vega-lite/examples/area_density.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_density.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "transform:density" + ], + "id": 326 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/concat_bar_scales_discretize.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "Horizontally concatenated charts that show different types of discretizing scales.", + "datasets": [], + "techniques": [ + "composition:concat", + "transform:quantile" + ], + "id": 327 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_likert.vl.json", + "categories": [ + "Layered Plots - 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": [], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:filter" + ], + "id": 328 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_diverging_stack_population_pyramid.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:filter" + ], + "id": 329 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_diverging_stack_transform.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "transform:calculate", + "transform:joinaggregate", + "transform:stack" + ], + "id": 330 + }, + { + "gallery_name": "vega-lite", + "example_name": "Donut Chart", + "example_url": "https://vega.github.io/vega-lite/examples/arc_donut.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/arc_donut.vl.json", + "categories": [ + "Single-View Plots - Circular Plots" + ], + "description": "A donut chart encodes proportional differences among a set of numeric values using angular extents.", + "datasets": [], + "techniques": [ + "mark:arc" + ], + "id": 331 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_offset_random.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "Shows the relationship between horsepower and the number of cylinders using point marks with random offset (jittering).", + "datasets": [ + "cars" + ], + "techniques": [ + "transform:calculate" + ], + "id": 332 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/sequence_line_fold.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Plots two functions using a generated sequence.", + "datasets": [], + "techniques": [ + "transform:calculate", + "transform:fold" + ], + "id": 333 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/dynamic_color_legend.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:concat", + "interaction:binding", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 334 + }, + { + "gallery_name": "vega-lite", + "example_name": "Earthquakes Example", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_geo_earthquakes.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_geo_earthquakes.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": "Interactive globe visualization of earthquakes", + "datasets": [ + "world_110m", + "earthquakes" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param", + "transform:calculate", + "transform:filter" + ], + "id": 335 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_point_errorbar_ci.vl.json", + "categories": [ + "Composite Marks - Error Bars & Error Bands" + ], + "description": null, + "datasets": [ + "barley" + ], + "techniques": [ + "composition:layer", + "mark:error", + "transform:aggregate" + ], + "id": 336 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_point_errorbar_stdev.vl.json", + "categories": [ + "Composite Marks - Error Bars & Error Bands" + ], + "description": null, + "datasets": [ + "barley" + ], + "techniques": [ + "composition:layer", + "mark:error", + "transform:aggregate" + ], + "id": 337 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/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" + ], + "techniques": [ + "composition:facet", + "geo:geojson", + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 338 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_density_facet.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": null, + "datasets": [ + "penguins" + ], + "techniques": [ + "composition:facet", + "transform:density", + "transform:stack" + ], + "id": 339 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/window_top_k.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "transform:filter", + "transform:window" + ], + "id": 340 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_bin_extent.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "flights_5k" + ], + "techniques": [ + "composition:concat", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:calculate" + ], + "id": 341 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_gantt.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A simple bar chart with ranged data (aka Gantt Chart).", + "datasets": [], + "techniques": [], + "id": 342 + }, + { + "gallery_name": "vega-lite", + "example_name": "Grouped Bar Chart", + "example_url": "https://vega.github.io/vega-lite/examples/bar_grouped.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_grouped.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [], + "id": 343 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_grouped_repeated.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "transform:aggregate" + ], + "id": 344 + }, + { + "gallery_name": "vega-lite", + "example_name": "Heat Lane Chart", + "example_url": "https://vega.github.io/vega-lite/examples/bar_heatlane.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_heatlane.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:joinaggregate" + ], + "id": 345 + }, + { + "gallery_name": "vega-lite", + "example_name": "Heatmap with Labels", + "example_url": "https://vega.github.io/vega-lite/examples/layer_text_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_text_heatmap.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "transform:aggregate" + ], + "id": 346 + }, + { + "gallery_name": "vega-lite", + "example_name": "Histogram", + "example_url": "https://vega.github.io/vega-lite/examples/histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/histogram.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:bin" + ], + "id": 347 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_binned_data.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots" + ], + "description": null, + "datasets": [], + "techniques": [ + "transform:bin" + ], + "id": 348 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_histogram_full_height_hover.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "interaction:param", + "transform:aggregate", + "transform:bin" + ], + "id": 349 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_histogram_global_mean.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:bin" + ], + "id": 350 + }, + { + "gallery_name": "vega-lite", + "example_name": "Horizon Graph", + "example_url": "https://vega.github.io/vega-lite/examples/area_horizon.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_horizon.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs", + "Layered Plots - Other Layered Plots" + ], + "description": "Horizon Graph with 2 layers. (See https://idl.cs.washington.edu/papers/horizon/ for more details on Horizon Graphs.)", + "datasets": [], + "techniques": [ + "composition:layer", + "transform:calculate" + ], + "id": 351 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_negative_horizontal_label.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "composition:layer" + ], + "id": 352 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_bar_h.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "barley" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 353 + }, + { + "gallery_name": "vega-lite", + "example_name": "Horizontally Repeated Charts", + "example_url": "https://vega.github.io/vega-lite/examples/repeat_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/repeat_histogram.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "Horizontally repeated charts that show the histograms of different parameters of cars in different countries.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:repeat", + "transform:aggregate", + "transform:bin" + ], + "id": 354 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/scatter_image.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [], + "techniques": [], + "id": 355 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_trellis.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "income", + "us_10m" + ], + "techniques": [ + "composition:facet", + "geo:geojson", + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 356 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/selection_layer_bar_month.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 357 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_concat_layer.vl.json", + "categories": [ + "Interactive - Interactive Multi-View Displays" + ], + "description": "A dashboard with cross-highlighting.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:concat", + "composition:layer", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:bin", + "transform:filter" + ], + "id": 358 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_index_chart.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "stocks" + ], + "techniques": [ + "composition:layer", + "interaction:param", + "transform:calculate", + "transform:filter", + "transform:lookup", + "transform:timeunit" + ], + "id": 359 + }, + { + "gallery_name": "vega-lite", + "example_name": "Interactive Legend", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_legend.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_legend.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "interaction:binding", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:stack", + "transform:timeunit" + ], + "id": 360 + }, + { + "gallery_name": "vega-lite", + "example_name": "Interactive Scatterplot Matrix", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_splom.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_splom.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation", + "Interactive - Interactive Multi-View Displays" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:repeat", + "interaction:binding", + "interaction:conditional", + "interaction:param" + ], + "id": 361 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/isotype_bar_chart.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "composition:facet" + ], + "id": 362 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/isotype_bar_chart_emoji.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "composition:facet", + "transform:calculate", + "transform:window" + ], + "id": 363 + }, + { + "gallery_name": "vega-lite", + "example_name": "Isotype Grid", + "example_url": "https://vega.github.io/vega-lite/examples/isotype_grid.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/isotype_grid.vl.json", + "categories": [ + "Interactive - 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": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection", + "transform:calculate" + ], + "id": 364 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/rect_lasagna.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 365 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_layered_transparent.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A bar chart showing the US population distribution of age groups and gender in 2000.", + "datasets": [ + "population" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:stack" + ], + "id": 366 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_cumulative_histogram.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots", + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:bin", + "transform:filter", + "transform:window" + ], + "id": 367 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_dual_axis.vl.json", + "categories": [ + "Layered Plots - Other Layered Plots" + ], + "description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`", + "datasets": [ + "weather" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 368 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_line_mean_point_raw.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations", + "Layered Plots - Labeling & Annotation" + ], + "description": "Plot showing average data with raw values in the background.", + "datasets": [ + "stocks" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 369 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_line_rolling_mean_point_raw.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations", + "Layered Plots - Labeling & Annotation" + ], + "description": "Plot showing a 30 day rolling average with raw values in the background.", + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:layer", + "transform:window" + ], + "id": 370 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_text_heatmap.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "transform:aggregate" + ], + "id": 371 + }, + { + "gallery_name": "vega-lite", + "example_name": "Line Chart", + "example_url": "https://vega.github.io/vega-lite/examples/line.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Google's stock price over time.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 372 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_line_window.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [], + "techniques": [ + "composition:layer", + "transform:calculate", + "transform:window" + ], + "id": 373 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_conditional_axis.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Line chart with conditional axis ticks, labels, and grid.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter", + "transform:timeunit" + ], + "id": 374 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_line_errorband_ci.vl.json", + "categories": [ + "Composite Marks - Error Bars & Error Bands" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "mark:error", + "transform:aggregate", + "transform:timeunit" + ], + "id": 375 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_falkensee.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": "The population of the German city of Falkensee over time", + "datasets": [], + "techniques": [ + "composition:layer", + "transform:timeunit" + ], + "id": 376 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_skip_invalid_mid_overlay.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": null, + "datasets": [], + "techniques": [], + "id": 377 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_monotone.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": null, + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 378 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_overlay.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 379 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_overlay_stroked.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 380 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trail_color.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Stock prices of 5 Tech Companies over Time.", + "datasets": [ + "stocks" + ], + "techniques": [ + "mark:trail" + ], + "id": 381 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/window_rank.vl.json", + "categories": [ + "Single-View Plots - Line Charts", + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [], + "techniques": [ + "transform:window" + ], + "id": 382 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/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" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 383 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_dashed_part.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [], + "id": 384 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_strokedash.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Stock prices of 5 Tech Companies over Time.", + "datasets": [ + "stocks" + ], + "techniques": [], + "id": 385 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_point_line_regression.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:calculate", + "transform:regression" + ], + "id": 386 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_point_line_loess.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "transform:loess" + ], + "id": 387 + }, + { + "gallery_name": "vega-lite", + "example_name": "Log-scaled Histogram", + "example_url": "https://vega.github.io/vega-lite/examples/histogram_log.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/histogram_log.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:calculate" + ], + "id": 388 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/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" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:shape", + "geo:topojson", + "transform:calculate" + ], + "id": 389 + }, + { + "gallery_name": "vega-lite", + "example_name": "Marginal Histograms", + "example_url": "https://vega.github.io/vega-lite/examples/concat_marginal_histograms.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/concat_marginal_histograms.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "Marginal histograms show the counts along the x and y dimension.", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:concat", + "transform:aggregate", + "transform:bin" + ], + "id": 390 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_precipitation_mean.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:timeunit" + ], + "id": 391 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/rect_mosaic_labelled_with_offset.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:concat", + "composition:layer", + "transform:aggregate", + "transform:calculate", + "transform:stack", + "transform:window" + ], + "id": 392 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_color.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Stock prices of 5 Tech Companies over Time.", + "datasets": [ + "stocks" + ], + "techniques": [], + "id": 393 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_color_halo.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "transform:pivot" + ], + "id": 394 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_multi_line_label.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:filter" + ], + "id": 395 + }, + { + "gallery_name": "vega-lite", + "example_name": "Multi Series Line Chart with Repeat Operator", + "example_url": "https://vega.github.io/vega-lite/examples/repeat_layer.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/repeat_layer.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "transform:aggregate", + "transform:bin" + ], + "id": 396 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_multi_line_tooltip.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "transform:timeunit" + ], + "id": 397 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_multi_line_pivot_tooltip.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:param", + "transform:filter", + "transform:pivot" + ], + "id": 398 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_line_hover.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:filter" + ], + "id": 399 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_line_point_hover.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:layer", + "interaction:param" + ], + "id": 400 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/nested_concat_align.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "Nested concatenation aligned by setting axis minExtent", + "datasets": [ + "movies" + ], + "techniques": [ + "composition:concat", + "composition:repeat", + "transform:aggregate", + "transform:bin" + ], + "id": 401 + }, + { + "gallery_name": "vega-lite", + "example_name": "Non-linear Histogram", + "example_url": "https://vega.github.io/vega-lite/examples/histogram_nonlinear.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/histogram_nonlinear.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [], + "id": 402 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_bar_normalize.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "population" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:stack" + ], + "id": 403 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_bar_h_normalized_labeled.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "population" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:stack" + ], + "id": 404 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_area_normalize.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "transform:aggregate", + "transform:stack", + "transform:timeunit" + ], + "id": 405 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_layer.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "us_10m", + "airports" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson" + ], + "id": 406 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_circle.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "zipcodes" + ], + "techniques": [ + "geo:coordinates", + "geo:projection", + "transform:calculate" + ], + "id": 407 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_overview_detail.vl.json", + "categories": [ + "Interactive - Interactive Multi-View Displays" + ], + "description": null, + "datasets": [ + "sp500" + ], + "techniques": [ + "composition:concat", + "interaction:param" + ], + "id": 408 + }, + { + "gallery_name": "vega-lite", + "example_name": "Paintbrush Highlight", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_paintbrush.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_paintbrush.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Select multiple points with the shift key.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param" + ], + "id": 409 + }, + { + "gallery_name": "vega-lite", + "example_name": "Parallel Coordinate Plot", + "example_url": "https://vega.github.io/vega-lite/examples/parallel_coordinate.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/parallel_coordinate.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "composition:layer", + "transform:aggregate", + "transform:calculate", + "transform:filter", + "transform:fold", + "transform:joinaggregate", + "transform:window" + ], + "id": 410 + }, + { + "gallery_name": "vega-lite", + "example_name": "Pie Chart", + "example_url": "https://vega.github.io/vega-lite/examples/arc_pie.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/arc_pie.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "mark:arc" + ], + "id": 411 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_arc_label.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "composition:layer", + "mark:arc", + "transform:stack" + ], + "id": 412 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/arc_pie_normalize_tooltip.vl.json", + "categories": [ + "Single-View Plots - Circular Plots" + ], + "description": "A pie chart with a tooltip that shows the percentage covered by the hovered slice.", + "datasets": [], + "techniques": [ + "mark:arc", + "transform:stack" + ], + "id": 413 + }, + { + "gallery_name": "vega-lite", + "example_name": "Population Pyramid", + "example_url": "https://vega.github.io/vega-lite/examples/concat_population_pyramid.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/concat_population_pyramid.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "A population pyramid for the US in 2000.", + "datasets": [ + "population" + ], + "techniques": [ + "composition:concat", + "transform:aggregate", + "transform:calculate", + "transform:filter" + ], + "id": 414 + }, + { + "gallery_name": "vega-lite", + "example_name": "Projection explorer", + "example_url": "https://vega.github.io/vega-lite/examples/geo_params_projections.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_params_projections.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": "Compare different projections.", + "datasets": [ + "world_110m" + ], + "techniques": [ + "geo:projection", + "geo:shape", + "geo:topojson", + "interaction:binding", + "interaction:param" + ], + "id": 415 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/arc_pie_pyramid.vl.json", + "categories": [ + "Single-View Plots - Circular Plots" + ], + "description": "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm", + "datasets": [], + "techniques": [ + "mark:arc", + "transform:stack" + ], + "id": 416 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_quantile_quantile.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "normal_2d" + ], + "techniques": [ + "composition:concat", + "transform:calculate", + "transform:quantile" + ], + "id": 417 + }, + { + "gallery_name": "vega-lite", + "example_name": "Query Widgets", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_query_widgets.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_query_widgets.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Drag the sliders to highlight points.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "interaction:binding", + "interaction:conditional", + "interaction:param", + "transform:calculate", + "transform:filter" + ], + "id": 418 + }, + { + "gallery_name": "vega-lite", + "example_name": "Radial Plot", + "example_url": "https://vega.github.io/vega-lite/examples/arc_radial.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/arc_radial.vl.json", + "categories": [ + "Single-View Plots - 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": [], + "techniques": [ + "composition:layer", + "mark:arc", + "transform:stack" + ], + "id": 419 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_ranged_dot.vl.json", + "categories": [ + "Layered Plots - 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" + ], + "techniques": [ + "composition:layer", + "transform:filter" + ], + "id": 420 + }, + { + "gallery_name": "vega-lite", + "example_name": "Rectangular Brush", + "example_url": "https://vega.github.io/vega-lite/examples/interactive_brush.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_brush.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Drag out a rectangular brush to highlight points.", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 421 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_percent_of_total.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots", + "Single-View Plots - Advanced Calculations" + ], + "description": "A bar graph showing what activites consume what percentage of the day.", + "datasets": [], + "techniques": [ + "transform:calculate", + "transform:joinaggregate" + ], + "id": 422 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/histogram_rel_freq.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate", + "transform:bin", + "transform:calculate", + "transform:joinaggregate" + ], + "id": 423 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/repeat_layer.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:layer", + "composition:repeat", + "transform:aggregate", + "transform:bin" + ], + "id": 424 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_size_responsive.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 425 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_rule.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "us_10m", + "airports", + "flights_airport" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:filter", + "transform:lookup" + ], + "id": 426 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/text_scatterplot_colored.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "transform:calculate" + ], + "id": 427 + }, + { + "gallery_name": "vega-lite", + "example_name": "Scatterplot", + "example_url": "https://vega.github.io/vega-lite/examples/point_2d.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_2d.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "A scatterplot showing horsepower and miles per gallons for various cars.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 428 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/selection_translate_scatterplot_drag.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:binding", + "interaction:param", + "interaction:selection" + ], + "id": 429 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_href.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "transform:calculate" + ], + "id": 430 + }, + { + "gallery_name": "vega-lite", + "example_name": "Scatterplot with Filled Circles", + "example_url": "https://vega.github.io/vega-lite/examples/circle.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [], + "id": 431 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_scatter_errorband_1D_stdev_global_mean.vl.json", + "categories": [ + "Composite Marks - Error Bars & Error Bands" + ], + "description": "A scatterplot showing horsepower and miles per gallons for various cars.", + "datasets": [ + "cars" + ], + "techniques": [ + "composition:layer", + "mark:error", + "transform:aggregate" + ], + "id": 432 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_invalid_color.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [], + "id": 433 + }, + { + "gallery_name": "vega-lite", + "example_name": "Search Input", + "example_url": "https://vega.github.io/vega-lite/examples/param_search_input.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/param_search_input.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": "Search to highlight the relevant car models. Regexes are supported so you can type e.g. `mazda|ford`", + "datasets": [ + "cars" + ], + "techniques": [ + "interaction:binding", + "interaction:param" + ], + "id": 434 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/interactive_seattle_weather.vl.json", + "categories": [ + "Interactive - 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" + ], + "techniques": [ + "composition:concat", + "interaction:conditional", + "interaction:param", + "transform:aggregate", + "transform:filter", + "transform:timeunit" + ], + "id": 435 + }, + { + "gallery_name": "vega-lite", + "example_name": "Selectable Heatmap", + "example_url": "https://vega.github.io/vega-lite/examples/selection_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/selection_heatmap.vl.json", + "categories": [ + "Interactive - Interactive Charts" + ], + "description": null, + "datasets": [], + "techniques": [ + "interaction:conditional", + "interaction:param", + "interaction:selection" + ], + "id": 436 + }, + { + "gallery_name": "vega-lite", + "example_name": "Simple Bar Chart", + "example_url": "https://vega.github.io/vega-lite/examples/bar.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": "A bar chart encodes quantitative values as the extent of rectangular bars.", + "datasets": [], + "techniques": [], + "id": 437 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_bar_labels.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": "Bar chart with text labels. Set domain to make the frame cover the labels.", + "datasets": [], + "techniques": [ + "composition:layer" + ], + "id": 438 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/layer_bar_fruit.vl.json", + "categories": [ + "Layered Plots - Labeling & Annotation" + ], + "description": "Vega-Lite version of bar chart from https://observablehq.com/@d3/learn-d3-scales.", + "datasets": [], + "techniques": [ + "composition:layer" + ], + "id": 439 + }, + { + "gallery_name": "vega-lite", + "example_name": "Slope Graph", + "example_url": "https://vega.github.io/vega-lite/examples/line_slope.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_slope.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 440 + }, + { + "gallery_name": "vega-lite", + "example_name": "Stacked Area Chart", + "example_url": "https://vega.github.io/vega-lite/examples/stacked_area.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_area.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 441 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_bar_weather.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 442 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_bar_count_corner_radius_mark.vl.json", + "categories": [ + "Single-View Plots - Bar Charts" + ], + "description": null, + "datasets": [ + "seattle_weather" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 443 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/area_density_stacked.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots" + ], + "description": null, + "datasets": [ + "penguins" + ], + "techniques": [ + "transform:density", + "transform:stack" + ], + "id": 444 + }, + { + "gallery_name": "vega-lite", + "example_name": "Step Chart", + "example_url": "https://vega.github.io/vega-lite/examples/line_step.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/line_step.vl.json", + "categories": [ + "Single-View Plots - Line Charts" + ], + "description": "Google's stock price over time.", + "datasets": [ + "stocks" + ], + "techniques": [ + "transform:filter" + ], + "id": 445 + }, + { + "gallery_name": "vega-lite", + "example_name": "Streamgraph", + "example_url": "https://vega.github.io/vega-lite/examples/stacked_area_stream.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/stacked_area_stream.vl.json", + "categories": [ + "Single-View Plots - Area Charts & Streamgraphs" + ], + "description": null, + "datasets": [ + "unemployment_across_industries" + ], + "techniques": [ + "transform:aggregate", + "transform:stack", + "transform:timeunit" + ], + "id": 446 + }, + { + "gallery_name": "vega-lite", + "example_name": "Strip Plot", + "example_url": "https://vega.github.io/vega-lite/examples/tick_strip.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/tick_strip.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "Shows the relationship between horsepower and the number of cylinders using tick marks.", + "datasets": [ + "cars" + ], + "techniques": [], + "id": 447 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_custom_tick_labels.vl.json", + "categories": [ + "Single-View Plots - Scatter & Strip Plots" + ], + "description": "After using the numerical values to calculate the average rating, they are replaced by string labels.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 448 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_github_punchcard.vl.json", + "categories": [ + "Single-View Plots - 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" + ], + "techniques": [ + "transform:aggregate", + "transform:timeunit" + ], + "id": 449 + }, + { + "gallery_name": "vega-lite", + "example_name": "Table Heatmap", + "example_url": "https://vega.github.io/vega-lite/examples/rect_heatmap.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/rect_heatmap.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "transform:aggregate" + ], + "id": 450 + }, + { + "gallery_name": "vega-lite", + "example_name": "Ternary chart", + "example_url": "https://vega.github.io/vega-lite/examples/ternary.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/ternary.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": "A ternary chart example created by [Adrián Bazzana](https://www.linkedin.com/in/adrian-bazzana/).", + "datasets": [], + "techniques": [ + "composition:layer", + "transform:calculate", + "transform:filter" + ], + "id": 451 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/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" + ], + "techniques": [ + "composition:repeat", + "geo:geojson", + "geo:projection", + "geo:shape", + "geo:topojson", + "transform:lookup" + ], + "id": 452 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/window_top_k_others.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": "By @manzt, adapted from https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example.", + "datasets": [ + "movies" + ], + "techniques": [ + "transform:aggregate", + "transform:calculate", + "transform:window" + ], + "id": 453 + }, + { + "gallery_name": "vega-lite", + "example_name": "Trellis Area", + "example_url": "https://vega.github.io/vega-lite/examples/trellis_area.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_area.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": "Stock prices of four large companies as a small multiples of area charts.", + "datasets": [ + "stocks" + ], + "techniques": [ + "composition:facet", + "transform:filter" + ], + "id": 454 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_area_seattle.vl.json", + "categories": [ + "Multi-View Displays - 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" + ], + "techniques": [ + "composition:facet", + "transform:aggregate", + "transform:calculate", + "transform:timeunit" + ], + "id": 455 + }, + { + "gallery_name": "vega-lite", + "example_name": "Trellis Bar Chart", + "example_url": "https://vega.github.io/vega-lite/examples/trellis_bar.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_bar.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": "A trellis bar chart showing the US population distribution of age groups and gender in 2000.", + "datasets": [ + "population" + ], + "techniques": [ + "composition:facet", + "transform:aggregate", + "transform:calculate", + "transform:filter" + ], + "id": 456 + }, + { + "gallery_name": "vega-lite", + "example_name": "Trellis Histograms", + "example_url": "https://vega.github.io/vega-lite/examples/trellis_bar_histogram.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_bar_histogram.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": null, + "datasets": [ + "cars" + ], + "techniques": [ + "composition:facet", + "transform:aggregate", + "transform:bin" + ], + "id": 457 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_scatter.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": null, + "datasets": [ + "movies" + ], + "techniques": [ + "composition:facet" + ], + "id": 458 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_anscombe.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": "Anscombe's Quartet", + "datasets": [ + "anscombe" + ], + "techniques": [ + "composition:facet" + ], + "id": 459 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/trellis_stacked_bar.vl.json", + "categories": [ + "Multi-View Displays - Faceting (Trellis Plot / Small Multiples)" + ], + "description": null, + "datasets": [ + "barley" + ], + "techniques": [ + "composition:facet", + "transform:aggregate" + ], + "id": 460 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/boxplot_2D_vertical.vl.json", + "categories": [ + "Composite Marks - Box Plots" + ], + "description": "A vertical box plot showing median and lower and upper quartiles of the distribution of body mass of penguins.", + "datasets": [ + "penguins" + ], + "techniques": [ + "mark:boxplot" + ], + "id": 461 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/geo_text.vl.json", + "categories": [ + "Maps (Geographic Displays)" + ], + "description": null, + "datasets": [ + "us_10m", + "us_state_capitals" + ], + "techniques": [ + "composition:layer", + "geo:coordinates", + "geo:projection", + "geo:shape", + "geo:topojson" + ], + "id": 462 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/lookup.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [ + "lookup_groups", + "lookup_people" + ], + "techniques": [ + "transform:aggregate", + "transform:lookup" + ], + "id": 463 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/window_impute_null.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": "Using window transform to impute missing values in a line chart by averaging the previous and next values.", + "datasets": [], + "techniques": [ + "transform:calculate", + "transform:timeunit", + "transform:window" + ], + "id": 464 + }, + { + "gallery_name": "vega-lite", + "example_name": "Vertical Concatenation", + "example_url": "https://vega.github.io/vega-lite/examples/vconcat_weather.html", + "spec_url": "https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/vconcat_weather.vl.json", + "categories": [ + "Multi-View Displays - Repeat & Concatenation" + ], + "description": "Two vertically concatenated charts", + "datasets": [ + "weather" + ], + "techniques": [ + "composition:concat", + "transform:aggregate", + "transform:bin", + "transform:filter", + "transform:timeunit" + ], + "id": 465 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/waterfall_chart.vl.json", + "categories": [ + "Single-View Plots - Advanced Calculations" + ], + "description": null, + "datasets": [], + "techniques": [ + "composition:layer", + "transform:calculate", + "transform:window" + ], + "id": 466 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/bar_layered_weather.vl.json", + "categories": [ + "Layered Plots - 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" + ], + "techniques": [ + "composition:layer" + ], + "id": 467 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/wheat_wages.vl.json", + "categories": [ + "Layered Plots - 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" + ], + "techniques": [ + "composition:layer", + "transform:calculate" + ], + "id": 468 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/circle_wilkinson_dotplot.vl.json", + "categories": [ + "Single-View Plots - Histograms, Density Plots, and Dot Plots" + ], + "description": "A Wilkinson Dot Plot", + "datasets": [], + "techniques": [ + "transform:window" + ], + "id": 469 + }, + { + "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://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/point_angle_windvector.vl.json", + "categories": [ + "Single-View Plots - Table-based Plots" + ], + "description": "Vector array map showing wind speed and direction.", + "datasets": [ + "windvectors" + ], + "techniques": [ + "geo:coordinates", + "geo:projection" + ], + "id": 470 + } +] \ No newline at end of file diff --git a/package.json b/package.json index bbcde39e..6a602ad4 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "src", "build", "data", - "datapackage.json" + "datapackage.json", + "gallery_examples.json" ], "dependencies": { "d3-dsv": "^3.0.1" @@ -47,6 +48,7 @@ "prebuild": "./scripts/make-url-index.sh > src/urls.ts && ./scripts/build_datapackage.py", "build": "rollup -c", "github": "python scripts/github.py", - "release": "release-it" + "release": "release-it", + "update-gallery": "uv run scripts/generate_gallery_examples.py" } } diff --git a/pyproject.toml b/pyproject.toml index 7ed42bbe..b8bb3242 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -119,17 +119,28 @@ select = [ [tool.ruff.lint.per-file-ignores] "*.ipynb" = ["ANN", "F401", "W391"] "*/**/*.ipynb" = ["ANN", "F401", "W391"] +# generate_gallery_examples.py: Allow intentional patterns for robustness +# - BLE001: Broad exception catching needed to continue processing on errors +# - C901: Complex functions handle nested spec structures from Vega/VL/Altair +# - SIM102: Nested ifs improve readability when validating deeply nested data +"scripts/generate_gallery_examples.py" = ["BLE001", "C901", "SIM102"] +# Test files: Relax annotation and docstring requirements +"tests/**/*.py" = ["ANN", "D"] [tool.pyright] enableExperimentalFeatures = true -ignore = ["../../../**/Lib", ".venv"] +ignore = ["../../../**/Lib"] include = [ "./scripts/build_datapackage.py", "./scripts/flights.py", + "./scripts/generate_gallery_examples.py", "./scripts/income.py", "./scripts/species.py", + "./scripts/us-state-capitals.py", ] pythonPlatform = "All" pythonVersion = "3.12" reportUnusedExpression = "none" typeCheckingMode = "basic" +venv = ".venv" +venvPath = "." diff --git a/scripts/build_datapackage.py b/scripts/build_datapackage.py index c3f45107..f2a85ea0 100755 --- a/scripts/build_datapackage.py +++ b/scripts/build_datapackage.py @@ -653,6 +653,79 @@ def _current_branch(*, ci_env_var: str = "GITHUB_SHA") -> str: return os.environ.get(ci_env_var) or run_check(CMD).stdout.rstrip() +def compute_file_hash(file_path: Path, /) -> str: + """ + Compute SHA1 hash for a single file using git hash-object. + + Parameters + ---------- + file_path + Path to the file to hash. + + Returns + ------- + str + Hash in format "sha1:". + """ + CMD = ("git", "hash-object", str(file_path)) + result = run_check(CMD) + return f"sha1:{result.stdout.strip()}" + + +def create_gallery_examples_resource( + repo_dir: Path, overrides: dict[str, ResourceMeta] +) -> Resource | None: + """ + Create a Resource for gallery_examples.json if it exists. + + This handles the special case of gallery_examples.json which lives + in the repo root (not /data/) and is a meta-resource that references + other resources in the package. + + Parameters + ---------- + repo_dir + Repository root directory. + overrides + Metadata overrides from datapackage_additions.toml. + + Returns + ------- + Resource | None + A JsonResource for gallery_examples.json, or None if the file + doesn't exist. + """ + gallery_path = repo_dir / "gallery_examples.json" + if not gallery_path.exists(): + logger.info("gallery_examples.json not found, skipping") + return None + + logger.info("Creating resource for gallery_examples.json") + + # Compute hash + file_hash = compute_file_hash(gallery_path) + + # Create base resource + resource = JsonResource( + name="gallery_examples", + path="gallery_examples.json", + scheme="file", + format="json", + mediatype="application/json", + encoding="utf-8", + hash=file_hash, + bytes=gallery_path.stat().st_size, + ) + + # Apply overrides from TOML (description, sources, licenses, schema) + if "gallery_examples.json" in overrides: + resource = ResourceAdapter.with_extras( + resource, **overrides["gallery_examples.json"] + ) + + return resource + + def read_toml(fp: Path, /) -> dict[str, Any]: return tomllib.loads(fp.read_text("utf-8")) @@ -724,8 +797,17 @@ def main( gh_sha1 = extract_sha(data_dir) msg = f"Collecting resources for '{pkg_meta['name']}@{pkg_meta['version']}' ..." logger.info(msg) + + # Collect resources from /data/ directory + resources = list(iter_resources(data_dir, overrides, gh_sha1)) + + # Conditionally add gallery_examples.json if it exists (repo root meta-resource) + gallery_resource = create_gallery_examples_resource(repo_dir, overrides) + if gallery_resource is not None: + resources.append(gallery_resource) + pkg = Package( - resources=list(iter_resources(data_dir, overrides, gh_sha1)), + resources=resources, **pkg_meta, # type: ignore[arg-type] ) msg = f"Collected {len(pkg.resources)} resources" diff --git a/scripts/generate_gallery_examples.py b/scripts/generate_gallery_examples.py new file mode 100755 index 00000000..7234908d --- /dev/null +++ b/scripts/generate_gallery_examples.py @@ -0,0 +1,2577 @@ +#!/usr/bin/env -S uv run +# /// script +# requires-python = ">=3.12" +# dependencies = [ +# "niquests>=3.11.2", +# ] +# /// +""" +Generate gallery_examples.json from Vega ecosystem galleries. + +This script collects example visualizations from three Vega ecosystem +repositories (Vega, Vega-Lite, and Altair) and generates a single JSON +file cataloging how datasets are used across these galleries. + +Configuration can be customized via _data/gallery_examples.toml. +Command-line arguments override config file settings. + +The script performs the following operations: + +1. **Dataset Name Mapping**: Fetches datapackage.json from vega-datasets + and builds a mapping from file paths to canonical dataset names. + +2. **Gallery Collection**: Fetches example metadata from: + - Vega-Lite: site/_data/examples.json + - Vega: docs/_data/examples.json + - Altair: Python test files from examples_methods_syntax and + examples_arguments_syntax directories + +3. **Dataset Extraction**: Fetches each example's specification and + extracts dataset references: + - Vega-Lite: Recursively searches for data.url in specs, layers, + transforms, and concat/facet structures + - Vega: Extracts from data array, handles signal-based URLs + - Altair: Parses Python code for file paths and API calls + +4. **Normalization**: Converts all dataset references to canonical + names matching the datapackage.json resource names. + +5. **Output Generation**: Writes a single JSON file with structure: + { + "created": "ISO-8601 timestamp", + "examples": [ + { + "id": int, + "gallery_name": "vega" | "vega-lite" | "altair", + "example_name": str, + "example_url": str, + "spec_url": str, + "categories": list[str], + "description": str | None, + "datasets": list[str] + } + ] + } + +Usage +----- + uv run scripts/generate_gallery_examples.py + +Output +------ + gallery_examples.json : JSON file + Single file containing all gallery examples with extracted + dataset references. + +Notes +----- +- The script uses niquests for HTTP requests with session pooling +- Examples are deduplicated across galleries +- Vega-Lite examples may appear in multiple categories +- Some examples use external datasets (preserved as-is) +- Expected runtime: 2-4 minutes depending on network speed + +Examples +-------- +To regenerate the gallery examples file: + + $ uv run scripts/generate_gallery_examples.py + +See Also +-------- +datapackage.json : Contains canonical dataset names and metadata +""" + +from __future__ import annotations + +import argparse +import json +import logging +import operator +import re +import time +import tomllib +from pathlib import Path +from typing import Any, Literal, NotRequired, Protocol, TypedDict, cast + +import niquests as requests + +# ============================================================================ +# Constants +# ============================================================================ + +# Network timeout in seconds +DEFAULT_TIMEOUT = 30 + + +# ============================================================================ +# Type Aliases for Dataset References +# ============================================================================ + +# Current implementation uses string arrays for simplicity. +# This type alias provides a single point of change if we migrate +# to object arrays [{"name": "..."}] in the future. +# +# Migration path (when object structure becomes necessary): +# 1. Change: type DatasetReference = str +# To: class DatasetReference(TypedDict): +# name: str +# usage_type: NotRequired[Literal["primary", "secondary"]] +# +# 2. Update make_dataset_references() to return [{"name": n} for n in names] +# +# 3. Update GalleryExample.datasets to use list[DatasetReference] +# +# 4. Consumer code unchanged: [d if isinstance(d, str) else d["name"] for d in datasets] +# +type DatasetReference = str + + +# ============================================================================ +# Semantic Type Aliases +# ============================================================================ + +type CanonicalName = str +"""Canonical dataset name from datapackage.json (e.g., 'cars', 'movies').""" + +type FilePath = str +"""File path or URL to dataset (e.g., 'cars.json', 'data/cars.json').""" + +type DatasetNameMap = dict[FilePath, CanonicalName] +"""Mapping from file paths/URLs to canonical dataset names.""" + +type ValidNames = set[CanonicalName] +"""Set of valid canonical dataset names from datapackage.json.""" + + +# ============================================================================ +# Configuration TypedDict Definitions +# ============================================================================ + + +class AltairConfig(TypedDict): + """ + Altair-specific configuration. + + Attributes + ---------- + name_mapping : dict[str, str] + Mapping from Altair API function names to canonical dataset names. + Example: {"londonBoroughs": "london_boroughs"} + """ + + name_mapping: dict[str, str] + + +class SourcesConfig(TypedDict): + """ + URLs for data sources. + + Attributes + ---------- + datapackage_url : str + URL to datapackage.json for dataset catalog. + vega_lite_examples_url : str + URL to Vega-Lite examples metadata JSON. + vega_examples_url : str + URL to Vega examples metadata JSON. + altair_examples_dirs : list[str] + List of GitHub raw URLs for Altair example directories. + """ + + datapackage_url: str + vega_lite_examples_url: str + vega_examples_url: str + altair_examples_dirs: list[str] + + +class OutputConfig(TypedDict): + """ + Output configuration. + + Attributes + ---------- + default_output_path : str + Default path for gallery_examples.json output. + dry_run : bool + If True, skip writing output file. + """ + + default_output_path: str + dry_run: bool + + +class NetworkConfig(TypedDict): + """ + Network request configuration. + + Attributes + ---------- + timeout : int + Request timeout in seconds. + max_retries : int, optional + Maximum number of retries for failed requests. + Currently not used but reserved for future implementation. + """ + + timeout: int + max_retries: NotRequired[int] + + +class GalleryConfig(TypedDict): + """ + Complete configuration structure from gallery_examples.toml. + + Attributes + ---------- + altair : AltairConfig + Altair-specific settings. + sources : SourcesConfig + URLs for data sources. + output : OutputConfig + Output file settings. + network : NetworkConfig + Network request settings. + """ + + altair: AltairConfig + sources: SourcesConfig + output: OutputConfig + network: NetworkConfig + + +# ============================================================================ +# Type Definitions +# ============================================================================ + + +class GalleryExample(TypedDict): + """ + Final output format for a single gallery example. + + Attributes + ---------- + id : int + Unique sequential identifier for the example. + gallery_name : Literal["vega", "vega-lite", "altair"] + Name of the gallery this example belongs to. + example_name : str + Human-readable name or title of the example. + example_url : str + URL to the rendered example in the gallery. + spec_url : str + URL to the raw specification or code file. + categories : list[str] + Categories or tags associated with this example. + Vega-Lite examples may have multiple categories. + description : str | None + Description of what the visualization demonstrates. + May be None if not available in the source. + datasets : list[str] + List of dataset names referenced by this example. + Names match the canonical 'name' field from datapackage.json. + May be empty for examples with inline data. + techniques : list[str] + Auto-detected Vega/Vega-Lite/Altair features used in the example. + Tags use category:subcategory format (e.g., "transform:window", + "interaction:selection", "geo:projection"). + May be empty for simple examples with no notable features. + """ + + id: int + gallery_name: Literal["vega", "vega-lite", "altair"] + example_name: str + example_url: str + spec_url: str + categories: list[str] + description: str | None + datasets: list[str] + techniques: list[str] + + +class IntermediateExample(TypedDict): + """ + Intermediate format during collection and enrichment. + + This structure is used while building the examples list before + final ID assignment and output formatting. + + Attributes + ---------- + gallery_name : str + Gallery identifier. + example_name : str + Example title or name. + example_url : str + URL to rendered example. + spec_url : str + URL to specification source. + categories : list[str] + List of category names. + description : str | None + Example description if available. + datasets : list[str] + Dataset names (populated during enrichment phase). + techniques : NotRequired[list[str]] + Auto-detected techniques (populated during enrichment phase). + """ + + gallery_name: str + example_name: str + example_url: str + spec_url: str + categories: list[str] + description: str | None + datasets: list[str] + techniques: NotRequired[list[str]] + + +# ============================================================================ +# Validation Infrastructure +# ============================================================================ + + +class DatasetValidator(Protocol): + """ + Protocol for validating dataset references. + + This protocol allows multiple validation strategies while maintaining + type safety. Useful for testing with mock validators or adding + enhanced validation in the future. + """ + + def validate_name(self, name: str) -> str: + """ + Validate a dataset name. + + Parameters + ---------- + name : str + Dataset name to validate. + + Returns + ------- + str + The validated name (same as input). + + Raises + ------ + ValueError + If name is not valid. + """ + ... + + def validate_all(self, names: list[str]) -> list[str]: + """ + Validate a list of dataset names. + + Parameters + ---------- + names : list[str] + Dataset names to validate. + + Returns + ------- + list[str] + The validated names (same as input). + + Raises + ------ + ValueError + If any name is invalid. + """ + ... + + +class SimpleDatasetValidator: + """ + Basic validator for dataset names against datapackage.json. + + Validates that dataset names exist in the canonical vega-datasets + catalog and logs warnings for unknown references. + """ + + def __init__(self, valid_names: ValidNames) -> None: + """ + Initialize validator with valid dataset names. + + Parameters + ---------- + valid_names : ValidNames + Set of canonical dataset names from datapackage.json. + """ + self._valid_names = valid_names + + def validate_name(self, name: str) -> str: + """ + Validate a single dataset name. + + Parameters + ---------- + name : str + Dataset name to validate. + + Returns + ------- + str + The validated name (same as input). + + Raises + ------ + ValueError + If name is not in valid_names. + + Examples + -------- + >>> validator = SimpleDatasetValidator({"cars", "movies"}) + >>> validator.validate_name("cars") + 'cars' + >>> validator.validate_name("unknown") + ValueError: Unknown dataset: unknown. Valid datasets: ['cars', 'movies'] + """ + if not isinstance(name, str): + msg = f"Dataset name must be str, got {type(name).__name__}" + raise TypeError(msg) + + if name not in self._valid_names: + msg = ( + f"Unknown dataset: {name}. Valid datasets: {sorted(self._valid_names)}" + ) + raise ValueError(msg) + + return name + + def validate_all(self, names: list[str]) -> list[str]: + """ + Validate all dataset names in a list. + + Parameters + ---------- + names : list[str] + Dataset names to validate. + + Returns + ------- + list[str] + The validated names (same as input if all valid). + + Raises + ------ + ValueError + If any name is invalid. Error message includes index. + """ + for i, name in enumerate(names): + try: + self.validate_name(name) + except (ValueError, TypeError) as e: + # Include index in error for debugging + msg = f"Invalid dataset at index {i}: {e}" + raise ValueError(msg) from e + return names + + +def is_valid_dataset_name(name: str, valid_names: ValidNames) -> bool: + """ + Type guard to check if a name is a valid dataset reference. + + Parameters + ---------- + name : str + Name to check. + valid_names : set[str] + Set of valid dataset names. + + Returns + ------- + bool + True if name is in valid_names and is a string. + + Examples + -------- + >>> is_valid_dataset_name("cars", {"cars", "movies"}) + True + >>> is_valid_dataset_name("unknown", {"cars", "movies"}) + False + >>> is_valid_dataset_name(123, {"cars"}) + False + """ + return isinstance(name, str) and name in valid_names + + +def make_dataset_references(names: list[str]) -> list[DatasetReference]: + """ + Convert dataset names to DatasetReference format. + + Currently returns string array for simplicity. This helper provides + a single point of change if we migrate to object array structure + [{"name": "..."}] in the future. + + Parameters + ---------- + names : list[str] + List of dataset names (may contain duplicates). + + Returns + ------- + list[DatasetReference] + Dataset references with duplicates removed, order preserved. + + Examples + -------- + >>> make_dataset_references(["cars", "movies", "cars"]) + ['cars', 'movies'] + + Future Enhancement Example + -------------------------- + When migrating to object structure: + + >>> # DatasetReference becomes TypedDict instead of type alias + >>> class DatasetReference(TypedDict): + ... name: str + ... usage_type: NotRequired[Literal["primary", "secondary"]] + + >>> def make_dataset_references(names: list[str]) -> list[DatasetReference]: + ... return [{"name": name} for name in dict.fromkeys(names)] + + >>> make_dataset_references(["cars", "movies"]) + [{'name': 'cars'}, {'name': 'movies'}] + """ + # Remove duplicates while preserving order + return list(dict.fromkeys(names)) + + +class GalleryExamplesOutput(TypedDict): + """ + Complete output structure for gallery_examples.json. + + .. deprecated:: 2.0.0 + This wrapper format is deprecated. As of Data Package v2 compliance, + gallery_examples.json now contains only the examples array (data-only). + Metadata (name, title, description, version, created, datapackage) + is stored in datapackage.json as a resource entry. + + Attributes + ---------- + name : str + Machine-readable identifier for this file. + title : str + Human-readable title. + description : str + Explanation of purpose and relationship to vega-datasets. + version : str + Semantic version of this registry format. + created : str + ISO-8601 timestamp of generation. + datapackage : dict[str, str] + Cross-reference to datapackage.json with version. + examples : list[GalleryExample] + Array of gallery example records. + """ + + name: str + title: str + description: str + version: str + created: str + datapackage: dict[str, str] + examples: list[GalleryExample] + + +# ============================================================================ +# Logging Configuration +# ============================================================================ + +logging.basicConfig( + level=logging.INFO, + format="%(asctime)s - %(name)s - %(levelname)s - %(message)s", + datefmt="%Y-%m-%d %H:%M:%S", +) +logger = logging.getLogger(__name__) + + +# ============================================================================ +# Configuration Loading +# ============================================================================ + + +def load_config() -> GalleryConfig: + """ + Load configuration from _data/gallery_examples.toml file. + + Loads the TOML configuration file from the repository root directory. + The configuration file is optional - if not found or if there are + errors reading it, the function returns a default configuration with + hardcoded fallback values. + + Returns + ------- + dict[str, Any] + Configuration dictionary with the following structure: + { + 'altair': { + 'name_mapping': dict[str, str] # Altair API name → canonical name + }, + 'sources': { + 'datapackage_url': str, + 'vega_lite_examples_url': str, + 'vega_examples_url': str, + 'altair_examples_dirs': list[str] + }, + 'output': { + 'default_output_path': str, + 'dry_run': bool + }, + 'network': { + 'timeout': int, + 'max_retries': int + } + } + + Examples + -------- + >>> config = load_config() + >>> config["sources"]["datapackage_url"] + 'https://raw.githubusercontent.com/vega/vega-datasets/main/datapackage.json' + >>> config["altair"]["name_mapping"].get("londonBoroughs") + 'london_boroughs' + + Notes + ----- + - Configuration file path is determined relative to this script's location + - If _data/gallery_examples.toml is not found, default values are used + - Any errors during loading are logged but don't crash the script + - Default configuration matches the original hardcoded values + - Command-line arguments should override these configuration values + """ + # Default configuration (fallback values) + + repo_root = Path(__file__).parent.parent + config_path = repo_root / "_data" / "gallery_examples.toml" + + if not config_path.exists(): + logger.error( + "Configuration file not found: %s\n" + "This script requires `_data/gallery_examples.toml`. " + "If you're running this locally, copy the provided example or " + "create the file with the required sections (altair, sources, output, network).", + config_path, + ) + msg = ( + f"Required config file missing: {config_path}. " + "Create `_data/gallery_examples.toml` or run with a --dry-run flag." + ) + raise FileNotFoundError(msg) + + try: + with Path(config_path).open("rb") as f: + config = tomllib.load(f) + logger.info("Loaded configuration from %s", config_path) + except Exception: + logger.exception("Error loading configuration from %s", config_path) + raise + else: + return cast("GalleryConfig", config) + + +# ============================================================================ +# Dataset Name Mapping Functions +# ============================================================================ + + +def fetch_datapackage( + session: requests.Session, url: str, timeout: int = DEFAULT_TIMEOUT +) -> dict[str, Any]: + """ + Fetch datapackage.json from vega-datasets repository. + + Retrieves the canonical dataset metadata file from the main branch + of the vega-datasets GitHub repository. + + Parameters + ---------- + session : requests.Session + HTTP session for connection pooling. + url : str + URL to the datapackage.json file. + timeout : int, default DEFAULT_TIMEOUT + Timeout in seconds for the HTTP request. + + Returns + ------- + dict[str, Any] + Parsed datapackage.json content containing dataset metadata. + The structure includes a 'resources' key with a list of + dataset definitions, each having 'name' and 'path' fields. + + Raises + ------ + requests.HTTPError + If the fetch fails due to network issues or invalid response. + requests.Timeout + If the request exceeds the timeout period. + + Examples + -------- + >>> session = requests.Session() + >>> url = ( + ... "https://raw.githubusercontent.com/vega/vega-datasets/main/datapackage.json" + ... ) + >>> datapackage = fetch_datapackage(session, url) + >>> len(datapackage["resources"]) + 73 + """ + logger.info("Fetching %s", url) + response = session.get(url, timeout=timeout) + response.raise_for_status() + return response.json() + + +def build_dataset_name_map(datapackage: dict[str, Any]) -> DatasetNameMap: + """ + Build mapping from file paths to canonical dataset names. + + Creates multiple variations for lookup to handle different ways + datasets are referenced in specifications: + - Full path: "annual-precip.json" → "annual_precip" + - With data prefix: "data/annual-precip.json" → "annual_precip" + - Just filename: "cars.json" → "cars" + + This normalization ensures consistent dataset identification across + all three gallery types (Vega, Vega-Lite, Altair). + + Parameters + ---------- + datapackage : dict[str, Any] + Parsed datapackage.json containing resource definitions. + + Returns + ------- + dict[str, str] + Map from file path variations to canonical dataset names. + Keys include the original path, the path with 'data/' prefix, + and the filename alone. + + Examples + -------- + >>> datapackage = { + ... "resources": [ + ... {"name": "cars", "path": "cars.json"}, + ... {"name": "annual_precip", "path": "annual-precip.json"}, + ... ] + ... } + >>> name_map = build_dataset_name_map(datapackage) + >>> name_map["cars.json"] + 'cars' + >>> name_map["data/cars.json"] + 'cars' + >>> name_map["annual-precip.json"] + 'annual_precip' + """ + name_map = {} + + for resource in datapackage.get("resources", []): + canonical_name = resource.get("name") + path = resource.get("path") + + if not canonical_name or not path: + continue + + # Map: full path → name + name_map[path] = canonical_name + + # Map: data/path → name + if not path.startswith("data/"): + name_map[f"data/{path}"] = canonical_name + + # Map: filename → name + filename = path.split("/")[-1] + name_map[filename] = canonical_name + + return name_map + + +def normalize_dataset_reference( + ref: FilePath, name_map: DatasetNameMap +) -> CanonicalName: + """ + Normalize a dataset reference to canonical name. + + Attempts to map a raw dataset reference (as found in a visualization + specification) to the canonical dataset name from datapackage.json. + If the reference is not found in vega-datasets, it is returned as-is + (this handles external datasets). + + Parameters + ---------- + ref : str + Raw reference from spec (e.g., "data/cars.json", "cars.json"). + name_map : dict[str, str] + Map from paths to canonical names built by + build_dataset_name_map(). + + Returns + ------- + str + Canonical dataset name (e.g., "cars") if found in vega-datasets, + or the original reference if not found. + + Examples + -------- + >>> name_map = {"cars.json": "cars", "data/cars.json": "cars"} + >>> normalize_dataset_reference("data/cars.json", name_map) + 'cars' + >>> normalize_dataset_reference("cars.json", name_map) + 'cars' + >>> normalize_dataset_reference("external.json", name_map) + 'external.json' + """ + # Try exact match + if ref in name_map: + return name_map[ref] + + # Try just filename + filename = ref.rsplit("/", maxsplit=1)[-1] + if filename in name_map: + return name_map[filename] + + # Not a vega-dataset, return as-is + logger.debug("Dataset reference not in vega-datasets: %s", ref) + return ref + + +# ============================================================================ +# Gallery Collection Functions +# ============================================================================ + + +def collect_vega_lite_examples( + session: requests.Session, url: str, timeout: int = DEFAULT_TIMEOUT +) -> list[dict[str, Any]]: + """ + Collect examples from Vega-Lite gallery. + + Fetches example metadata from the Vega-Lite gallery and builds a list + of IntermediateExample dictionaries. Examples may appear in multiple + categories and are deduplicated by name. Categories are stored as a + list of strings. + + Parameters + ---------- + session : requests.Session + HTTP session for connection pooling. + url : str + URL to the Vega-Lite examples.json metadata file. + timeout : int, default DEFAULT_TIMEOUT + Timeout in seconds for the HTTP request. + + Returns + ------- + list[dict[str, Any]] + List of IntermediateExample dictionaries. The datasets field + is initialized as an empty list and will be populated in Phase 4. + Expected count: ~190 unique examples. + + Raises + ------ + requests.HTTPError + If the fetch fails due to network issues or invalid response. + requests.Timeout + If the request exceeds the timeout period. + + Examples + -------- + >>> session = requests.Session() + >>> url = "https://raw.githubusercontent.com/vega/vega-lite/main/site/_data/examples.json" + >>> examples = collect_vega_lite_examples(session, url) + >>> len(examples) + 190 + >>> examples[0]["gallery_name"] + 'vega-lite' + >>> isinstance(examples[0]["categories"], list) + True + + Notes + ----- + - Examples appearing in multiple categories have all categories stored + in the categories list + - Full category names are built as "{category} - {subcategory}" + - Example names use the 'title' field if available, falling back to 'name' + """ + logger.info("Collecting Vega-Lite examples from %s", url) + + response = session.get(url, timeout=timeout) + response.raise_for_status() + examples_data = response.json() + + # Dictionary to deduplicate examples across categories + example_dict = {} + + for category_name, subcategories in examples_data.items(): + for subcategory_name, example_list in subcategories.items(): + # Build full category name + full_category = ( + f"{category_name} - {subcategory_name}" + if subcategory_name + else category_name + ) + + for example in example_list: + example_name = example.get("title", example["name"]) + + # Deduplicate by name + if example_name in example_dict: + example_dict[example_name]["categories"].append(full_category) + else: + example_url = f"https://vega.github.io/vega-lite/examples/{example['name']}.html" + spec_url = f"https://raw.githubusercontent.com/vega/vega-lite/main/examples/specs/{example['name']}.vl.json" + + example_dict[example_name] = { + "gallery_name": "vega-lite", + "example_name": example_name, + "example_url": example_url, + "spec_url": spec_url, + "categories": [full_category], + "description": example.get("description"), + "datasets": [], # Will be filled later + "techniques": [], # Will be filled later + } + + logger.info(" Found %s unique Vega-Lite examples", len(example_dict)) + return list(example_dict.values()) + + +def collect_vega_examples( + session: requests.Session, url: str, timeout: int = DEFAULT_TIMEOUT +) -> list[dict[str, Any]]: + """ + Collect examples from Vega gallery. + + Fetches example metadata from the Vega gallery and builds a list + of IntermediateExample dictionaries. Each example has a single + category. Example names are converted to title case with spaces. + + Parameters + ---------- + session : requests.Session + HTTP session for connection pooling. + url : str + URL to the Vega examples.json metadata file. + timeout : int, default DEFAULT_TIMEOUT + Timeout in seconds for the HTTP request. + + Returns + ------- + list[dict[str, Any]] + List of IntermediateExample dictionaries. The datasets field + is initialized as an empty list and will be populated in Phase 4. + Expected count: ~93 examples. + + Raises + ------ + requests.HTTPError + If the fetch fails due to network issues or invalid response. + requests.Timeout + If the request exceeds the timeout period. + + Examples + -------- + >>> session = requests.Session() + >>> url = ( + ... "https://raw.githubusercontent.com/vega/vega/main/docs/_data/examples.json" + ... ) + >>> examples = collect_vega_examples(session, url) + >>> len(examples) + 93 + >>> examples[0]["gallery_name"] + 'vega' + >>> len(examples[0]["categories"]) + 1 + + Notes + ----- + - Example names are converted from 'example-name' to 'Example Name' + - Each example belongs to exactly one category + - Descriptions are not available in the source and set to None + """ + logger.info("Collecting Vega examples from %s", url) + + response = session.get(url, timeout=timeout) + response.raise_for_status() + examples_data = response.json() + + examples = [] + + for category_name, example_list in examples_data.items(): + for example in example_list: + example_name = example["name"].replace("-", " ").title() + example_url = f"https://vega.github.io/vega/examples/{example['name']}/" + spec_url = f"https://raw.githubusercontent.com/vega/vega/main/docs/examples/{example['name']}.vg.json" + + examples.append({ + "gallery_name": "vega", + "example_name": example_name, + "example_url": example_url, + "spec_url": spec_url, + "categories": [category_name], + "description": None, # Will be extracted from spec + "datasets": [], + "techniques": [], # Will be filled later + }) + + logger.info(" Found %s Vega examples", len(examples)) + return examples + + +def extract_altair_title(session: requests.Session, file_url: str) -> str | None: + r""" + Extract title from Altair example docstring. + + Altair examples use a docstring pattern with title and underline: + \"\"\"Title + ====== + \"\"\" + + This function attempts to extract the title from this pattern. + + Parameters + ---------- + session : requests.Session + HTTP session for connection pooling. + file_url : str + URL to the raw Python file. + + Returns + ------- + str | None + Extracted title if found, None otherwise. + + Examples + -------- + >>> session = requests.Session() + >>> url = "https://raw.githubusercontent.com/vega/altair/main/tests/examples_methods_syntax/bar_chart.py" + >>> title = extract_altair_title(session, url) + >>> title + 'Simple Bar Chart' + + Notes + ----- + - Returns None if the file cannot be fetched or the pattern is not found + - Uses regex pattern: ^\"\"\"?\\s*\\n?(.*?)\\n[-=]+\\s*\\n + - Handles both triple-quote variants (''' and \"\"\") + """ + try: + response = session.get(file_url, timeout=DEFAULT_TIMEOUT) + if response.status_code != 200: + return None + + content = response.text + assert isinstance(content, str) # response.text is always str in requests + pattern = r'^"""?\s*\n?(.*?)\n[-=]+\s*\n' + match = re.search(pattern, content, re.MULTILINE) + if match: + return match.group(1).strip() + except Exception as e: + logger.debug("Error extracting title from %s: %s", file_url, e) + + return None + + +def collect_altair_examples( + session: requests.Session, + directories: list[str], + timeout: int = DEFAULT_TIMEOUT, +) -> list[dict[str, Any]]: + """ + Collect examples from Altair gallery. + + Fetches example files from Altair test directories (methods syntax + and arguments syntax) and builds a list of IntermediateExample + dictionaries. Files are deduplicated by filename across directories. + Titles are extracted from docstrings when available. + + Parameters + ---------- + session : requests.Session + HTTP session for connection pooling. + directories : list[str] + List of Altair example directory paths to scan. + timeout : int, default DEFAULT_TIMEOUT + Timeout in seconds for HTTP requests. + + Returns + ------- + list[dict[str, Any]] + List of IntermediateExample dictionaries. The datasets field + is initialized as an empty list and will be populated in Phase 4. + Expected count: ~185 examples. + + Raises + ------ + requests.HTTPError + If the fetch fails due to network issues or invalid response. + requests.Timeout + If the request exceeds the timeout period. + + Examples + -------- + >>> session = requests.Session() + >>> dirs = ["tests/examples_methods_syntax", "tests/examples_arguments_syntax"] + >>> examples = collect_altair_examples(session, dirs) + >>> len(examples) + 185 + >>> examples[0]["gallery_name"] + 'altair' + + Notes + ----- + - Examples are collected from all specified directories + - Deduplication is done by filename (if same file exists in multiple dirs, + it's only included once) + - Titles are extracted from docstrings using extract_altair_title() + - Falls back to filename-based titles if docstring extraction fails + - Categories are initialized as empty list (will be extracted in Phase 4) + """ + logger.info("Collecting Altair examples") + + examples = [] + seen_files = set() + + for directory in directories: + api_url = f"https://api.github.com/repos/vega/altair/contents/{directory}" + response = session.get(api_url, timeout=timeout) + response.raise_for_status() + files = response.json() + + for file in files: + if not file["name"].endswith(".py") or file["name"].startswith("__"): + continue + + # Deduplicate + if file["name"] in seen_files: + continue + seen_files.add(file["name"]) + + spec_url = f"https://raw.githubusercontent.com/vega/altair/main/{directory}/{file['name']}" + + # Try to extract title from docstring + example_name = extract_altair_title(session, spec_url) + if not example_name: + # Fallback to filename + example_name = file["name"].replace(".py", "").replace("_", " ").title() + + example_url = f"https://altair-viz.github.io/gallery/{file['name'].replace('.py', '.html')}" + + examples.append({ + "gallery_name": "altair", + "example_name": example_name, + "example_url": example_url, + "spec_url": spec_url, + "categories": [], # Will be extracted from code + "description": None, # Will be extracted from code + "datasets": [], + "techniques": [], # Will be filled later + }) + + logger.info(" Found %s Altair examples", len(examples)) + return examples + + +# ============================================================================ +# Dataset Extraction Functions +# ============================================================================ + +# OPTIMIZATION OPPORTUNITIES (Task 4.5): +# +# Following the "make it work, make it right, make it fast" principle, +# these functions prioritize correctness and clarity. Post-implementation +# optimization review identified these potential improvements: +# +# 1. Vega-Lite Recursive Extraction: +# - Current: Multiple recursive calls for layers/concat/facet +# - Consideration: Could use iterative approach with stack/queue +# - Trade-off: Recursion is clearer and handles arbitrary nesting +# - Decision: Keep recursive for maintainability at ~468 examples scale +# +# 2. Vega Signal Extraction: +# - Current: Linear search through signals array +# - Consideration: Could build signal index dict if multiple lookups +# - Trade-off: Signal-based URLs are rare (~few examples) +# - Decision: Linear search is sufficient for current use case +# +# 3. Altair Regex Patterns: +# - Current: 5 separate patterns compiled on each call +# - Consideration: Could pre-compile regex patterns as module constants +# - Impact: ~185 Altair examples * 5 patterns = ~925 compilations +# - Decision: Worth optimizing - see ALTAIR_API_PATTERNS below +# +# 4. Code Duplication: +# - Current: Three Altair approach functions have identical pattern extraction +# - Consideration: Could factor out common pattern extraction logic +# - Trade-off: Current separation makes each approach self-contained +# - Decision: Keep separate for clarity and ease of comparison +# +# 5. Network Performance: +# - Current: Sequential HTTP requests for ~468 examples +# - Consideration: Could use async/await for concurrent fetching +# - Impact: Could reduce total runtime from ~3-4 minutes to ~1 minute +# - Decision: Out of scope for Phase 4, consider for Phase 6 +# +# Conclusion: At current scale (~468 examples), extreme optimization is not +# necessary. Focus remains on correctness and maintainability. If collection +# grows to thousands of examples, revisit items 1, 3, and 5. + + +def extract_signal_values(spec: dict[str, Any], signal_name: str) -> list[str]: + """ + Extract possible values from a signal definition in Vega spec. + + Signals in Vega can define dynamic values through bind inputs with + options. This function extracts those option values and default values + to determine which datasets might be loaded through signal-based URLs. + + Parameters + ---------- + spec : dict[str, Any] + Vega specification containing signal definitions. + signal_name : str + Name of the signal to extract values from. + + Returns + ------- + list[str] + List of possible string values the signal can take. + Empty list if signal not found or has no extractable values. + + Examples + -------- + >>> spec = { + ... "signals": [ + ... { + ... "name": "dataset", + ... "value": "data/cars.json", + ... "bind": { + ... "input": "select", + ... "options": ["data/cars.json", "data/movies.json"], + ... }, + ... } + ... ] + ... } + >>> extract_signal_values(spec, "dataset") + ['data/cars.json', 'data/movies.json'] + + Notes + ----- + - Looks for signals with bind.options (select inputs) + - Also includes the default value if present + - Only extracts string values (ignores non-string defaults) + """ + values = [] + + if "signals" not in spec: + return values + + for signal in spec["signals"]: + if signal.get("name") == signal_name: + # Check for select input with options + # This is the primary source for signal-based dataset switching + if "bind" in signal and "options" in signal.get("bind", {}): + values.extend(signal["bind"]["options"]) + + # Check the default value if present + # This catches the initial dataset loaded + if "value" in signal and isinstance(signal["value"], str): + values.append(signal["value"]) + + break + + return values + + +def extract_datasets_from_vega_spec( + spec: dict[str, Any], name_map: DatasetNameMap +) -> list[CanonicalName]: + """ + Extract dataset references from Vega specification. + + Vega specifications organize data in an array with each data source + having a name and optional URL. This function extracts all external + data sources, handling both static URLs and signal-based dynamic URLs. + + Parameters + ---------- + spec : dict[str, Any] + Vega specification (must contain 'data' array). + name_map : dict[str, str] + Map from file paths to canonical dataset names. + + Returns + ------- + list[str] + List of normalized dataset names. + May contain duplicates if same dataset referenced multiple times. + + Examples + -------- + >>> spec = { + ... "data": [ + ... {"name": "source", "url": "data/cars.json"}, + ... { + ... "name": "lookup", + ... "transform": [ + ... { + ... "type": "lookup", + ... "from": {"data": {"url": "data/movies.json"}}, + ... } + ... ], + ... }, + ... ] + ... } + >>> name_map = {"data/cars.json": "cars", "data/movies.json": "movies"} + >>> extract_datasets_from_vega_spec(spec, name_map) + ['cars', 'movies'] + + Notes + ----- + - Returns empty list if spec has no data array + - Handles direct URL strings + - Handles signal-based URLs by extracting all possible signal values + - Extracts from lookup transforms within data items + - Does not extract from inline data values + """ + datasets = [] + + # Vega specs must have a data array + if "data" not in spec or not isinstance(spec["data"], list): + return datasets + + for data_item in spec["data"]: + if not isinstance(data_item, dict): + continue + + # Extract from direct URL field + if "url" in data_item: + url_value = data_item["url"] + + # Handle signal-based URLs (dynamic dataset selection) + # Example: {"signal": "dataset_url"} where signal has multiple options + if isinstance(url_value, dict) and "signal" in url_value: + signal_name = url_value["signal"] + signal_values = extract_signal_values(spec, signal_name) + for value in signal_values: + normalized = normalize_dataset_reference(value, name_map) + datasets.append(normalized) + elif isinstance(url_value, str): + # Normal string URL + normalized = normalize_dataset_reference(url_value, name_map) + datasets.append(normalized) + + # Extract from transforms within data items + # Vega allows transforms to be nested inside data definitions + if "transform" in data_item and isinstance(data_item["transform"], list): + for transform in data_item["transform"]: + if isinstance(transform, dict) and transform.get("type") == "lookup": + # Lookup transforms can reference external data + if "from" in transform: + from_data = transform["from"] + if isinstance(from_data, dict) and "data" in from_data: + # Check if the 'data' field has a URL + if ( + isinstance(from_data["data"], dict) + and "url" in from_data["data"] + ): + normalized = normalize_dataset_reference( + from_data["data"]["url"], name_map + ) + datasets.append(normalized) + + return datasets + + +def extract_datasets_from_vegalite_spec( + spec: dict[str, Any], name_map: DatasetNameMap +) -> list[CanonicalName]: + """ + Extract dataset references from Vega-Lite specification. + + Vega-Lite has a more implicit structure where data can appear at + multiple levels: top-level, in layers, in concat/facet views, and + in transform lookups. This function recursively searches all these + locations to find all dataset references. + + Parameters + ---------- + spec : dict[str, Any] + Vega-Lite specification (can be a view or sub-view). + name_map : dict[str, str] + Map from file paths to canonical dataset names. + + Returns + ------- + list[str] + List of normalized dataset names. + May contain duplicates if same dataset referenced multiple times + across different views or layers. + + Examples + -------- + >>> spec = { + ... "data": {"url": "data/cars.json"}, + ... "layer": [ + ... {"mark": "point"}, + ... {"data": {"url": "data/movies.json"}, "mark": "rule"}, + ... ], + ... } + >>> name_map = {"data/cars.json": "cars", "data/movies.json": "movies"} + >>> extract_datasets_from_vegalite_spec(spec, name_map) + ['cars', 'movies'] + + Notes + ----- + - Recursively processes nested structures (layers, concat, facet) + - Top-level data is inherited by layers unless overridden + - Transform lookups can introduce additional datasets + - Returns all datasets found, duplicates included (caller can dedupe) + - Only extracts from URL-based data sources (not inline data) + """ + datasets = [] + + # Top-level data.url extraction + # This is the most common case for simple specs + if "data" in spec and isinstance(spec["data"], dict) and "url" in spec["data"]: + normalized = normalize_dataset_reference(spec["data"]["url"], name_map) + datasets.append(normalized) + + # Transform lookups + # Lookup transforms reference external datasets for joins + if "transform" in spec and isinstance(spec["transform"], list): + for transform in spec["transform"]: + if isinstance(transform, dict) and "lookup" in transform: + # Lookup structure: {lookup: field, from: {data: {url: ...}}} + if "from" in transform and isinstance(transform["from"], dict): + if ( + "data" in transform["from"] + and isinstance(transform["from"]["data"], dict) + and "url" in transform["from"]["data"] + ): + normalized = normalize_dataset_reference( + transform["from"]["data"]["url"], name_map + ) + datasets.append(normalized) + + # Layers (recursive) + # Each layer can override data or inherit from parent + if "layer" in spec and isinstance(spec["layer"], list): + for layer in spec["layer"]: + if isinstance(layer, dict): + # Check for layer-specific data override + if "data" in layer and isinstance(layer["data"], dict): + if "url" in layer["data"]: + normalized = normalize_dataset_reference( + layer["data"]["url"], name_map + ) + datasets.append(normalized) + + # Recursively extract from the layer itself + # This handles nested layers and transforms within layers + layer_datasets = extract_datasets_from_vegalite_spec(layer, name_map) + datasets.extend(layer_datasets) + + # Concat specs (recursive) + # Concatenation combines multiple independent views + for concat_type in ["concat", "hconcat", "vconcat"]: + if concat_type in spec and isinstance(spec[concat_type], list): + for sub_spec in spec[concat_type]: + if isinstance(sub_spec, dict): + sub_datasets = extract_datasets_from_vegalite_spec( + sub_spec, name_map + ) + datasets.extend(sub_datasets) + + # Facet/repeat specs (recursive) + # Faceting and repeat wrap a sub-specification + if "spec" in spec and isinstance(spec["spec"], dict): + sub_datasets = extract_datasets_from_vegalite_spec(spec["spec"], name_map) + datasets.extend(sub_datasets) + + return datasets + + +# ============================================================================ +# Altair Dataset Extraction Functions +# ============================================================================ + + +def extract_altair_api_datasets( + code: str, + valid_names: ValidNames, + name_mapping: dict[str, str] | None = None, +) -> list[CanonicalName]: + """ + Extract Altair API dataset names using optional name mapping. + + LEGACY SUPPORT: Altair v6+ (PR #3859, merged Oct 2025) uses canonical + vega-datasets names directly, making name mapping unnecessary when tracking + Altair main branch. This function supports name mapping for backward + compatibility with Altair v5.x releases. + + Historical context: + - Altair v5.x used camelCase API names (e.g., data.londonBoroughs.url) + - vega-datasets canonical names use snake_case (e.g., london_boroughs) + - Name mapping bridged this gap + - Altair v6+ adopted canonical names, eliminating the need for mapping + + Current behavior (Altair v6+, with name_mapping=None): + - Extracts dataset names from Altair code patterns + - Validates directly against vega-datasets canonical names + - Logs warnings for external datasets (expected for some examples) + - No name transformation occurs + + Parameters + ---------- + code : str + Altair Python source code. + valid_names : set[str] + Valid dataset names from datapackage.json. + name_mapping : dict[str, str] | None, default None + Optional mapping from Altair API names to canonical names. + - For Altair v6+: Pass None or {} (canonical names used directly) + - For Altair v5: Pass mapping like {"londonBoroughs": "london_boroughs"} + Typically loaded from _data/gallery_examples.toml under [altair.name_mapping]. + + Returns + ------- + list[str] + List of validated dataset names (canonical names from vega-datasets). + + Examples + -------- + Altair v6+ (no mapping needed): + + >>> code = "data.london_boroughs.url" + >>> valid_names = {"london_boroughs"} + >>> extract_altair_api_datasets(code, valid_names) + ['london_boroughs'] + + Altair v5 (with mapping): + + >>> code = "data.londonBoroughs.url" + >>> valid_names = {"london_boroughs"} + >>> mapping = {"londonBoroughs": "london_boroughs"} + >>> extract_altair_api_datasets(code, valid_names, name_mapping=mapping) + ['london_boroughs'] + # Logs: DEBUG - Altair mapping applied: londonBoroughs → london_boroughs + + External dataset (not in vega-datasets): + + >>> code = "data.unknown_dataset()" + >>> extract_altair_api_datasets(code, valid_names) + [] + # Logs: WARNING - External Altair dataset (not in vega-datasets): unknown_dataset + + Notes + ----- + - External datasets (not in vega-datasets) log warnings but are skipped + - This approach was selected after comparative testing showed best accuracy + and performance (see ALTAIR_APPROACH_COMPARISON_RESULTS.md) + - Patterns may overlap (e.g., alt.UrlData(data.cars.url) matches multiple patterns) + but deduplication via set() ensures each name appears once + """ + # Use provided mapping or empty dict + if name_mapping is None: + name_mapping = {} + + datasets = [] + + # Regex patterns for different Altair dataset reference styles + patterns = [ + r"data\.(\w+)\s*\(", # data.cars() + r"data\.(\w+)\.url", # data.cars.url + r"alt\.topo_feature\s*\(\s*data\.(\w+)\.url", # alt.topo_feature(data.cars.url + r"vega_datasets\.data\.(\w+)\.url", # Legacy: from vega_datasets import data + r"altair\.datasets\.data\.(\w+)\.url", # Altair v6: import altair (fully qualified) + r"alt\.UrlData\s*\(\s*data\.(\w+)\.url", # alt.UrlData(data.cars.url + ] + + # Extract dataset names from all patterns + # Note: Patterns may overlap (e.g., alt.UrlData(data.cars.url) matches patterns 2 and 6) + # Deduplication via set() ensures each name appears once + extracted_names = set() + for pattern in patterns: + matches = re.findall(pattern, code) + extracted_names.update(matches) + + for name in extracted_names: + # Apply explicit mapping if exists + canonical_name = name_mapping.get(name, name) + + if canonical_name in valid_names: + datasets.append(canonical_name) + # Log debug message if mapping was applied + if canonical_name != name: + logger.debug("Altair mapping applied: %s → %s", name, canonical_name) + else: + # External dataset (not in vega-datasets) - informational warning + logger.warning("External Altair dataset (not in vega-datasets): %s", name) + # Skip the dataset - it's expected that some examples use external data + + return datasets + + +def extract_datasets_from_altair_code( + code: str, + name_map: DatasetNameMap, + valid_names: ValidNames, + config: GalleryConfig, +) -> list[CanonicalName]: + """ + Extract dataset references from Altair Python code. + + Altair examples can reference datasets in two ways: + 1. File paths: "data/cars.json" or pd.read_csv("data/...") + 2. Python API: data.cars(), data.cars.url, etc. + + This function handles both patterns, using explicit mappings from + _data/gallery_examples.toml for API name validation. + + Parameters + ---------- + code : str + Altair Python source code. + name_map : dict[str, str] + Map from file paths to canonical dataset names. + valid_names : set[str] + Valid dataset names from datapackage.json. + config : GalleryConfig + Configuration dictionary with Altair name mappings. + + Returns + ------- + list[str] + List of normalized dataset names. + May contain duplicates if dataset referenced multiple times. + + Examples + -------- + >>> code = ''' + ... source = pd.read_csv("data/cars.json") + ... data.movies() + ... ''' + >>> name_map = {"data/cars.json": "cars"} + >>> valid_names = {"cars", "movies"} + >>> config = {"altair": {"name_mapping": {}}} + >>> extract_datasets_from_altair_code(code, name_map, valid_names, config) + ['cars', 'movies'] + + Notes + ----- + - File path extraction uses name_map for normalization + - API name validation uses optional _data/gallery_examples.toml mappings (for Altair v5 legacy support) + - Altair v6+ uses canonical names directly (empty mapping in _data/gallery_examples.toml) + - Checks for vega_datasets or altair.datasets imports before attempting API extraction + """ + datasets = [] + + # Pattern 1: File paths in quotes + # Matches: "data/cars.json", 'data/movies.csv', etc. + file_pattern = r'["\']data/[^"\']+["\']' + file_matches = re.findall(file_pattern, code) + for match in file_matches: + normalized = normalize_dataset_reference(match.strip("\"'"), name_map) + datasets.append(normalized) + + # Pattern 2: pd.read_csv("data/...") + # Pandas file reading with data/ prefix + read_csv_pattern = r'read_csv\s*\(\s*["\']([^"\']+)["\']' + read_csv_matches = re.findall(read_csv_pattern, code) + for match in read_csv_matches: + if match.startswith("data/"): + normalized = normalize_dataset_reference(match, name_map) + datasets.append(normalized) + + # Check if code uses vega_datasets Python API + # Only attempt API extraction if imports are present + vega_import = r"from\s+vega_datasets\s+import\s+data" + altair_import = r"from\s+altair\.datasets\s+import\s+data" + + if re.search(vega_import, code) or re.search(altair_import, code): + # Extract API datasets using _data/gallery_examples.toml mappings + # For Altair v6+, mapping is typically empty (no transformation needed) + api_datasets = extract_altair_api_datasets( + code, + valid_names, + name_mapping=config.get("altair", {}).get("name_mapping", {}), + ) + datasets.extend(api_datasets) + + return datasets + + +# ============================================================================ +# Technique Detection +# ============================================================================ + +# Technique detection patterns by category +# Each tuple: (list of patterns to match, tag to assign) +# Patterns are matched case-insensitively against serialized spec or code text +# +# The three libraries have different syntax for the same concepts: +# - Vega-Lite (JSON): {"window": [...]} in transform array +# - Altair (Python): .transform_window(...) method call +# - Vega (JSON): {"type": "window"} in data transforms +# +# Tags use category:subcategory format for flexible filtering: +# - transform:* for data transformations +# - interaction:* for user interaction features +# - geo:* for geographic visualizations +# - composition:* for multi-view compositions +# - mark:* for special mark types + +TECHNIQUE_PATTERNS: list[tuple[list[str], str]] = [ + # === TRANSFORMS (shared: Vega + Vega-Lite + Altair) === + # aggregate, bin, calculate, density, filter, flatten, fold, + # impute, joinaggregate, loess, lookup, pivot, quantile, + # regression, sample, stack, timeunit, window + # + # === TRANSFORMS (Vega-only) === + # countpattern, cross, crossfilter, dotbin, extent, kde2d, + # nest, stratify, treelinks + # + # === INTERACTION === + # binding, conditional, param, selection + # + # === GEOGRAPHIC === + # coordinates, geojson, geopath, geopoint, graticule, + # projection, shape, topojson + # + # === COMPOSITION === + # concat, facet, layer, repeat + # + # === MARKS (notable mark types only) === + # arc, boxplot, error, trail + # + # === LAYOUT (Vega-only algorithmic layouts) === + # contour, force, linkpath, pack, partition, pie, + # tree, treemap, voronoi, wordcloud + # + # --- Shared transforms (Vega + Vega-Lite + Altair) --- + # Vega-Lite: "transform":[{"window":...}] + # Altair: .transform_window(...) + # Vega: {"type":"window"} in data transforms + ( + ['"aggregate":', "transform_aggregate", '"type":"aggregate"', "count()"], + "transform:aggregate", + ), + # Bin is tricky - appears in encoding too, so check for transform context + # Vega uses {"type":"bin"}, Vega-Lite uses {"bin":true} or {"bin":{...}} + ( + ['"bin":true', '"bin":{', "transform_bin", '"type":"bin"', "bin=True", ".bin("], + "transform:bin", + ), + ( + ['"calculate":', "transform_calculate", '"type":"formula"'], + "transform:calculate", + ), + (['"density":', "transform_density", '"type":"kde"'], "transform:density"), + (['"filter":', "transform_filter", '"type":"filter"'], "transform:filter"), + (['"flatten":', "transform_flatten", '"type":"flatten"'], "transform:flatten"), + (['"fold":', "transform_fold", '"type":"fold"'], "transform:fold"), + (['"impute":', "transform_impute", '"type":"impute"'], "transform:impute"), + ( + ['"joinaggregate":', "transform_joinaggregate", '"type":"joinaggregate"'], + "transform:joinaggregate", + ), + (['"loess":', "transform_loess", '"type":"loess"'], "transform:loess"), + (['"lookup":', "transform_lookup", '"type":"lookup"'], "transform:lookup"), + (['"pivot":', "transform_pivot", '"type":"pivot"'], "transform:pivot"), + (['"quantile":', "transform_quantile", '"type":"quantile"'], "transform:quantile"), + ( + ['"regression":', "transform_regression", '"type":"regression"'], + "transform:regression", + ), + (['"sample":', "transform_sample", '"type":"sample"'], "transform:sample"), + # Stack transform - Vega always uses explicit {"type":"stack"}. + # Vega-Lite: only detects EXPLICIT configs ("stack":"zero"|"normalize"| + # transform array form). Implicit stacking (default for bar/area with + # color) is invisible in the spec — known limitation, acceptable tradeoff. + (['"stack":', '"type":"stack"', ".stack("], "transform:stack"), + # TimeUnit transform - discretizes temporal values + # Vega-Lite: {"timeUnit":"yearmonth"} in encoding or transform + # Altair: .transform_timeunit() | Vega: {"type":"timeunit"} + (['"timeunit":', "transform_timeunit", '"type":"timeunit"'], "transform:timeunit"), + (['"window":', "transform_window", '"type":"window"'], "transform:window"), + # + # --- Vega-only transforms --- + (['"type":"countpattern"'], "transform:countpattern"), + (['"type":"cross"'], "transform:cross"), + # Crossfilter (Vega-only) - resolvefilter is always used with crossfilter + (['"type":"crossfilter"', '"type":"resolvefilter"'], "transform:crossfilter"), + (['"type":"dotbin"'], "transform:dotbin"), + (['"type":"extent"'], "transform:extent"), + (['"type":"kde2d"'], "transform:kde2d"), + (['"type":"nest"'], "transform:nest"), + (['"type":"stratify"'], "transform:stratify"), + (['"type":"treelinks"'], "transform:treelinks"), + # + # --- Interaction --- + ( + [ + '"select":"point"', + '"select":"interval"', + "selection_point", + "selection_interval", + ], + "interaction:selection", + ), + # Note: "signals":[ matches most Vega specs since signals are fundamental. + # This is intentional - Vega's reactive model IS its interaction system. + (['"params":[', "add_params(", '"signals":['], "interaction:param"), + ( + [ + '"bind":', + "binding_select", + "binding_range", + "binding_radio", + "binding_checkbox", + ], + "interaction:binding", + ), + (['"condition":{"param"', "alt.when("], "interaction:conditional"), + # + # --- Geographic --- + (['"longitude"', '"latitude"', "longitude:", "latitude:"], "geo:coordinates"), + (['"type":"geojson"'], "geo:geojson"), + (['"type":"geopath"'], "geo:geopath"), + (['"type":"geopoint"'], "geo:geopoint"), + (['"type":"graticule"'], "geo:graticule"), + (['"projection":', "projection=", '"projections":'], "geo:projection"), + (['"geoshape"', "mark_geoshape"], "geo:shape"), + (["topojson", "topo_feature"], "geo:topojson"), + # + # --- Composition --- + ( + ['"hconcat":', '"vconcat":', '"concat":', "alt.hconcat(", "alt.vconcat("], + "composition:concat", + ), + ( + [ + '"facet":', + '"row":{', + '"column":{', + ".facet(", + "row=", + "column=", + "alt.Row(", + "alt.Column(", + ], + "composition:facet", + ), + (['"layer":[', "alt.layer("], "composition:layer"), + (['"repeat":', ".repeat("], "composition:repeat"), + # + # --- Notable marks --- + (['"arc"', "mark_arc"], "mark:arc"), + (['"boxplot"', "mark_boxplot"], "mark:boxplot"), + (['"errorbar"', '"errorband"', "mark_errorbar", "mark_errorband"], "mark:error"), + (['"trail"', "mark_trail"], "mark:trail"), + # + # --- Layout algorithms (Vega-only) --- + # Algorithmic layout transforms that compute spatial positions + # for entire visualization paradigms. Not available in Vega-Lite. + (['"type":"contour"', '"type":"isocontour"'], "layout:contour"), + (['"type":"force"'], "layout:force"), + (['"type":"linkpath"'], "layout:linkpath"), + (['"type":"pack"'], "layout:pack"), + (['"type":"partition"'], "layout:partition"), + (['"type":"pie"'], "layout:pie"), + (['"type":"tree"'], "layout:tree"), + (['"type":"treemap"'], "layout:treemap"), + (['"type":"voronoi"'], "layout:voronoi"), + (['"type":"wordcloud"'], "layout:wordcloud"), +] + + +def detect_techniques( + spec_or_code: dict[str, Any] | str, + _gallery_name: str, +) -> list[str]: + """ + Detect Vega/Vega-Lite/Altair techniques from spec or code. + + Scans the spec (JSON) or code (Python string) for known patterns + that indicate usage of specific visualization techniques. + + Parameters + ---------- + spec_or_code + For Vega/Vega-Lite: parsed JSON spec as dict + For Altair: Python source code as string + _gallery_name + One of "vega", "vega-lite", "altair" (currently unused but + reserved for future library-specific detection logic) + + Returns + ------- + list[str] + Sorted list of technique tags like ["transform:window", "interaction:selection"] + + Examples + -------- + Vega-Lite spec with window transform: + + >>> spec = {"transform": [{"window": [{"op": "rank", "as": "rank"}]}]} + >>> detect_techniques(spec, "vega-lite") + ['transform:window'] + + Altair code with selection: + + >>> code = "brush = alt.selection_interval()" + >>> detect_techniques(code, "altair") + ['interaction:selection'] + + Notes + ----- + - Pattern matching on serialized JSON is intentionally simple—catches 90%+ of cases + - Tags use `category:subcategory` format for future filtering flexibility + - Empty `techniques: []` is valid (simple examples with no notable features) + - _gallery_name parameter is reserved for future use where library-specific + detection may be needed + """ + techniques: set[str] = set() + + # Convert to searchable lowercase text + if isinstance(spec_or_code, dict): + # JSON spec - serialize compactly for pattern matching + text = json.dumps(spec_or_code, separators=(",", ":")).lower() + else: + # Python code string + text = spec_or_code.lower() + + for patterns, tag in TECHNIQUE_PATTERNS: + if any(p.lower() in text for p in patterns): + techniques.add(tag) + + return sorted(techniques) + + +def extract_altair_category(code: str) -> str | None: + r""" + Extract category from Altair example code comment. + + Altair examples use a comment convention to specify categories: + # category: bar charts + + This function extracts and normalizes the category name. + + Parameters + ---------- + code : str + Altair Python source code. + + Returns + ------- + str | None + Extracted category in Title Case, or None if not found. + + Examples + -------- + >>> code = "# category: bar charts\\nimport altair as alt" + >>> extract_altair_category(code) + 'Bar Charts' + + >>> code = "import altair as alt" + >>> extract_altair_category(code) + None + + Notes + ----- + - Pattern matches: # category: + - Whitespace around category name is stripped + - Result is converted to Title Case for consistency + - Returns None if comment not found + """ + # Match: # category: + # Must be at start of line (^) + pattern = r"^#\s*category:\s*(.*)$" + match = re.search(pattern, code, re.MULTILINE) + if match: + return match.group(1).strip().title() + return None + + +def extract_altair_description(code: str) -> str | None: + """ + Extract description from Altair example module docstring. + + Altair examples typically have a module docstring with structure: + \"\"\"Title + ====== + Description text here. + \"\"\" + + This function extracts the description text, skipping the title + and underline. + + Parameters + ---------- + code : str + Altair Python source code. + + Returns + ------- + str | None + Extracted description with normalized whitespace, or None if + not found or empty. + + Examples + -------- + >>> code = ''' + ... \"\"\"Bar Chart + ... ========= + ... A simple bar chart example. + ... \"\"\" + ... import altair as alt + ... ''' + >>> extract_altair_description(code) + 'A simple bar chart example.' + + >>> code = "import altair as alt" + >>> extract_altair_description(code) + None + + Notes + ----- + - Handles both triple-quote styles (''' and \"\"\") + - Detects title/underline pattern and skips them + - Normalizes whitespace (converts multiple spaces/newlines to single space) + - Returns None if docstring empty after removing title + - Underlines can be = or - characters + """ + # Match docstring at start of file + # (?:'''|\"\"\") = non-capturing group for quote style + # .+? = non-greedy match for content + # re.DOTALL = . matches newlines + pattern = r'^(?:\'\'\'|""")(.+?)(?:\'\'\'|""")' + match = re.search(pattern, code, re.MULTILINE | re.DOTALL) + if match: + docstring = match.group(1).strip() + lines = docstring.split("\n") + + # Check if second line is an underline (title pattern) + # Pattern: line of = or - characters + if len(lines) >= 2 and re.match(r"^[=-]+$", lines[1].strip()): + # Skip title and underline, join the rest + description = "\n".join(lines[2:]).strip() + else: + # No title pattern, use whole docstring + description = docstring + + # Normalize whitespace: collapse multiple spaces/newlines + description = re.sub(r"\s+", " ", description).strip() + return description or None + + return None + + +def enrich_examples_with_datasets( + examples: list[dict[str, Any]], + session: requests.Session, + name_map: DatasetNameMap, + valid_names: ValidNames, + config: GalleryConfig, +) -> None: + """ + Fetch specs and extract datasets and techniques for all examples (in-place). + + This is the main orchestration function for Phase 4. It iterates + through all collected examples, fetches their specifications or + code, routes to the appropriate extraction function, and updates + the example dictionaries with dataset and technique information. + + Parameters + ---------- + examples : list[dict[str, Any]] + List of IntermediateExample dictionaries (modified in-place). + Each example's datasets, techniques, description, and categories + fields will be populated. + session : requests.Session + HTTP session for connection pooling. + name_map : dict[str, str] + Map from file paths to canonical dataset names. + valid_names : set[str] + Valid dataset names from datapackage.json. + config : GalleryConfig + Configuration dictionary with network and Altair settings. + + Returns + ------- + None + Modifies examples list in-place. + + Examples + -------- + >>> examples = [ + ... {"gallery_name": "vega-lite", "spec_url": "http://...", "datasets": []} + ... ] + >>> session = requests.Session() + >>> name_map = {"data/cars.json": "cars"} + >>> valid_names = {"cars"} + >>> config = {"network": {"timeout": 30}, "altair": {"name_mapping": {}}} + >>> enrich_examples_with_datasets(examples, session, name_map, valid_names, config) + >>> examples[0]["datasets"] + ['cars'] + + Notes + ----- + - Progress logged every 50 examples + - Errors are logged but don't stop processing + - Duplicates in datasets are removed while preserving order + - Techniques are auto-detected via pattern matching (see detect_techniques()) + - Vega-Lite and Vega descriptions extracted from spec.description + - Altair categories and descriptions extracted from code comments + - Altair API name validation uses _data/gallery_examples.toml mappings + - Failed fetches or parsing errors are logged as warnings + """ + logger.info("Enriching %s examples with dataset information...", len(examples)) + timeout = config.get("network", {}).get("timeout", DEFAULT_TIMEOUT) + + for i, example in enumerate(examples): + # Progress logging every 50 examples + if (i + 1) % 50 == 0: + logger.info(" Progress: %s/%s", i + 1, len(examples)) + + try: + # Fetch the specification or code + response = session.get(example["spec_url"], timeout=timeout) + if response.status_code != 200: + logger.warning( + "Failed to fetch %s: %s", example["spec_url"], response.status_code + ) + continue + + # Route to appropriate extraction function based on gallery + # Each branch extracts: datasets, techniques, and optionally description + if example["gallery_name"] == "vega-lite": + spec = response.json() + datasets = extract_datasets_from_vegalite_spec(spec, name_map) + techniques = detect_techniques(spec, "vega-lite") + # Extract description from spec if not already set + if not example["description"] and "description" in spec: + example["description"] = spec["description"] + + elif example["gallery_name"] == "vega": + spec = response.json() + datasets = extract_datasets_from_vega_spec(spec, name_map) + techniques = detect_techniques(spec, "vega") + # Extract description from spec if not already set + if not example["description"] and "description" in spec: + example["description"] = spec["description"] + + elif example["gallery_name"] == "altair": + code = response.text + assert isinstance(code, str) # response.text is always str in requests + datasets = extract_datasets_from_altair_code( + code, name_map, valid_names, config + ) + techniques = detect_techniques(code, "altair") + # Extract category from code comment + category = extract_altair_category(code) + if category: + example["categories"] = [category] + # Extract description from docstring + description = extract_altair_description(code) + if description: + example["description"] = description + + else: + # Defensive: should not happen with TypedDict + logger.warning("Unknown gallery: %s", example["gallery_name"]) + continue + + # Remove duplicates while preserving order + unique_datasets = make_dataset_references(datasets) + + # Validate dataset references (log warnings for unknown datasets) + try: + validator = SimpleDatasetValidator(valid_names) + validator.validate_all(unique_datasets) + except ValueError as e: + # Log warning but don't fail - gallery examples may reference + # datasets not yet in vega-datasets or use custom data sources + logger.warning( + "Dataset validation warning for %s example '%s': %s", + example.get("gallery_name", "unknown"), + example.get("example_name", "unnamed"), + e, + ) + + example["datasets"] = unique_datasets + example["techniques"] = techniques + + except Exception as e: + # Log error but continue processing other examples + # This ensures one bad example doesn't crash the entire run + logger.warning("Error processing %s: %s", example["example_name"], e) + continue + + logger.info("Enrichment complete!") + + +# ============================================================================ +# Output Generation Functions (Phase 5) +# ============================================================================ + + +def finalize_examples(examples: list[dict[str, Any]]) -> list[GalleryExample]: + """ + Finalize examples: assign IDs, sort. Returns data-only list for v2 compliance. + + Takes a list of enriched examples and prepares them for JSON output + by assigning sequential IDs and sorting consistently. Per Data Package v2, + the output is a plain array (data-only); metadata is stored in datapackage.json. + + Parameters + ---------- + examples : list[dict[str, Any]] + List of enriched IntermediateExample dictionaries. + + Returns + ------- + list[GalleryExample] + List of gallery examples ready for JSON serialization. + Sorted by gallery_name, then example_name, with sequential IDs. + + Examples + -------- + >>> examples = [ + ... {'gallery_name': 'vega-lite', 'example_name': 'Scatter Plot', ...}, + ... {'gallery_name': 'altair', 'example_name': 'Bar Chart', ...} + ... ] + >>> output = finalize_examples(examples) + >>> output[0]["id"] + 1 + >>> output[1]["id"] + 2 + >>> isinstance(output, list) + True + + Notes + ----- + - Examples are sorted first by gallery_name, then by example_name + - IDs are assigned sequentially starting at 1 + - This ensures consistent output across runs (same examples = same order) + - Data Package v2 compliance: metadata is in datapackage.json, not here + """ + # Sort by gallery name, then example name for consistent ordering + # This ensures the output is deterministic and easy to diff + examples.sort(key=operator.itemgetter("gallery_name", "example_name")) + + # Assign sequential IDs starting at 1 + for i, example in enumerate(examples, start=1): + example["id"] = i + + # Return data-only list (Data Package v2 compliance) + # Cast needed because list[dict[str, Any]] is not compatible with list[GalleryExample] + # due to invariance, even though the runtime structure matches + return cast("list[GalleryExample]", examples) + + +def write_json_output( + data: list[GalleryExample] | list[dict[str, Any]], output_path: Path +) -> None: + """ + Write final JSON output to file. + + Writes the finalized example data to a JSON file with human-readable + formatting (2-space indentation, UTF-8 encoding, preserved unicode). + Per Data Package v2, the output is a plain array (data-only). + + Parameters + ---------- + data : list[GalleryExample] | list[dict[str, Any]] + List of gallery examples from finalize_examples(). + output_path : Path + Path to the output JSON file. + + Returns + ------- + None + + Raises + ------ + OSError + If the file cannot be written (permissions, disk space, etc.). + + Examples + -------- + >>> data = [{"id": 1, "gallery_name": "altair", ...}, ...] + >>> output_path = Path("gallery_examples.json") + >>> write_json_output(data, output_path) + # Writes formatted JSON array to gallery_examples.json + + Notes + ----- + - Uses 2-space indentation for readability + - UTF-8 encoding for international character support + - ensure_ascii=False preserves unicode characters + - Creates parent directories if they don't exist + - Data Package v2 compliance: outputs plain array, metadata in datapackage.json + """ + logger.info("Writing output to %s", output_path) + + # Ensure parent directory exists + output_path.parent.mkdir(parents=True, exist_ok=True) + + # Write with human-readable formatting + with output_path.open("w", encoding="utf-8") as f: + json.dump( + data, + f, + indent=2, + ensure_ascii=False, # Allow unicode characters + sort_keys=False, # Preserve order + ) + + logger.info("Wrote %s examples to %s", len(data), output_path) + + +# ============================================================================ +# Main Orchestration (Phase 6) +# ============================================================================ + + +def main( + output_path: Path | None = None, + dry_run: bool = False, +) -> None: + """ + Main entry point for gallery examples collection. + + Orchestrates all phases of the collection process: + 1. Load configuration from _data/gallery_examples.toml + 2. Build dataset name mapping from datapackage.json + 3. Collect examples from all three galleries + 4. Enrich examples with dataset information + 5. Finalize and write output + + Configuration is loaded from _data/gallery_examples.toml in the repository root. + Command-line arguments override configuration file settings. + + Parameters + ---------- + output_path : Path | None, default None + Custom output file path. If None, uses default from _data/gallery_examples.toml + or gallery_examples.json in the repository root. + dry_run : bool, default False + If True, performs all collection and extraction but does not + write output file. Useful for testing and validation. + Overrides _data/gallery_examples.toml setting. + + Returns + ------- + None + + Raises + ------ + requests.HTTPError + If any HTTP request fails. + OSError + If output file cannot be written (unless dry_run=True). + + Examples + -------- + >>> main() # Use defaults from _data/gallery_examples.toml + >>> main(output_path=Path("test.json")) # Custom output + >>> main(dry_run=True) # Test without writing + + Notes + ----- + - Expected runtime: 2-4 minutes depending on network speed + - Progress is logged to console + - Errors in individual examples don't stop the entire process + - Session is closed automatically via try/finally + - Dry-run still fetches all data but skips file write + - Configuration file is optional (uses defaults if not found) + - Altair API name validation uses _data/gallery_examples.toml mappings (see config['altair']['name_mapping']) + """ + start_time = time.time() + + logger.info("=== Gallery Examples Collection Starting ===") + + # Load configuration + config = load_config() + + # Apply config defaults (can be overridden by parameters) + if output_path is None: + repo_dir = Path(__file__).parent.parent + default_output = config.get("output", {}).get( + "default_output_path", "gallery_examples.json" + ) + output_path = repo_dir / default_output + + # output_path is guaranteed to be Path at this point + assert output_path is not None, "output_path should be set" + + # CLI dry_run overrides config + if not dry_run: + dry_run = config.get("output", {}).get("dry_run", False) + + if dry_run: + logger.info("DRY RUN MODE - Will not write output file") + + # Get config values + timeout = config.get("network", {}).get("timeout", DEFAULT_TIMEOUT) + sources = config.get("sources", {}) + + session = requests.Session() + + try: + # Phase 1: Build dataset mapping + logger.info("\n--- Phase 1: Building dataset name mapping ---") + datapackage_url = sources.get( + "datapackage_url", + "https://raw.githubusercontent.com/vega/vega-datasets/main/datapackage.json", + ) + datapackage = fetch_datapackage(session, datapackage_url, timeout) + name_map = build_dataset_name_map(datapackage) + valid_names = set(name_map.values()) + logger.info("Built mapping for %s datasets", len(valid_names)) + + # Phase 2: Collect examples + logger.info("\n--- Phase 2: Collecting gallery examples ---") + + vegalite_url = sources.get( + "vega_lite_examples_url", + "https://raw.githubusercontent.com/vega/vega-lite/main/site/_data/examples.json", + ) + vegalite_examples = collect_vega_lite_examples(session, vegalite_url, timeout) + + vega_url = sources.get( + "vega_examples_url", + "https://raw.githubusercontent.com/vega/vega/main/docs/_data/examples.json", + ) + vega_examples = collect_vega_examples(session, vega_url, timeout) + + altair_dirs = sources.get( + "altair_examples_dirs", + [ + "tests/examples_methods_syntax", + "tests/examples_arguments_syntax", + ], + ) + altair_examples = collect_altair_examples(session, altair_dirs, timeout) + + all_examples = vegalite_examples + vega_examples + altair_examples + logger.info("Total examples collected: %s", len(all_examples)) + + # Phase 3: Enrich with datasets + logger.info("\n--- Phase 3: Extracting datasets from specs ---") + enrich_examples_with_datasets( + all_examples, session, name_map, valid_names, config + ) + + # Phase 4: Finalize and write + logger.info("\n--- Phase 4: Finalizing and writing output ---") + output_data = finalize_examples(all_examples) + + if not dry_run: + write_json_output(output_data, output_path) + else: + logger.info("DRY RUN: Skipping write to %s", output_path) + logger.info("Would have written %s examples", len(output_data)) + + # Summary + elapsed = time.time() - start_time + logger.info("\n=== Collection Complete ===") + if not dry_run: + logger.info("Output: %s", output_path) + else: + logger.info("Mode: DRY RUN (no file written)") + logger.info("Examples: %s", len(all_examples)) + logger.info("Time: %.1fs", elapsed) + + except Exception as e: + logger.error("Fatal error: %s", e, exc_info=True) + raise + finally: + session.close() + + +def parse_args() -> dict[str, Any]: + """ + Parse command-line arguments. + + Returns + ------- + dict[str, Any] + Dictionary of parsed arguments with keys: + - output: Path or None + - verbose: bool + - dry_run: bool + + Examples + -------- + >>> # Command: python script.py --output test.json --verbose + >>> args = parse_args() + >>> args["output"] + PosixPath('test.json') + >>> args["verbose"] + True + """ + parser = argparse.ArgumentParser( + description="Generate gallery_examples.json from Vega ecosystem galleries", + formatter_class=argparse.RawDescriptionHelpFormatter, + epilog=""" +Examples: + %(prog)s # Use defaults from _data/gallery_examples.toml + %(prog)s --output test.json # Custom output path + %(prog)s --dry-run # Test without writing + %(prog)s --verbose --dry-run # Debug with dry-run + +Notes: + - Altair API name validation uses _data/gallery_examples.toml mappings (see config['altair']['name_mapping']) + - Expected runtime: 2-4 minutes depending on network speed + - Output: ~470 examples from Vega, Vega-Lite, and Altair galleries + """, + ) + + parser.add_argument( + "-o", + "--output", + type=Path, + help="Output file path (default: gallery_examples.json in repo root)", + ) + + parser.add_argument( + "--verbose", + action="store_true", + help="Enable debug logging", + ) + + parser.add_argument( + "--dry-run", + action="store_true", + help="Collect data but do not write output file", + ) + + args = parser.parse_args() + + return { + "output": args.output, + "verbose": args.verbose, + "dry_run": args.dry_run, + } + + +if __name__ == "__main__": + args = parse_args() + + # Set log level if verbose + if args["verbose"]: + logging.getLogger().setLevel(logging.DEBUG) + logger.debug("Debug logging enabled") + + # Run main with parsed arguments + main( + output_path=args["output"], + dry_run=args["dry_run"], + ) diff --git a/tests/test_detect_techniques.py b/tests/test_detect_techniques.py new file mode 100644 index 00000000..f08f704b --- /dev/null +++ b/tests/test_detect_techniques.py @@ -0,0 +1,685 @@ +"""Tests for detect_techniques function in generate_gallery_examples.py.""" + +import sys +from pathlib import Path + +# Add scripts directory to path for import +sys.path.insert(0, str(Path(__file__).parent.parent / "scripts")) + +from generate_gallery_examples import detect_techniques + + +class TestVegaTransforms: + """Test Vega-specific transform detection.""" + + def test_detects_vega_bin_transform(self): + """Vega uses {"type": "bin"} for binning transforms.""" + spec = { + "data": [ + { + "name": "binned", + "source": "source", + "transform": [{"type": "bin", "field": "IMDB_Rating"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:bin" in techniques + + def test_detects_vega_extent_transform(self): + """Vega uses {"type": "extent"} to compute data extent.""" + spec = { + "data": [ + { + "name": "source", + "transform": [ + {"type": "extent", "field": "Horsepower", "signal": "hp_extent"} + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:extent" in techniques + + def test_detects_vega_crossfilter_transform(self): + """Vega uses {"type": "crossfilter"} for multi-dimensional filtering.""" + spec = { + "data": [ + { + "name": "flights", + "transform": [ + { + "type": "crossfilter", + "signal": "vgx_xfilter", + "fields": ["delay", "time", "distance"], + } + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:crossfilter" in techniques + + def test_detects_vega_resolvefilter_transform(self): + """Vega uses {"type": "resolvefilter"} to resolve crossfilter.""" + spec = { + "data": [ + { + "name": "filtered", + "source": "flights", + "transform": [ + {"type": "resolvefilter", "filter": {"signal": "..."}} + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert ( + "transform:crossfilter" in techniques + ) # resolvefilter implies crossfilter + + +class TestVegaLiteTransforms: + """Test Vega-Lite transform detection.""" + + def test_detects_vegalite_bin_in_transform(self): + """Vega-Lite uses {"bin": true} or {"bin": {...}} in transforms.""" + spec = {"transform": [{"bin": True, "field": "IMDB_Rating", "as": "binned"}]} + techniques = detect_techniques(spec, "vega-lite") + assert "transform:bin" in techniques + + def test_detects_vegalite_bin_object(self): + """Vega-Lite uses {"bin": {maxbins: 10}} for detailed bin config.""" + spec = { + "transform": [ + {"bin": {"maxbins": 10}, "field": "IMDB_Rating", "as": "binned"} + ] + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:bin" in techniques + + +class TestAltairTransforms: + """Test Altair code detection.""" + + def test_detects_altair_transform_bin(self): + """Altair uses transform_bin() method.""" + code = """ +import altair as alt +chart = alt.Chart(data).transform_bin( + 'binned_field', 'field', bin=alt.Bin(maxbins=20) +).mark_bar() +""" + techniques = detect_techniques(code, "altair") + assert "transform:bin" in techniques + + +class TestExistingPatterns: + """Verify existing patterns still work after changes.""" + + def test_detects_window_transform_vegalite(self): + """Window transforms should still be detected.""" + spec = { + "transform": [ + {"window": [{"op": "rank", "as": "rank"}], "sort": [{"field": "x"}]} + ] + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:window" in techniques + + def test_detects_selection_altair(self): + """Altair selections should still be detected.""" + code = "brush = alt.selection_interval()" + techniques = detect_techniques(code, "altair") + assert "interaction:selection" in techniques + + def test_detects_geoshape(self): + """Geoshape marks should still be detected.""" + spec = {"mark": "geoshape", "projection": {"type": "albersUsa"}} + techniques = detect_techniques(spec, "vega-lite") + assert "geo:shape" in techniques + assert "geo:projection" in techniques + + +class TestMissingVLTransforms: + """Test Vega-Lite transforms that were previously undetected.""" + + # NOTE on stack detection limitations: + # In Vega-Lite, stacking is IMPLICIT by default for bar/area marks with + # color encoding — no "stack" key appears in the spec at all. We can only + # detect EXPLICIT stacking configurations (stack:"zero", stack:"normalize", + # or the transform array form). This means most simple stacked charts in + # VL won't be tagged. We accept this tradeoff — explicit stack usage IS + # a notable technique worth tagging, and Vega specs always use explicit + # {"type":"stack"} which we catch reliably. + # + # Known edge case: "stack":null (disabling stacking) will false-positive. + # This is rare in gallery examples and acceptable. + + def test_detects_vegalite_stack_explicit(self): + """VL explicit stack config: {"stack":"zero"} or {"stack":"normalize"}.""" + spec = { + "mark": "area", + "encoding": { + "x": {"field": "date", "type": "temporal"}, + "y": {"field": "count", "type": "quantitative", "stack": "zero"}, + "color": {"field": "category"}, + }, + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:stack" in techniques + + def test_detects_vegalite_stack_transform_array(self): + """Vega-Lite transform array form: {"stack":"field", ...}.""" + spec = { + "transform": [{"stack": "count", "groupby": ["date"], "as": ["y0", "y1"]}] + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:stack" in techniques + + def test_vegalite_implicit_stack_not_detected(self): + """VL implicit stacking (no "stack" key) is NOT detected — known limitation.""" + spec = { + "mark": "bar", + "encoding": { + "x": {"field": "date", "type": "ordinal"}, + "y": {"field": "count", "type": "quantitative"}, + "color": {"field": "category", "type": "nominal"}, + }, + } + techniques = detect_techniques(spec, "vega-lite") + # Implicit stacking is invisible in the spec — we accept this gap + assert "transform:stack" not in techniques + + def test_detects_vega_stack_transform(self): + """Vega uses {"type":"stack"} in data transforms — always explicit.""" + spec = { + "data": [ + { + "name": "table", + "transform": [{"type": "stack", "groupby": ["x"], "field": "y"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:stack" in techniques + + def test_detects_vegalite_timeunit_encoding(self): + """Vega-Lite uses {"timeUnit":"yearmonth"} in encoding.""" + spec = { + "mark": "line", + "encoding": { + "x": {"timeUnit": "yearmonth", "field": "date", "type": "temporal"}, + "y": {"field": "count", "type": "quantitative"}, + }, + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:timeunit" in techniques + + def test_detects_vegalite_timeunit_transform(self): + """Vega-Lite uses {"timeUnit":"month", "field":"date", "as":"month"}.""" + spec = { + "transform": [{"timeUnit": "month", "field": "date", "as": "month_date"}] + } + techniques = detect_techniques(spec, "vega-lite") + assert "transform:timeunit" in techniques + + def test_detects_altair_timeunit(self): + """Altair uses transform_timeunit() method.""" + code = """ +import altair as alt +chart = alt.Chart(data).transform_timeunit( + month='month(date)' +).mark_bar() +""" + techniques = detect_techniques(code, "altair") + assert "transform:timeunit" in techniques + + def test_detects_vega_timeunit(self): + """Vega uses {"type":"timeunit"} transform.""" + spec = { + "data": [ + { + "name": "table", + "transform": [ + { + "type": "timeunit", + "field": "date", + "units": ["year", "month"], + } + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:timeunit" in techniques + + +class TestVegaLayoutTransforms: + """Test Vega-only layout/algorithmic transforms.""" + + def test_detects_treemap_layout(self): + spec = { + "data": [ + { + "name": "tree", + "transform": [ + {"type": "stratify", "key": "id", "parentKey": "parent"}, + {"type": "treemap", "field": "size"}, + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:treemap" in techniques + + def test_detects_tree_layout(self): + spec = { + "data": [ + { + "name": "tree", + "transform": [ + {"type": "stratify", "key": "id", "parentKey": "parent"}, + {"type": "tree", "method": "tidy"}, + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:tree" in techniques + + def test_detects_pack_layout(self): + spec = { + "data": [{"name": "tree", "transform": [{"type": "pack", "field": "size"}]}] + } + techniques = detect_techniques(spec, "vega") + assert "layout:pack" in techniques + + def test_detects_partition_layout(self): + spec = { + "data": [ + {"name": "tree", "transform": [{"type": "partition", "field": "size"}]} + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:partition" in techniques + + def test_detects_force_layout(self): + spec = { + "data": [ + { + "name": "nodes", + "transform": [ + { + "type": "force", + "forces": [{"force": "link", "links": "edges"}], + } + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:force" in techniques + + def test_detects_wordcloud_layout(self): + spec = { + "data": [ + { + "name": "table", + "transform": [{"type": "wordcloud", "text": {"field": "text"}}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:wordcloud" in techniques + + def test_detects_voronoi_layout(self): + spec = { + "data": [ + { + "name": "cells", + "transform": [{"type": "voronoi", "x": "datum.x", "y": "datum.y"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:voronoi" in techniques + + def test_detects_pie_layout(self): + spec = { + "data": [ + {"name": "table", "transform": [{"type": "pie", "field": "value"}]} + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:pie" in techniques + + def test_detects_contour_layout(self): + spec = { + "data": [ + { + "name": "contours", + "transform": [{"type": "contour", "signal": "count"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:contour" in techniques + + def test_detects_linkpath(self): + spec = { + "marks": [ + { + "type": "path", + "from": {"data": "links"}, + "encode": {"update": {"path": {"field": "path"}}}, + "transform": [{"type": "linkpath"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "layout:linkpath" in techniques + + +class TestVegaGeoTransforms: + """Test Vega-only geographic transforms.""" + + def test_detects_graticule(self): + spec = {"data": [{"name": "graticule", "transform": [{"type": "graticule"}]}]} + techniques = detect_techniques(spec, "vega") + assert "geo:graticule" in techniques + + def test_detects_geopoint(self): + spec = { + "data": [ + { + "name": "points", + "transform": [{"type": "geopoint", "projection": "projection"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "geo:geopoint" in techniques + + def test_detects_geopath(self): + spec = { + "data": [ + { + "name": "paths", + "transform": [{"type": "geopath", "projection": "projection"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "geo:geopath" in techniques + + def test_detects_geojson(self): + spec = { + "data": [ + { + "name": "geo", + "transform": [{"type": "geojson", "fields": ["lon", "lat"]}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "geo:geojson" in techniques + + +class TestVegaHierarchyTransforms: + """Test Vega-only hierarchy data transforms.""" + + def test_detects_stratify(self): + spec = { + "data": [ + { + "name": "tree", + "transform": [ + {"type": "stratify", "key": "id", "parentKey": "parent"} + ], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:stratify" in techniques + + def test_detects_nest(self): + spec = { + "data": [ + {"name": "tree", "transform": [{"type": "nest", "keys": ["category"]}]} + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:nest" in techniques + + def test_detects_treelinks(self): + spec = { + "data": [ + { + "name": "links", + "source": "tree", + "transform": [{"type": "treelinks"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:treelinks" in techniques + + +class TestVegaDataTransforms: + """Test Vega-only statistical and data transforms.""" + + def test_detects_kde2d(self): + spec = { + "data": [ + { + "name": "density", + "transform": [{"type": "kde2d", "size": [500, 500]}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:kde2d" in techniques + + def test_detects_dotbin(self): + spec = { + "data": [ + {"name": "dots", "transform": [{"type": "dotbin", "field": "value"}]} + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:dotbin" in techniques + + def test_detects_countpattern(self): + spec = { + "data": [ + { + "name": "table", + "transform": [{"type": "countpattern", "field": "text"}], + } + ] + } + techniques = detect_techniques(spec, "vega") + assert "transform:countpattern" in techniques + + def test_detects_cross(self): + spec = {"data": [{"name": "crossed", "transform": [{"type": "cross"}]}]} + techniques = detect_techniques(spec, "vega") + assert "transform:cross" in techniques + + +class TestAltairMethodsSyntax: + """Test Altair methods-syntax patterns that differ from JSON/arguments syntax. + + Altair has two coding styles: + - Arguments syntax: alt.X('field', bin=True) + - Methods syntax: alt.X('field').bin() + + Most gallery examples use methods syntax. These tests verify we detect + features expressed as method chains, not just JSON keys or kwargs. + """ + + # --- transform:stack via .stack() method --- + + def test_detects_altair_stack_normalize_method(self): + """Altair methods syntax: .stack("normalize").""" + code = """ +import altair as alt +alt.Chart(source).mark_bar().encode( + x=alt.X('sum(yield)').stack("normalize"), + y='variety', + color='site' +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:stack" in techniques + + def test_detects_altair_stack_none_method(self): + """Altair methods syntax: .stack(None) disables stacking.""" + code = """ +import altair as alt +alt.Chart(source).mark_area(opacity=0.3).encode( + x="year:T", + y=alt.Y("net_generation:Q").stack(None), + color="source:N" +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:stack" in techniques + + # --- mark:arc --- + + def test_detects_altair_mark_arc(self): + """Altair pie/donut charts use mark_arc().""" + code = """ +import altair as alt +alt.Chart(source).mark_arc().encode( + theta="value", + color="category" +) +""" + techniques = detect_techniques(code, "altair") + assert "mark:arc" in techniques + + def test_detects_altair_mark_arc_with_kwargs(self): + """Altair donut chart: mark_arc(innerRadius=50).""" + code = """ +import altair as alt +alt.Chart(source).mark_arc(innerRadius=50).encode( + theta="value", + color="category:N" +) +""" + techniques = detect_techniques(code, "altair") + assert "mark:arc" in techniques + + def test_detects_vegalite_arc_mark(self): + """Vega-Lite JSON: {"mark": "arc"} or {"mark": {"type": "arc"}}.""" + spec = { + "mark": {"type": "arc", "innerRadius": 50}, + "encoding": { + "theta": {"field": "value", "type": "quantitative"}, + "color": {"field": "category", "type": "nominal"}, + }, + } + techniques = detect_techniques(spec, "vega-lite") + assert "mark:arc" in techniques + + # --- composition:facet via alt.Row() / alt.Column() --- + + def test_detects_altair_row_facet(self): + """Altair methods syntax: alt.Row('field:N').""" + code = """ +import altair as alt +alt.Chart(source).mark_point().encode( + alt.X('yield:Q'), + alt.Y('variety:N'), + alt.Color('year:N'), + alt.Row('site:N') +) +""" + techniques = detect_techniques(code, "altair") + assert "composition:facet" in techniques + + def test_detects_altair_column_facet(self): + """Altair methods syntax: alt.Column('field:N').""" + code = """ +import altair as alt +alt.Chart(source).mark_bar().encode( + x='value:Q', + y='category:N', + alt.Column('group:N') +) +""" + techniques = detect_techniques(code, "altair") + assert "composition:facet" in techniques + + # --- transform:bin via bin=True / .bin() --- + + def test_detects_altair_bin_kwarg(self): + """Altair arguments syntax: alt.X('field', bin=True).""" + code = """ +import altair as alt +alt.Chart(source).mark_bar().encode( + alt.X("IMDB Rating:Q", bin=True), + y='count()', +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:bin" in techniques + + def test_detects_altair_bin_method(self): + """Altair methods syntax: alt.X('field').bin().""" + code = """ +import altair as alt +base = alt.Chart(source) +bar = base.mark_bar().encode( + alt.X('IMDB Rating:Q').bin().axis(None), + y='count()' +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:bin" in techniques + + # --- transform:aggregate via count() shorthand --- + + def test_detects_altair_count_shorthand(self): + """Altair encoding shorthand: y='count()'.""" + code = """ +import altair as alt +alt.Chart(source).mark_bar().encode( + alt.X("IMDB Rating:Q", bin=True), + y='count()', +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:aggregate" in techniques + + def test_detects_altair_count_in_encoding(self): + """Altair: 'count()' as standalone aggregate.""" + code = """ +import altair as alt +alt.Chart(source).mark_bar().encode( + x='count()', + y='category:N' +) +""" + techniques = detect_techniques(code, "altair") + assert "transform:aggregate" in techniques + + def test_count_in_python_comment_still_matches(self): + """We accept that count() in comments may match — low risk in gallery code.""" + code = """ +# This uses count() aggregation +import altair as alt +alt.Chart(source).mark_bar() +""" + techniques = detect_techniques(code, "altair") + # count() in a comment still matches — acceptable for gallery examples + assert "transform:aggregate" in techniques + + +if __name__ == "__main__": + import pytest + + pytest.main([__file__, "-v"])