Skip to main content
SimilarExport ZIP
100%

Fork1 of Vega-Lite API Template

✓ Published0🌍 Public
Ccremcircle@gmail.com
Last edited Nov 25, 2024
Created on Nov 17, 2024

This example visualizes a scatterplot of automobile characteristics, plotting displacement against horsepower, with tooltips revealing the car model name. Point size, fill, and opacity are fixed for a uniform cloud of semi-transparent dots. The visualization is built using the Vega-Lite API (vl) with a D3 CSV loading function for the auto-mpg dataset, and it renders through the Vega and Vega-Lite rendering pipeline, configured with custom axis and label styling.

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 shows a scatterplot of automobile displacement against horsepower, with tooltips displaying car model names. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite for rendering, while D3’s `csv` function loads the auto-mpg dataset. Point opacity is set to 0.1 to reveal overlapping data density. The plot resizes to fit the window and applies custom axis and label styling from a separate config file.

Sseanmdalrymple@protonmail.com
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind
94% 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
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, plotting engine displacement against horsepower from an auto-mpg CSV dataset. Each point represents a car model, with tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which composes a markPoint encoding with quantitative fields, and renders via Vega and Vega-Lite libraries. Custom configuration styles axes and labels, while `d3.csv` loads the external data source.

Ssd2beatles
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement against horsepower, with a tooltip revealing the vehicle name when hovering over each point. Built with the Vega-Lite API, the visualization uses D3.js for data loading via `d3.csv`, pulling the auto-mpg dataset from a GitHub Gist. The code registers Vega and Vega-Lite, configures custom axis and label styling, and relies on `vl.markPoint` with encoded quantitative fields to generate the interactive SVG output.

FFlamur
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with opacity to reveal overlapping points and tooltips displaying car names. The visualization is built using the Vega-Lite API, which compiles specifications to Vega, and renders with D3.js’s CSV loader to fetch the auto-mpg dataset. The code customizes axes and text styling via a config object, and integrates Vega-Tooltip for interactive hover details.

Ttjcocucci
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

DDaMei1993
94% 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
94% match