π Public
[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.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
MIT Licensed
![Fork of [Vega-Lite] 3.1 HTML setup](/viz/32df8e7cf79847ec8b9f66580dca8ba9/social-image.png?v=ff2988201f8f4c6e9715744df6be0065)
![[Vega-Lite] 3.2 Line Chart](/viz/9d29d7728d8344d5abc5e2039f22d5c3/social-image.png?v=eb83357be732420688cbd7151e63f6fe)
![[Vega-Lite] 3.2 Line Chart](/viz/81c0c20a30d141fd8018088d53517a65/social-image.png?v=8a4a34b296f2471c80f1de152ae0a23d)
![[Vega-Lite] 3.2 Line Chart](/viz/56c09f3cf1c14b61bde137530cc99256/social-image.png?v=e326c9e1281f4b76b4a9e7ef897c3890)
![[Vega-Lite] 3.2 Line Chart all in HTML](/viz/3f6f8932c3ba42939aa70bc07b5da1ee/social-image.png?v=7ed43c3ad912485490938ca19f97f0f0)
![[Vega-Lite] 3.3 Area Chart](/viz/18d6f40719644b3797144983fdd56380/social-image.png?v=d0d6f4b85d4e4ea8ba847cfca92f38c5)
![[Vega-Lite] 3.3 Area Chart](/viz/c831224d68c945bd9ff28242ce589485/social-image.png?v=fbb868dae9844f0d8710ffc7ef1ac5dc)
![[Vega-Lite] 3.2 Line Chart](/viz/9e059a347e544f90b43daaaf5aa6cee3/social-image.png?v=053839e3d3114a1b90422063fb23bff5)
Comments
Sign in to join the discussion.