π Public
Fork of [Vega-Lite] 3.1 HTML setup
This example shows a simple line chart tracking the S&P 500 price over time, rendered inside a dedicated HTML container. The visualization loads a remote CSV dataset and maps the temporal date field to the x-axis and the quantitative price field to the y-axis. Built on Vega-Lite 5, the chart specification is defined in a JSON file and embedded into the page using `vegaEmbed`, which coordinates the Vega 5 runtime and rendering engine. The setup demonstrates a minimal HTML structure that combines external CDN scripts for Vega, Vega-Lite, and Vega-Embed to produce the chart.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed
![[Vega-Lite] 3.1 HTML setup](/viz/d2e9defde5384516a19738f869ad708d/social-image.png?v=5cf2d4b67a3545e2a3c0fa1c1c492f80)
![[Vega-Lite] 3.2 Line Chart all in HTML](/viz/3f6f8932c3ba42939aa70bc07b5da1ee/social-image.png?v=7ed43c3ad912485490938ca19f97f0f0)
![[Vega-Lite] 3.2 Line Chart](/viz/56c09f3cf1c14b61bde137530cc99256/social-image.png?v=e326c9e1281f4b76b4a9e7ef897c3890)
![Fork of [Vega-Lite] 3.2 Line Chart](/viz/60b98c5563ac4cc4b41a79f34ac36550/social-image.png?v=28f90c8160954a3cbc3ab7a140d5c6f0)
![Fork of [Vega-Lite] 3.3 Area Chart](/viz/f7e61225ce9c459286132f45f40414b1/social-image.png?v=35a61b7661844335a0f182caa74cceed)
![[Vega-Lite] 3.2 Line Chart](/viz/81c0c20a30d141fd8018088d53517a65/social-image.png?v=8a4a34b296f2471c80f1de152ae0a23d)
![[Vega-Lite] 3.1 HTML setup](/viz/664de81696c445c4932c8d98016fc515/social-image.png?v=4fad2e1c977349919558faf82ab7e889)
![Fork of [Vega-Lite] 3.2 Line Chart](/viz/2a76d18e2cf2431e81d1623d9ed45aad/social-image.png?v=82ceec305e704148bdaa30754a694544)
Comments
Sign in to join the discussion.