vega-lite API example: cross-filter

100%

vega-lite API example: cross-filter

✓ Published0🌍 Public

Last edited Aug 18, 2020

Created on Aug 18, 2020

This example shows three linked histograms for interactive cross-filtering of flight delay, distance, and time data from the flights-5k dataset. Each histogram supports a brush selection on its x-axis, and selecting a range in one chart filters the other two to show only matching records. The visualization uses the vega-lite-api to programmatically build the specification, composing transparent base layers with filtered bar layers, then renders the result via vegaEmbed. The code also calculates a time field from the date using the `calculate` transform, and applies `vl.selectInterval` for brush definitions.

AI-generated description

Converted from : https://observablehq.com/@vega/vega-lite-cross-filter-example?collection=@vega/vega-lite-api

A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser. This one uses vegaEmbed to render the chart. The key is to use the api to generate the spec, and then vegaEmbed to render it.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/d6f1c4fc6473f78dd1b900145f8b63df'>vega-lite JavaScript API browser example</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/a90b26fc3c99a925b05d51a479c16af2'>vega-lite JavaScript API browser example with vegaEmbed</a>

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/93076c6db5ed91ba2275767ba6809476'>vega-lite JavaScript API browser example with vegaEmbed</a>

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/9e9bf25ead1d3d71fae033ca177ce9a9'>vega-lite JavaScript API browser example with vegaEmbed</a>

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/d3f04f7cd9f33f4753080177fda33b2d'>vega-lite API example: cross-filter</a>

mit Licensed

Similar vizzes

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example demonstrates linked brushing and selection between a scatterplot of daily maximum temperature and precipitation and a bar chart of weather-type counts, using Seattle weather data. It shows how brushing the time axis filters the bar chart, while clicking weather categories filters the scatterplot. The visualization is built with the vega-lite-api JavaScript wrapper to generate the Vega-Lite specification programmatically, then rendered via vegaEmbed. The code defines interval and multi-selection encodings, custom color scales, and filters to synchronize both views interactively.

EEE2dev

75% match

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a linked brushing-and-clicking dashboard for Seattle weather data, combining a scatterplot of daily maximum temperature and precipitation with a bar chart of weather-type counts. It demonstrates the Vega-Lite JavaScript API and vegaEmbed in the browser, where the API builds a visualization specification and vegaEmbed renders it into the DOM. The code uses `vl.selectInterval` and `vl.selectMulti` for interactive selections, `vl.markPoint` and `vl.markBar` for marks, and `vl.vconcat` to stack the two views. The data is loaded from the vega-datasets CDN, with weather categories colored via a custom scale and precipitation mapped to point size.

EEE2dev

74% match

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a simple bar chart of categorical values against quantitative data, rendered directly in the browser using the Vega-Lite JavaScript API. It demonstrates how to generate a chart specification programmatically with `vl.markBar()`, `.encode()`, and `.toJSON()`, then pass that spec to `vegaEmbed` for rendering. The code loads Vega, Vega-Lite, Vega-Embed, and the Vega-Lite API from CDNs, and the chart uses inline sample data with fields "a" and "b". The tooltip encoding includes both fields, making the interaction visible.

EEE2dev

72% match

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This example combines two area charts in a vertically stacked view to show the S&P 500 index price over time. The top chart acts as a detailed view, while the bottom chart serves as a brushable overview for panning and zooming via a linked interval selection. Built with Vega-Lite v5, the visualization loads data from a CSV file containing historical price records. The code uses the `vegaEmbed` API to render the specification, which applies a temporal x-axis scale with a parameterized domain tied to the brush selection.

Iimjiyn

71% match

Loading thumbnail…

[Vega-Lite] 3.5 Selection

This example uses Vega-Lite and Vega-Embed to create a linked selection between two area charts of S&P 500 price data. The main chart displays price over time, while a smaller overview chart below it allows interval selection along the x-axis via the `"select": {"type": "interval", "encodings": ["x"]}` parameter. The selected brush range updates the main chart’s temporal scale domain through the `"scale": {"domain": {"param": "brush"}}` binding. The data is loaded from a remote CSV file, and both charts share the same date and price fields.

DDiego Rojo

70% match

Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates six distinct data visualizations rendered sequentially on a single page, exploring relationships between automotive attributes like miles per gallon, horsepower, and weight from the auto-mpg dataset, alongside temperature trends over time from the week temperature SF dataset. The visualizations include scatter plots, line charts, and point plots, each customized with tooltips and color encoding. Built using the Vega-Lite API wrapper, the code dynamically retrieves CSV data via D3 and configures visual properties programmatically, with options for mark type, size, opacity, and axis scaling. The framework combines Vega, Vega-Lite, and Vega-Tooltip for interactive SVG rendering.

SSulav Bista

68% match

Loading thumbnail…

vega-lite-api

This example demonstrates a scatter plot of automotive data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing car model names. It is built using the vega-lite-api library, which provides a programmatic interface to Vega-Lite specifications. The code registers Vega and Vega-Lite, loads data from a CSV via d3.csv, and renders the visualization as an SVG. A custom configuration adjusts axis ticks and label styling.

Rriizevans

68% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents four interactive Vega-Lite visualizations in a two-by-two grid, covering distinct datasets: auto MPG characteristics, San Francisco weekly temperatures, country populations, and global religious demographics. The visualizations, rendered as SVG, use scatter plots, area charts, bar charts, and bubble charts to explore relationships and distributions across the data. The code uses the Vega-Lite API (with vega and vega-lite) to programmatically construct specifications, D3 for data loading via CSV, and Vega Tooltip for hover details. Data originates from the UCI Machine Learning Repository and multiple Gists, with styling customized through a config object.

MManick Vennimalai

68% match