Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 29, 2022

Created on Jan 20, 2022

This example presents four interactive Vega-Lite visualizations in a two-by-two grid, covering distinct datasets: auto MPG characteristics, San Francisco weekly temperatures, country populations, and global religious demographics. The visualizations, rendered as SVG, use scatter plots, area charts, bar charts, and bubble charts to explore relationships and distributions across the data. The code uses the Vega-Lite API (with vega and vega-lite) to programmatically construct specifications, D3 for data loading via CSV, and Vega Tooltip for hover details. Data originates from the UCI Machine Learning Repository and multiple Gists, with styling customized through a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

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.

SSulav Bista

88% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example uses the Vega-Lite API to render an interactive scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses both color (by origin) and size (by weight) to reveal patterns among vehicles. Built with vega-lite-api, it includes tooltips showing car names and configures axis styles for readability. The code loads data via d3.csv, renders the chart as SVG, and supports hover interactions through vega-tooltip.

Ggayatrisridhar

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

KKeyvan Rezaei

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization maps miles per gallon to the x-axis, horsepower to the y-axis, and encodes origin as color while weight drives circle size. Tooltips display car names on hover. The code registers Vega, Vega-Lite, and Vega-Tooltip through `vl.register`, then loads CSV data asynchronously with `d3.csv`. Rendering uses a fit-to-window SVG view with custom axis and label styling from a shared config object.

CCaleb Crum

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to build an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, sourced via a Gist. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and colors points by origin, while point size reflects vehicle weight. It renders as a full-window SVG using the vega-lite-api library, with tooltips generated through vega-tooltip. Custom configuration in config.js adjusts axis and label styling for readability. The code loads data asynchronously via d3.csv, applies a dark theme, and fits the chart to the viewport dimensions.

MMatt Woods

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to display Auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circle marks. Each circle’s size encodes weight, while color groups vehicles by origin, and hovering reveals car names via tooltips. The code registers Vega, Vega-Lite, and the Vega-Lite API, renders SVG output, and uses a custom config to style axes and labels. Data is fetched asynchronously with d3.csv, and the visualization adapts to the window dimensions.

NNioh

87% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset, showing a scatter plot of vehicle counts by country. The visualization uses Vega-Lite API to create circles with tooltips, sorted by country on the x-axis and number of vehicles on the y-axis. The code integrates vega, vega-lite, and d3.csv for data loading, with a custom config to style axis labels and titles. It renders SVG via the vega view, fitting the visualization to the full window size.

Bblackbottt

87% match