Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 27, 2021

Created on Jul 27, 2021

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.

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

Mmeghshah612

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

YYi-Qing

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

RRolf Niggemann

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between fuel efficiency (mpg), horsepower, origin, and weight for a set of automobiles. The code uses the Vega-Lite API to construct a scatter plot with circle marks, encoding mpg on the x-axis, horsepower on the y-axis, origin as color, and weight as size. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via a CSV file, processed using `d3.csv`. The visualization is rendered as an SVG through Vega-Lite, with a custom configuration for axis styling and tooltips.

CCecilia831

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency data from the UCI Machine Learning Repository's Auto MPG dataset, showing the relationship between miles per gallon, horsepower, and weight across different countries of origin. A scatter plot with semi-transparent circular marks encodes the quantitative axes and origin as color, while car weight determines point size. Built with the Vega-Lite API for D3, the visualization registers Vega and Vega-Lite with a tooltip handler, loads CSV data via `d3.csv`, and renders an interactive SVG fitted to the browser window. Custom configuration adjusts axis labels and tick marks for readability.

KKunkgg

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

RROU

94% match