Skip to main content
100%

Embedding Vega-Lite

✓ Published0🌍 Public
Aaaizemberg
Last edited May 4, 2020
Created on May 4, 2020

This example visualizes the heights of volleyball players from the UPCN San Juan team, grouped by playing position, with each player shown as a tick mark along a quantitative altitude axis. The chart is defined as a Vega-Lite specification object and rendered directly in the browser using `vegaEmbed`, which loads the `vega`, `vega-lite`, and `vega-embed` libraries from a CDN. The data comes from the team’s official roster, and the specification sets a quantitative x-encoding for height and a nominal y-encoding for position, with tooltips enabled on each tick.

AI-generated description

Similar vizzes

Loading thumbnail…

Vega-Lite Bl.ocks example

This example demonstrates a simple bar chart of categorical values with quantitative measurements, using embedded data for nine lettered categories. The visualization is rendered through Vega-Lite, a high-level grammar for declarative visualization, which is configured via a JSON specification that defines the bar marks and encodings for the x-axis (ordinal) and y-axis (quantitative) fields. The code loads Vega, Vega-Lite, and Vega-Embed from a CDN, then invokes `vegaEmbed` to render the chart into the page, with tooltips enabled for the quantitative values. The chart is specified both as an external JSON file reference and an inline object, showing flexibility in how Vega-Lite specifications can be supplied.

AAlainRo
75% match
Loading thumbnail…

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

AAtharvap2000
75% 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
74% match
Loading thumbnail…

Vega-Lite Bar Chart

This example embeds a Vega-Lite specification into a webpage using the vegaEmbed API, rendering an interactive bar chart of precipitation counts from Seattle weather data. The chart uses a binned x-axis for precipitation values and a y-axis showing aggregate counts, with the data pulled directly from a GitHub-hosted CSV file. The code loads Vega, Vega-Lite, and Vega-Embed libraries from a CDN, and the mark type is set to `bar`. A separate JSON file defines a point chart with nominal and quantitative encodings, but the index.html file demonstrates the primary bar chart visualization.

MMarmiya
72% match
Loading thumbnail…

Vega(Lite)

This example shows a horizontal bar chart of six test data points (element 1 through 6 with values 4, 8, 15, 16, 23, and 42), with the bars extending rightward from the y-axis. The visualization is built using Vega-Lite’s JSON declarative grammar, embedded inline in the page. The chart renders as an SVG via `vegaEmbed`, and the code loads Vega, Vega-Lite, and Vega-Embed from CDNs, then enhances the chart with tooltips using `vegaTooltip.vegaLite` on mouseover.

EEleonore9
72% match
Loading thumbnail…

Vega-lite Bar Chart with Tooltip

This example demonstrates a simple bar chart showing categorical values (A through I) against their corresponding numeric quantities, encoded as bar heights. The visualization is built with Vega-Lite, using an embedded dataset of nine pairs, and rendered as SVG via vega-embed. Tooltip interactivity is added through the vega-tooltip library, which binds to the vega view and displays the exact field values on hover. The code defines the chart declaratively in a JSON specification, setting the x-axis to ordinal categories and the y-axis to a quantitative scale, with the vegaEmbed function handling the rendering.

AAlainRo
72% 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
72% match
Loading thumbnail…

Vega-lite - template

This example uses Vega-Lite to render an area chart with yearly time on the x-axis and a non-zero-based quantitative total on the y-axis, with tooltips showing temperature values. The visualization is built programmatically using the `vega-lite-api` library, which registers Vega and Vega-Lite to produce an SVG. Data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart fills the window and applies custom axis and label styling from a config object, with tooltips provided by the `vega-tooltip` Handler.

HHgeginat
72% match