Skip to main content
SimilarExport ZIP
100%

Aditya - Vega-Lite API Template

✓ Published0🌍 Public
AAditya Bhattacharya
Last edited Apr 22, 2022
Created on Mar 30, 2022

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles, using circles sized by weight and colored by origin. The code uses the Vega-Lite API to construct the chart declaratively, registering it with Vega and Vega-Lite, and renders output as SVG in the browser. Data is loaded asynchronously via D3’s `csv` function from the Auto MPG dataset hosted on GitHub Gist. D3 v5, Vega, Vega-Lite, and vega-tooltip are all loaded separately, with chart appearance customized through a configuration object that adjusts 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…

Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It displays a scatter plot where each circle’s position encodes mpg and horsepower, color encodes origin, and size encodes weight. The code uses the Vega-Lite API to build the chart declaratively, with the `vl.markCircle`, `vl.x()`, `vl.y()`, and `vl.color()` methods. It loads CSV data via D3’s `csv` function, registers Vega-Lite components, and renders an interactive SVG with tooltips.

NNelson M
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, weight, and origin for a set of automobiles. Each circle’s position, size, and color encode the quantitative and categorical attributes, with tooltips revealing vehicle names on hover. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and retrieves its dataset from the UCI Machine Learning Repository’s Auto MPG dataset via a CSV loaded with d3.csv. The code customizes axis styling and uses a responsive, full-window layout for presentation.

Bbilalialikissankpeyi
90% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

Kkarl.dalborg@mail.com
89% 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
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for a sample of automobiles from the UCI Auto MPG dataset. A scatter plot maps mpg to the horizontal axis and horsepower to the vertical axis, with point size encoding weight and color distinguishing origin. The implementation uses the Vega-Lite API to declare the chart specification, while d3.csv loads the remote dataset. Custom axis styling and tooltips are configured through Vega-Lite’s config object and the Vega Tooltip handler, rendering in SVG.

EEngineerRajeev
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between fuel efficiency, horsepower, weight, and country of origin for various car models. A circle mark encodes weight as size, origin as color, and includes tooltips showing car names. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, with D3’s `csv` function loading the remote data file. The code configures axes and styling through a custom config object, and renders the chart as an SVG using the `vega-tooltip` handler.

Ppavan0828
89% match
Loading thumbnail…

Aditya - Vega-Lite API Template 1

This example visualizes automobile data from a CSV file, plotting engine horsepower against the year of manufacture as individual points, with a tooltip that reveals the car’s name on hover. It uses the Vega-Lite API to construct the scatterplot, while D3.js (d3.csv) loads the remote dataset. The visualization is rendered as an SVG via Vega, with Vega-Tooltip providing interactive labels. Custom axis and label styling are applied through a Vega-Lite configuration object to improve readability on a dark background.

AAditya Bhattacharya
89% 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
89% match