Skip to main content
SimilarExport ZIP
100%

Mindestlohn Schieberegler

✓ Published1🌍 Public
Wwdn616@haw-hamburg.de
Last edited Jan 30, 2026
Created on Jan 23, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen
67% match
Loading thumbnail…

Interactive coloured bar chart

This interactive bar chart displays salary statistics (median, average, lowest, and highest) for a selected country, with each metric rendered as a distinctly colored bar. A dropdown menu lets the user choose a country, triggering a re-render of the SVG visualization. The chart uses D3.js v7 to load data from a CSV, create scales, draw bars, and manage the tooltip and hover effects, while React handles the overall application structure. Bar colors come from D3’s `schemeCategory10`, and the tooltip appears on mouseover to show the numeric value.

LLayaMyadam@my.unt.edu
66% match
Loading thumbnail…

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.

Wwdn616@haw-hamburg.de
66% match
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
64% match
Loading thumbnail…

Fork of Verdienststrukturerhebung 2018

A dumbbell plot compares median gross hourly earnings for women and men across Austrian occupational groups, with each pair connected by a line showing the percentage difference. Circles mark female and male values in contrasting colors, while tooltips reveal exact euro amounts on hover. The visualization uses React with D3’s `scaleLinear`, `scalePoint`, and `extent` to position marks, and reads data from a CSV via `d3.csv`. It includes custom axis components and static text labels for the before/after comparison.

Bblueyjuice
64% match
Loading thumbnail…

Lets draw a bar chart

A horizontal bar chart displays employee salaries as bars animated from zero width to their final values. Data comes from a CSV file listing names and monthly salaries, converted to annual amounts. The visualization uses d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom. SVG rectangles are rendered in React with d3.v5, featuring interactive tooltips that appear on mousemove, highlighting bars via CSS class changes, and entrance transitions using transition().duration(300).

Yyogichoudhary
64% 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
64% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example visualizes the distribution of a €12.99 Spotify subscription price across taxes, streaming services, labels, and artists. It presents a flow diagram where nodes represent revenue categories, with curved Bézier paths drawn on a Canvas element showing monetary values and percentages. The React component calculates financial figures and uses the Canvas 2D API with `bezierCurveTo`, `roundRect`, and custom text rendering to display the breakdown. Hover interactions track nodes through React state, while line thickness corresponds to the proportional value of each revenue stream.

Mmaya.cylkowski@gmail.com
63% match