My Vega-Lite API Template

100%

My Vega-Lite API Template

✓ Published1🌍 Public

Last edited Sep 27, 2022

Created on Sep 27, 2022

This interactive scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for a set of automobiles loaded asynchronously from a CSV via D3’s `csv` function. Rendered with the Vega-Lite API, the chart encodes continuous fields on x- and y-axes, categorical origin on color, and weight on point size, with tooltips revealing car names. The visualization adapts to the window size and uses a custom dark theme defined in a shared config object, with D3 version 5 and Vega-Lite v4.0.0-beta.1.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, using the Vega-Lite API abstraction over the Vega and Vega-Lite libraries. The visualization encodes vehicle weight and horsepower on the x and y axes, with color mapping to origin and point size reflecting miles per gallon. Data is loaded asynchronously from a CSV via d3’s csv method. The API’s programmatic interface constructs the mark specification, while a custom config enhances readability.

Ccoltonjcox92

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

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

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for classic automobiles from the Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js as its rendering framework, building interactive marks with circles sized by weight and colored by country of origin. Data loads asynchronously from a CSV file fetched via D3's CSV parser. The chart automatically fits the browser window and includes a tooltip showing each car's name, powered by the Vega Tooltip handler.

Xxychen0612.cs09@nycu.edu.tw

91% match

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for automobiles, with each point colored by origin and sized by horsepower. The visualization uses the Vega-Lite API in JavaScript to construct a circle mark with quantitative x and y encodings, along with color, size, and tooltip encodings. It loads data from a CSV file via `d3.csv` and renders as an SVG using the vega-lite-api library. Appearance is customized through a config file that adjusts axis and label styling for readability.

Bbryce-walsh

91% match