Vega-Lite API Template

100%

Vega-Lite API Template

✓ Published0🌍 Public

Last edited Aug 2, 2020

Created on Jul 25, 2020

This visualization displays USAID transfers to Ukraine, with each circle representing a transaction and its size mapped to the amount in US dollars. The chart uses a logarithmic scale for the y-axis and color to distinguish transaction types. Built with the Vega-Lite API, it loads CSV data via D3’s `csv` function and renders through Vega-Lite’s `markCircle` encoding, with tooltips provided by the Vega Tooltip handler. The configuration customizes axis and label styling for improved readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes foreign assistance expenditures over time, plotting each record as a semi-transparent circle with fiscal year on the x-axis and constant dollar amount on the y-axis, colored by assistance objective and revealing tooltips on hover. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data from a GitHub repository via D3’s `csv` function, and uses `vl.markCircle` with `encode` mappings to configure the visualization. The code sets a fixed circle size, applies a custom dark-themed config, and renders the chart as SVG, fitting it to the full browser window.

Tt_tannenbaum@coloradocollege.edu

78% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

78% match

Loading thumbnail…

Vega-Lite API

A scatterplot maps foreign assistance spending across countries, plotting fiscal years against income group acronyms and coloring points by assistance objective. The visualization uses the Vega-Lite API to declaratively encode circle marks with size, opacity, and tooltip fields, while fetching CSV data from a GitHub repository via D3's `csv` loader. Custom configuration adjusts axis styles and theme colors, and the chart auto-fits to the browser window with an SVG renderer enhanced by Vega Tooltip.

Ssahildesignzz@gmail.com

78% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

75% match

Loading thumbnail…

Vega-Lite API Template testing

This visualization displays the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon on the x-axis and country of origin on the y-axis, with color encoding horsepower. Built with the Vega-Lite API, the example demonstrates a programmatic approach to declarative chart construction, where the visualization specification is defined using the `vl` object's methods like `markCircle` and `encode`. The code registers Vega, Vega-Lite, and the API with `vl.register`, loads CSV data via `d3.csv`, and renders an SVG that fits the full window. Custom axis styling and tooltips via `vega-tooltip` enhance readability.

AAndy Maes

74% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to visualize page visits over time, plotting each visit as a small black circle with timestamps on the x-axis and page names on the y-axis. The chart is rendered as an SVG via the View API, with data loaded asynchronously from a CSV file using d3.csv. The API is registered with vega and vega-lite, and a custom config adjusts axis and label styling for readability.

Ppalti

74% match

Loading thumbnail…

Vega-Lite API Template - Stacked Bar Chart

This stacked bar chart visualizes the distribution of religious affiliations across countries, using circle area to encode population size for each country-religion pair. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to generate an SVG rendering. Data is loaded asynchronously from a CSV file via d3.csv, and the chart includes interactive tooltips handled through the vega-tooltip library. The visualization employs custom configuration for axis styling and font sizing, with automatic resizing to fit the viewport dimensions.

Nnkohdatavis

74% match

Loading thumbnail…

Vega-Lite API Countries

This visualization displays population by country as a horizontal bar chart, with countries sorted by population. Built with Vega-Lite’s API and rendered via D3, it loads data from a CSV of 2015 population figures. The chart uses a dark theme, custom axis styling, and tooltips showing exact values. The code registers Vega-Lite with a tooltip handler and fits the chart to the window size using an autosize configuration. The design improves readability with larger fonts and muted colors, while the interactive tooltip provides detailed population numbers on hover.

MMarta

74% match