Skip to main content
SimilarExport ZIP
100%

vega-lite JavaScript API browser example with vegaEmbed

✓ Published0🌍 Public
EEE2dev
Last edited Aug 18, 2020
Created on Aug 18, 2020

This example demonstrates linked brushing and selection between a scatterplot of daily maximum temperature and precipitation and a bar chart of weather-type counts, using Seattle weather data. It shows how brushing the time axis filters the bar chart, while clicking weather categories filters the scatterplot. The visualization is built with the vega-lite-api JavaScript wrapper to generate the Vega-Lite specification programmatically, then rendered via vegaEmbed. The code defines interval and multi-selection encodings, custom color scales, and filters to synchronize both views interactively.

AI-generated description

Converted from : https://observablehq.com/@vega/vega-lite-api

A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser. This one uses vegaEmbed to render the chart. The key is to use the api to generate the spec, and then vegaEmbed to render it.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/d6f1c4fc6473f78dd1b900145f8b63df'>vega-lite JavaScript API browser example</a>

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/a90b26fc3c99a925b05d51a479c16af2'>vega-lite JavaScript API browser example with vegaEmbed</a>

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/93076c6db5ed91ba2275767ba6809476'>vega-lite JavaScript API browser example with vegaEmbed</a>

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/9e9bf25ead1d3d71fae033ca177ce9a9'>vega-lite JavaScript API browser example with vegaEmbed</a>

mit Licensed

Similar vizzes

Loading thumbnail…

vega-lite JavaScript API browser example with vegaEmbed

This example shows a linked brushing-and-clicking dashboard for Seattle weather data, combining a scatterplot of daily maximum temperature and precipitation with a bar chart of weather-type counts. It demonstrates the Vega-Lite JavaScript API and vegaEmbed in the browser, where the API builds a visualization specification and vegaEmbed renders it into the DOM. The code uses `vl.selectInterval` and `vl.selectMulti` for interactive selections, `vl.markPoint` and `vl.markBar` for marks, and `vl.vconcat` to stack the two views. The data is loaded from the vega-datasets CDN, with weather categories colored via a custom scale and precipitation mapped to point size.

EEE2dev
96% 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
85% 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
82% match
Loading thumbnail…

Vega-Lite API Template w/ API Fetch

This example demonstrates a scatterplot of temperature readings for various cities, using the Vega-Lite API to construct the visualization. The chart encodes temperature as the y-axis and city as the x-axis, with a tooltip displaying the state for each point. The code fetches CSV data from a remote URL using `d3.csv`, then builds the visualization with `vega-lite-api`, rendering it as an SVG via the `vega` and `vega-lite` libraries. Styling is customized through a config object, and the chart fills the browser window with an autosize fit.

AAndres de la Garza
77% match
Loading thumbnail…

Vega-Lite API Template

A scatterplot displays daily temperature readings over time from a CSV dataset of San Francisco weather. The visualization is built using the Vega-Lite API, which constructs declarative specifications programmatically, then renders them through the Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously via D3's `csv` function, while the `vega-tooltip` handler provides interactive hover details for each circle mark.

CCurran Kelleher
75% match
Loading thumbnail…

vega-lite API example: cross-filter

This example shows three linked histograms for interactive cross-filtering of flight delay, distance, and time data from the flights-5k dataset. Each histogram supports a brush selection on its x-axis, and selecting a range in one chart filters the other two to show only matching records. The visualization uses the vega-lite-api to programmatically build the specification, composing transparent base layers with filtered bar layers, then renders the result via vegaEmbed. The code also calculates a time field from the date using the `calculate` transform, and applies `vl.selectInterval` for brush definitions.

EEE2dev
75% match
Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render an interactive area chart of weekly temperature data for San Francisco. The visualization shows temperature readings over time, with tooltips displaying the temperature value on hover. The code imports data from a CSV file using d3.csv and then passes it to a Vega-Lite specification that defines the x-axis as timestamps and the y-axis as quantitative temperature values. The chart is configured with custom axis styling and uses vega, vega-lite, and vega-tooltip libraries to handle rendering and interactive tooltips.

SSimmer999
75% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes earthquake data using a scatter plot, where the magnitude, depth, horizontal distance, year, and country of each earthquake are encoded through position, color, size, and tooltips. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite to render an SVG output. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart is configured with custom axis and label styling for improved readability. The code also integrates vega-tooltip for interactive hover details.

VVarun Eranki
75% match