Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Bbreadcircle
Last edited Mar 25, 2022
Created on Mar 25, 2022

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

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 scatterplot of automobile data, plotting horsepower against displacement for individual car models. Each point is rendered as a semi-transparent circle, with tooltips revealing the vehicle name on hover. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications and render SVG output. Data is loaded asynchronously from a remote CSV file using d3.csv, while the vega-tooltip Handler enables interactive tooltips. The chart dynamically fits its dimensions to the browser window through an autosize configuration.

Ggayatrisridhar
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automotive data maps acceleration on the x-axis against horsepower on the y-axis, with points colored by origin and sized by weight. A tooltip reveals car names on hover. The visualization is created programmatically using the Vega-Lite API (vl), which compiles specifications to Vega and renders via SVG. It loads CSV data from a remote URL using d3.csv, applies custom axis and label styling from a separate config module, and fits the chart to the viewport.

Nnicklaus-roy
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatterplot of automobile data, plotting engine displacement against horsepower for individual car models. Each point is rendered with low opacity to reveal density patterns, and hovering reveals the car’s name via tooltip. Built with the Vega-Lite API, it uses `vl.markPoint()` and `vl.encode()` to define the chart, with data loaded asynchronously via `d3.csv()` from a GitHub-hosted dataset. The code integrates Vega, Vega-Lite, and Vega-Tooltip, customizing axis styling through the `config` object.

Ffjvoris
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Sseitzfab
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile horsepower against cylinder count, with tooltips revealing car names on hover. It uses the Vega-Lite API to construct the chart specification, while d3.csv loads the auto-mpg dataset from a GitHub gist. The rendering pipeline combines Vega, Vega-Lite, and d3.v5, with vega-tooltip providing interactive hover details. Custom configuration adjusts axis styling and label fonts for improved readability across the full-screen SVG output.

MMark Lam
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, showing the relationship between engine displacement and horsepower. Each circle represents a car model, with a tooltip revealing the vehicle’s name on hover. The visualization is built using the Vega-Lite API, with data loaded from a CSV via `d3.csv`. The code registers Vega and Vega-Lite, configures axis styles for readability, and renders the plot to fill the browser window using `vl.markCircle` and `vl.x().fieldQ`.

Pparshwa30122002@gmail.com
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting each car’s origin against its horsepower as a scatterplot with semi-transparent circles and tooltips showing the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with D3’s `csv` function for data loading and Vega-Tooltip for interactive hover details. The code registers Vega and Vega-Lite, then renders the visualization in an SVG view, with custom axis and label styling applied via a shared configuration object.

LLaura Brown
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between automobile horsepower, fuel efficiency, and origin using the Vega-Lite API, rendered with D3.js. Data from the auto-mpg.csv dataset is fetched via `d3.csv` and displayed as semi-transparent circles, where the x-axis encodes origin, the y-axis encodes horsepower, color distinguishes origin, and size maps to miles per gallon. The code builds the visualization by chaining `vl.markCircle()` and encoding methods, then applies a custom config for axes and typography, with tooltips enabled through the Vega-Tooltip handler.

CCatalina Vajiac
94% match