Ep18: Vega-Lite API

100%

Ep18: Vega-Lite API

✓ Published1🌍 Public

Last edited Oct 26, 2021

Created on Oct 26, 2021

This visualization displays automobile data from a CSV file, plotting engine origin, horsepower, weight, and miles per gallon as a scatter plot with circles of varying size and color. The example highlights the convenience of the Vega-Lite API (vl) for declarative charting, which constructs and renders the specification. It uses vega-lite and vega to compile the spec, d3.csv for data ingestion, and vega-tooltip to provide interactive tooltips on hover. The chart is configured to fit the browser window.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting engine displacement against horsepower with circles colored by origin and sized by weight. Tooltips reveal car names on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, loads data with d3.csv, and renders an SVG chart configured with custom axis styling and a dark color scheme. The code demonstrates programmatic chart construction through vl.markCircle and vl.encode methods.

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…

11. Vega-Lite API

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.

PPrashish Paudel

91% match

Loading thumbnail…

Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from a CSV file, showing engine displacement, horsepower, model year, and weight. Each circle represents a car, with position encoding displacement and horsepower, color encoding year, and size encoding weight. The code registers Vega, Vega-Lite, and the Vega-Lite API with tooltip support, loads data via `d3.csv`, and applies a custom config for axis and font styling. It demonstrates using `vl.markCircle`, `.encode`, and chaining methods to build an interactive chart programmatically.

AAmit Wadhwa

90% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automotive data from a CSV file, plotting engine horsepower against the origin of each vehicle. The visualization employs semi-transparent black circles to reveal overlapping points, with tooltips displaying car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches data via d3.csv, and applies a custom configuration for axis styling and label fonts. The chart dynamically fits the browser window using an autosize type of “fit” with padding.

CCurran Kelleher

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

90% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting horsepower against origin with points colored by year and labeled by name. It demonstrates the vega-lite-api library, which programmatically constructs Vega-Lite specifications using JavaScript method chaining. The code registers Vega, Vega-Lite, and the API with vega-tooltip, then renders an interactive SVG chart that adapts to the window size. Custom axis and label styles in config.js improve readability against a dark theme.

NNadir-Zenith

90% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with points colored by model year, sized by vehicle weight, and displaying car names on tooltip. The visualization is built using the Vega-Lite API, which programmatically constructs a specification that is rendered as SVG through Vega and Vega-Lite. The data is loaded asynchronously via D3's `csv` function, and the chart includes visual customization through a custom config object that adjusts axis and label styling.

CCurran Kelleher

90% match