Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Jan 12, 2022

Created on Jan 11, 2022

This circular scatterplot visualizes the relationship between a car’s origin and its horsepower, using data from a CSV file of automobile specifications. Each semi-transparent dot marks a single vehicle, with the transparency building up in dense areas to reveal clusters. The visualization is generated programmatically through the Vega-Lite API, which translates the declarative spec into Vega for rendering. The `vl.markCircle` method defines the marks, while `.encode` maps the categorical `origin` field to the x-axis and the quantitative `horsepower` field to the y-axis. A toolkit is configured for enhanced axis styling and readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Bbreadcircle

94% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between a car's origin and its horsepower using a circle scatter plot. It is built with the Vega-Lite API, which constructs a declarative specification that is rendered to SVG. The visualization fetches auto-mpg data from a CSV file using d3.csv, defines circle marks with custom opacity and size, and maps origin to the x-axis and horsepower to the y-axis. The API registers with Vega-Lite and Vega, and includes an interactive tooltip displaying the car's name.

Nnkohdatavis

92% 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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from an auto-mpg dataset, plotting horsepower against origin of manufacture. Each car is represented as a semi-transparent circular mark, with tooltips revealing the vehicle’s name on hover. Built with the Vega-Lite API, the example uses `vl.markCircle`, `vl.x().fieldN()`, and `vl.y().fieldQ()` to encode categorical and quantitative fields. The code registers Vega and Vega-Lite with `vl.register`, loads CSV data via `d3.csv`, and applies a custom config to adjust axis and label appearance.

JJonas Carvalho

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between a car's origin country and its horsepower, using the auto-mpg dataset. Each point is rendered as a large, semi-transparent circle, with size and opacity set to 9000 and 0.02 respectively. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite, and retrieves data from a CSV URL via d3.csv. The plot is fitted to the window size and includes a tooltip that displays the car's name on hover.

SSofffos

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance and origin using a scatter plot generated with the Vega-Lite API, where each circle’s position encodes miles per gallon and horsepower, while color indicates the car’s origin and size encodes weight. Tooltips display the car name on hover. The code loads a CSV dataset via `d3.csv`, constructs the chart with `vl.markCircle` and its encoding helpers, then renders it to canvas using Vega’s `view` with a custom config for axis styling and label fonts. The visualization fills the window and updates responsively.

MMatty Danbury

91% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays the relationship between car origin and horsepower, with each car represented as a circular mark and hover tooltips revealing the model name. The code uses the Vega-Lite API to define the scatterplot encoding, while D3’s `csv` function loads the auto-mpg dataset from a GitHub gist. The visualization renders as SVG with custom axis styling and tooltip handling via `vega-tooltip`, and it fits to the full window using autosize.

Vvigneswaran009

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for automobiles, with each point colored by origin and sized by horsepower. The visualization uses the Vega-Lite API in JavaScript to construct a circle mark with quantitative x and y encodings, along with color, size, and tooltip encodings. It loads data from a CSV file via `d3.csv` and renders as an SVG using the vega-lite-api library. Appearance is customized through a config file that adjusts axis and label styling for readability.

Bbryce-walsh

90% match