Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Oct 20, 2020

Created on Oct 17, 2020

This example visualizes the relationship between vehicle horsepower, weight, and fuel efficiency across different origins using a scatter plot. The visualization is built with the Vega-Lite API, which programmatically constructs a Vega-Lite specification through chained method calls such as `vl.markCircle()` and `vl.encode()`. Data comes from an auto-mpg CSV loaded via `d3.csv`, and the chart renders as an SVG using Vega’s rendering engine with tooltip support from Vega-Tooltip. The visualization is configured with custom axis and label styling to improve readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot, with each car represented as a circle colored by weight and sized by miles per gallon. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to create the chart programmatically. Data is loaded from a CSV file via d3.csv, and the final SVG output is rendered to fill the browser window. Axis styling and tooltips are customized through the provided Vega-Lite config and the vega-tooltip handler.

CCurran Kelleher

96% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin for vehicles from the Auto MPG dataset. It displays a scatter plot of mpg against horsepower, with point size encoding weight and color distinguishing vehicle origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite and Vega in a JavaScript interface, combined with d3.csv for data loading from a Gist-hosted CSV file. A custom tooltip from vega-tooltip displays the vehicle name, while the chart autosizes to fill the browser window.

Llakalia@wpi.edu

95% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot visualization of automotive data, showing the relationship between vehicle weight, horsepower, and fuel efficiency (mpg). The visualization uses the Vega-Lite API to construct a circle mark with position encoding for weight and horsepower, while color and size encode weight and mpg respectively. It pulls data from a CSV file using d3's `csv` method, and renders the chart as an SVG with a tooltip handler. The code registers Vega-Lite and uses its high-level declarative syntax to define the plot, with custom configuration for axis styling and dark text labels.

MMilena Belianovich Holtman

94% match

Loading thumbnail…

Vega-Lite API Template - experiment

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) using the classic auto-mpg dataset, loaded via `d3.csv` from a remote GitHub Gist. Encoded as circles with size and color mapped to quantitative fields, the chart reveals correlations among these performance metrics. Built with the Vega-Lite API for programmatic specification, it renders through Vega, Vega-Lite, and the `vega-tooltip` Handler, with automatic resizing to fit the window.

Llaplantalaplanta

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M

94% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot of auto-mpg data shows the relationship between vehicle weight, horsepower, and fuel efficiency, with points colored by country of origin and sized by miles per gallon. The visualization is built with the Vega-Lite API, registering both Vega and Vega-Lite engines, and leverages D3’s `csv` module for data loading from a UCI Machine Learning Repository dataset. SVG rendering and tooltip interactions are configured through Vega-Lite’s `config` and `Handler` interfaces.

CCarlos Caballero

94% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. The visualization uses the Vega-Lite API to declaratively define a markCircle with quantitative scales, color-encoding by country of origin, and tooltips displaying vehicle names. Rendered as an SVG, the chart supports interactive tooltips through vega-tooltip and d3.csv for asynchronous data loading, with a custom config for axis styling and fonts.

Aahora

93% match

Loading thumbnail…

Vega-Lite API - scatter plot

This example demonstrates a scatter plot of vehicle data using the Vega-Lite API, showing the relationship between miles per gallon and horsepower across different car origins, with point size encoding weight and tooltips displaying car names. The visualization leverages `vl.markCircle` with opacity for density perception, and custom scales that avoid zero-based axes. It loads CSV data from a GitHub gist via d3.csv, then renders to SVG using Vega and Vega-Lite with a dark-on-light custom config. The code registers vega-tooltip for interactive hover labels and uses d3.v5.

Kkatjur01

93% match