Vega-Lite API Template

100%

Vega-Lite API Template - Part 2

✓ Published1🌍 Public

Last edited Sep 6, 2021

Created on Sep 6, 2021

Forked from Vega-Lite API Template - Part 1

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template - Part 1

This example demonstrates a scatter plot of automotive data, showing the relationship between horsepower and acceleration, with tooltips displaying car names. Built using the Vega-Lite API, it loads the auto-mpg dataset via D3’s `csv` function. The visualization uses `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, with a custom config adjusting axis and font styles. Rendered through Vega-Lite’s SVG output, it integrates vega-tooltip for interactive hover details.

JJohn Jeevasaeyan

94% match

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon and horsepower, with tooltips displaying vehicle names. The visualization is built using the vega-lite-api library, which provides a fluent JavaScript interface for the Vega-Lite grammar. The code registers Vega and Vega-Lite, loads the auto-mpg dataset from a CSV file via d3.csv, and renders the plot as a scalable vector graphic. The visualization fills the entire browser window and employs a dark-themed configuration to enhance readability, with a low opacity mark size for improved depth perception.

KKelly Egan

94% match

Loading thumbnail…

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888

94% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

CCees Klap

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the auto-mpg dataset, showing the relationship between engine displacement and horsepower, with tooltips displaying car names. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to create a lightweight, declarative chart specification. Data is loaded asynchronously via d3.csv, while the layout adapts to the full viewport with custom axis styling and opacity-adjusted point marks for readability. The result renders as scalable SVG through the Vega view engine.

Ddev-ignacio-h

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between vehicle weight, horsepower, and miles per gallon. The visualization uses the Vega-Lite API within a React framework, loading data from a CSV file via D3’s `csv` method. It renders a circle mark for each car, with color encoding weight, size encoding mpg, and tooltips revealing the car name. The code registers Vega-Lite with Vega and integrates the Vega Tooltip handler for interactive labels.

RRahul Gupta

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, using the Vega-Lite API abstraction over the Vega and Vega-Lite libraries. The visualization encodes vehicle weight and horsepower on the x and y axes, with color mapping to origin and point size reflecting miles per gallon. Data is loaded asynchronously from a CSV via d3’s csv method. The API’s programmatic interface constructs the mark specification, while a custom config enhances readability.

Ccoltonjcox92

93% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

93% match