Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 23, 2022

Created on Apr 23, 2022

This visualization displays automobile fuel efficiency data, plotting each car’s origin against its horsepower as a scatter plot with semi-transparent circles and tooltips that reveal the vehicle’s name. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered as SVG through Vega. Data is loaded from a CSV file using d3’s `csv` function. The visualization auto-fits the window and customizes axis and label styling via a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance as an interactive scatter plot, with engine horsepower on the y-axis, miles per gallon on the x-axis, and points colored by country of origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API, the visualization loads data from a remote CSV file using d3.csv, then renders to SVG through Vega and Vega-Lite. The code customizes axis and label styling in a separate config module and fits the chart to the full browser window.

Aantanta28

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between automobile horsepower, fuel efficiency, and origin using the Vega-Lite API, rendered with D3.js. Data from the auto-mpg.csv dataset is fetched via `d3.csv` and displayed as semi-transparent circles, where the x-axis encodes origin, the y-axis encodes horsepower, color distinguishes origin, and size maps to miles per gallon. The code builds the visualization by chaining `vl.markCircle()` and encoding methods, then applies a custom config for axes and typography, with tooltips enabled through the Vega-Tooltip handler.

CCatalina Vajiac

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 interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

HHaowenWeiJohn

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot displays the relationship between fuel efficiency (mpg) and horsepower for historical automobile models, with tooltips revealing each car's name. The visualization is built using the Vega-Lite API, which constructs a specification executed by Vega Lite and rendered as SVG by Vega. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart dynamically resizes to fit the browser window, and the dark-themed configuration adjusts axis tick colors and label font sizes. Interactions are enabled through the `vega-tooltip` Handler class.

Uuniversal-innovative

93% match

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes automotive fuel efficiency and performance data from the UCI Auto MPG dataset, showing the relationship between miles per gallon and horsepower while encoding vehicle origin via color and weight via marker size. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification that is then rendered through Vega and Vega-Lite JavaScript libraries. Data is loaded asynchronously from a GitHub Gist using the `csv` function from d3.v5, while the Vega Tooltip handler provides interactive hover details displaying each car model's name. The chart auto-fits to the browser window dimensions.

KKevin McMorrow

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle

93% match