Blasendiagramm mit Bewertungsskala

Dieses Projekt visualisiert Daten als interaktives Blasendiagramm mit farblicher Kodierung nach Bewertungsskala (hoch/mittel/gering) und variabler Blasengröße basierend auf Werten.

Features

• Farbcodierung (Bewertung):

  • Grün (#2ecc71): Hoch
  • Orange (#f39c12): Mittel
  • Rot (#e74c3c): Gering

• Blasengröße (Wert):

  • Größere Blasen = höhere Werte
  • Skaliert zwischen 30-80px Radius

• Interaktivität:

  • Hover-Effekt: Blasen wachsen um 20%
  • Anklickbar zur Auswahl
  • Responsives Layout
  • Smooth Transitions

Struktur

• App.jsx: Hauptkomponente
• viz.js: Visualisierungs-Orchestrierung
• renderCircles.js: D3-Rendering für Blasen und Labels
• useContainerDimensions.js: Hook für Container-Größe
• data.csv: Datendatei mit id, name, x, y, rating, value

Datenformat