๐ Public
[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.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed
![[Vega-Lite] 3.2 Line Chart](/viz/81c0c20a30d141fd8018088d53517a65/social-image.png?v=8a4a34b296f2471c80f1de152ae0a23d)
![[Vega-Lite] 3.2 Line Chart](/viz/9e059a347e544f90b43daaaf5aa6cee3/social-image.png?v=053839e3d3114a1b90422063fb23bff5)
![[Vega-Lite] 3.2 Line Chart all in HTML](/viz/3f6f8932c3ba42939aa70bc07b5da1ee/social-image.png?v=7ed43c3ad912485490938ca19f97f0f0)
![[Vega-Lite] 3.2 Line Chart](/viz/5d66fff1d0cb472291ec94af10c69117/social-image.png?v=42b5e437792843c48070da7bd395922d)
![[Vega-Lite] 3.2 Line Chart](/viz/e58780a7ae934db39105008748555d89/social-image.png?v=4ec95a144ace463aa0bdc9559984951c)
![[Vega-Lite] 3.2 Line Chart](/viz/9d29d7728d8344d5abc5e2039f22d5c3/social-image.png?v=eb83357be732420688cbd7151e63f6fe)
![[Vega-Lite] 3.2 Line Chart with .csv](/viz/1f0daed0198f41e59f8067b877166cdf/social-image.png?v=dac08f5f2db94b909176af15f3f214fc)
![Fork of [Vega-Lite] 3.2 Line Chart](/viz/60b98c5563ac4cc4b41a79f34ac36550/social-image.png?v=28f90c8160954a3cbc3ab7a140d5c6f0)
Comments
Sign in to join the discussion.