Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This visualization uses a Vega-Lite area mark to plot a scatter-like distribution of automobile data, displaying engine displacement against horsepower, with tooltips revealing car model names. The entire view fills the browser window, using a semitransparent fill and custom axis styling from a dark-themed config. It loads data from a CSV of auto-mpg records via D3’s `csv` method, and builds the chart with the `vega-lite-api` library, registering Vega, Vega-Lite, and a tooltip handler for interactive popups.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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 visualization displays a scatterplot of automobile data, plotting engine displacement on the x-axis against horsepower on the y-axis, with tooltips revealing car names. It uses the Vega-Lite API to construct the chart, configured with custom axis styling and a dark color scheme. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted automotive dataset, then rendered through Vega and Vega-Lite, with tooltips provided by the `vega-tooltip` handler. The visualization fills the browser window, applying responsive sizing and opacity to convey point density.

AAbhivadan

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, plotting engine displacement against horsepower, with each point representing a vehicle model. The visualization uses the Vega-Lite API template, which leverages the vega-lite-api library to construct the chart programmatically. The code loads data from a CSV file using d3's csv function, then renders the marks using Vega and Vega-Lite with SVG output. Tooltips are enabled via Vega-Tooltip, and the visualization dynamically sizes itself to fit the browser window.

JJay

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3

94% 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 visualization displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a vehicle. The plot uses semi-transparent, filled circles to show overlapping data density and includes hover tooltips revealing car model names. It is built using the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and loads the auto-mpg dataset via D3’s `csv` function. The visualization renders as an SVG, with custom configuration for axis styling and tooltip text.

AAlNahean

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Ffjvoris

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot maps automotive displacement against horsepower, with tooltips revealing vehicle names on hover. Built on the Vega-Lite API, the visualization fetches the auto-mpg.csv dataset via D3’s `csv` loader and renders marks through Vega’s SVG view, customized with larger axis labels and a dark color palette. The chart resizes to fit the viewport.

BBjoernujjwb

94% match