Skip to main content
SimilarExport ZIP
100%

music streaming

✓ Published2🌍 Public
Wwdn616@haw-hamburg.de
Last edited Dec 5, 2025
Created on Dec 5, 2025

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.

AI-generated description

Music Format Evolution Chart

An interactive stacked area chart visualizing the evolution of music formats from 1973 to 2019.

Features

  • 📊 Stacked Area Chart: Visualizes multiple music formats over time
  • 🎨 Interactive Visualization: Hover over areas to highlight specific formats
  • 📱 Responsive Design: Adapts to different screen sizes
  • ✨ Smooth Animations: Animated area transitions on load
  • 🎯 Legend Interaction: Click legend items to focus on specific formats
  • 🌈 Color-coded: Each format has a distinct color for easy identification

Data

The chart displays data from data.csv showing units sold for various music formats (CD, CD Single, etc.) from 1973 to 2019.

Technologies

  • React 19
  • D3.js 7
  • CSS3

How to Use

  1. The chart automatically loads and parses the CSV data
  2. Hover over areas to highlight specific formats
  3. Click on legend items to focus on that format
  4. The chart is fully responsive and resizes with the window

Data Format

The CSV file should include:

  • Format: Music format type (e.g., CD, CD Single)
  • Year: Year of data
  • Value (Actual): Units sold (European decimal format with comma)
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 (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
86% match
Loading thumbnail…

Fork of music streaming

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.

Wwdn616@haw-hamburg.de
85% match
Loading thumbnail…

RIAA Music Format Historical Trends

This streamgraph visualizes the changing revenue of music formats in the US from 1973 to 2019, using data from the RIAA. The chart, built with React and D3.js, stacks area layers for formats like CD, Cassette, and Streaming, with automatic label placement via `d3-area-label`. The visualization applies a blur to the data before stacking with a wiggle offset, and employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scales. An x-axis with grid lines is rendered using `d3.axisBottom`.

CCurran Kelleher
80% 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
80% match
Loading thumbnail…

HAW Tidy Tuesday Music

This multi-line chart by Finn-Luka visualizes the rise and fall of CD unit sales from 1983 to 2019, alongside the emergence of on-demand streaming from 2010 onward. It shows the explosive growth of CDs peaking around 1,588 million units in 2000, followed by a steady decline as digital music took over. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.line` to render the trends, with `@curran/responsive-axes` handling the axis layout. The data is parsed from an embedded CSV, combining "CD Single" into "CD" and renaming streaming formats for clarity.

Wwdn616@haw-hamburg.de
77% match
Loading thumbnail…

Activity 7.1 - Area chart

This area chart visualizes the total Spotify streams of the most streamed songs aggregated by their release year, showing how streaming totals trend across decades. The chart uses a steel-blue filled path generated by `d3.area()` with linear scales for both axes. Data is loaded from a remote CSV file using `d3.csv`, then processed with `d3.rollups` to sum streams per year before sorting chronologically. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with the SVG output containing numbered year ticks and labeled axis titles.

Ggsdontineni518@gmail.com
75% match
Loading thumbnail…

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Nnikki81140
75% match