🌍 Public
[Vega-Lite] 3.1 HTML setup
This example demonstrates a scatter plot of penguin culmen length versus culmen depth, rendered as circular marks using concrete measurements from the Palmer Penguins dataset. The page loads Vega-Lite 5 and Vega-Embed 6 from a CDN in a minimal HTML document, then calls `vegaEmbed('#vis', spec)` to parse the external `line.json` specification and inject the chart into a div. The Vega-Lite spec defines quantitative x- and y-encodings with a fixed width of 360 pixels, relying on Vega’s rendering pipeline to produce the visualization.
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/664de81696c445c4932c8d98016fc515/social-image.png?v=4fad2e1c977349919558faf82ab7e889)
![[Vega-Lite] 3.1 HTML setup](/viz/3e3a58eba5f34f4699e73a31afb57ba2/social-image.png?v=842bf049265d40e49e791740c66d813b)
![[Vega-Lite] 3.1 HTML setup](/viz/b21cb24eb71e430a95c4acaf800b1132/social-image.png?v=cffe682f0d874b99b707b6726eec9915)
![Fork of [Vega-Lite] 3.1 HTML setup](/viz/32df8e7cf79847ec8b9f66580dca8ba9/social-image.png?v=ff2988201f8f4c6e9715744df6be0065)
![[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)

Comments
Sign in to join the discussion.