Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 16, 2022

Created on Sep 16, 2022

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.

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

97% 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 each car’s name. It uses the Vega-Lite API to declare the scatterplot marks and encodings, while customizing axis and label styling via a shared config object. Data is loaded asynchronously from a CSV using d3.csv, then rendered as an SVG through Vega’s view system. The visualization fills the browser window and fades overlapping points for readability.

AAakarshak Sthapak

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

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

GGyromighty

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a dataset of automobiles, with each point representing a car model. The plot uses a scatterplot with tooltips displaying the car name, rendered as a full-screen SVG. Built using the Vega-Lite API, the code leverages `vega`, `vega-lite`, and `vega-lite-api` libraries while fetching data from a CSV via `d3.csv`. The visualization is configured with custom axis styling and an interactive tooltip handler for enhanced readability.

Aaniosindustries

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using a scatter plot of semi-transparent points with tooltips displaying vehicle names. It is built with the Vega-Lite API, which compiles specifications into Vega and renders them as SVG, while D3.js loads the data from a CSV file hosted on GitHub. The visualization adapts to the full window size and applies a custom configuration to adjust axis and label styling for improved readability.

MMinh Luong

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a sample of automobiles, with interactivity through tooltips that reveal the car model name on hover. Built with the Vega-Lite API, it constructs a scatter plot using semi-transparent points and custom axes. Data is loaded asynchronously via D3’s `csv` function from an external Auto MPG dataset. The code integrates Vega, Vega-Lite, and Vega-Lite API for rendering, while Vega-Tooltip provides hover information.

BBruno Simoes

95% match