Vega-Lite API

100%

✓ Published0🌍 Public

Last edited Jun 12, 2024

Created on Jun 12, 2024

Forked from Fork of Vega-Lite API Template

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.

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

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

83% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

83% match

Loading thumbnail…

Vega-Lite API Template

A scatter plot shows the relationship between pressure and acceleration, with tooltips revealing each point's name. Built with Vega-Lite API, it loads CSV data from a remote GitHub repository using d3.csv. The visualization uses Vega and Vega-Lite libraries, configures axes and label styling, and renders as a full-window SVG with interactive tooltips from vega-tooltip.

Jjacoyat08

82% match

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render a scatter-style point plot of institutional data, with countries on the x-axis and the number of experts on the y-axis. The points are colored and sized by expert count, and tooltips display institution names. It loads CSV data from a GitHub gist using d3.csv, configures visual appearance through a custom config object, and renders interactively with a tooltip handler. The visualization is built in a React-compatible setup using vega, vega-lite, and vega-lite-api libraries, with a responsive full-window layout.

Aashershah

82% match

Loading thumbnail…

Vega light API demo

This example demonstrates a scatter plot where each circle represents a data point, with its position mapped to the `jan` and `year_val` fields and color encoding the `districtid` category. The Vega Lite API, using `vl.markCircle` and `vl.encode`, builds the visualization declaratively from CSV data fetched via `d3.csv`. Rendered as an SVG through the Vega rendering engine, the plot includes tooltips for `state`, `districtid`, `year_val`, and `jan` values, and employs a custom configuration for styled axes and labels.

Aarunkumarv1530@gmail.com

81% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes earthquake data using a scatter plot, where the magnitude, depth, horizontal distance, year, and country of each earthquake are encoded through position, color, size, and tooltips. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite to render an SVG output. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and the chart is configured with custom axis and label styling for improved readability. The code also integrates vega-tooltip for interactive hover details.

VVarun Eranki

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

81% match