Car data visualization on mpg, price and origin

100%

Car data visualization on mpg, price and origin

✓ Published0🌍 Public

Last edited Sep 24, 2019

Created on Sep 5, 2019

A scatterplot visualizes the cars dataset, plotting each car model as a circle positioned by city MPG and invoice price. Circle size encodes horsepower, color encodes the car’s origin, and a tooltip reveals the model name. The visualization uses the Vega-Lite API with D3.js for data loading, rendering as an SVG, and the Vega-Tooltip handler for interactive hover details. The axis and label styles are customized through a separate configuration.

AI-generated description

A scattered plot constructed using the vega-lite-api. This visualization shows The cars Dataset.

It's designed to emphasize clustering by horse power and origin.

Each circle represents a car model.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg CSV dataset, showing the relationship between horsepower and origin on x and y axes. Each point represents a car model, with tooltips revealing the car name. Built with Vega-Lite API in conjunction with d3.csv for data loading, the visualization uses vega and vega-lite for chart specification, vega-tooltip for interactive hover details, and applies custom styling through a config object to adjust axis and label appearance.

CCaroline Ghisolfi

85% match

Loading thumbnail…

cars_scatter_plot

This scatter plot visualizes relationships among automobile characteristics from the auto-mpg dataset, plotting displacement against horsepower while encoding vehicle weight through point size and model year through color. Tooltips reveal car names on hover. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data asynchronously via d3.csv. The chart renders responsively using an SVG renderer with the vega-tooltip Handler for interactive annotations.

Ggoldpot

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

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

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of car models, with the country of origin on the x-axis and horsepower on the y-axis. Each point is rendered as a large, semi-transparent circle, and hovering reveals the car's name via a tooltip. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and is rendered as an SVG. Data originates from the UCI Auto MPG dataset, loaded via D3's CSV parser. The code customizes axis labels and tick colors through a configuration object and uses the Vega Tooltip handler for interactive details.

DDanier

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, with a circle for each car positioned by miles per gallon and horsepower. The color of each circle encodes the car’s origin, while its size reflects the car’s weight, and hovering reveals the model name. It uses the Vega-Lite API to define the visualization declaratively, with D3’s `csv` function to load the data from the UCI Machine Learning Repository. The chart is rendered as an SVG via Vega and Vega-Lite, with tooltips provided by the vega-tooltip handler.

Yyeeet0421

83% match

Loading thumbnail…

Cars Vega-Lite

This example displays a 2D scatter plot of car data, mapping engine displacement on the x-axis and horsepower on the y-axis, with each point labeled by car name via tooltips. The visualization is built using the Vega-Lite API in JavaScript, with `vl.markPoint` and `vl.encode` to define the marks. It uses `d3.csv` to fetch the data from an `auto-mpg.csv` file, and the `config` object customizes axis and label styling for readability. The plot dynamically resizes to fill the window.

AAnthony Ynami

83% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Ggoyalshivam204

83% match