[Vega-Lite] 3.1 HTML setup

100%

[Vega-Lite] 3.1 HTML setup

✓ Published2🌍 Public

Last edited Mar 15, 2022

Created on Mar 15, 2022

This example demonstrates a minimal HTML setup for embedding a Vega-Lite visualization in a web page. It loads the Vega, Vega-Lite, and Vega-Embed JavaScript libraries from a CDN and creates a single empty div element with the ID “vis”. The code does not include any chart specification or data, so it only provides the foundational structure and script tags required to render a chart later. The Vega-Embed library would populate the div with a visualization once a specification is supplied.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

This example shows a minimal HTML setup for embedding a Vega-Lite visualization, loading a specification from an external JSON file. The page includes a single `<div id="vis">` container and uses the Vega, Vega-Lite, and Vega-Embed libraries from a CDN. The `vegaEmbed` function attaches the chart defined in `line.vl.json` to that container, with errors logged to the console via `catch(console.warn)`. The code relies on standard HTML and JavaScript without any framework.

Ggloriadelasheras

94% match

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

This example demonstrates a blank HTML page set up as a minimal foundation for embedding Vega-Lite visualizations. The page loads the Vega 5, Vega-Lite 5, and Vega-Embed 6 libraries from the jsDelivr CDN, with an empty `<div id="vis">` element where a chart would be rendered. The setup uses plain HTML with JavaScript library includes, rather than any React or other framework integration. The accompanying README references a React starter alternative, but the code itself shows only the static HTML scaffolding, defining the necessary dependencies for future chart creation.

QQDUniverse

92% match

Loading thumbnail…

[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.

Lliesbetdevos

84% match

Loading thumbnail…

Vega-Lite API Template

This example shows a blank web page with no visible data visualization. The code loads the Vega-Lite API, Vega, Vega-Lite, Vega-Tooltip, and D3 libraries, and includes a video embed, but the main script only references an external file named bundle.js. The page itself contains no drawn elements, charts, or data marks. The visualization’s behavior is not defined in the provided HTML, as the content relies entirely on the external bundle.js.

Mmrami010

82% match

Loading thumbnail…

Fork of [Vega-Lite] 3.1 HTML setup

This example shows a simple line chart tracking the S&P 500 price over time, rendered inside a dedicated HTML container. The visualization loads a remote CSV dataset and maps the temporal date field to the x-axis and the quantitative price field to the y-axis. Built on Vega-Lite 5, the chart specification is defined in a JSON file and embedded into the page using `vegaEmbed`, which coordinates the Vega 5 runtime and rendering engine. The setup demonstrates a minimal HTML structure that combines external CDN scripts for Vega, Vega-Lite, and Vega-Embed to produce the chart.

Ee-haentjens

80% match

Loading thumbnail…

[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.

Ee-haentjens

79% match

Loading thumbnail…

VegaLitePractice

This example demonstrates how to embed Vega-Lite visualizations in a React application. It loads the Vega, Vega-Lite, Vega-Lite API, Vega-Tooltip, and D3 v5 libraries via CDN, then uses them to render interactive charts within a single-page interface. The code creates a visualization pipeline where Vega-Lite specifications are parsed and rendered as SVG or Canvas output, with tooltips enabled for user interaction. The minimal HTML page and JavaScript setup show a practical starter template for integrating declarative visualization grammars into modern web frameworks.

Ddan815

79% match

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a simple bar chart of categorical values against quantitative data, rendered directly in the browser using the Vega-Lite JavaScript API. It demonstrates how to generate a chart specification programmatically with `vl.markBar()`, `.encode()`, and `.toJSON()`, then pass that spec to `vegaEmbed` for rendering. The code loads Vega, Vega-Lite, Vega-Embed, and the Vega-Lite API from CDNs, and the chart uses inline sample data with fields "a" and "b". The tooltip encoding includes both fields, making the interaction visible.

EEE2dev

78% match