Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
NNoah Onyejese
Last edited Aug 27, 2024
Created on Aug 27, 2024

This visualization displays the relationship between a vehicle's origin and its horsepower using a scatter plot with semi-transparent circular marks. The data comes from a CSV file fetched via `d3.csv`, with points sized and slightly transparent to reveal density. Built with the Vega-Lite API, the chart uses `vl.markCircle` and encodes the origin as a nominal field on the x-axis and horsepower as a quantitative field on the y-axis. The visualization integrates `vega-tooltip` for hover details and customizes axis and label styles through the `config` object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

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.

Ccaineosborne
93% match
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
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot. It renders points from the auto-mpg dataset, with each point colored by origin and positioned by horsepower. The visualization is built with the Vega-Lite API, which constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously via the d3.csv function, and tooltips display car names on hover. The code customizes the chart’s appearance through a config object, setting fonts and axis styles, and uses a dark color for text.

Sseanmdalrymple@protonmail.com
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 example visualizes the relationship between car origin and horsepower using a scatter plot of individual vehicle names as tooltips. It leverages the Vega-Lite API to declaratively define the chart, with D3.js handling CSV data loading from an online auto-mpg dataset. The visualization uses semi-transparent point marks with custom configuration for dark text and light gridlines, and it automatically sizes to fit the browser window. The code integrates Vega, Vega-Lite, and the Vega-Lite API library, with tooltip functionality provided by Vega Tooltip.

Vvarun-j312
92% 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
92% 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
91% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile fuel efficiency data, plotting each car’s origin against its horsepower as a scatter plot with semi-transparent circles and tooltips that reveal the vehicle’s name. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered as SVG through Vega. Data is loaded from a CSV file using d3’s `csv` function. The visualization auto-fits the window and customizes axis and label styling via a config object.

JJoseph Bermudez
91% match