wdn616@haw-hamburg.de

pyramide

This visualization is a horizontal bar chart that presents the distribution of musical artists by their monthly listener counts, showing the sharp inequality between top performers and the vast majority. The chart implements a hybrid x-axis scale that switches from linear to logarithmic scaling, with a prominent gold line marking the equivalent of a minimum wage threshold. The visualization uses D3's scaleBand for the categorical y-axis and a custom hybrid scale, with bars rendered as SVG rectangles filled with a dot pattern.

Fork of NUR BARS

Mindestlohn Schieberegler

A slider visualizes the income from music streams compared to Germany's minimum wage. Dragging the handle adjusts the annual stream count, updating a grey track with a green progress bar and displaying the resulting income in euros. A bar chart below shows the percentage of the target income reached. The React app uses D3 v7's `scaleLinear` and `drag` to manage the interactive slider, while SVG elements animate via D3 transitions.

Fork of Mindestlohn Schieberegler

SANKEY TEST

This Sankey diagram visualizes the breakdown of a 10.99€ financial flow, tracing how the total splits into VAT and net amounts, then branches through streaming royalties, publishing rights, and performer shares. Rendered as a React component using SVG, it defines nodes and flows as typed data structures with manual positioning. The visualization uses custom path generators to create smooth Bezier curves for both main vertical flows and side branches, with flow width scaled proportionally to value.

Fork of Sankey Preisverteilung

A vertical Sankey diagram visualizes the distribution of subscription revenue from an "Abopreis" (subscription price) source to a single "Künstler" (artist) target. The flow is represented with a single curved path connecting the two circular nodes, with its width proportional to the value. Built with React and D3 v7, the visualization loads CSV data, positions nodes at the center top and bottom, and renders the link using SVG paths. Interactive hover effects enlarge nodes and adjust link opacity.

Fork of Vanilla D3 Vibecoding Template

This visualization depicts the extreme inequality of Spotify’s artist payouts, showing that 99% of artists earn less than $5,000 annually. Using React with SVG rendering, it plots dots per income bracket, scaling their horizontal position by artist count. The dot generator applies a seeded pseudo-random algorithm for placement, while chart annotations use SVG paths to draw brackets, percentages, and a highlight arrow for the dominant low-income group.

NUR BARS

The visualization compares Spotify Premium subscription prices before and after the 2024/2025 price increase across four plan tiers (Student, Individual, Duo, Family). Two grouped bars per model show the price change, rendered as an SVG using D3 v7’s `scaleBand` and `scaleLinear` scales. Hovering over a bar reveals a tooltip with the exact price via D3 event handlers. The chart is built with React and D3’s `select` and `axisBottom`/`axisLeft` APIs.

NUR PLATTEN

This dark-themed dashboard displays Spotify Premium subscription price increases from 2024 to 2025 across four plans: Student, Individual, Duo, and Family. Each plan is shown in a card with the absolute euro increase and the percentage change. The React app maps over hardcoded data, computing the difference between “vorher” and “nachher” values, and renders the results in a responsive CSS grid. Styling uses Tailwind-like classes, while no D3 charting functions are invoked.

Fork of Fork of CV: Loading CSV Data

This example visualizes Spotify Premium subscription price increases from 2024 to 2025, comparing "vorher" and "nachher" prices for four plan types using grouped bar charts rendered as SVG. The chart uses D3 v7 scales, axes, and grid lines within a React framework, with interactive tooltips on hover showing specific prices. Data is hardcoded, and a dark theme with green accents highlights the comparisons, supported by summary statistic cards displaying absolute and percentage increases for each plan.

SPOTIFY DATA

A dot-density plot visualizes global income inequality by clustering colored dots for each salary bracket, from under $5,000 to over $5 million, with the width and density of each cluster reflecting population size. The visualization uses matplotlib's `scatter` with jittered positions, a dark theme with high-contrast green dots, and a yellow dashed `axhline` marking the minimum wage threshold, accompanied by a German-language annotation. Data comes from hardcoded income category counts in a configuration file, with a Python script generating the plot via NumPy's random uniform distribution for jitter.

spotify pictogram

This visualization displays a collection of black circles arranged in a pictogram of the Spotify logo, with a single white circle highlighted upon selection. It uses React to manage state and a D3 `scaleLinear` to map the logo’s coordinate system to the container size. The `renderCircles.js` file binds data to circles, updating fill, stroke, and click interactions, while `useContainerDimensions` leverages a `ResizeObserver` to adapt the SVG dimensions responsively.

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.

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.

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.

HAW 5.12 Makeover Monday Music

This visualization displays a week of hourly temperature measurements in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The line is drawn using D3’s `line()` generator with a natural curve, while scales are created via `scaleTime` and `scaleLinear`. The React-based interface loads data from a CSV file using D3’s `csv` parser, and renders axes and labels as SVG elements. The styling uses the Poppins font and teal-colored strokes for the mark.

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.

HAW test 5.12

Five circles, positioned proportionally from a CSV file, are plotted on a responsive SVG canvas. Clicking a circle changes its fill to white with a black stroke while others remain solid black. Built with React and d3.v7, the visualization uses `scaleLinear` to map x and y coordinates from data space to the container's pixel dimensions, dynamically resizing via a `ResizeObserver`. The `join` API efficiently updates circle attributes and click handlers.