Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
SSahaj Singh
Last edited Feb 17, 2022
Created on Feb 5, 2022

This example visualizes the relationship between vehicle weight, horsepower, and country of origin using the auto-mpg dataset, loaded via `d3.csv` and rendered with Vega-Lite through the vega-lite-api. It displays circles scaled by weight, colored by origin, with tooltips showing car names. The chart uses a custom configuration for axis styling and readability, and is rendered as an SVG that fills the browser window.

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 fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and tooltip handler.

SSteven Pearce
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, vehicle weight, and country of origin using a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circle size encodes weight, color encodes origin, and tooltips reveal vehicle names. The visualization is built using the Vega-Lite API registered with vega-lite and vega, configured for a clean SVG renderer. Data is loaded asynchronously via d3.csv from a GitHub Gist, while the custom config.js adjusts font sizes and axis tick colors for readability.

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

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between fuel efficiency, horsepower, weight, and country of origin for various car models. A circle mark encodes weight as size, origin as color, and includes tooltips showing car names. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, with D3’s `csv` function loading the remote data file. The code configures axes and styling through a custom config object, and renders the chart as an SVG using the `vega-tooltip` handler.

Ppavan0828
93% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset, loaded via a CSV from a GitHub Gist. It uses a scatter plot with circles sized by weight and colored by origin, rendered through the Vega-Lite API and Vega-Lite’s declarative specification. The code registers Vega and Vega-Lite with `vl.register`, configures axes and tooltips via `vega-tooltip`, and sets the visualization to fit the browser window. Data is fetched asynchronously using `d3.csv`.

Sseitzfab
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization explores the relationship between a car’s country of origin, its horsepower, weight, and miles per gallon, using a bubble chart built with the vega-lite-api. Each circle’s x-axis position encodes origin, y-axis horsepower, color encodes weight, and size encodes mpg, with tooltips revealing the car’s name. The code loads auto-mpg data via d3.csv, applies custom axis and label styling, and renders the SVG using vega-lite, vega, and a vega-tooltip handler.

Ssurikmeetr
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between vehicle weight and horsepower. Each circle’s position encodes these quantitative fields, while color represents the country of origin and size encodes miles per gallon (mpg). Hovering reveals the car’s name via a tooltip. The visualization is built with the vega-lite-api, which wraps Vega-Lite and Vega, and uses d3.csv to load the auto-mpg dataset. The code configures axes, scales, and styling through the vega-lite-api’s fluent method chaining.

GGuus Lammers
93% match