Try 500,000 data

100%

Try 500,000 data

✓ Published0🌍 Public

Last edited Apr 3, 2021

Created on Apr 3, 2021

This visualization presents a scatter plot of 500,000 data points from the UCI Auto MPG dataset, encoding miles per gallon, horsepower, origin, and weight. Using the vega-lite-api, it renders circles with size mapped to weight and color to origin. The code configures axes without domains for a cleaner look, fits the chart to the window, and includes tooltips via vega-tooltip. The visualization demonstrates how vega-lite-api can plot high-density datasets with interactive hover details.

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, 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

89% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js to load CSV data and render interactive circles with tooltips. Point color encodes the vehicle’s country of origin, while point size reflects weight. The chart is configured to fill the browser window and uses custom axis and label styling for clarity. Data is fetched via d3.csv from a Gist-hosted CSV file.

JJasmine Ye Han

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

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

88% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty

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

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

88% 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, horsepower, and vehicle weight, with color distinguishing the origin of each car. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding quantitative fields for x and y positions and weight for size, while tooltips display the vehicle name on hover. The code registers Vega, Vega-Lite, and the Vega-Lite API, loads data via d3.csv, and configures axis and label styling for readability. Rendered as an SVG that fills the window, the visualization supports interactive tooltips via Vega Tooltip.

AAnomatomato

88% match