Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 25, 2021

Created on Oct 13, 2021

This visualization displays a scatter plot of auto industry data from the UCI Machine Learning Repository’s Auto MPG dataset. It plots fuel efficiency (mpg) against horsepower, with points colored by origin, sized by vehicle weight, and showing car names as tooltips. The code uses the Vega-Lite API to generate the chart, leveraging `vl.markCircle`, `vl.encode`, and field encodings. The visualization is rendered with Vega, Vega-Lite, and Vega-Tooltip, pulling data via `d3.csv` and applying custom axis and label styling.

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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting fuel efficiency against horsepower. Each circle encodes vehicle origin through color and weight through size, with hover tooltips revealing model names. The visualization uses the Vega-Lite API to declaratively specify the chart, while D3.js (d3.csv) handles data loading. The code leverages vega-lite-api’s `vl` builder to chain mark and encoding specifications, with vega-tooltip providing interactive legends and tooltips.

Mmarquesjr79

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data from the UCI Auto MPG dataset, mapping engine horsepower against fuel efficiency (mpg). Each point’s color encodes the car’s country of origin, while the point size represents vehicle weight and a tooltip reveals the car model name. The code uses the Vega-Lite API to declaratively build the chart, with D3’s `csv` function for data loading and Vega tooltip for interactive hover details. The visualization dynamically fits to the browser window dimensions.

SShanmukh

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data from the UCI Auto MPG data set, mapping fuel efficiency (mpg) against horsepower. Each circular mark is colored by country of origin and sized by vehicle weight, with tooltips revealing car model names. The chart demonstrates the Vega-Lite API (vl) for D3, where the programmatic specification defines encoding channels like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. The code registers Vega, Vega-Lite, and the Vega-Lite API, then reads CSV data via `d3.csv` to render interactive SVG output.

Jjames.haarbauer@dunya-analytics.com

95% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping fuel efficiency (mpg) against horsepower. Each point’s size encodes vehicle weight, while color distinguishes the country of origin. The chart uses the vega-lite-api DSL to construct the specification, with vega, vega-lite, and d3.csv handling data loading and rendering. Custom axis styles and tooltips are applied via vega-tooltip, and the view auto-fits to the window using vega’s autosize configuration.

Mmuwu16

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping miles per gallon against horsepower for individual car models. Each point is colored by origin and sized by vehicle weight, with hover tooltips revealing the car name. Built with Vega-Lite API, the visualization leverages `vl.markCircle`, positional encodings via `vl.x()` and `vl.y()`, and tooltips through `vl.tooltip()`. D3’s `csv` loader fetches the data, while Vega tooltip enhances interactivity, all running within a responsive, full-window layout.

JJoshua Holloway

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes automotive fuel efficiency and performance data from the UCI Auto MPG dataset, showing the relationship between miles per gallon and horsepower while encoding vehicle origin via color and weight via marker size. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification that is then rendered through Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously from a GitHub Gist using the `csv` function from d3.v5, while the Vega Tooltip handler provides interactive hover details displaying each car model's name. The chart auto-fits to the browser window dimensions.

KKevin McMorrow

94% match