Skip to main content
SimilarExport ZIP
100%

Scatterplot Zahlungsbereitschaft

• Draft3🔗 Unlisted
Mmaya.cylkowski@gmail.com
Last edited Jan 28, 2026
Created on Jan 27, 2026

This visualization presents survey responses about how much users would pay monthly for a music streaming subscription, displayed as a bubble chart overlaid on a y-axis of willingness to pay in euros. The React app loads CSV data and uses D3’s `forceSimulation`, `forceX`, `forceY`, and `forceCollide` to position bubbles in rows by amount, with circle sizes scaled to fit the viewport. Users can submit their own amount, which adds a bubble and enables clicking or hovering any bubble to reveal the respondent’s reasoning in an info panel.

AI-generated description

Music Streaming Survey Visualization

Interactive visualization of survey data about maximum amounts users would pay for music streaming services.

Features

  • Bubble Chart: Visualizes survey responses grouped by maximum amount (€)
  • Interactive: Click on bubbles to see the reasoning behind each response
  • Responsive: Adapts to different screen sizes

Data

The visualization uses data.csv containing:

  • Maximaler_Betrag_Euro: Maximum amount in euros the respondent would pay
  • Begruendung: Reasoning/justification for the amount

Technologies

  • React 19
  • D3.js 7
  • CSS3
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatterplot Zahlungsbereitschaft

This interactive scatterplot visualizes survey responses about how much people would pay for a music streaming subscription, with each bubble representing a participant’s maximum monthly amount in euros. Users can enter their own value to add a purple bubble to the chart. Clicking or hovering over any bubble reveals the participant’s written justification in a side panel. Built with React and D3 v7, the visualization uses `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to arrange overlapping bubbles, while SVG circles are rendered dynamically based on container dimensions.

Mmaya.cylkowski@gmail.com
94% match
Loading thumbnail…

Fork of Scatterplot Zahlungsbereitschaft

A scatterplot shows survey responses for how much participants would pay for a music streaming subscription, with each bubble positioned along a y-axis of euro amounts and grouped horizontally by identical values. Users enter their own amount, which adds a purple bubble to the chart and reveals an info panel displaying the reasoning behind any hovered or clicked response. Built with React and D3 v7, the visualization uses `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to resolve bubble overlaps, while SVG renders the chart, axis ticks, and interactive elements.

Mmaya.cylkowski@gmail.com
93% match
Loading thumbnail…

Scatterplot Zahlungsbereitschaft & Preise

This interactive scatterplot visualizes survey responses on willingness to pay for music streaming subscriptions, with each bubble representing an individual's maximum price in euros. Users can submit their own answer, which appears as a distinct purple bubble, and click or hover over bubbles to view accompanying text justifications. The visualization uses d3.forceSimulation with forceX, forceY, and forceCollide to position overlapping bubbles efficiently. A y-axis with tick marks shows the price scale, while blue circles represent participants' estimates of Spotify's actual price. The implementation uses React with D3 v7 and renders SVG elements.

Mmaya.cylkowski@gmail.com
91% match
Loading thumbnail…

Scatterplot Zahlungsbereitschaft & Preise /

This interactive scatterplot visualizes survey responses on willingness to pay for music streaming subscriptions, comparing each person's stated maximum price with their estimate of the market price. Green bubbles represent actual responses, while yellow bubbles show the corresponding estimations. Users can submit their own value and estimation, which appear as purple points for direct comparison. The visualization uses React with D3.js v7, employing `forceSimulation`, `forceCollide`, and `forceX`/`forceY` for bubble positioning, while horizontal reference lines mark current Spotify subscription tiers.

Mmaya.cylkowski@gmail.com
90% match
Loading thumbnail…

Musikstreaming Scatterplot Abopreise

A scatterplot of survey responses visualizes music streaming subscription prices, comparing stated willingness to pay with independent estimates of fair prices. Green bubbles represent reported amounts respondents pay, while yellow bubbles represent their estimated fair prices. Users can enter their own values through forms, which are added as purple bubbles. The visualization uses D3’s `forceSimulation` for bubble positioning, `scaleLinear` for the y-axis, and React/D3 integration via `select` and SVG rendering.

Mmaya.cylkowski@gmail.com
87% match
Loading thumbnail…

Zahlungsbereitschaft

This visualization presents the results of a survey on willingness to pay for Spotify, showing the distribution of 203 participants across six price categories via a bar chart. The bars are color-coded by price range, and hovering over a bar reveals a tooltip with the exact count and percentage. The chart also includes value labels on each bar, a legend, and statistical summaries such as the average willingness to pay. The code uses D3.js v7 for chart rendering with `scaleBand` and `scaleLinear` for axes, while React manages the tooltip state and container dimensions via `useContainerDimensions`.

Mmaya.cylkowski@gmail.com
82% match
Loading thumbnail…

Plot

Two mirrored bubble charts compare survey responses about music streaming: the left column shows maximum acceptable monthly price, while the right shows estimated fair price. Each bubble represents one respondent, sized by price value and positioned along a shared y-axis; clicking a bubble highlights the paired response across columns. The visualization uses React to manage state and `d3.forceSimulation` for collision detection, with `d3.scaleLinear` and `d3.scaleSqrt` mapping values to vertical position and radius, and includes value labels rendered as SVG text.

Mmaya.cylkowski@gmail.com
82% match
Loading thumbnail…

Plot Zahlungsbereitschaft und Schätzung

This example displays five circles at fixed x and y coordinates, representing a simple dataset of willingness-to-pay estimates. The visualization uses React to manage the component lifecycle and d3.v7 for DOM selection and data binding, rendering the circles as SVG elements. The code dynamically sizes the SVG to fit its container, then applies the `renderCircles` function to join the data and set each circle’s position and radius of 30 pixels. The visualization is static, with no axes, labels, or interactivity.

Mmaya.cylkowski@gmail.com
75% match