Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jan 22, 2022

Created on Jan 15, 2022

This example visualizes biodiversity records from Taiwan’s TaiBIF dataset, plotting counties against taxonomic classes as a scatterplot with semi-transparent circular marks. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to encode county, class, and a categorical field labeled “under the sea” onto the x-, y-, and color channels. Data is loaded asynchronously via d3.csv from a raw GitHub URL, with custom appearance configured through a Vega-Lite config object. The chart is rendered as SVG and fills the browser viewport, with a tooltip handler attached for interactivity.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of population by country using a scatter plot, with points colored by percentage and positioned along a categorical country axis and quantitative population axis. It loads data from the UCI Auto MPG dataset via a Gist, though the code references CSS named colors and population fields. Built with the Vega-Lite API, the visualization registers Vega and Vega-Lite, configures an SVG renderer with tooltips, and applies a custom dark theme for improved readability. The chart uses a point mark with reduced opacity and a zero-less scale to highlight population differences.

Gguitmonk-1290

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

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render an interactive scatter plot of population density data, plotting population in 2021 against density per square mile for various countries. The data is loaded from a CSV file via D3’s `csv` function, and the plot encodes country as color with tooltips showing country names. The code registers Vega, Vega-Lite, and the Vega-Lite API, applies a custom dark theme through a config object, and sizes the SVG renderer to fit the window using `autosize`. The mark-point specification sets point size and opacity, though tooltip fields are limited to the country name.

Ppfoulley

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

MManick Vennimalai

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

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot-like visualization of user data, with points positioned along categorical axes for country and status, using an arc mark with a fill and low opacity. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses a tooltip handler for interaction. Data is fetched asynchronously via D3's `json` function from a local server endpoint, and the chart is configured with custom axis styles and dark label colors.

VVahe Abovyan

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the distribution of religious affiliations across countries using a circular scatter plot, where each circle’s position encodes country and religion, and its size represents population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG renderer. Data is loaded asynchronously from a remote CSV via D3’s `csv` method, then passed to a `vl.markCircle()` encoding that maps fields to axes, size, and tooltips. The view is configured to fit the window dimensions, and a custom config adjusts axis styling and font sizes. The Vega Tooltip handler enables interactive hover details.

CCHOI SEUNG HYUN

75% match