Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Test

✓ Published2🌍 Public
Mm1k3yp
Last edited Oct 20, 2020
Created on Oct 17, 2020

This example shows a scatterplot of car data, binned by acceleration and displacement, with point size encoding the count of vehicles in each bin. Built with the vega-lite-api library, it registers Vega, Vega-Lite, and a tooltip handler, then fetches CSV data from a GitHub repository using d3.csv. The visualization renders as an SVG, fills the browser window, and applies custom axis and label styling to improve readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Test

This example displays a scatterplot of automobile data, with engine displacement on the x-axis and horsepower on the y-axis, using semi-transparent points to reveal overlapping density. The visualization is built using the `vega-lite-api` and `vega` libraries, loading data from a CSV via `d3.csv`. It customizes axis and label styling through a `config` object and integrates a tooltip via `vega-tooltip`. The chart resizes to fit the browser window and renders as an SVG.

Ffreyr4
91% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create a scatterplot of automobile data from a CSV file, mapping acceleration and horsepower on the axes with tooltips for car names. The visualization is rendered as an SVG via the vega and vega-lite libraries, with vega-lite-api constructing the mark specification programmatically. The code loads data asynchronously using d3.csv, applies custom axis and label styling from a config object, and fits the chart to the viewport with a tooltip handler from vega-tooltip.

Llubin-liu
90% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower, with tooltips revealing car names on hover. Created using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders the visualization through Vega-Lite’s markPoint encoding. The code registers vega, vega-lite, and the vega-tooltip handler, applies a custom dark-themed configuration for axes and labels, and embeds the result in the browser window.

Fforcox43
90% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a Vega-Lite API template for creating a scatterplot visualization. It plots engine displacement against horsepower, with point size encoding the count of cars at each binned coordinate pair. The visualization uses the `vega-lite-api` library to programmatically build the specification, fetching automobile data from a CSV file via `d3.csv`. The rendered chart incorporates a custom config for axis styling and tooltips via `vega-tooltip`, and automatically fits to the window dimensions.

CCurran Kelleher
90% match
Loading thumbnail…

vega-lite-api

This example demonstrates a scatter plot of automotive data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing car model names. It is built using the vega-lite-api library, which provides a programmatic interface to Vega-Lite specifications. The code registers Vega and Vega-Lite, loads data from a CSV via d3.csv, and renders the visualization as an SVG. A custom configuration adjusts axis ticks and label styling.

Rriizevans
90% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates an interactive scatterplot of automobile data, plotting acceleration against horsepower with points colored by origin. Built using the Vega-Lite API, the visualization renders via SVG and includes tooltips displaying car names. The code loads data from a CSV using d3.csv, registers Vega-Lite with vega and vega-tooltip, and configures axes and label styling. The visualization auto-fits its container dimensions and uses a custom dark color scheme.

JJohn Patrick Banas
90% match
Loading thumbnail…

Vega-Lite API Template

This example showcases a scatter plot of automobile data, with each point representing a vehicle’s year and horsepower. It uses the Vega-Lite API to declaratively define the visualization, registering with Vega, Vega-Lite, and d3.csv for data loading. The plot is configured with custom axis styling and tooltips, rendered as an SVG that fills the window, and includes a semi-transparent point mark for overlapping data.

CCurran Kelleher
89% match
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing each vehicle’s name. It uses the Vega-Lite API to declaratively define the marks and encodings, registering with Vega and Vega-Lite for rendering as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while the chart’s size adapts to the browser window. Configuration customizes axis and label styling, and Vega-Tooltip provides interactive hover information.

Llaplantalaplanta
89% match