Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template - Part 1

✓ Published0🌍 Public
TTom-S82
Last edited Jul 25, 2020
Created on Jul 24, 2020

This example shows car specifications as a scatter plot, with miles per gallon on the x-axis, horsepower on the y-axis, origin as color, and fuel efficiency also encoded by point size. It uses the Vega-Lite API to construct the visualization programmatically, registering Vega and Vega-Lite v5/v4 with d3.csv for data loading from the Auto-MPG dataset. The chart is rendered as SVG, with tooltips enabled via the Vega Tooltip handler and a custom dark color scheme for axes and labels.

AI-generated description

A visualization constructed using the vega-lite-api.

Tutorials:

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Ssamemurk21
91% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between fuel efficiency (miles per gallon) and horsepower. Points are colored by region of origin, sized by vehicle weight, and include tooltips showing model names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, then renders it with Vega 5 and D3 v5 for SVG output. Custom configuration and a Vega Tooltip handler enhance readability, while the chart automatically fits the viewport dimensions.

Rrvdv
91% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU
91% match
Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of automotive data, mapping engine horsepower against fuel efficiency (mpg), with points colored by country of origin and tooltips revealing car model names. It uses the Vega-Lite API to declaratively construct the visualization, while D3’s `csv` method loads the auto-mpg dataset. The vega-lite-api library registers vega and vega-lite, and the chart is rendered into an SVG via a vega view with tooltip support from vega-tooltip. The code customizes axis styles and appearance through a config object.

CCurran Kelleher
91% match
Loading thumbnail…

Vega-Lite API Template - Part 2

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.

JJohn Jeevasaeyan
91% 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
91% 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
91% match
Loading thumbnail…

Vega-Lite API Template

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
90% match