Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published0🌍 Public
SSulav Bista
Last edited Jun 7, 2022
Created on Jun 7, 2022

This gallery example demonstrates six distinct data visualizations rendered sequentially on a single page, exploring relationships between automotive attributes like miles per gallon, horsepower, and weight from the auto-mpg dataset, alongside temperature trends over time from the week temperature SF dataset. The visualizations include scatter plots, line charts, and point plots, each customized with tooltips and color encoding. Built using the Vega-Lite API wrapper, the code dynamically retrieves CSV data via D3 and configures visual properties programmatically, with options for mark type, size, opacity, and axis scaling. The framework combines Vega, Vega-Lite, and Vega-Tooltip for interactive SVG rendering.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive data from an auto-mpg CSV dataset, plotting engine weight against horsepower with circles colored by origin and sized by miles per gallon. The code constructs the visualization using the Vega-Lite API, registering it with vega and vega-lite, and rendering as SVG via d3.dsv. A custom configuration adjusts axis labels and tick styling for readability, while d3.csv loads the remote dataset. Tooltips display car model names on hover using vega-tooltip.

PPUUDI
90% match
Loading thumbnail…

Vega-Lite API Template - Part 2

This example displays a scatter plot of automotive data, showing the relationship between miles per gallon and horsepower. Each circle encodes vehicle weight through color and engine displacement through size, with interactive tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which composes specifications programmatically, and renders through Vega with D3.js for data loading via `d3.csv`. The data originates from the classic auto-mpg dataset hosted as a GitHub gist.

JJohn Jeevasaeyan
90% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting origin on the x-axis, horsepower on the y-axis, and encoding mpg as circle size with tooltips showing car names. Built with the Vega-Lite API, it registers vega, vega-lite, and vega-tooltip in index.js, loads CSV data via d3.csv, and renders an interactive SVG chart configured with custom axis and label styling from config.js. The visualization updates dynamically to fit the browser window.

JJohn Lewis
90% match
Loading thumbnail…

Template Vega-Lite Api

This example demonstrates a scatter plot of automobile data, mapping miles per gallon, horsepower, weight, and origin using the Vega-Lite API. It shows how to declaratively build interactive visualizations with circle marks, color encoding, and tooltips. The code registers Vega, Vega-Lite, and vega-tooltip via `vl.register`, loads CSV data from a gist using d3.csv, and renders to an SVG view that fits the window. Appearance is customized with a configuration object, and the visualization auto-sizes with padding.

AAlan Santos
90% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automotive performance metrics from an auto-mpg dataset, plotting engine displacement against horsepower with points colored by model year and sized by vehicle weight. It uses the Vega-Lite API to declaratively specify the chart, with Vega and Vega-Lite handling rendering and the Vega Tooltip library providing interactive hover details. D3.js loads the CSV data, and custom configuration adjusts font sizes and axis styling for readability.

CCurran Kelleher
90% match
Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

GGang Chen
90% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the UCI Auto MPG dataset, plotting horsepower against miles per gallon with circle size encoding vehicle weight and color encoding country of origin. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries, configures a tooltip handler, and loads CSV data via d3.csv. It generates an interactive SVG scatter plot with custom axis styling, and the view auto-fits to the browser window dimensions.

EEFezerKW
90% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU
90% match