Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published1🌍 Public

Last edited Sep 2, 2019

Created on Sep 2, 2019

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.

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 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.

Mm1k3yp

96% 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

95% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of vehicle fuel efficiency data from the UCI Auto MPG dataset, with horsepower on the y-axis, miles per gallon on the x-axis, and points colored by origin while sized by weight. It is built using the Vega-Lite API, which programmatically constructs Vega-Lite specifications, and renders through the Vega and Vega-Lite libraries. The code loads CSV data with d3.csv, applies custom axis and label styling from a config object, and renders an interactive SVG view with tooltips via vega-tooltip.

GGenpinZ

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 automobile displacement, horsepower, and weight using a Vega-Lite scatter plot, with each point sized proportionally to vehicle weight. The vis lazily evaluates a Vega-Lite specification constructed programmatically through the `vega-lite-api` library’s fluent interface, which registers with Vega, Vega-Lite, and D3 (d3.v5). Data is loaded asynchronously via D3’s CSV parser from a GitHub-hosted auto-mpg dataset. The chart renders as an SVG, with tooltips enabled via `vega-tooltip` and axis styling customized in a separate config module.

CCurran Kelleher

94% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW

93% 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 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

93% match