Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 22, 2021

Created on Mar 22, 2021

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.

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 presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin using data from the UCI Auto MPG dataset. Scatter plots map miles per gallon and horsepower, while point size encodes vehicle weight and color distinguishes geographic origin. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses d3.csv for data loading. Custom axis styling and tooltips enhance readability, with the view rendered as an SVG that fits the full window.

SSpuddy2884

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

95% match

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

SShishiraRudrabhatla

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for classic automobiles, using a scatter plot where each car is a circle. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, with data fetched from the UCI Machine Learning Repository’s Auto MPG dataset via D3’s `csv` function. The API encodes the x-axis as miles per gallon, the y-axis as horsepower, color by origin, and size by weight, while a tooltip displays each car’s name. The chart fills the browser window and uses custom axis labels and colors for improved readability.

VVander Fillipe de Souza

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Sseitzfab

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, and weight for auto-mpg data from the UCI Machine Learning Repository. A scatter plot shows each car as a circle, with color encoding the region of origin and size encoding vehicle weight; hovering reveals the car’s name via tooltip. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, and renders to SVG. Data is loaded asynchronously via d3.csv, with custom axis and label styling defined in a separate configuration file.

SSezer Gümüş

95% match