๐ Public
[Vega-Lite] 3.2 Line Chart
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 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/56c09f3cf1c14b61bde137530cc99256/social-image.png?v=e326c9e1281f4b76b4a9e7ef897c3890)
![[Vega-Lite] 3.2 Line Chart](/viz/9e059a347e544f90b43daaaf5aa6cee3/social-image.png?v=053839e3d3114a1b90422063fb23bff5)
![[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.4 Composition](/viz/512913c2a5d542579b19c85e325d525e/social-image.png?v=9d54205131d142afa426d01c5836a091)
![[Vega-Lite] 3.3 Area Chart](/viz/18d6f40719644b3797144983fdd56380/social-image.png?v=d0d6f4b85d4e4ea8ba847cfca92f38c5)
![[Vega-Lite] 3.2 Line Chart](/viz/e58780a7ae934db39105008748555d89/social-image.png?v=4ec95a144ace463aa0bdc9559984951c)
Comments
Sign in to join the discussion.