Fork of music streaming

100%

Fork of music streaming

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

Six small multiples compare the popularity of music formats (CD, CD Single, Digital, Vinyl, Streaming) for selected years from 1980 to 2019, where each chart is a 6x5 grid of circles colored by format. Using React and D3 v7, the visualization transforms semicolon-delimited CSV data into pictograms, with animated circle growth, hover highlighting, and tooltips. The D3 scaleOrdinal and schemeTableau10 assign colors, while a join operation renders the circle glyphs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of music streaming (Matthias)

This interactive visualization displays music format sales trends from 2000 to 2019, showing how CD, vinyl, digital, and streaming revenues evolve over time. A streamgraph, built with d3.stack and stackOffsetSilhouette, centers the data vertically, with smooth areas colored via scaleOrdinal and schemeTableau10. Users adjust a birthday year input to place a red marker line, while hover effects highlight individual format layers. The chart loads semicolon-delimited CSV data in React, parses European decimal commas, and renders animated SVG areas with d3.area and curveMonotoneX.

SSteve Melnikoff

87% match

Loading thumbnail…

music streaming

This stacked area chart shows the evolution of music formats (CD, vinyl, digital, streaming, and CD singles) from 1973 to 2019, revealing the rise of digital and the resurgence of vinyl. Built with React and D3 v7, it uses `d3.stack` and `d3.area` to render the layers, with `d3.schemeTableau10` for colors and hover interactions to highlight individual formats. Data is parsed from a semicolon-delimited CSV through `d3.dsv`, converting European decimal commas. The chart animates on load with D3 transitions and includes interactive legend and tooltip elements for exploration.

Wwdn616@haw-hamburg.de

85% match

Loading thumbnail…

music streaming (Matthias)

An animated SVG streamgraph shows the rise and fall of five music formats—CD, CD Single, Digital, Vinyl, and Streaming—from 1973 to 2019. Built with D3.js `stackOffsetSilhouette`, `area`, and `curveMonotoneX`, the areas fade in sequentially on load. A red dashed line marks the user-selected birthday year, and hovering over a layer highlights it while dimming others. Data is parsed from a semicolon-delimited CSV with European decimal commas.

MMatthias Stahl

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

79% match

Loading thumbnail…

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

This example visualizes the top 20 songs from a Spotify dataset, encoding song tempo on the y-axis and duration on the x-axis with red bars. The React component loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map values to SVG rectangles. Axis ticks are rendered manually with mapped text and line elements, while d3.max computes the domain for the linear scale. The chart uses React hooks (useState, useEffect) to manage async data fetching and conditional rendering for the loading state.

99176371431

78% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

VVinayak Revankar

77% match

Loading thumbnail…

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

This example uses React and D3 to render a bar chart of the top 20 songs from a CSV dataset titled "top 100 songs on spotify." The visualization maps song tempo to the y-axis and duration to the x-axis, using red rectangles displayed as SVG marks within a 960x500 canvas. The code imports the `csv`, `scaleBand`, `scaleLinear`, and `max` functions from D3 v5 to load data and compute scales, while a custom row function parses the `TotalDeaths` field. Axes are drawn with manually mapped tick marks using `<line>` and `<text>` elements, and React's `useState` and `useEffect` handle asynchronous data loading.

99176371431

77% match

Loading thumbnail…

Music Format

This visualization shows the evolution of music format sales in the United States from 1973 to 2019, with each format appearing as a colored band that widens to represent its annual revenue. The chart uses a bar-on-bar layout where a white background mark for each year is overlaid with the format-specific segments. The visualization is built with React and D3 v5, employing `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scaling, while the `nest` and `sum` functions aggregate the raw sales data. The background image and SVG rendering create a stylized, poster-like presentation of the dataset.

Ddumbdataguy@gmail.com

77% match