Viewing a saved revision (read-only)
f45ecb5f45e64aafad66dbf0138e23b6
Haupt-KI‑Funktionen für Fotographen
This interactive bubble chart displays the frequency of AI features for photographers, using bubble size to represent value and color to indicate rating (green=high, orange=medium, red=low). Built with React and D3 v7, the visualization renders SVG circles through the `renderCircles.js` module, which applies `scaleLinear` for positioning and sizing. Clicking a bubble selects it (turning white), while hovering triggers a 20% radius expansion via CSS transitions. Data loads from `data.csv` into the React app, with D3's `select` and `join` APIs handling dynamic circle and label updates.
AI-generated descriptionBlasendiagramm 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: Hauptkomponenteviz.js: Visualisierungs-OrchestrierungrenderCircles.js: D3-Rendering für Blasen und LabelsuseContainerDimensions.js: Hook für Container-Größedata.csv: Datendatei mit id, name, x, y, rating, value