Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 27, 2021

Created on Aug 27, 2021

This fork of the Vega-Lite API template renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circles encode car origin on the x-axis, horsepower on the y-axis, weight as color, and miles per gallon as size, with tooltips revealing car names. The visualization uses the vega-lite-api library to construct the specification programmatically, registering Vega and Vega-Lite for rendering in SVG. The code loads CSV data via d3.csv, applies custom axis and label styling from config.js, and adapts to the full window size.

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…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a scatter plot of automobile data from the UCI Auto MPG dataset, obtained via a Gist-hosted CSV. The visualization encodes miles per gallon and horsepower on the x and y axes, while the car's origin determines the color and its weight scales the circle size. Built with the Vega-Lite API registered to D3 and Vega, the chart uses the provided `viz.js` specification, applies custom styling from `config.js`, and renders to an SVG canvas sized to the window.

Xxhd2015

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of the Auto MPG data set from the UCI Machine Learning Repository. The plot encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses color for the car’s origin while point size represents weight. It loads CSV data via d3.csv and builds the chart with vl.markCircle and vl.encode. The Vega-Lite API is registered with vega, vega-lite, and vega-tooltip, and the chart is automatically fitted to the window size.

Nny2cali

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render interactive scatter plots of the Auto MPG dataset from the UCI Machine Learning Repository. The code applies the Vega-Lite API’s `markCircle` and `encode` methods to map vehicle weight to the x-axis, horsepower to the y-axis, and miles per gallon to point size and color, with tooltips showing car names. It retrieves data via d3’s `csv` loader, registers the Vega and Vega-Lite libraries, and customizes axis styling through a separate config object. The visualization is built to fill the browser window entirely.

FFonda Irena Santoso

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing each car as a circle positioned by its miles per gallon and horsepower, colored by its region of origin, and sized by its weight. The visualization is constructed using the Vega-Lite API, with the `vl` object building a mark-circle encoding that maps data fields to x, y, color, and size channels. The underlying code registers Vega and Vega-Lite, fetches the data via d3’s `csv` function, and uses a custom config to style axis labels and titles.

NNYY

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of Auto MPG data from the UCI Machine Learning Repository, showing each car's miles per gallon versus horsepower. Points are colored by origin, sized by weight, and include tooltips revealing the vehicle name. The visualization uses the `vega-lite-api` and `vega-lite` libraries to define the encoding, while `d3.csv` loads the data and Vega-Tooltip provides interactive hover details. Rendering occurs as an SVG view that fills the browser window.

CChavaP06

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a scatter plot of auto-mpg data, with each circle’s position mapping miles per gallon against horsepower, while color encodes origin and size encodes weight. Tooltips revealing the vehicle name appear on hover. The visualization is built using the vega-lite-api library, which registers vega and vega-lite, and pulls data from a CSV loaded via d3.csv from the UCI Auto MPG dataset. The chart is fitted to the viewport using the autosize setting and customized with a custom config for axis styling.

SSaiSree0122

94% match