11. Vega-Lite API

100%

11. Vega-Lite API

✓ Published0🌍 Public

Last edited Mar 30, 2021

Created on Mar 30, 2021

This example demonstrates how to build an interactive scatter plot using the Vega-Lite API, visualizing automobile data from a CSV file. The plot displays fuel efficiency (mpg) on the x-axis and horsepower on the y-axis, with circles colored by country of origin, sized by horsepower, and showing tooltips with car names on hover. The code uses the `vl` API from `vega-lite-api` to construct the visualization declaratively, registers it with `vega` and `vega-lite`, and loads data via `d3.csv`. The chart fits the full window with a custom dark-themed configuration, using SVG rendering and the `vega-tooltip` handler.

AI-generated description

A visualization constructed using the vega-lite-api.

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

91% match

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

91% match

Loading thumbnail…

Vega-Lite API exploration

This visualization explores the Vega-Lite API by rendering an interactive scatter plot of automobile data from a CSV file, showing the relationship between miles per gallon and horsepower, colored by country of origin. The code uses the `vega-lite-api` library alongside `vega` and `vega-lite` to construct the chart declaratively, with `d3` for data loading. It renders as SVG, applies a custom configuration for axis styling, and includes tooltips via `vega-tooltip` to display car names on hover.

AAleksandra Timofejeva

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

This example demonstrates a scatterplot of automotive data, mapping the country of origin along the x-axis, horsepower on the y-axis, with weight mapped to color and miles per gallon mapped to point size. Built with the Vega-Lite API, it constructs the visualization declaratively using `vl.markCircle()`, `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()`. The chart loads data from a CSV via D3’s `csv()` and uses the Vega-Lite runtime to render interactively with tooltips.

Bboreilly26

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

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

91% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, visualizing relationships between fuel efficiency (mpg), engine power (horsepower), vehicle origin, and weight using five visual channels. Constructed with the Vega-Lite API and D3.js, it loads CSV data from a gist and renders an interactive plot through Vega’s SVG renderer. The code uses `vl.markCircle` and `vl.x().fieldQ` to map quantitative fields, with tooltips enabled via `vega-tooltip`. Styling configurations adjust axis tick colors and label fonts for readability.

RReinaFeng

91% match