🌍 Public
[Vega-Lite] 3.5 Selection
This example uses Vega-Lite and Vega-Embed to create a linked selection between two area charts of S&P 500 price data. The main chart displays price over time, while a smaller overview chart below it allows interval selection along the x-axis via the `"select": {"type": "interval", "encodings": ["x"]}` parameter. The selected brush range updates the main chart’s temporal scale domain through the `"scale": {"domain": {"param": "brush"}}` binding. The data is loaded from a remote CSV file, and both charts share the same date and price fields.
AI-generated descriptionMIT Licensed
![Fork of [Vega-Lite] 3.5 Selection](/viz/176a567d7d784284848f3245e330025d/social-image.png?v=b101e78abec34fabb0c4b635be90a6ba)
![[Vega-Lite] 3.2 Line Chart](/viz/9d29d7728d8344d5abc5e2039f22d5c3/social-image.png?v=eb83357be732420688cbd7151e63f6fe)
![[Vega-Lite] 3.1 HTML setup](/viz/d2e9defde5384516a19738f869ad708d/social-image.png?v=5cf2d4b67a3545e2a3c0fa1c1c492f80)
![[Vega-Lite] 3.3 Area Chart](/viz/18d6f40719644b3797144983fdd56380/social-image.png?v=d0d6f4b85d4e4ea8ba847cfca92f38c5)
![[Vega-Lite] 3.4 Composition](/viz/512913c2a5d542579b19c85e325d525e/social-image.png?v=9d54205131d142afa426d01c5836a091)
![[Vega-Lite] 3.3 Area Chart](/viz/c831224d68c945bd9ff28242ce589485/social-image.png?v=fbb868dae9844f0d8710ffc7ef1ac5dc)
![Fork of [Vega-Lite] 3.3 Area Chart](/viz/f7e61225ce9c459286132f45f40414b1/social-image.png?v=35a61b7661844335a0f182caa74cceed)
![[Vega-Lite] 3.2 Line Chart](/viz/9e059a347e544f90b43daaaf5aa6cee3/social-image.png?v=053839e3d3114a1b90422063fb23bff5)
Comments
Sign in to join the discussion.