JaneChyau

@JaneChyau·3 public vizzes

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.

Mar 16, 2022

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.

Mar 16, 2022

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This example shows a simple line chart of the S&P 500 index over time, plotting price against date. The visualization uses a Vega-Lite specification (version 5) loaded from an external JSON file, with data sourced from a GitHub-hosted CSV (sp500.csv). The chart is rendered in an HTML page via the Vega-Embed JavaScript library, which pulls in Vega and Vega-Lite at runtime. The code defines the mark as a line and encodes the x-axis as temporal (date) and the y-axis as quantitative (price), with a fixed width of 360 pixels.

Mar 16, 2022