Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published1🌍 Public

Last edited Apr 1, 2021

Created on Mar 31, 2021

This scatter plot visualizes the relationship between vehicle weight, horsepower, and miles per gallon using the auto-mpg dataset. Semicircle marks represent individual car models, with color encoding weight and size encoding fuel efficiency, while tooltips display model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an interactive SVG visualization. The chart loads CSV data through d3.csv, applies custom axis and label styling from a configuration object, and automatically fits to the browser window dimensions.

AI-generated description

A visualization constructed using the vega-lite-api. Scatter Plots

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between fuel efficiency, horsepower, vehicle weight, and country of origin. Each circle’s position maps to miles per gallon and horsepower, while size encodes weight and color distinguishes origin, with tooltips revealing car names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip through D3’s CSV loader for data retrieval, then renders a fit-sized SVG view with custom styling for readability.

SSepehr Roshanpour

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, and vehicle weight, with color distinguishing the origin of each car. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding quantitative fields for x and y positions and weight for size, while tooltips display the vehicle name on hover. The code registers Vega, Vega-Lite, and the Vega-Lite API, loads data via d3.csv, and configures axis and label styling for readability. Rendered as an SVG that fills the window, the visualization supports interactive tooltips via Vega Tooltip.

AAnomatomato

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

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding vehicle weight as point size, origin as color, and miles per gallon against horsepower. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside the vega-tooltip Handler for hover interactions. The visualization uses a d3.csv fetch to load data, with a custom config adjusting axis styling and label fonts, and renders responsively to fit the full browser window.

DDataFeast_71

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

MMark Zwart

93% match