Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public
Kkarl.dalborg@mail.com
Last edited Aug 5, 2025
Created on Aug 5, 2025

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The data is loaded from a CSV file containing the standard Auto MPG dataset, with each car represented as a semi-transparent circle. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite in a JavaScript API, while the D3 library handles CSV parsing. Interactive tooltips display car names on hover, and the chart is rendered as an SVG, with appearance customized through a configuration object that adjusts axis labels and colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template 2222

This example visualizes the relationship between fuel efficiency, horsepower, and vehicle origin in the classic Auto MPG dataset. Each car is represented by a semi-transparent circle, with position encoding miles per gallon and horsepower, while color distinguishes country of origin and circle size encodes vehicle weight. Built using the Vega-Lite API for JavaScript with D3.js version 5, the visualization renders as an interactive SVG chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and the chart includes tooltips showing car names.

Iinar-vision
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

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

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for classic automobiles, using a scatter plot with circle size encoding weight and color encoding country of origin. Hovering reveals car model names via tooltips. The chart is built with the Vega-Lite API, which translates a declarative specification into Vega and renders as SVG, with data sourced from the UCI Auto MPG dataset fetched via D3’s CSV loader. Custom axis and label styling come from a shared configuration object.

Pparshwa30122002@gmail.com
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and tooltip handler.

SSteven Pearce
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for classic automobiles, using a scatter plot where each car is a circle. The visualization is built with the Vega-Lite API, which constructs a specification rendered by Vega, with data fetched from the UCI Machine Learning Repository’s Auto MPG dataset via D3’s `csv` function. The API encodes the x-axis as miles per gallon, the y-axis as horsepower, color by origin, and size by weight, while a tooltip displays each car’s name. The chart fills the browser window and uses custom axis labels and colors for improved readability.

VVander Fillipe de Souza
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository’s Auto MPG dataset. A semi-transparent line mark encodes mpg on the x-axis and horsepower on the y-axis, with color distinguishing origin and size representing weight. The visualization is built using the Vega-Lite API, which is registered with vega, vega-lite, and vega-tooltip for interactive tooltips. Data is loaded asynchronously via d3.csv, and the final SVG is rendered to fit the full window size.

GGeekboxer
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for classic automobiles, with point size encoding weight and color indicating country of origin. The visualization is built using the Vega-Lite API, which wraps Vega-Lite specifications in JavaScript methods. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. The code configures axis labels, tooltips, and a fixed-point rendering style, and renders the chart to SVG using the Vega renderer.

Iiblub
94% match