WICN Radio Now Playing

100%

WICN Radio Now Playing

✓ Published2🌍 Public

Last edited May 5, 2019

Created on Apr 29, 2019

This example displays a live “now playing” widget for WICN Radio, showing current track information, album cover art, and a media player. The visualization pulls real-time data from the Spinitron API via the `spinitron-js-widget` script, embedded through an HTML `div` with configuration attributes. It renders a self-contained interface with metadata and time details, using Spinitron’s web integration—no custom JavaScript libraries or canvas rendering are involved. The widget handles all display logic internally, presenting up to 19 recent entries in a compact, shareable format.

AI-generated description

An example embed from Spinitron Web Integration.

MIT Licensed

Similar vizzes

Loading thumbnail…

WICN Radio Now Playing

This example embeds a Spinitron web widget to display the currently playing tracks on WICN Radio, showing up to six recent songs. The page loads the Spinitron JavaScript API from their static server, which renders the now-playing data into an HTML element using the station ID "WICN." The D3 library is included in the page, though the widget itself handles the visualization, while the accompanying stylesheet sets the base font size for the display.

CCurran Kelleher

91% match

Loading thumbnail…

WICN Radio Now Playing IFrame

This example shows a live "Now Playing" widget from WICN Radio, embedded in a full-screen iframe. The iframe loads the Spinitron web integration widget, displaying the current track, recent plays, sharing options, album cover art, and a player. The page uses minimal HTML and CSS to position the iframe fixed to the viewport. The code does not rely on JavaScript APIs or libraries; it directly embeds the remote Spinitron widget.

CCurran Kelleher

87% match

Loading thumbnail…

Syncing Echo Nest analysis to Spotify playback

This example shows a real-time visualization of the Echo Nest analysis for the currently playing Spotify track, syncing audio features to the music’s playback position. It displays the active segment’s start time, duration, confidence, loudness, pitch, and timbre, while also indicating when the playhead crosses bar and beat boundaries. The code fetches track metadata via the Echo Nest API and retrieves the full audio analysis, then uses a polling function to update the display as the player advances. It relies on jQuery’s `$.getJSON` for API calls and DOM manipulation, with no additional visualization libraries.

11wheel

58% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

56% match

Loading thumbnail…

Interactive Billboard Top 50 Alluvial plot

This interactive alluvial plot visualizes the Billboard Top 50 charts by showing how songs, artists, and genres flow across weeks. Users can hover over individual ribbons to see a tooltip displaying the song, performer, and genre, and a slider allows scrubbing through time to filter the displayed data. The visualization is built with D3.js v6 and React, using SVG for rendering and D3’s time parsing and scales to map the temporal data. The underlying dataset comes from a TSV source containing weekly chart positions and Spotify genre classifications.

Jjw4169

53% match

Loading thumbnail…

Graph Devinsa Radio

This chart displays the results of a principal component analysis as a scatterplot, with each point representing a radio station positioned along two principal axes from a CSV file. The visualization uses D3 v5 to render an SVG with axes and grid lines, and supports interactive zooming and panning via the `d3.zoom` extension. Users can toggle the display of station name labels on or off using radio buttons, which control the text opacity. Points change color on hover, and the chart updates dynamically during zoom transitions.

GGuillaume-Delbarre

53% match

Loading thumbnail…

music vis

This interactive scatterplot maps Spotify track attributes against one another, letting users select any two numeric columns from the dataset to compare on the x- and y-axes. The visualization updates dynamically through D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, rendering circles positioned by the chosen metrics. The code assigns CSS classes to each point based on a track genre field, although the dataset’s example rows lack a genre column, so the legend and color-coding rely on that optional data. The SVG plot includes labeled axes and a title reflecting the current variable pair.

Aa15923647

53% match

Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Gginnyching

53% match