Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 17, 2021

Created on Aug 16, 2021

This example shows a scatter plot of automobile displacement against horsepower, colored semi-transparently to reveal data density, with tooltips displaying car names. It uses the Vega-Lite API to construct the visualization declaratively, while D3.js handles CSV loading from an external dataset via `d3.csv`. The chart is rendered as an SVG, with custom configuration for axis styling and typography. The code registers Vega-Lite with the Vega runtime and integrates Vega-Tooltip for 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 displays a scatter plot of automobile displacement versus horsepower, with each circle representing a car model and tooltips revealing the vehicle name. The visualization is built using the Vega-Lite API, which constructs a declarative specification rendered through Vega, and loads data from a CSV file containing auto-mpg statistics. The code registers Vega-Lite and Vega Tooltip for interactive hover effects, while custom configuration options adjust axis labels, typography, and the dark color palette. D3 is used only for fetching the dataset via its csv method.

DDeepanshu

97% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point representing a car model and tooltips revealing the vehicle name on hover. The visualization uses the Vega-Lite API to declaratively define the mark encoding and scales, while D3's `csv` function loads the auto-mpg dataset from a GitHub gist. The chart renders as a full-window SVG using Vega's renderer, with Vega-Tooltip handling interactive hover details. Custom axis and label styling from the `config` object improves readability against a clean background.

SSimon Davis

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data—engine displacement on the x-axis and horsepower on the y-axis—with tooltips displaying each vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with vega and vega-lite, and rendered as an SVG via vega-tooltip for interactive hover details. The data is loaded asynchronously from a CSV file using d3.csv. The chart resizes to fill the viewport, with custom axis and label styling defined in a separate config module.

Nnecat1

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point sized and colored to reveal density and labeled by car name via tooltips. The visualization is built using the Vega-Lite API (vl) combined with D3’s csv loader to fetch the auto-mpg dataset from a GitHub Gist. The code configures axis styling, a dark color scheme, and an interactive tooltip handler, then renders the chart to fill the browser window using Vega’s SVG renderer.

VVictor Henriquez

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a car model and its name shown as a tooltip on hover. The visualization uses the Vega-Lite API to define the chart specification programmatically, while D3’s `csv` function loads the dataset from a GitHub gist. The `vega` and `vega-lite` libraries handle rendering to SVG, and `vega-tooltip` provides interactive hover details. Custom axis styling and opacity settings are applied via the `config.js` file.

Mmisstong

96% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement versus horsepower, with a line mark summarizing the relationship. Tooltips display the vehicle name on hover. Built with the Vega-Lite API, it loads data from a CSV file using `d3.csv` and renders through Vega’s SVG backend. The visualization configures axis styles and disables the domain line for a cleaner look, while the chart size is set explicitly with `width`, `height`, and `autosize`. The code registers Vega-Lite with a Vega tooltip handler for interactive inspection.

AAhmed Mamdouh

95% match