Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SSamirAhma
Last edited Nov 24, 2022
Created on Nov 24, 2022

This interactive scatter plot visualizes the relationship between vehicle displacement and horsepower, with tooltips revealing car model names. Built with the Vega-Lite API, it loads CSV data from a GitHub repository, renders points with an SVG renderer, and uses Vega Tooltip for hover details. The visualization auto-sizes to the browser window, applying custom color and font styling from a JSON config.

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 a scatterplot of automobile data, plotting horsepower against displacement for individual car models. Each point is rendered as a semi-transparent circle, with tooltips revealing the vehicle name on hover. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications and render SVG output. Data is loaded asynchronously from a remote CSV file using d3.csv, while the vega-tooltip Handler enables interactive tooltips. The chart dynamically fits its dimensions to the browser window through an autosize configuration.

Ggayatrisridhar
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of vehicles, plotting displacement against horsepower, with tooltips that reveal each vehicle’s name. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders marks as SVG points. It loads data from a remote CSV endpoint via d3.csv, applies custom axis and label styling from a shared configuration, and uses the Vega-Tooltip handler to display interactive hover information. The chart fills the browser window and uses a semi-transparent point style for readability.

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

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement versus horsepower, with each circle representing a car model and tooltips revealing the vehicle name. The visualization is built using the Vega-Lite API, which constructs a declarative specification rendered through Vega, and loads data from a CSV file containing auto-mpg statistics. The code registers Vega-Lite and Vega Tooltip for interactive hover effects, while custom configuration options adjust axis labels, typography, and the dark color palette. D3 is used only for fetching the dataset via its csv method.

DDeepanshu
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing vehicle names. Built with the Vega-Lite API and D3’s CSV loader, it renders as an SVG scatterplot using semi-transparent points to reveal density. The visualization sizes itself to the window and applies custom styling for larger axis labels, with the Vega tooltip handler enabled for interactive inspection.

Ddev-ignacio-h
94% 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
93% match