Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
BBenLeathers
Last edited May 10, 2023
Created on May 10, 2023

This example uses the Vega-Lite API to render an interactive scatter plot of college football data sourced from a CSV file. Each circle plots a coordinator’s average recruiting points against their average points per game, with circle size encoding opponent points allowed and color distinguishing coordinators. The visualization reads data via d3.csv, configures axes and tooltips through vega-lite-api, and renders with a custom dark theme. Hover tooltips reveal the coordinator name using Vega Tooltip.

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…

Fork of Vega-Lite API Template

This visualization uses Vega-Lite API to plot a scatterplot of college football team data, mapping four-year average recruiting points on the x-axis and average points per game on the y-axis. Circle size encodes scoring average, and tooltips reveal team names. It loads CSV data from a GitHub gist via d3.csv, configures chart appearance in a separate config object, and renders interactively with vega-tooltip. The Vega-Lite chart is built programmatically through vl.markPoint, vl.x, vl.y, and vl.r encodings, then rendered as SVG.

BBenLeathers
92% match
Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a scatter plot of MLB team batting data, with each circle representing a team and positioned by its XBA value. The visualization uses the Vega-Lite API with D3 to fetch CSV data from a GitHub Gist, and uses Vega Tooltip for interactive hover details. The chart is configured with custom axis styling and font sizes, and the circular marks are colored by team name with opacity for readability.

GGregS1290
84% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, sourced via a Gist CSV. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, colors points by origin, scales size by weight, and adds tooltips for vehicle names. It registers Vega, Vega-Lite, and the vega-lite-api library, then loads the data with d3.csv, applies a custom dark-themed config for axis styling, and fits the chart to the window dimensions.

SShaneBowen1
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to create a scatter plot of auto-mpg data, plotting engine displacement against horsepower. Each point is a semi-transparent circle colored uniformly, with tooltips displaying the vehicle name. The visualization reads CSV data from a GitHub gist via D3’s `csv` function, and configures axes and label styling. It renders an SVG chart that fills the window using Vega-Lite’s `.width()` and `.height()` methods, with a custom tooltip handler from Vega-Tooltip.

Iiffath.namira@csedge.org
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from a CSV file, plotting engine displacement against horsepower with a tooltip that displays the car name. The code registers Vega, Vega-Lite, and Vega-Lite API with a tooltip handler, loads the data via d3.csv, and applies custom styling through a config object. It demonstrates a programmatic workflow where the chart specification, data loading, and rendering are separated across modules, culminating in a full-screen, interactive visualization.

Aaymen0023
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the vega-lite-api to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips displaying vehicle names. The visualization loads data from a CSV file using `d3.csv`, applies a custom dark theme through a Vega-Lite config object, and fills the viewport by setting chart width and height to the browser window dimensions. Interactive tooltips are enabled through vega-tooltip's `Handler`, and the chart renders as an SVG using D3 v5.

Ggatperdut
83% match