[Vega-Lite] 3.1 HTML setup

100%

[Vega-Lite] 3.1 HTML setup

✓ Published0🌍 Public

Last edited Mar 16, 2022

Created on Mar 16, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

[Vega-Lite] 3.1 HTML setup

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.

DDiego Rojo

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

91% 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

86% 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

83% 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

82% 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

81% match

Loading thumbnail…

Vega-Lite API Template

This example shows a bare-bones HTML page that renders static text and logs a message to the browser console. It demonstrates the minimal setup for a Vega-Lite API project, where the `vis.js` file defines a scatter plot using `vl.markPoint()` with `vl.x().fieldQ('acceleration')`, `vl.x().fieldQ('horsepower')`, and `vl.tooltip().fieldN('name')`. However, the visualization is not actually rendered in the page, which only contains inline CSS and a JavaScript `console.log` call.

SSimmer999

80% 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

79% match