Skip to main content
SimilarExport ZIP
100%

Scatter Plots

✓ Published0🌍 Public
MMeAzuree
Last edited Sep 20, 2023
Created on Sep 20, 2023

This interactive scatter plot visualizes the relationship between a vehicle’s miles per gallon and its horsepower, with each dot colored by country of origin and sized by weight. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification by chaining methods like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. Data is loaded asynchronously from the UCI Auto MPG dataset using the `csv` function from d3. The chart fills the browser window and includes tooltips, which are enabled through the Vega-Tooltip handler.

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 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
90% match
Loading thumbnail…

Dv2_ScatterPlot

This scatter plot visualizes the relationship between miles per gallon and horsepower for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Each point represents a vehicle, colored by its origin and sized by weight, with tooltips showing the car’s name. The visualization uses the vega-lite-api library to build the chart, registers vega and vega-lite for rendering, and loads data via d3.csv. The chart fills the browser window with a custom config for axes and label styling.

NNagateja99
89% match
Loading thumbnail…

Fork of Vega-Lite API Template 2

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with each point colored by country of origin, sized by vehicle weight, and labeled with the car model name. The visualization is built using the Vega-Lite API, which constructs a specification rendered via D3.js and Vega. Data is loaded from a CSV file fetched through D3’s `csv` method, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The chart’s appearance is customized through a configuration object that removes axis frames, adjusts tick colors, and increases font sizes for readability.

Tthomasjungcoe
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with each point’s color indicating the country of origin and its size representing vehicle weight. It was built using the Vega-Lite API, which compiles specifications into a rendered Vega visualization. The code reads the Auto MPG dataset from a CSV via `d3.csv`, then dynamically sets the chart’s width and height to fill the browser window. The visualization includes a tooltip handler and custom styling for axis labels and titles.

JJanna Uutela
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between horsepower, miles per gallon, weight, and origin for cars from the UCI Auto MPG dataset. Built with the Vega-Lite API and rendered via Vega, it encodes each car as a circle positioned by acceleration and engine displacement, with color indicating country of origin and size reflecting vehicle weight. Tooltips display car model names. The visualization uses D3's csv loader to fetch data from a Gist URL, and the chart resizes to fit the browser window.

NNaimisha-M
88% 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
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js as its rendering framework, building interactive marks with circles sized by weight and colored by country of origin. Data loads asynchronously from a CSV file fetched via D3's CSV parser. The chart automatically fits the browser window and includes a tooltip showing each car's name, powered by the Vega Tooltip handler.

Xxychen0612.cs09@nycu.edu.tw
88% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and engine power (horsepower) for a set of automobiles, with each point color-coded by the vehicle’s country of origin. Built on the Vega-Lite API, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV fetched with d3.csv. The visualization uses `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` to encode the data, while custom config axis rules and a tooltip handler improve readability and interactivity.

Sseanowh
88% match