Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jan 10, 2025

Created on Jan 10, 2025

This example uses the Vega-Lite API with D3 to create a scatter plot of auto-mpg data, plotting engine displacement against horsepower. Each point is a semi-transparent circle colored uniformly, with tooltips displaying the vehicle name. The visualization reads CSV data from a GitHub gist via D3’s `csv` function, and configures axes and label styling. It renders an SVG chart that fills the window using Vega-Lite’s `.width()` and `.height()` methods, with a custom tooltip handler from 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 uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of auto-mpg data, plotting engine displacement against horsepower for individual car models. Each point is semi-transparent to reveal overlapping density, and tooltips display the vehicle name on hover. The code loads CSV data via D3’s `csv` method, customizes axis and label styling through a Vega-Lite config object, and leverages the `vega-tooltip` Handler for interactive feedback.

Mmmohatra

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 data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with engine displacement mapped to the x-axis and horsepower to the y-axis, using a semi-transparent point mark for each vehicle. The visualization is built with the Vega-Lite API, which composes the specification and rendering through Vega and Vega-Lite, while D3 (d3.csv) fetches the auto-mpg dataset from a remote URL. The code also applies custom axis and label styling via a config object, and includes a Vega Tooltip handler for interactive hovering.

ZZakaria Salogo

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the vega-lite-api to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips displaying vehicle names. The visualization loads data from a CSV file using `d3.csv`, applies a custom dark theme through a Vega-Lite config object, and fills the viewport by setting chart width and height to the browser window dimensions. Interactive tooltips are enabled through vega-tooltip's `Handler`, and the chart renders as an SVG using D3 v5.

Ggatperdut

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, with a tooltip revealing the vehicle name when hovering over each point. Built with the Vega-Lite API, the visualization uses D3.js for data loading via `d3.csv`, pulling the auto-mpg dataset from a GitHub Gist. The code registers Vega and Vega-Lite, configures custom axis and label styling, and relies on `vl.markPoint` with encoded quantitative fields to generate the interactive SVG output.

FFlamur

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example depicts a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing car names. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to define visual encodings, while D3’s `csv` loads the auto-mpg dataset. The chart is rendered as an SVG via Vega and Vega-Lite, with custom axis and label styling from the config file. Tooltips are handled by the Vega Tooltip handler.

MMagarsa Gudeta

94% match