Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published10🌍 Public

Last edited Sep 2, 2019

Created on Sep 2, 2019

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

MMGamboa

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

95% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower, with points colored by country of origin. Built with the Vega-Lite API wrapper for JavaScript, it composes visualizations programmatically using methods like `vl.markPoint()`, `vl.x()`, `vl.y()`, and `vl.color()`. The code loads CSV data via `d3.csv`, applies a custom configuration for axis styling, and renders an interactive SVG view with tooltips through vega-tooltip.

SSam

95% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatterplot visualization of automobile data, plotting weight against horsepower for various car models. Each point is colored by country of origin and sized by miles per gallon. The visualization is built using the Vega-Lite API, a programmatic interface to Vega-Lite, which leverages the Vega rendering engine. The code imports data from a CSV file, configures axis styles and tooltips, and uses the vega-tooltip library to display car names on hover.

AALI Akbar SABZI

95% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting horsepower against weight while encoding country of origin by color and miles per gallon by point size. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render an SVG view. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is configured with custom axis styles and tooltips via vega-tooltip. The vega-lite-api’s method chaining defines the encoding and mark specifications.

AAnthonyAl-Rifai

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

94% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing the relationship between fuel efficiency (miles per gallon) and horsepower. Points are colored by region of origin, sized by vehicle weight, and include tooltips showing model names. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, then renders it with Vega 5 and D3 v5 for SVG output. Custom configuration and a Vega Tooltip handler enhance readability, while the chart automatically fits the viewport dimensions.

Rrvdv

94% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to build an interactive scatter plot using the Vega-Lite API wrapper for D3.js, visualizing the relationship between miles per gallon and horsepower for various car models. The visualization encodes fuel efficiency on the x-axis, engine power on the y-axis, country of origin as color, and vehicle weight as point size, with a tooltip showing the car name. It loads automobile dataset from a CSV file using D3’s `csv` function and renders the chart via the `vega-lite-api` library, which converts the specification into Vega for display. The custom styling comes from a `config` object that adjusts axis and label fonts.

SSushan Prajapati

94% match