Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
GGregS1290
Last edited Oct 26, 2021
Created on Oct 26, 2021

This visualization displays the relationship between engine displacement and horsepower for a collection of automobiles, with tooltips revealing the model name for each point. It uses the Vega-Lite API to declaratively define the scatter plot, with D3.js (d3.csv) loading the auto-mpg dataset from a GitHub gist. The code registers Vega, Vega-Lite, and Vega-Tooltip, and renders the chart as SVG, adjusting the view to fit the window size.

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 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
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for various car models, with tooltips revealing the car's name on hover. Built with the Vega-Lite API, it renders as SVG and automatically fits the browser window. The visualization loads the auto-mpg.csv dataset from a GitHub gist, applies custom axis and label styling, and uses semi-transparent square marks to represent data points, revealing overlapping clusters.

DDeepak Tomson
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in the auto-mpg dataset, with tooltips showing car model names for each point. The visualization uses the Vega-Lite API to declare a scatter plot with semi-transparent points, while D3’s csv loader fetches the data from a GitHub gist. The code registers Vega, Vega-Lite, and vega-tooltip through the vl API, customizes axes and label styling via a config object, and renders an SVG chart that fills the browser window.

DDaMei1993
96% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between engine displacement and horsepower for a dataset of automobiles, with tooltips revealing model names. It uses the Vega-Lite API to define a scatter plot with a single mark type and encoding, while data is loaded asynchronously from a CSV file via D3’s `csv` function. The chart is rendered with SVG and configured with custom axis and label styling. The code also integrates Vega Tooltip for interactive hover details.

PPoojaGadara
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 visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay
95% match
Loading thumbnail…

Fork of Vega-Lite API

This example visualizes the relationship between engine displacement and horsepower for cars, with tooltips showing vehicle names. The scatter plot uses the Vega-Lite API to declare the mark type and encodings, while D3.js loads the auto-mpg CSV dataset. The visualization is rendered through Vega and Vega-Lite, with Vega Tooltip handling interactions and custom configuration adjusting font sizes and axis styling for readability.

Mmuhammadshumas
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