Skip to main content
SimilarExport ZIP
100%

music streaming (Matthias)

✓ Published1🌍 Public
MMatthias Stahl
Last edited Dec 5, 2025
Created on Dec 5, 2025
Forked from music streaming

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.

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
90% 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
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
82% match
Loading thumbnail…

HAW 5.12 Makeover Monday Music

A stylized line chart visualizes the rise and fall of CD and CD Single music sales from 1973 to 2019, aggregating yearly units into a single time series. The React-based visualization uses D3 v5 functions like `scaleLinear`, `extent`, and `max` for axes, while the `Marks` component employs `line` and `curveNatural` to draw smooth paths with circular points. Data is fetched as CSV and filtered by format, leveraging the Poppins font for a clean, modern aesthetic against muted axis colors.

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

Streamgraph 1.0

A streamgraph displays changes in five data series from 1996 to 2018, including happiness scores, mood disorder diagnoses, and suicide-related metrics. Using d3.stack with stackOffsetSilhouette, the code layers filled areas symmetrically around a central axis, with d3.scaleOrdinal and d3.schemeDark2 assigning colors. The SVG rendering includes a gridline-based x-axis, and interactive hover effects dim other areas while tooltips identify the selected series. Data comes from a CSV file loaded via d3.csv.

EEline000
74% 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
74% match
Loading thumbnail…

HAW Tidy Tuesday Music (Matthias)

This visualization shows the rise and fall of music format sales from 1973 to 2019, comparing CD and CD Single units sold in millions. Two colored lines trace annual sales across the chart, with a legend identifying each format. The code uses D3’s `scaleLinear`, `area`, `line`, and `ordinal` scales with `schemeCategory10` for colors. The `@curran/responsive-axes` library renders the axes. Data comes from embedded CSV text parsed with semicolon separators, grouped by format.

MMatthias Stahl
74% match
Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock
73% match