Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 13, 2021

Created on Sep 12, 2021

A Spotify listening data dashboard plots daily listening patterns as circles, with the x-axis encoding the day of the month, the y-axis showing the network, and circle size reflecting like counts. Color indicates sentiment, with tooltips revealing exact dates. Built using Vega-Lite API for declarative chart specification, it loads CSV data via D3’s `csv` function and renders through VEGA and Vega-Lite libraries with a custom configuration for styling.

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

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

YYodae Lim

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes Fitbit activity data as a scatterplot, with each circle representing an activity record. The x-axis plots the date and the y-axis plots activity type, while color distinguishes the data’s origin and tooltips reveal the activity name. Built with the Vega-Lite API, it loads CSV data via d3.csv from a GitHub repository and configures axis styling and tooltip handlers through vega-tooltip, rendering as SVG with automatic sizing to fit the viewport.

IIshana

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

79% match

Loading thumbnail…

Vega-Lite API Template for Spotify Music Attributes

This scatterplot visualizes Spotify music attributes, plotting liveness scores against a binary target variable to examine their correlation. The visualization uses the Vega-Lite API within a D3 v5 framework, loading data from a TSV file hosted on GitHub. The chart encodes the target attribute on the x-axis, liveness on the y-axis, and track names as tooltips. Data comes from the Spotify Music Attributes dataset on Kaggle, with appearance customization handled through a shared config object that adjusts font sizes and axis styling.

DdaojunL

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a donut chart visualization of Auto MPG dataset records, showing the distribution of composers in the data. The visualization uses Vega-Lite API to construct an arc mark with theta encoding and count aggregation, styled with a pastel color scheme and semi-transparency. Data is loaded asynchronously via D3’s CSV parser from a GitHub Gist, and the chart is rendered with an SVG renderer configured through Vega-Lite, with tooltips enabled via Vega-Tooltip’s handler.

VVilmer98

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization displays Seattle Public Library checkouts by creator and checkout count, using a scatter plot with translucent circles to reveal density patterns in the data. The code loads CSV data from a GitHub gist via d3.csv, then renders the chart through the Vega-Lite API, which wraps Vega and Vega-Lite specifications. Custom axis styling and larger fonts are applied via a config object, while the vega-tooltip handler enables interactive hover details. The view fills the entire window with an SVG renderer.

Ccorinna-fab

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot uses the Vega-Lite API to visualize stars from the Auto MPG dataset, plotting their distance from the sun against their magnitude. Each star is represented by a circular mark, with color encoding the star type and size reflecting its stellar class. The visualization loads data via `d3.csv`, configures axis styles and tooltips through the `vega-lite-api` and `vega-tooltip` Handler, and renders dynamically to the full browser window using `vl.markCircle().encode()`.

MMarta

78% match