Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public

Last edited Dec 29, 2020

Created on Dec 29, 2020

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a genome dataset as a scatter plot, with each point positioned by chromosome position and protein accession identifier. The plot uses a minimal point mark with very small, fully opaque circles and no strokes, creating a dense field of data points. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and D3, and loads CSV data from a GitHub gist. Custom axis styling and tooltips are configured, with the visualization rendered as an SVG that fills the browser window.

Ggon araseon

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example creates a scatter plot of cereal data, positioning each cereal brand by its cups of cereal and calories. The visualization uses a Vega-Lite API built on the `vega-lite-api` library, with `vl.markCircle` and `vl.x`/`vl.y` encodings to map the quantitative fields, and a tooltip encoding showing the cereal name. Data is fetched as CSV from a remote URL using `d3.csv`. The rendering is handled by Vega-Lite and Vega, with tooltips provided through `vega-tooltip`. The chart is customized with a dark text color and simplified axes, and it auto-fits to the browser window size.

RRandyElkins

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

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of global food consumption data from the UCI Machine Learning Repository’s Auto MPG dataset, sourced via a Gist. The visualization encodes Animal Products and Recovered values as x- and y-position, with color by country and point size by weight. It applies a custom dark-colored axis and label configuration, and uses Vega-Lite’s `markCircle`, `encode` with `fieldQ`, and `scale` methods, all rendered through Vega’s SVG view with tooltips from Vega-Tooltip.

Bblueyjuice

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of food supply data, plotting Alcoholic Beverages against Recovered values for different countries, with tooltips revealing country names. Built with the Vega-Lite API, it uses `vl.markCircle` and `vl.encode` to define the chart. The code loads data from a CSV file via d3.csv, and renders the visualization using the Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries, with custom styling from a config object.

Bblueyjuice

81% match

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature data as a scatter plot, with each point representing a measurement over time. The visualization uses the Vega-Lite API to define the chart declaratively, with `vl.markCircle` and `vl.x().fieldT('timestamp')` mapping time to the x-axis and temperature to the y-axis. Tooltips display the name of each data point via `vl.tooltip().fieldN('name')`. The data comes from a CSV file loaded with `d3.csv` from a GitHub Gist, and the chart is rendered using Vega, Vega-Lite, and the Vega-Lite API, with custom styling applied through a config object.

Kkan qiu

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

80% match