Fork of Vega-Lite API Template horsepower

100%

Fork of Vega-Lite API Template horsepower

✓ Published0🌍 Public

Last edited Mar 10, 2021

Created on Mar 10, 2021

This visualization explores the relationship between vehicle origin, horsepower, and acceleration using the auto-mpg dataset. Built with the vega-lite-api framework alongside vega, vega-lite, d3.v5, and vega-tooltip, it renders a scatter plot where each car model appears as a circle positioned by origin and horsepower, with circle size encoding acceleration. The visualization uses interactive tooltips to display car names, configured with custom axis styling and a dark color scheme for readability. The chart is responsive, fitting to the window dimensions via the autosize fit setting.

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 visualizes the relationship between a vehicle's acceleration and its horsepower. Each point in the scatter plot represents a car model, with tooltips revealing the car's name. Built using Vega-Lite's API for declarative charting, the visualization loads auto-mpg.csv data via d3.csv. The chart is rendered to SVG with custom axis styling and configured to fit the browser window.

TT-Reiser

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, acceleration, weight, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot maps horsepower to the x-axis and acceleration to the y-axis, with point size encoding weight and color distinguishing origin, while tooltips reveal car names. It is built with the Vega-Lite API (via `vl.markCircle` and `vl.encode`), configured through `config.js`, and loaded using D3’s `csv` function. The rendering pipeline combines Vega, Vega-Lite, and vega-tooltip, with the chart filling the browser window.

Hhenry c

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration across 398 automobiles. Each point represents a vehicle, with tooltips displaying the car name on hover. The visualization uses the Vega-Lite API to construct a scatter plot, with D3’s csv loader fetching data from an external auto-mpg dataset. The chart dynamically sizes to the browser window and applies custom styling for larger axis labels and a dark color palette.

JJYK

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 example visualizes the relationship between horsepower and acceleration for automobiles from the auto-mpg dataset. A scatter plot encodes acceleration on the x-axis and horsepower on the y-axis, with semi-transparent points to reveal density. The visualization is built using the Vega-Lite API in conjunction with D3’s `csv` loader to fetch data. Vega and Vega-Lite handle rendering, while vega-tooltip provides interactive hover details. The code customizes axis styling and removes chart domains for a cleaner appearance.

AAlejo Cortiñaz

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

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

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between acceleration, horsepower, and origin for automobiles in the UCI Machine Learning Repository’s Auto MPG dataset. Each car is plotted as a semitransparent circle, with color encoding the country of origin and tooltips revealing the model name. Built using the Vega-Lite API, the visualization loads data via d3.csv, renders with Vega’s SVG output, and applies custom axis and label styling from a shared configuration. The chart resizes to fit the browser window and uses Vega Tooltip for interactive hover details.

AAmnaRizvi-S

91% match