Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 12, 2021

Created on Apr 12, 2021

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.

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 shows the relationship between engine displacement and horsepower for classic automobiles, using a scatter plot with semi-transparent points and tooltips that reveal car model names. It uses the Vega-Lite API to declare the visualization, with D3’s `csv` function loading the data from a GitHub gist. The view renders as SVG, sized to the full window, and applies custom axis and label styling from a separate configuration module. Vega-Tooltip provides interactive hover details.

IIlyas Filali

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

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

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

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for automobile models using the Vega-Lite API, with tooltips displaying car names on hover. It renders a scatter plot with semi-transparent points on a full-screen canvas, configured for a clean dark-on-light aesthetic. The code loads data from a CSV file via D3’s `csv` function, then builds the visualization declaratively with `vl.markPoint` and `vl.x().fieldQ()`, wiring everything together through Vega-Lite and Vega’s runtime, including custom tooltip handling via the `Handler` from `vega-tooltip`.

GGyromighty

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

GGregS1290

95% match

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

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