Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
SSimmer999
Last edited Mar 1, 2021
Created on Mar 1, 2021
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
81% 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
80% match
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
80% match
Loading thumbnail…

Vega Lite Api

This example demonstrates a minimal React application that renders a static "Hello World" heading using React 18’s `createRoot` API. It loads React, ReactDOM, and the Vega-Lite API from unpkg, but the code does not yet invoke Vega-Lite for charting. The setup shows how to integrate Vega-Lite into a React component structure, with the App component returning JSX and mounting into a root div. The focus is on initializing the React framework with external visualization libraries available for future use.

PPathan Khuvanejarkhan
80% 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 example

This example displays a large, centered “Hello HTML!” message on a blank page, demonstrating basic web layout with CSS. The page uses an HTML structure with a styled `<div>` element, setting its font size to 13em and centering it horizontally. No JavaScript libraries or data sources are included; the visualization relies solely on static HTML and CSS markup to render text.

MMalcolm Mead
78% match
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
78% 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
77% match