Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
IInnocent Ernest
Last edited Sep 5, 2022
Created on Sep 5, 2022

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.

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