Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
MMark Zwart
Last edited Mar 23, 2021
Created on Mar 23, 2021

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render interactive scatter plots of the Auto MPG dataset from the UCI Machine Learning Repository. The code applies the Vega-Lite API’s `markCircle` and `encode` methods to map vehicle weight to the x-axis, horsepower to the y-axis, and miles per gallon to point size and color, with tooltips showing car names. It retrieves data via d3’s `csv` loader, registers the Vega and Vega-Lite libraries, and customizes axis styling through a separate config object. The visualization is built to fill the browser window entirely.

FFonda Irena Santoso
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk
95% 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
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
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 weight against horsepower with points colored by origin and sized by miles per gallon. Built with the Vega-Lite API, it renders an interactive scatter plot using d3.csv for data loading and Vega-Lite’s markCircle encoding for graphical marks. The visualization uses a custom configuration to adjust axis styling, font sizes, and tooltip appearance, all rendered as SVG with dynamic width and height based on the viewport.

AAlex Gomes
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a vehicle, with horsepower on the y-axis, miles per gallon on the x-axis, weight mapped to circle size, and origin mapped to color. Tooltips reveal each car’s name. The code registers Vega-Lite with D3.js v5 for data loading via `d3.csv`, and customizes axis and label styling through a config object.

UUdoekpo Stephen
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra
94% match