Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
TTrang Nguyen
Last edited Dec 27, 2024
Created on Dec 27, 2024

This example demonstrates a scatter plot of automobile data, comparing displacement and horsepower with semi-transparent points that reveal data density. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification, while D3.js loads the auto-mpg dataset from a CSV file. The chart uses a custom dark-themed configuration to improve readability, with tooltips enabled via Vega-Tooltip for interactive data inspection.

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 shows a scatter plot of automobile data, with engine displacement on the x-axis and horsepower on the y-axis. Each point is semi-transparent, allowing overlapping points to reveal density. It uses the Vega-Lite API to declaratively build the visualization, with D3’s CSV reader to load the auto-mpg dataset. The Vega tooltip handler is enabled for interactive hover details, and the chart resizes to fit the window.

HHoang Doan
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with tooltips displaying car model names. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite for rendering, while D3’s `csv` function loads the auto-mpg dataset. Point opacity is set to 0.1 to reveal overlapping data density. The plot resizes to fit the window and applies custom axis and label styling from a separate config file.

Sseanmdalrymple@protonmail.com
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point sized and colored to reveal density and labeled by car name via tooltips. The visualization is built using the Vega-Lite API (vl) combined with D3’s csv loader to fetch the auto-mpg dataset from a GitHub Gist. The code configures axis styling, a dark color scheme, and an interactive tooltip handler, then renders the chart to fill the browser window using Vega’s SVG renderer.

VVictor Henriquez
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with engine displacement mapped to the x-axis and horsepower to the y-axis, using a semi-transparent point mark for each vehicle. The visualization is built with the Vega-Lite API, which composes the specification and rendering through Vega and Vega-Lite, while D3 (d3.csv) fetches the auto-mpg dataset from a remote URL. The code also applies custom axis and label styling via a config object, and includes a Vega Tooltip handler for interactive hovering.

ZZakaria Salogo
95% match