Fork of Vega-Lite API Template2

100%

Fork of Vega-Lite API Template2

✓ Published0🌍 Public

Last edited Sep 19, 2022

Created on Sep 19, 2022

This visualization displays automobile performance data from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual car models. Points are colored by region of origin and sized according to vehicle weight, with tooltips revealing model names. The implementation uses the Vega-Lite API combined with Vega and Vega-Lite libraries, with D3’s `csv` function loading the dataset. The chart is configured for full-window rendering, with axis styling and dark text customized in the configuration file.

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 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s horsepower against its miles-per-gallon. Points are colored by country of origin, with size encoded by vehicle weight, and tooltips reveal the car’s name. The visualization is built using the Vega-Lite API (vl) with a custom config for axis styling, and rendered dynamically to fit the browser window. Data is loaded asynchronously via d3.csv, while Vega, Vega-Lite, and Vega-Embed handle the chart specification and SVG rendering.

VVilmer98

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower with points colored by origin and sized by vehicle weight. Tooltips display car names on hover. The visualization is built using the Vega-Lite API and rendered through D3.js, with data loaded via D3’s `csv` function. The chart is created programmatically using `vl.markCircle` with encodings for quantitative and nominal fields, and includes custom configuration for axis styles and text formatting.

Aantanta28

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, showing miles per gallon against horsepower, with color encoding the country of origin and point size representing vehicle weight. The plot uses a dark-themed, large-label aesthetic for clarity. It is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses D3’s `csv` loader to fetch the data. The interactive tooltip is provided by Vega Tooltip, and the chart renders as SVG, fitting the full browser window.

Lleopoldovce2

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

YYi-Qing

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the UCI Auto MPG dataset, mapping model year on the x-axis, horsepower on the y-axis, and color-coding points by country of origin while sizing them by weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and renders as an SVG. It loads data via `d3.csv`, applies custom axis and label styling from a config object, and includes tooltips that display all data attributes on hover. The chart automatically fits the browser window dimensions.

OOlof Ollerstam

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting fuel efficiency (mpg) against horsepower with points colored by origin and sized by weight. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, while `vl.color().fieldN()` and `vl.size().fieldQ()` map additional variables. The code registers Vega-Lite with `vl.register` and configures a custom dark theme via `config.js`. Data is loaded asynchronously using D3’s `csv` function, and tooltips display car names through the vega-tooltip `Handler`. The chart renders responsively to the window dimensions.

SSunny

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s miles per gallon against its horsepower. Points are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model. The visualization is built programmatically using the Vega-Lite API, where `vl.markCircle` and `vl.encode` define the marks, while `vl.x().fieldQ` and `vl.y().fieldQ` map quantitative fields. Data is loaded asynchronously via `d3.csv`, and the script’s `index.js` renders the chart into an SVG using the `vega` and `vega-lite` engines.

BBrian Olczak

93% match