Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 22, 2021

Created on Oct 22, 2021

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.

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

97% 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 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 collection of automobiles. It uses a scatter plot of points with a fixed size and low opacity to show data density, with tooltips revealing the car name. The visualization is built using the Vega-Lite API, registering it with Vega and Vega-Lite, and configures axes and label styling through a custom config object. Data is loaded from a remote CSV file via the `d3.csv` method.

MMayank Kumar

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

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

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