Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
PPaweł Oleniak
Last edited Oct 31, 2021
Created on Oct 30, 2021

This example shows a scatterplot of automobile data, plotting horsepower against model year, with points colored by vehicle weight and labeled interactively via tooltips. The visualization is constructed declaratively using the Vega-Lite API (vl) and rendered with Vega, while D3 is used to load the CSV dataset from a GitHub gist. The code applies custom configuration for axis styling and tooltip appearance, then dynamically sizes the chart to the full window. It demonstrates integrating Vega-Lite’s high-level grammar with D3’s data fetching capabilities.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Auto MPG dataset, where each point represents a car, with horsepower on both axes, color encoding region of origin, and size encoding vehicle weight. Hovering reveals the car name via tooltips. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating custom axis styling and a dark color scheme from the configuration file. Data is loaded asynchronously via D3’s CSV parser, and the chart is displayed across the full window with automatic resizing.

PPaweł Oleniak
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data from 1980, plotting miles per gallon against horsepower, with each point colored by origin and sized by weight. The visualization is built using the Vega-Lite API (vl) with a custom configuration that removes axis domains and enlarges label and title fonts. Since it is a fork of an API template, it loads data from a CSV file using `d3.csv`, then renders the marks with `vl.markCircle`, encoding position, color, size, and tooltip fields directly in `viz.js`. The view resizes to the window and includes a tooltip handler from Vega Tooltip.

PPiotr Paszek
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, encoding vehicle weight on the x-axis, horsepower on the y-axis, and miles per gallon as both point size and color. The visualization is constructed programmatically using the Vega-Lite API, which builds a specification rendered as an SVG. The code imports data via D3’s CSV loader and registers Vega-Lite with custom tooltip handling from the Vega-Tooltip library. Axis styling is customized through a configuration object to improve readability.

TTyler Durham
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automotive data from the auto-mpg.csv dataset, plotting horsepower against year with a tooltip displaying vehicle names. The visualization is built using the Vega-Lite API, which programmatically constructs a scatter plot with semi-transparent points. The code leverages vega-lite-api, vega-lite, and vega-tooltip to render the chart as SVG, while D3.js fetches and parses the CSV data. Custom axis and label styling are applied via a shared configuration object to improve readability across the full browser window.

JJay M Gonzalez
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point sized and colored to reveal density and labeled by car name via tooltips. The visualization is built using the Vega-Lite API (vl) combined with D3’s csv loader to fetch the auto-mpg dataset from a GitHub Gist. The code configures axis styling, a dark color scheme, and an interactive tooltip handler, then renders the chart to fill the browser window using Vega’s SVG renderer.

VVictor Henriquez
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automotive data, showing the relationship between engine displacement and horsepower, with point size mapping to vehicle weight and color encoding the model year. A tooltip reveals the car name for each point. The visualization is built using the `vega-lite-api` library, which generates Vega-Lite specifications that are rendered via the Vega engine. Data is loaded from a CSV file using D3's `csv` function, and the chart is rendered as an SVG with a custom tooltip handler from `vega-tooltip`.

GGerasimos Katsagannis
93% match