Vega-Lite API Template Replica

100%

Vega-Lite API Template Replica

✓ Published0🌍 Public

Last edited Sep 25, 2024

Created on Sep 25, 2024

This example reproduces a Vega-Lite scatterplot using the Vega-Lite API to visualize automobile performance data from an auto-mpg CSV file. It plots miles per gallon against horsepower, colored by origin, with tooltips showing vehicle names. The chart renders as an SVG via Vega’s view system, using the vega-lite-api, vega, and vega-lite libraries. Custom configuration adjusts axis and label styling, while D3’s d3.csv loads the data.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Example

This example uses the Vega-Lite API to create a scatter plot of automobile data from a CSV file. The visualization encodes miles per gallon, horsepower, origin, and weight into position, color, and size, with a tooltip revealing the car name. It leverages vega-lite-api, vega, and vega-lite to generate an SVG chart, and d3.csv for data loading. The chart uses overlaid translucent circles and a custom config to improve label readability.

Bbakstorage00001

94% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

CCeciliaW888

94% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of automotive data, mapping engine horsepower against fuel efficiency (mpg), with points colored by country of origin and tooltips revealing car model names. It uses the Vega-Lite API to declaratively construct the visualization, while D3’s `csv` method loads the auto-mpg dataset. The vega-lite-api library registers vega and vega-lite, and the chart is rendered into an SVG via a vega view with tooltip support from vega-tooltip. The code customizes axis styles and appearance through a config object.

CCurran Kelleher

93% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

CCees Klap

93% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of automobile data from the Auto MPG dataset, showing miles per gallon versus horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API in JavaScript, which programmatically constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, and the chart fills the viewport with a fit autosize scheme. Tooltips are enabled via the Vega Tooltip handler, and custom axis and label styles are applied through a shared configuration object.

Ssamemurk21

93% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, encoding horsepower, weight, and origin. A circle mark uses quantitative axes for mpg and horsepower, color by origin, and size by weight. It features a tooltip for vehicle names. Built with the Vega-Lite API, it renders an SVG chart using vega-lite-api, vega, vega-lite, and d3.csv, with custom styling via a config object. The data comes from the UCI Machine Learning Repository Auto MPG dataset, loaded asynchronously and displayed with interactive tooltips.

CCurran Kelleher

93% match

Loading thumbnail…

Vega-Lite API

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon and horsepower, with tooltips displaying vehicle names. The visualization is built using the vega-lite-api library, which provides a fluent JavaScript interface for the Vega-Lite grammar. The code registers Vega and Vega-Lite, loads the auto-mpg dataset from a CSV file via d3.csv, and renders the plot as a scalable vector graphic. The visualization fills the entire browser window and employs a dark-themed configuration to enhance readability, with a low opacity mark size for improved depth perception.

KKelly Egan

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

LLeandro Miguel Narciso

93% match