Skip to main content
SimilarExport ZIP
100%

[Vega-Lite] 3.2 Line Chart

✓ Published0🌍 Public
Iimjiyn
Last edited Mar 16, 2022
Created on Mar 16, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This visualization displays fluctuations in the S&P 500 stock index over time, with a line chart showing price changes along a temporal axis. The example uses Vega-Lite’s JSON specification format to declare the chart, which is rendered through the vega-embed library within a minimal HTML page. The chart encodes dates on the x-axis and quantitative price values on the y-axis, while the mark type is set to "area" to fill the region beneath the line. The underlying data is fetched from a remote CSV hosted in a GitHub gist.

PPeilingShih
91% match
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.

JJaneChyau
90% 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
89% 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
87% match
Loading thumbnail…

[Vega-Lite] 3.2 Line Chart all in HTML

This example displays a simple line chart of S&P 500 stock prices over time, using a temporal x-axis and a quantitative y-axis. The visualization loads CSV data from a GitHub gist and renders the line mark directly in the browser. It is built entirely within a single HTML file using the Vega-Lite specification, then embedded into a `<div>` via the `vegaEmbed` function, with Vega and Vega-Lite loaded from a CDN.

DDiego Rojo
87% 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
87% 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
87% match
Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

A line chart shows the daily closing price of the S&P 500 index over time, with time on the x-axis and price on the y-axis. The visualization is built using Vega-Lite’s declarative specification, rendered with vega-embed, which loads and parses the JSON spec referencing a remote CSV of historical price data. The chart uses the “line” mark with temporal and quantitative encodings, and is sized at a fixed width of 360 pixels.

DDiego Rojo
87% match