Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 12, 2023

Created on May 12, 2023

This example visualizes the Auto MPG dataset with an interactive scatter plot, mapping miles per gallon on the x-axis and horsepower on the y-axis. Circle size encodes vehicle weight, while color distinguishes the region of origin, and hovering reveals the car name via a tooltip. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads CSV data with D3’s `csv` function. Custom styling configures dark axis labels and a large font size for readability, with the chart automatically fitting the full viewport.

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 classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset, using circle marks to show the relationship between miles per gallon and horsepower. Point color encodes the country of origin, while size maps to vehicle weight. Built with the Vega-Lite API, the visualization loads data via D3’s `csv` function and renders to SVG. The code configures the chart’s dimensions and appearance through a custom config object, and tooltips are enabled via the Vega Tooltip handler.

Ggzm17

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower for individual cars. Each circle’s color encodes the car’s origin, while its size represents weight; hovering reveals the car’s name via a tooltip. The visualization is built using the Vega-Lite API, which composes a scatter plot with a circle mark and quantitative scales. It loads CSV data via d3.csv, renders with SVG through Vega-Lite’s view, and applies custom axis and label styling from a shared configuration object.

Ssofiamourap

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and vehicle origin as color, with point size reflecting weight. It uses the Vega-Lite API to declare the chart specification programmatically, registering it with Vega and Vega-Lite for rendering in SVG. The code also imports the dataset via d3.csv, applies custom axis and label styling through a config object, and enables interactive tooltips using the vega-tooltip Handler. The visualization auto-fits to the browser window dimensions.

Vvvs1680

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle attributes from the auto-mpg dataset, plotting weight against horsepower while using the size and color of circles to encode miles per gallon and country of origin. The visualization is constructed using the Vega-Lite API, which builds a declarative specification rendered through D3 and Vega-Lite libraries. It draws scatterplot circles with custom styling, reads CSV data asynchronously via D3’s csv loader, and includes interactive tooltips that display car names when hovered.

EEugenio2192

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower as colored circles representing the car’s origin. It uses the Vega-Lite API to declare the scatter plot, with point size mapped to vehicle weight and tooltips showing car names. The visualization is rendered as SVG via Vega, with D3.js loading the CSV data and Vega Tooltip providing interactive labels. Custom axis and label styling in the configuration improve readability, and the chart resizes to fit the browser window.

EEngineerRajeev

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset using a scatter plot where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size representing vehicle weight. Hovering reveals the car’s name via tooltips. The visualization is built entirely with the Vega-Lite API, using the `vl.markCircle` and `vl.encode` methods to define the marks and channels. Data loading relies on `d3.csv`, while rendering is handled by Vega and Vega-Lite’s runtime, with custom axis styling configured through a dedicated config object.

Ssd2beatles

95% match