Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 9, 2022

Created on Jan 9, 2022

This visualization displays car attributes from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through both color and point size. It uses the Vega-Lite API alongside vega, vega-lite, d3.csv for data loading, and vega-tooltip for interactive hover details. The chart automatically fits its container dimensions, with custom axis styling and a dark color scheme to enhance readability. Each data point represents a car model, with tooltips revealing the vehicle name.

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 visualization displays automobile data from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through color and MPG via point size. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, then renders an interactive SVG scatter plot that fits the full window. The code uses `vl.markPoint()` with `encode()` mappings and `vl.x().fieldN()`, `vl.y().fieldQ()`, and tooltip fields, pulling CSV data asynchronously via d3.csv. Custom axis and label styling configures the dark-on-light appearance for readability.

TTyr Chen

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

LLei Lei

94% 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 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 each car as a circle positioned by weight and horsepower, colored by origin, and sized by miles per gallon. Hovering reveals the car name via a tooltip. The visualization is built with the Vega-Lite API (vl), which generates a Vega-Lite specification that is registered with vega and vegaLite and rendered as SVG. Data is loaded asynchronously using d3.csv from a Gist, and the chart uses custom axis and label styling from a shared config file.

LLaura Johnson

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 fuel efficiency (mpg) against its horsepower. Circles are colored by country of origin and sized by vehicle weight, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which wraps d3.csv for data loading and vega-tooltip for interactive hover details. The plot dynamically fits the full viewport width and height, while custom axis and label styling are defined in a separate config file to improve readability.

Kkosakase

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays relationships among automobile characteristics from the UCI Auto MPG dataset, encoding miles per gallon and horsepower on the axes, origin as color, and weight as point size. Built with Vega-Lite's API wrapper, the code uses `vega-lite-api` to construct a circular mark encoding specification, then renders interactively through Vega and Vega-Lite. The visualization includes tooltips for car names, styled with custom axis and label configuration for improved readability.

Vvigneswaran009

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

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 as a circle positioned by miles per gallon and horsepower. Color encodes origin, while point size reflects vehicle weight, with tooltips revealing model names. Built using the Vega-Lite API and D3’s `csv` loader, it renders as an SVG via the vega-tooltip handler, dynamically fitting the viewport dimensions. Custom axis and label styling come from a shared config object, and the chart updates automatically when data loads.

Yyaron-lavi

93% match