[Vega-Lite] 3.5 Selection

100%

[Vega-Lite] 3.5 Selection

✓ Published1🌍 Public

Last edited Mar 15, 2022

Created on Mar 15, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of [Vega-Lite] 3.5 Selection

Two stacked area charts show the S&P 500 price over time, sourced from a CSV file. The upper chart’s x-axis scale is linked to a brush selection on the lower, smaller chart via a Vega-Lite parameter named `brush`, which uses an interval selection over the x-encoding. Dragging across the lower chart updates the upper chart’s displayed date range. The visualization is built with Vega-Lite 5, embedded by vega-embed, and renders area marks for both views.

JJaneChyau

86% 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

84% match

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

This interactive visualization displays the historical price of the S&P 500 index over time as a dual area chart, where a smaller overview panel allows the user to brush an interval to zoom into a detailed panel above. It leverages the Vega-Lite and Vega-Embed JavaScript libraries to render the chart, with the data fetched from a remote CSV file hosted on GitHub. The visualization is implemented in a bare HTML page, using the vegaEmbed function to load a Vega-Lite specification from a separate JSON file.

Ee-haentjens

77% match

Loading thumbnail…

[Vega-Lite] 3.3 Area Chart

This area chart displays the S&P 500 index price over time, with the date on the temporal x-axis and price on the quantitative y-axis. The visualization is rendered using Vega-Lite’s `area` mark, defined in a JSON specification that loads data from a CSV file hosted on GitHub. The code embeds the chart into an HTML page using `vegaEmbed`, which processes the specification with the Vega and Vega-Lite libraries.

KKariChung

77% match

Loading thumbnail…

[Vega-Lite] 3.4 Composition

This example shows the S&P 500 index price over time as two stacked area charts, one above the other. The upper chart displays the full temporal range with a standard height, while the lower chart repeats the same data at a reduced height of 60 pixels. Both charts use the Vega-Lite specification language within a single `vconcat` composition, referencing the sp500.csv dataset. The visualization is rendered in the browser using the Vega-Embed API, which loads the vega-lite v5 schema and executes the chart definitions.

DDiego Rojo

76% match

Loading thumbnail…

[Vega-Lite] 3.3 Area Chart

This area chart displays the daily closing price of the S&P 500 index over time, using a filled region beneath a line to emphasize the magnitude of price changes. The visualization is built with Vega-Lite, specifying an area mark in a JSON specification loaded by `vegaEmbed` from `area.vl.json`. The data is fetched from a remote CSV file containing `date` and `price` fields, mapped to the temporal x-axis and quantitative y-axis, respectively. The chart is rendered inside an HTML page using the vega and vega-lite JavaScript libraries.

DDiego Rojo

76% match

Loading thumbnail…

Fork of [Vega-Lite] 3.3 Area Chart

This example displays a simple area chart of S&P 500 prices over time, using a temporal x-axis and quantitative y-axis. The visualization is built with Vega-Lite 5, which compiles the specification from `area.vl.json` into a Vega chart, and is rendered into the page via `vegaEmbed`. The data is loaded from a remote CSV file containing historical daily price records. The area mark fills the region below the line, showing price trends across the date range.

Ee-haentjens

75% match

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This example shows the S&P 500 index price over time as a filled line chart, using an area mark to emphasize the trend. The Vega-Lite specification defines a temporal x-axis for dates and a quantitative y-axis for prices, with a fixed chart width. The data is loaded from an external CSV file hosted on GitHub, and the visualization is rendered in the browser using the Vega-Embed API, which combines Vega and Vega-Lite libraries.

JJaneChyau

75% match