Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 9, 2023

Created on Jun 9, 2023

This example visualizes automobile fuel economy data by plotting engine horsepower against manufacturing year, with each point representing a car model. The visualization uses the Vega-Lite API wrapper to construct a scatterplot with a tooltip showing car names, while D3’s `csv` loader fetches the auto-mpg dataset. Custom configuration adjusts axis fonts and colors, and the chart fills the entire browser window, rendering as an SVG with a semi-transparent fill for overlapping points.

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

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

SSabbir

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel-efficiency data by plotting engine horsepower against miles per gallon, with colored points indicating the country of origin and point size encoding horsepower values. It uses the Vega-Lite API to construct the chart specification, which is then rendered through Vega-Lite’s compilation to Vega, with D3.js handling CSV data loading. The visualization employs a custom dark theme, tooltips, and auto-sizing to fill the browser window, all orchestrated via JavaScript modules that register the Vega-Lite API and D3’s CSV parser.

JJayanth

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point represents a vehicle, with tooltips revealing the car’s name on hover. The visualization uses the Vega-Lite API to declare the chart specification, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The rendering relies on Vega and Vega-Lite scripts, with a custom dark-themed configuration for axis labels and titles, and the chart automatically fits the browser window dimensions.

Xxieyaoyue

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg) and horsepower for a collection of automobiles, with points colored by origin and sized by mpg, using a tooltip to display car names. It employs the Vega-Lite API to declaratively define the scatterplot, registered with Vega and Vega-Lite, and renders it as SVG within a full-window layout. Data is loaded asynchronously from a CSV file using D3’s `csv` method, while the built-in Vega Tooltip handler manages interactive hover details. The configuration customizes axis styles and label fonts for improved readability.

Wwy2010344

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

JJoseph Bermudez

93% match