Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template Tutorial

✓ Published0🌍 Public
Yyamikani john mnenula
Last edited Jun 23, 2022
Created on Jun 23, 2022

This visualization uses the Vega-Lite API with D3 to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon on the x-axis and horsepower on the y-axis, with points colored by origin and sized by weight. The chart encodes tooltips for car names and uses a custom dark-themed configuration from Vega-Lite for improved readability. The visualization is rendered as an SVG that fills the full browser window using D3's CSV loading.

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 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

Ggayatrisridhar
96% 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It displays miles per gallon on the x-axis, horsepower on the y-axis, with color encoding by origin and size encoding by weight, plus tooltips for car names. The visualization fetches data via `d3.csv` and renders using `vega`, `vega-lite`, and `vega-lite-api`, with a custom config for axis styling and a Vega Tooltip handler. The chart is fit to the full window size.

JJessica Tucker
95% 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto MPG data from the UCI Machine Learning Repository, mapping miles per gallon against horsepower. Each circle’s size encodes vehicle weight, while color distinguishes origin, and hovering reveals the car’s name. The visualization is built using the Vega-Lite API, with d3.csv loading the data and vega-tooltip providing interactive details. The chart fills the browser window, and a custom config adjusts axis and label styling for readability.

SSumit Kumar
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automobile data from the UCI Machine Learning Repository, showing the relationship between MPG and horsepower. Each point is colored by origin, sized by weight, and includes a tooltip revealing the vehicle name. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to declaratively encode the marks. Data is loaded asynchronously via D3's `csv` function, and the chart is rendered with a custom configuration that adjusts axis and label styling.

Mme-as-a-web-designer
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