Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 24, 2022

Created on Oct 24, 2022

This example visualizes automobile performance data from the auto-mpg dataset, plotting cylinders and horsepower with circle size encoding weight and color encoding origin. Built with the Vega-Lite API for declarative chart specification, it uses d3.csv to load the data and renders the result as an SVG via the Vega view API. Configuration customizes axis labels and tick colors, while a Vega tooltip handler displays car names on interaction.

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 displays automobile data from the classic Auto MPG dataset, plotting each car as a circle with origin on the x-axis, horsepower on the y-axis, weight mapped to color, and miles per gallon to circle size. Hovering reveals the car’s name via tooltips. It uses the Vega-Lite API to construct the specification, with Vega and Vega-Lite rendering to SVG, and D3’s CSV loader to fetch the remote data file. Custom configuration adjusts axis appearance and label styling.

Ggeorgie-flood

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel economy data from the UCI Auto MPG dataset, plotting cylinders against horsepower with circles colored by origin and sized by weight. It uses the Vega-Lite API to declaratively define the scatter plot, with tooltips showing car names. The visualization leverages d3.csv to load the data, Vega-Lite’s config for axis and label styling, and renders via Vega’s SVG output. The chart fills the browser window with an interactive tooltip handler from vega-tooltip.

Mmarouan-ben

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon and horsepower. Color encodes origin, while point size reflects vehicle weight, with tooltips revealing model names. Built using the Vega-Lite API and D3’s `csv` loader, it renders as an SVG via the vega-tooltip handler, dynamically fitting the viewport dimensions. Custom axis and label styling come from a shared config object, and the chart updates automatically when data loads.

Yyaron-lavi

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data using a scatter plot of weight versus horsepower, colored by origin and with tooltips showing car names. The visualization is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart. Data is loaded asynchronously from a CSV file via d3.csv, then passed to a vega-lite-api markCircle specification. The chart fits the full window size with custom axis and label styling from a config object.

EEdgar Alves

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive performance data by plotting horsepower against country of origin, with vehicle names available as tooltip labels. The code uses the Vega-Lite API to define a circle mark with large size and low opacity, while loading data from a CSV file of auto-mpg statistics using d3.csv. Configuration adjusts axis labels and tick marks for readability, and the visualization renders as a full-window SVG using vega-tooltip for interactive hover details.

JJusung

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the UCI Auto MPG dataset, mapping model year on the x-axis, horsepower on the y-axis, and color-coding points by country of origin while sizing them by weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and renders as an SVG. It loads data via `d3.csv`, applies custom axis and label styling from a config object, and includes tooltips that display all data attributes on hover. The chart automatically fits the browser window dimensions.

OOlof Ollerstam

93% match