Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 18, 2021

Created on Aug 18, 2021

This example visualizes the relationship between miles per gallon, horsepower, weight, and country of origin for vehicles in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot encodes weight as circle size and origin as color, with tooltips showing vehicle names. It is built using the vega-lite-api to construct the specification, with vega-lite and vega handling rendering, while d3.csv loads the data. The visualization is configured with custom axis and label styling via the config object.

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 relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Mmeghshah612

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, vehicle weight, and origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes weight as point size and color as origin, with tooltips revealing car names. It is built with the Vega-Lite API, running through Vega and Vega-Lite rendering pipelines, and dynamically sizes the chart to the browser window. Data is loaded asynchronously via d3.csv, while a custom configuration adjusts axis and label styling.

Sstefanpullen

95% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between vehicle horsepower, miles per gallon, weight, and country of origin using U.S. Auto MPG data from the UCI Machine Learning Repository. Each circle’s position, size, and color encode these attributes, with tooltips revealing car names. The visualization is built with the Vega-Lite API, registered through vega, vega-lite, and vega-tooltip, while d3.csv loads the external dataset. A custom dark-themed configuration adjusts axis and label styling for readability.

NNaimisha-M

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency data from the UCI Machine Learning Repository's Auto MPG dataset, showing the relationship between miles per gallon, horsepower, and weight across different countries of origin. A scatter plot with semi-transparent circular marks encodes the quantitative axes and origin as color, while car weight determines point size. Built with the Vega-Lite API for D3, the visualization registers Vega and Vega-Lite with a tooltip handler, loads CSV data via `d3.csv`, and renders an interactive SVG fitted to the browser window. Custom configuration adjusts axis labels and tick marks for readability.

KKunkgg

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

EEngineerRajeev

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon, horsepower, origin, weight, and car name from the Auto MPG dataset. The Vega-Lite API constructs a scatter plot where engine weight encodes point size and country of origin drives color, with a tooltip for each vehicle. It uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for quantitative axes, while `config.js` customizes axis and label styling, and `getData.js` loads the CSV via `d3.csv`.

SSunbinSong

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset. The scatter plot encodes miles per gallon on the x-axis, horsepower on the y-axis, color by origin, and point size by weight. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG chart. Data is loaded asynchronously via D3’s `csv` function, while the visualization code uses `vl.markCircle`, `.encode`, and `vl.x().fieldQ()` to define the marks and scales.

Aakiannejad123

94% match