Skip to main content
SimilarExport ZIP
100%

[Vega-Lite] 3.1 HTML setup

✓ Published0🌍 Public
Lliesbetdevos
Last edited Mar 16, 2022
Created on Mar 16, 2022
Forked from HTML Starter

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 description

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

See also React Starter.

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

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh
78% match
Loading thumbnail…

[Vega-Lite] 3.2 Line Chart all in HTML

This example displays a simple line chart of S&P 500 stock prices over time, using a temporal x-axis and a quantitative y-axis. The visualization loads CSV data from a GitHub gist and renders the line mark directly in the browser. It is built entirely within a single HTML file using the Vega-Lite specification, then embedded into a `<div>` via the `vegaEmbed` function, with Vega and Vega-Lite loaded from a CDN.

DDiego Rojo
78% match