Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on Mar 23, 2021

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with each point representing a vehicle and tooltips revealing the car’s name. It is constructed using the Vega-Lite API (vl) within a D3.js (d3.v5) framework, which registers Vega and Vega-Lite for rendering. The data is fetched as CSV from a GitHub gist using d3.csv. The code configures axis styling, disables zero-scaling for both quantitative fields, and uses semi-transparent, filled points for overlap visibility.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for various automobile models, with each point representing a car and its name revealed on hover. Built with the Vega-Lite API, it uses a scatter plot with semi-transparent, filled points and no stroke. The code registers Vega and Vega-Lite, loads data from a CSV file via `d3.csv`, and employs a `vl.markPoint` with quantitative X and Y encodings. The visualization automatically sizes to fit the browser window and incorporates a custom dark-themed configuration for axes and labels.

JJean David

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 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 across a sample of automobiles, with tooltips revealing the car model name for each point. It uses the Vega-Lite API to define a filled line mark with opacity, and renders the visualization as an SVG via the vega, vega-lite, and vega-lite-api libraries. The data is loaded asynchronously from a CSV file using d3.csv, and the chart is automatically sized to fit the browser window. The appearance is customized through a config object that adjusts axis and label styling.

Vvedant2003

96% match

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using data loaded from a remote CSV file. Each point represents a car model, with tooltips revealing the vehicle's name on hover. The visualization is built using the Vega-Lite API, which constructs a specification rendered through the Vega and Vega-Lite libraries. Data is fetched asynchronously using d3.csv, and the chart configures axis styles and dark guide labels for a polished appearance.

HHarsh Vijay

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

95% match