Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 8, 2023

Created on Oct 8, 2023

This visualization displays the relationship between vehicle weight, horsepower, and model name from the auto-mpg dataset. The Vega-Lite API constructs a circle plot where weight determines both the x-axis position and the color and size of each mark, while horsepower is mapped to the y-axis. The visualization uses a custom dark theme with styled guide labels and titles to improve readability, and renders interactively with tooltips displaying the car model name.

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 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 visualization shows the relationship between vehicle weight, horsepower, and origin for cars in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot encodes weight on the x-axis and horsepower on the y-axis, with circles colored by origin and sized by weight. Tooltips reveal the car name. The chart is built using the Vega-Lite API with d3.v5 for data fetching, rendered as an SVG, and customized with a dark axis and label configuration.

JJosh Gilfillan

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

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

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency (mpg) in the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, positioned by mpg on the x-axis and horsepower on the y-axis, with color encoding the country of origin and size encoding weight. The visualization is built using the vega-lite-api library in conjunction with Vega-Lite and Vega, while d3.csv loads the remote dataset. A custom config object adjusts axis styling, and the chart automatically fits the browser window with a tooltip displaying the car model name.

RROU

92% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower, miles per gallon, and vehicle weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A scatter plot uses circle marks, with color encoding vehicle origin and size encoding weight, while tooltips reveal the car model name. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite, and includes a custom configuration to style axes and labels. Data is loaded asynchronously with d3.csv, and the chart canvas fills the browser window.

SShishiraRudrabhatla

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower for vehicles from the Auto MPG dataset, encoding weight as point size, origin as color, and car model name as a tooltip. It shows a scatter plot with a custom dark theme and enlarged axis labels. The visualization is built declaratively using the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, while the data is fetched and parsed using D3’s `csv` function.

II'm Ronald

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower. Each dot represents a car, with color encoding the region of origin, size encoding cylinder count, and a tooltip displaying the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and rendered as an SVG via D3. Data loading relies on D3’s `csv` method, while custom axis and label styling are applied through a shared config object.

JJean David

91% match