Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Ddev-ignacio-h
Last edited Mar 4, 2021
Created on Mar 4, 2021

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.

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

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Sseitzfab
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing the relationship between engine displacement and horsepower. Each point represents a vehicle, with a tooltip displaying the car's name. The visualization leverages the Vega-Lite API to construct the mark and encoding specifications, while Vega and Vega-Lite handle rendering. The code loads the data using `d3.csv` from the `d3` library, applies custom styling through a configuration object, and uses the `vega-tooltip` handler for interactive hover details.

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

Fork of Vega-Lite API Template

This example displays a scatter plot of engine displacement against horsepower, with vehicle names accessible as tooltips. It uses the Vega-Lite API to construct the visualization declaratively, then renders it as SVG through Vega. The code loads automobile data from an external CSV file using `d3.csv`, and adapts the plot to the full viewport size. Configuration customizes axis and label styling for readability.

UUtsav Khatu
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

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.

Yyashbaddi
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from an auto-mpg CSV file, plotting engine displacement against horsepower with points colored by opacity to reveal density. It uses the Vega-Lite API to construct a scatterplot, with D3’s `csv` loader fetching the data. The chart is rendered into an SVG via Vega’s view, configured with `vl.markPoint`, `vl.x`, and `vl.y` encodings, while a custom config adjusts axis and label styling for readability. Tooltips display car names on hover.

SSeolha Lee
95% match