Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Apr 20, 2021

Created on Apr 20, 2021

A scatter plot visualizes terrorist reports from April 2003, encoded by date and threat level, with points colored by agency (CIA) and tooltips revealing detailed notes. The visualization is built using the Vega-Lite API, with `vl.markCircle` for marks and `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` encodings. Data is loaded from a CSV file via `d3.csv`, and interactive tooltips are provided through vega-tooltip. The chart resizes to the window and uses a custom dark theme defined in `config.js`.

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

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

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

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of social media data, mapping the day and month on the x-axis, network on the y-axis, sentiment as color, and likes as point size. It uses the vega-lite-api to construct the chart, which is then rendered with vega and vega-lite, with vega-tooltip providing interactivity. The data is loaded as CSV from a gist using d3.csv, and the chart automatically fits the browser window.

HHiImSebastian

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

81% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a circle-mark scatter plot of religious affiliations across countries, with circle size encoding population and tooltips revealing exact values. The data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the actual CSV loaded through d3.csv is a top-5 religions per country dataset. The code registers Vega-Lite with Vega, applies a custom dark theme via the config object, and renders the chart as an SVG that fits the full window. The visualization is interactive, with tooltips handled through vega-tooltip.

MMd. Jakir Hosen

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

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes COVID-19 vaccination data, plotting total vaccinations against people vaccinated as a scatter plot with tooltips showing location names. Built with the Vega-Lite API and D3.js, it registers Vega and Vega-Lite, loads CSV data via `d3.csv`, and renders an interactive SVG chart that fills the viewport. The visualization applies a custom configuration for axis styling and tooltip formatting, using a dark color scheme for labels and titles.

GGerasimos Katsagannis

81% match