Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jun 4, 2022

Created on Jun 4, 2022

This visualization displays automobile data from a CSV file, plotting engine displacement on the x-axis against horsepower on the y-axis as semi-transparent points. The Vega-Lite API configures the mark, encoding, and tooltips, with custom axis styling from the configuration file. Data is loaded asynchronously using d3.csv from a GitHub gist, and the resulting chart is rendered with Vega’s SVG renderer. The visualization fills the browser window, with tooltips enabled via Vega Tooltip.

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 automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with semi-transparent points. Tooltips reveal vehicle names on hover, while the custom configuration adjusts font sizes, axis colors, and removes axis domains for a cleaner appearance. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite, and rendered as SVG through D3. Data loading relies on D3's `csv` function, with the chart automatically sizing to fit the browser window.

IInnocent Ernest

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

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting engine displacement against horsepower. Each point represents a vehicle, with color encoding the model year and size encoding vehicle weight. Tooltips reveal the car name when hovering. The chart uses the Vega-Lite API to construct the specification, with D3.js handling data loading via `d3.csv`. The visualization is rendered to SVG and fills the browser window, using a custom configuration to improve readability with larger fonts and adjusted axis styling. The code imports `vega`, `vega-lite`, and `vega-lite-api`, registering them with a tooltip handler to enable interactive data exploration.

Ssmsk2980

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement on the x-axis against horsepower on the y-axis, with tooltips revealing car names. It uses the Vega-Lite API to construct the chart, configured with custom axis styling and a dark color scheme. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted automotive dataset, then rendered through Vega and Vega-Lite, with tooltips provided by the `vega-tooltip` handler. The visualization fills the browser window, applying responsive sizing and opacity to convey point density.

AAbhivadan

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data, plotting engine displacement against horsepower as a dense scatterplot of semi-transparent points. The visualization uses the Vega-Lite API via `vega-lite-api` and `vl.markPoint`, with a custom dark-themed configuration that removes axis domains and enlarges typography. Data is loaded asynchronously from a CSV using D3’s `csv` function, while tooltips display each car’s name. Rendering is handled through Vega and Vega-Lite, with the chart sized to fit the full browser window.

YYibo Zhang

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays individual cars as points in a scatter plot, mapping engine displacement on the x-axis against horsepower on the y-axis. The data comes from a CSV file, auto-mpg.csv, loaded via d3.csv. Built using the Vega-Lite API, the chart registers Vega, Vega-Lite, and Vega-Tooltip in index.js, then renders points with low opacity to reveal density. The visualization loads external scripts for Vega, Vega-Lite, the API wrapper, tooltip, and D3, and applies a custom config for axis styling and font sizes.

AAdriana Rodriguez Sanabria

94% match