Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
MMathieuSchaff
Last edited May 24, 2022
Created on May 24, 2022

This visualization displays a scatter plot of automobile data, mapping displacement against horsepower, with points colored by country of origin and tooltips revealing model names. The example uses the Vega-Lite API (via `vega-lite-api`) to declaratively construct the chart, while D3's `csv` method loads the auto-mpg dataset. Rendering is handled by Vega and Vega-Lite with SVG output, and the tooltip functionality comes from the `vega-tooltip` Handler. Axis styling and color scheme are customized through a JSON config object, which is merged into the visualization's default appearance.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with each point representing a car model and tooltips revealing the vehicle name on hover. The visualization uses the Vega-Lite API to declaratively define the mark encoding and scales, while D3's `csv` function loads the auto-mpg dataset from a GitHub gist. The chart renders as a full-window SVG using Vega's renderer, with Vega-Tooltip handling interactive hover details. Custom axis and label styling from the `config` object improves readability against a clean background.

SSimon Davis
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

RReymond Mesuga
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization plots automobile displacement against horsepower using a scatterplot of individual points, with tooltips revealing the car model name on hover. It leverages the Vega-Lite API for declarative chart specification, backed by Vega and Vega-Lite rendering engines, while D3’s `csv` loader fetches the auto-mpg dataset from a GitHub gist. The code customizes axis styling and global appearance through a config object, and the chart’s size dynamically adapts to the browser window dimensions.

SSteinarV-design
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Ssuserocc
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a vehicle. The plot uses semi-transparent, filled circles to show overlapping data density and includes hover tooltips revealing car model names. It is built using the Vega-Lite API, which wraps the Vega and Vega-Lite libraries, and loads the auto-mpg dataset via D3’s `csv` function. The visualization renders as an SVG, with custom configuration for axis styling and tooltip text.

AAlNahean
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point representing a car model and its name shown as a tooltip on hover. The visualization uses the Vega-Lite API to define the chart specification programmatically, while D3’s `csv` function loads the dataset from a GitHub gist. The `vega` and `vega-lite` libraries handle rendering to SVG, and `vega-tooltip` provides interactive hover details. Custom axis styling and opacity settings are applied via the `config.js` file.

Mmisstong
94% match