BMW

100%

✓ Published0🌍 Public

Last edited Feb 19, 2021

Created on Feb 19, 2021

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and origin for various car models from the Auto MPG dataset sourced from the UCI Machine Learning Repository. Each circle represents a car, with position encoding mpg and horsepower, color encoding origin, and size encoding weight, all rendered using the vega-lite-api with D3’s CSV loader. The visualization uses a customized configuration to improve readability, featuring larger axis labels and dark text on a light background.

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…

Compare to a BMW

This visualization compares the fuel efficiency and horsepower of various automobiles, with each car represented as a circle sized by weight and colored by its country of origin. Hovering over a point reveals the car’s name. The chart is built using the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications to Vega and renders via SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is configured with custom axis styles and tooltips.

BBrian Olczak

83% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset, with each circle’s color encoding the car’s origin. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleOrdinal with d3.schemeCategory10 for color mapping, and d3.axisLeft and d3.axisBottom to render gridlines and tick labels. Rendering is done as SVG elements, and the code explicitly converts parsed string values to numbers before drawing.

Vveagy

81% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between horsepower and weight for various car models. Each circle is color-coded by the car’s origin, and hovering reveals a tooltip with the car’s name and origin. The visualization is built with D3 v5, using `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes grid lines, axis labels, and a title.

Ddev-ignacio-h

81% match

Loading thumbnail…

Cars Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) using data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3.js with an SVG rendering, where each circle represents a car, with position determined by linear scales for both axes. The code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes, while `csv()` loads the external dataset. Axis labels and a title are added via SVG text elements, with circles styled in translucent red.

CCaleb

81% match

Loading thumbnail…

Cars

This scatterplot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() for both axes, and d3.axisLeft and d3.axisBottom to render ticks with grid lines. Axis labels and a title are added as SVG text elements, while the chart is drawn using SVG circles within a margin-based layout.

JJoachim Klug

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. A semi-transparent line mark encodes mpg on the x-axis and horsepower on the y-axis, with color distinguishing origin and size representing weight. The visualization is built using the Vega-Lite API, which is registered with vega, vega-lite, and vega-tooltip for interactive tooltips. Data is loaded asynchronously via d3.csv, and the final SVG is rendered to fit the full window size.

GGeekboxer

80% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The chart uses D3 v5’s `scaleLinear` and `extent` functions to map data to coordinates, with axes generated via `axisLeft` and `axisBottom`. Each car is represented as a red semi-transparent circle, rendered as SVG. The visualization includes labeled axes and a title, with data loaded asynchronously from a CSV file.

SSnipeShoot

80% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for grid lines and tick labels, and d3.csv to load the data. Red semi-transparent circles represent individual car models, with axis labels and a title displayed using SVG text elements styled through external CSS.

RRafael O'Duarte

80% match