Dan B Vega-Lite API Template

100%

Dan B Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 24, 2022

Created on Jun 21, 2022

This visualization displays a scatter plot of auto MPG data, mapping origin to the x-axis and horsepower to the y-axis, with circular marks and tooltips showing car names. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render SVG output. Data is loaded asynchronously from a CSV file using d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis appearance and styling through a custom config object, and the chart resizes to fit the window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

90% match

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

90% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

SSkye Chen

90% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower against displacement while encoding origin by color and mpg by point size. Built with the Vega-Lite API, the visualization uses `vl.markCircle` and `vl.encode` to define visual channels, with `d3.csv` loading the remote dataset. The chart dynamically fits its container, applies custom axis and label styling via the `config` object, and integrates Vega Tooltip for hover interactions.

DDeaxNG

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

90% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circles colored by origin and tooltips showing vehicle names. The code uses the vega-lite-api library, which registers and renders via Vega and Vega-Lite, with d3.csv fetching the remote dataset. A custom config adjusts axis and label styling for readability, and the visualization fills the full window with a fit-based autosize and SVG rendering.

Aakarki79

90% match