Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting 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 demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, encoding vehicle weight on the x-axis, horsepower on the y-axis, and miles per gallon as both point size and color. The visualization is constructed programmatically using the Vega-Lite API, which builds a specification rendered as an SVG. The code imports data via D3’s CSV loader and registers Vega-Lite with custom tooltip handling from the Vega-Tooltip library. Axis styling is customized through a configuration object to improve readability.

TTyler Durham

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dducan114

94% match

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 displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

YYing-Liu21

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays an interactive scatter plot of vehicle data, mapping miles per gallon against horsepower, with points colored by region of origin and sized according to vehicle weight, along with tooltips revealing car model names. Built using the Vega-Lite API, the code registers vega, vega-lite, and vega-tooltip, then renders a circle mark with quantitative and nominal encodings. Data is loaded asynchronously via `d3.csv` from the UCI Auto MPG dataset hosted on GitHub, and the chart fills the browser window with a custom configuration for axis styling.

Llokeshp-0813

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each vehicle as a circle based on its origin, horsepower, and weight. The chart uses color to encode weight and circle size to represent miles per gallon, with tooltips showing vehicle names. Built with the Vega-Lite API and D3.js, it loads data asynchronously and renders an interactive scatter plot that fits the full window. The visualization configures axes and label styles, and integrates Vega tooltip for hover details.

Nnayak-sarvesh12

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset, mapping fuel efficiency against horsepower with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to compile specifications, and uses D3’s `csv` loader to fetch the data. The chart is rendered as an SVG, with a custom configuration for axes and labels, and includes an interactive tooltip showing the vehicle name via the Vega Tooltip library.

Mmagnushaese

94% match