Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SSabbir
Last edited Jan 5, 2022
Created on Jan 5, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

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 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
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles
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 with engine horsepower on the y-axis and miles per gallon on the x-axis. Color encodes the country of origin, while circle size represents vehicle weight, and hovering reveals the car’s name via a tooltip. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, loads data asynchronously using d3.csv, and renders an interactive SVG chart that resizes to fit the viewport. The code also applies custom axis and label styling through a configuration object.

RRoland
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 fuel efficiency (mpg) against its horsepower. Each circle’s size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car’s name. The visualization is built programmatically using the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), with data loaded asynchronously via `d3.csv`. Rendering is handled by Vega and Vega-Lite, with tooltips provided by Vega-Tooltip, and custom axis and label styling is applied through a shared config object.

MMohammed Jumail Shibily
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel-efficiency data by plotting engine horsepower against miles per gallon, with colored points indicating the country of origin and point size encoding horsepower values. It uses the Vega-Lite API to construct the chart specification, which is then rendered through Vega-Lite’s compilation to Vega, with D3.js handling CSV data loading. The visualization employs a custom dark theme, tooltips, and auto-sizing to fill the browser window, all orchestrated via JavaScript modules that register the Vega-Lite API and D3’s CSV parser.

JJayanth
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 horsepower and miles per gallon, colored by country of origin, and sized by vehicle weight. Hovering over a circle reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications through JavaScript code, with the data loaded via `d3.csv`. The chart uses an SVG renderer and applies custom axis and label styling from a configuration object.

YYedrup
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for cars, with each point colored by country of origin and sized by vehicle weight. It uses data from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The graphic is built declaratively using the Vega-Lite API, specifying a circle mark with encodings for position, color, and size. The code registers Vega, Vega-Lite, and the Vega-Lite API, then renders an interactive SVG chart fitted to the browser window, with a tooltip provided by Vega-Tooltip.

Yyejichun@naver.com
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance as an interactive scatter plot, with engine horsepower on the y-axis, miles per gallon on the x-axis, and points colored by country of origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API, the visualization loads data from a remote CSV file using d3.csv, then renders to SVG through Vega and Vega-Lite. The code customizes axis and label styling in a separate config module and fits the chart to the full browser window.

Aantanta28
94% match