Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 6, 2021

Created on Jun 6, 2021

This example displays a scatter plot of auto-mpg data with vehicle origin mapped to color, weight to point size, and tooltips revealing model names. It uses the vega-lite-api to compose marks and encodings, with a custom config for axis styling. Data loads via d3.csv from the UCI Machine Learning Repository, while vega-tooltip handles interactions. Rendering focuses on full-window SVG output.

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 example shows a scatter plot of auto-mpg data, where each circle represents a vehicle’s origin and horsepower, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, with D3.js (d3.csv) loading data from the UCI Machine Learning Repository’s Auto MPG dataset. The code registers Vega, Vega-Lite, and Vega-Tooltip, applies a custom configuration for axis and label styling, and renders the plot as an SVG that fits the browser window.

KKeyvan Rezaei

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders to SVG. Data is loaded asynchronously via d3.csv, and the chart encodes tooltips for vehicle names. The code customizes axis and font styles through a config file, demonstrating programmatic chart creation with the vega-lite-api wrapper.

Hhbatteram

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

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, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

93% 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. Each circle represents a vehicle, with horsepower on the y-axis, miles per gallon on the x-axis, weight mapped to circle size, and origin mapped to color. Tooltips reveal each car’s name. The code registers Vega-Lite with D3.js v5 for data loading via `d3.csv`, and customizes axis and label styling through a config object.

UUdoekpo Stephen

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496

93% match