Compare to a BMW

100%

Compare to a BMW

✓ Published0🌍 Public

Last edited Feb 19, 2021

Created on Feb 19, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

BMW

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.

BBrian Olczak

83% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, and weight for a sample of automobiles, colored by country of origin. Using the Vega-Lite API with D3.js for data loading, it renders a scatter plot where circle size encodes vehicle weight and tooltips reveal the car model name. The data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via `d3.csv`. The visualization pipeline combines `vl.markCircle`, `vl.x`, and `vl.y` encodings with a custom configuration for styling and tooltip handling.

EEngineerRajeev

80% match

Loading thumbnail…

vega lite

This visualization shows the relationship between miles per gallon, horsepower, and country of origin for a set of automobiles. Each circle represents a car, with position encoding mpg and horsepower, while color distinguishes the origin and size reflects horsepower again. Built using the vega-lite-api library, the chart is rendered with Vega-Lite and Vega, pulling data from the UCI Auto MPG dataset via D3’s `csv` loader. The view auto-fits to the window and includes interactive tooltips through vega-tooltip.

Ttknaik

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

RRolf Niggemann

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

SSabbir

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

HHaowenWeiJohn

80% match

Loading thumbnail…

Comparing Car Stats, using D3.js

This visualization compares car statistics by plotting miles per gallon (mpg) against horsepower for 32 car models. Each car is represented as a circle on a scatterplot, with axis labels and gridlines provided by D3’s `axisBottom` and `axisLeft` functions. The data comes from a CSV file, parsed with `d3.csv`, and rendered as an SVG using `d3.scaleLinear` for both axes. The cars are sorted by horsepower, and the circles are styled with steelblue fill and opacity.

AAdamFrankWhite

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between a car’s fuel efficiency (miles per gallon) and its horsepower, colored by country of origin, using a scatter plot rendered with the Vega-Lite API in a D3.js environment. It loads auto-mpg data from a CSV via `d3.csv`, then builds the visualization declaratively with `vl.markCircle` and encodings for `x` (mpg), `y` (horsepower), `color` (origin), and a tooltip for the car’s name. The chart resizes to fill the browser window and applies custom axis and label styling from a shared configuration object.

GGuilinabaoge

79% match