WICN Radio Now Playing

100%

WICN Radio Now Playing

✓ Published0🌍 Public

Last edited May 5, 2019

Created on Apr 29, 2019

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.

AI-generated description

An example embed from Spinitron Web Integration.

MIT Licensed

Similar vizzes

Loading thumbnail…

WICN Radio Now Playing

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.

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

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

58% match

Loading thumbnail…

wgs

This example displays the text “Hello D3 version 70” in the center of the browser window, rendered at an enormous font size of 13em. It demonstrates a minimal D3 v7 setup, where the `select` function from the d3 module targets the `<body>` element and sets its text content. The page loads D3 from a CDN and runs the JavaScript from a separate `bundle.js` file, highlighting a basic data-binding workflow.

Wwgs7909

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

55% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 100 songs on Spotify as a horizontal bar chart, showing the duration of each track. The code uses React hooks (useState, useEffect) to load and manage CSV data from a GitHub gist, while D3 v5 provides scales (scaleBand, scaleLinear) and axis generation. SVG rectangles render the bars, with x-axis ticks drawn manually. The chart only plots the first 20 songs from the dataset, with tempo mapped to the y-axis and duration to the x-axis.

99176371431

54% match

Loading thumbnail…

new

This example visualizes the number of Deezer fans for an artist’s albums as a bar chart, with buttons to reorder the bars by fan count or release date. It loads album data from the Wasabi API and renders animated SVG bars using d3.scaleBand and d3.scaleLinear, with transitions for updates. The chart includes an axis, rotated labels, and a tooltip that shows album title and fan count on hover. Sorting and filtering logic is implemented with custom JavaScript functions.

GGinnWG

54% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

53% match