Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 18, 2021

Created on Jun 18, 2021

This example uses the Vega-Lite API to visualize the classic Auto MPG dataset, plotting categorical origin on the x-axis and quantitative horsepower on the y-axis, with color encoding for weight and size encoding for miles per gallon. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG scatterplot with a tooltip showing car names via the vega-tooltip Handler. Custom configuration in config.js adjusts font sizes and axis styling for readability, while getData.js loads the CSV using d3.csv.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to build an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a Gist. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and colors points by origin, while point size reflects vehicle weight. It renders as a full-window SVG using the vega-lite-api library, with tooltips generated through vega-tooltip. Custom configuration in config.js adjusts axis and label styling for readability. The code loads data asynchronously via d3.csv, applies a dark theme, and fits the chart to the viewport dimensions.

MMatt Woods

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the classic Auto MPG dataset. The visualization encodes quantitative fields for acceleration (x-axis) and horsepower (y-axis), with origin as color and cylinders as size, plus a tooltip for car name. The code loads data via `d3.csv`, renders with `vega` and `vega-lite`, and applies custom styling from `config.js` for axis ticks and label fonts. The chart auto-fits to the window, uses SVG rendering, and integrates `vega-tooltip` for hover details.

Ssmile2git

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto MPG data, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color for the car’s origin and size for weight, with tooltips revealing car names. The visualization is built with the Vega-Lite API, which compiles specifications to Vega, and rendered via D3 v5. It loads CSV data from the UCI Machine Learning Repository and customizes axis and label styling through a configuration object.

Ddimanya

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to display Auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circle marks. Each circle’s size encodes weight, while color groups vehicles by origin, and hovering reveals car names via tooltips. The code registers Vega, Vega-Lite, and the Vega-Lite API, renders SVG output, and uses a custom config to style axes and labels. Data is fetched asynchronously with d3.csv, and the visualization adapts to the window dimensions.

NNioh

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon on the x-axis, horsepower on the y-axis, and encodes the car’s origin in color and weight in point size, with tooltips showing the vehicle name. Built with d3.csv for data loading and vega-tooltip for hover details, all marks are drawn as circles with opacity. The chart’s appearance is customized via a Vega-Lite config object, adjusting axis styles and typography for readability.

CCheng Tang

94% match