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 displays a scatter plot of automobile horsepower across model years, with translucent circular marks and hover tooltips revealing vehicle names. Built with the Vega-Lite API, it loads data from the UCI Auto MPG dataset via d3.csv and renders the visualization as SVG using the vega-lite-api library. The plot encodes year on the x-axis, horsepower on the y-axis, and uses a custom config for axis styling and tooltip font 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

A scatter plot visualizes automobile data from an auto-mpg CSV, mapping model year to horsepower with tooltips showing vehicle names. Built using the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures axes and styling, and renders an SVG view that fits the window. The code formats year as temporal and horsepower as quantitative, while using a config object for font and color customization.

GGuido Perdomo

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile horsepower trends over time using a scatter plot, where each point represents a vehicle model year. The visualization uses a Vega-Lite API specification to encode the year on the x-axis and horsepower on the y-axis, with tooltips displaying vehicle names. Data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered with the vega, vega-lite, and vega-lite-api libraries, along with vega-tooltip for interactive hover details. The configuration customizes axis and label styling for improved readability.

TT.T

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile horsepower against cylinder count, with tooltips revealing car names on hover. It uses the Vega-Lite API to construct the chart specification, while d3.csv loads the auto-mpg dataset from a GitHub gist. The rendering pipeline combines Vega, Vega-Lite, and d3.v5, with vega-tooltip providing interactive hover details. Custom configuration adjusts axis styling and label fonts for improved readability across the full-screen SVG output.

MMark Lam

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, mapping horsepower against miles per gallon with circles colored by origin and sized by weight. Tooltips reveal vehicle name and horsepower on hover. Built with the Vega-Lite API, it configures the visualization programmatically, registers Vega and Vega-Lite for rendering as SVG, and loads CSV data via D3’s `csv` function from the UCI Auto MPG dataset.

Pprogsum

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, showing miles per gallon against horsepower across different origins. The visualization uses square marks with color encoding for origin and size for vehicle weight, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3.csv for data loading, then renders an SVG view with custom axis and label styling. The plot automatically fits the browser window and uses Vega Tooltip for interactive hover details.

LLainu Kuruvilla

94% match