Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 17, 2021

Created on Jan 17, 2021

This example visualizes the relationship between vehicle horsepower, fuel efficiency (mpg), weight, and acceleration for a dataset of automobiles. It encodes weight as color and acceleration as circle size, with tooltips displaying car names. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, with data loaded asynchronously via D3’s `csv` function from an external URL. The chart is rendered in SVG using vega-tooltip for interactivity, while custom configuration adjusts axis appearance.

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

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using data from an auto-mpg dataset loaded via D3’s `csv` function. It renders a scatterplot where each point’s position encodes mpg and horsepower, color encodes origin, and size encodes weight, with tooltips showing car names. The visualization is built declaratively with the Vega-Lite API (`vl.markPoint`, `vl.encode`), registered with Vega and Vega-Lite, and rendered in SVG with a customized dark theme and axis styling.

JJenna Hamza

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile acceleration, horsepower, and weight using an interactive scatter plot. Data from the UCI Auto MPG dataset is fetched as CSV via d3.csv, then rendered as circles over a dark-themed axis. The visualization leverages the Vega-Lite API (vl) with a custom config to stylize fonts and colors, while Vega-Tooltip provides hover details. The chart is dynamically sized to fit the browser window using window.innerWidth and window.innerHeight.

SSam Hege

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight, horsepower, and fuel efficiency in a scatter plot, using a dataset of automobile specifications. The plot encodes weight on both the x-axis and color scale, while horsepower appears on the y-axis and miles per gallon determines point size. Built with the Vega-Lite API wrapped in D3.js, it renders as an SVG and includes interactive tooltips showing each car’s name. The code demonstrates programmatic chart construction through `vl.markCircle` and encoding methods, with a custom configuration adjusting axis styling and label fonts.

Wwzhang88

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

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

93% match

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle attributes from the auto-mpg dataset, plotting weight against horsepower while using the size and color of circles to encode miles per gallon and country of origin. The visualization is constructed using the Vega-Lite API, which builds a declarative specification rendered through D3 and Vega-Lite libraries. It draws scatterplot circles with custom styling, reads CSV data asynchronously via D3’s csv loader, and includes interactive tooltips that display car names when hovered.

EEugenio2192

92% match