Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
Aakarki79
Last edited Jul 27, 2021
Created on Jul 27, 2021

This example visualizes the relationship between miles per gallon and horsepower for automobiles, with color encoding by origin and interactive tooltips displaying car names. It uses the vega-lite-api to construct a circle mark scatter plot, which is then rendered and configured via Vega-Lite, Vega, and d3.csv for data loading. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, and the view auto-sizes to the window with custom axis and label styling.

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 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap
95% 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
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template_DL

This visualization shows the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with points colored by origin. It uses the Vega-Lite API to construct a circle mark with quantitative scales for both axes, and includes a tooltip displaying car names. The code loads CSV data via d3.csv, applies custom styling through a configuration object, and renders the chart as SVG using Vega, Vega-Lite, and the vega-lite-api library.

Nnqu9DL
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower, with additional encodings for origin (color) and weight (size). The plot uses a scatter plot with semi-transparent circles, presenting data as points with tooltips displaying car names. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications, with the `vl.markCircle` method configuring the marks and `vl.x()`/`vl.y()` for quantitative scales. Data is loaded asynchronously via `d3.csv`, and the final render uses Vega’s SVG output with a custom tooltip handler.

SSong Tao Chen
94% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. Each circle, colored by country of origin, uses both its vertical position and size to encode two different quantitative variables, while a tooltip reveals the car’s name. The visualization is built using the Vega-Lite API, which composes marks and encodings declaratively, with D3.js handling data loading via `csv`. The project registers Vega-Lite and Vega with the API, applies a custom dark-themed configuration for improved readability, and renders the output as an SVG that fills the browser window.

BBrian Olczak
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev
94% match