Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 17, 2021

Created on Nov 17, 2021

This example visualizes the relationship between engine displacement and horsepower for automobile models using the Vega-Lite API, with tooltips displaying car names on hover. It renders a scatter plot with semi-transparent points on a full-screen canvas, configured for a clean dark-on-light aesthetic. The code loads data from a CSV file via D3’s `csv` function, then builds the visualization declaratively with `vl.markPoint` and `vl.x().fieldQ()`, wiring everything together through Vega-Lite and Vega’s runtime, including custom tooltip handling via the `Handler` from `vega-tooltip`.

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 the relationship between engine displacement and horsepower for a sample of automobiles, with each point representing a car model and tooltips revealing its name. The visualization is built programmatically using the Vega-Lite API, which composes the chart specification through chained methods like `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ`. It loads CSV data via d3’s `csv` function, applies custom axis and label styling from a configuration object, and renders as an SVG using the Vega and Vega-Lite libraries with Vega-Tooltip for interactive hover details.

Mmatg

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates the relationship between engine displacement and horsepower across various car models, with tooltips revealing the vehicle name for each point. Built with the Vega-Lite API, the visualization defines a scatter plot using `vl.markPoint` and `vl.encode`, applies custom axis styling through the `config` object, and renders via Vega’s SVG view. Data is loaded asynchronously from a CSV file using D3’s `csv` function, while the Vega tooltip handler enables interactive inspection of individual data points.

RRolf Niggemann

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the car name for each point. The visualization is built using the Vega-Lite API, which composes a scatter plot using `vl.markPoint()` with `fieldQ` encodings for the quantitative axes. Data is loaded asynchronously from a CSV file containing the auto-mpg dataset via `d3.csv`. The chart is rendered as SVG, with custom axis styling defined in a config object and interactive tooltips supplied by the vega-tooltip handler.

Zzykel

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for classic automobiles, with tooltips revealing vehicle names. It uses the Vega-Lite API to declaratively define a scatter plot with semi-transparent points, while D3.js loads the data from a CSV file. The visualization is rendered as an SVG and configured with a dark theme for improved readability. The code integrates Vega tooltip functionality to handle interactive hover details.

WWilliam Couturiaux

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It renders a scatter plot with semi-transparent points, where hovering reveals the vehicle's name via tooltip. The visualization is built using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`, `vl.y().fieldQ`) within a D3.js framework, with data fetched as CSV from a remote GitHub gist. Appearance is customized through a Vega config object, and rendering is handled by Vega's SVG renderer.

Llplimier

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a set of automobiles, with tooltips revealing the vehicle name for each point. The scatter plot is constructed using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded from a CSV file using D3’s `csv` function, while the visualization’s appearance is customized through a configuration object that adjusts axis styles and font sizes. The chart fills the entire viewport and uses semi-transparent points to reveal overlapping data.

SSarah Elkeurti

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in automobiles, with tooltips revealing car names. Built using the vega-lite-api, it constructs a scatterplot via `vl.markPoint` and encodes quantitative x- and y-axes with `vl.x()` and `vl.y()`. Data loads asynchronously from a CSV via `d3.csv`, then renders through Vega and Vega-Lite, styled with a custom config for cleaner axis labels. The visualization fills the browser window using `autosize({ type: 'fit' })` and applies semi-transparent points for readability.

SSamirAhma

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows the relationship between engine displacement and horsepower for classic automobiles, using a scatter plot with semi-transparent points and tooltips that reveal car model names. It uses the Vega-Lite API to declare the visualization, with D3’s `csv` function loading the data from a GitHub gist. The view renders as SVG, sized to the full window, and applies custom axis and label styling from a separate configuration module. Vega-Tooltip provides interactive hover details.

IIlyas Filali

96% match