Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public
Llingfa
Last edited Oct 27, 2022
Created on Oct 27, 2022

This visualization displays a scatter plot of automotive data, mapping miles per gallon and horsepower with circle size representing vehicle weight and color indicating country of origin. Built using the Vega-Lite API, the code registers both Vega and Vega-Lite libraries, then chains mark and encoding specifications programmatically. Data is loaded asynchronously from a CSV file hosted on GitHub, using d3's csv parser, and rendered as an SVG with tooltips provided by the vega-tooltip handler.

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 presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Ssuserocc
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of vehicle data, mapping miles per gallon against horsepower, with points colored by region of origin and sized according to vehicle weight, along with tooltips revealing car model names. Built using the Vega-Lite API, the code registers vega, vega-lite, and vega-tooltip, then renders a circle mark with quantitative and nominal encodings. Data is loaded asynchronously via `d3.csv` from the UCI Auto MPG dataset hosted on GitHub, and the chart fills the browser window with a custom configuration for axis styling.

Llokeshp-0813
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21
94% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatterplot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. It uses Vega-Lite API to create a circle mark encoding mpg and horsepower on the axes, weight for size, and origin for color, with hover tooltips. The code loads CSV data via d3.csv, registers the Vega-Lite API with vega and vega-lite, and renders to SVG through vega-tooltip's handler.

Vvigneswaran009
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of the Auto MPG dataset, plotting miles per gallon against horsepower while encoding vehicle origin by color and weight by point size. Built with the Vega-Lite API, it combines vega, vega-lite, vega-tooltip, and d3.csv for data loading. The code configures axis styling, applies a responsive fit to the window, and uses interactive tooltips showing vehicle names. Data comes from the UCI Machine Learning Repository via a GitHub gist.

Cchar0496
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between miles per gallon and horsepower in classic automobiles, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API on top of Vega-Lite and Vega, it loads auto-mpg data from the UCI Machine Learning Repository via D3's CSV loader. The chart renders as SVG, fitting the browser window, with tooltips enabled through the Vega Tooltip handler and custom axis styling for readability.

Ttopnep
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between vehicle weight and horsepower. Each circle’s position encodes these quantitative fields, while color represents the country of origin and size encodes miles per gallon (mpg). Hovering reveals the car’s name via a tooltip. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega, and uses d3.csv to load the auto-mpg dataset. The code configures axes, scales, and styling through the vega-lite-api’s fluent method chaining.

GGuus Lammers
94% match