Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Oct 26, 2021

Created on Oct 26, 2021

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.

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 fork of a Vega-Lite API template displays a scatter plot of quantitative fields `gap` and `depth` from a CSV file fetched via d3’s `csv` function, with points colored by the categorical `place` field and a tooltip showing that same attribute. The visualization uses the Vega-Lite API (`vl.markCircle` and `vl.x().fieldQ()`) to define the mark encoding, then renders it as an SVG via Vega-Lite, with the `vega-tooltip` handler attached. The chart’s width and height are set to fill the browser window, and axis styling is customized through a config object for readability.

YYenTingWu

86% match

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

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circles encode car origin on the x-axis, horsepower on the y-axis, weight as color, and miles per gallon as size, with tooltips revealing car names. The visualization uses the vega-lite-api library to construct the specification programmatically, registering Vega and Vega-Lite for rendering in SVG. The code loads CSV data via d3.csv, applies custom axis and label styling from config.js, and adapts to the full window size.

NNick Jefford-Horn

85% 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

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

BBenLeathers

84% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

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

84% match