Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 24, 2021

Created on May 24, 2021

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.

AI-generated description

Working with vega-lite template

MIT Licensed

Similar vizzes

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

94% match

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

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

93% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between miles per gallon, horsepower, weight, and country of origin. It uses the Vega-Lite API to build the visualization declaratively, with the `vl.markCircle` and `vl.encode` methods specifying the visual encodings. The data is loaded from a CSV file via `d3.csv`, and the plot is rendered to an SVG canvas using the Vega rendering engine. The template also configures chart styling through a custom `config` object and enables interactive tooltips with the Vega Tooltip handler.

MMarta

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

93% match

Loading thumbnail…

Vega-Lite API Template - Part 2

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

JJohn Jeevasaeyan

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for various car models, with color encoded by region of origin and point size representing vehicle weight. Hovering reveals the car's name via tooltip. Built using the Vega-Lite API, the visualization programmatically constructs the chart through method chaining in `viz.js`, then renders it with Vega and Vega-Lite. Data is loaded asynchronously from a CSV in `getData.js` using `d3.csv`, and custom axis and label styling is applied from `config.js`.

GGunjan Paul

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