Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
MMarta
Last edited Mar 25, 2021
Created on Mar 25, 2021

This interactive scatter plot uses the Vega-Lite API to visualize stars from the Auto MPG dataset, plotting their distance from the sun against their magnitude. Each star is represented by a circular mark, with color encoding the star type and size reflecting its stellar class. The visualization loads data via `d3.csv`, configures axis styles and tooltips through the `vega-lite-api` and `vega-tooltip` Handler, and renders dynamically to the full browser window using `vl.markCircle().encode()`.

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 uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei
89% 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. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei
89% 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
89% match
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
89% 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
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) as additional dimensions. Built with the vega-lite-api library version 0.1.0, it registers Vega and Vega-Lite, and includes a tooltip handler from vega-tooltip to display car names. The code uses `vl.markCircle`, `vl.x().fieldQ('mpg')`, and `vl.y().fieldQ('horsepower')` for the encoding, with data loaded asynchronously via d3’s `csv` function.

DDor Peled
89% 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. It visualizes vehicle horsepower against miles per gallon, with circle size encoding weight and color representing country of origin via a quantitative size encoding and a nominal color field. The visualization is built using the `vega-lite-api` library, which programmatically constructs the plot through chained method calls like `vl.x()`, `vl.y()`, and `vl.color()`, with data loaded via d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip for rendering and interactive tooltips, while a custom configuration adjusts axis styling for readability.

Ccynobill
89% 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
89% match