Skip to main content
SimilarExport ZIP
100%

Haupt-KI‑Funktionen für Fotographen

✓ Published0🌍 Public
Uudjeffrey.jay@gmail.com
Last edited Jan 24, 2026
Created on Jan 24, 2026

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 description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

KKrishu
66% match
Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

KKrishu
66% match
Loading thumbnail…

Bubble Heatmap - Dummy Data

This bubble heatmap visualizes relationships between themes and drivers using color-coded circles, where size indicates importance and color encodes sentiment (positive, mixed, or negative). Built with D3 v7, the SVG chart includes interactive axis labels that filter and highlight related data points on click, while hover tooltips display descriptions. The visualization uses `d3.scalePoint`, `d3.scaleOrdinal`, and transitions for smooth opacity changes.

Hhquazza@gmail.com
66% match
Loading thumbnail…

Fork of Interactive Flower Timeline – Wedding Photography Market Growth 2

This interactive visualization charts the growth of the Asia Pacific wedding photography market from 2021 to 2034, with each year represented by a colorful camera-shutter icon positioned along a vertical growth line. The chart renders as an SVG using D3.js v7 within a React 19 application, displaying market values in USD billions on the y-axis and years on the x-axis. Users can click on any shutter icon or transparent year-target rectangle to select a year, which triggers a slide-in information panel showing the exact market value and year-over-year growth percentage. The visualization uses D3's `scaleLinear` for axes, `scaleSqrt` to size the shutter icons proportionally to market value, and CSS animations for drawing the growth lines and animating the info panel's entrance.

Uudjeffrey.jay@gmail.com
66% match
Loading thumbnail…

Finalq4activity6

A bubble chart visualizes the correlation between processing speed, memory, and camera megapixels for consumer electronics brands from electronic_data.csv. Each circle's horizontal position encodes average processing speed (GHz), vertical position encodes average memory (GB), and radius encodes camera megapixels. The chart uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.interpolateTurbo for brand colors, and d3.axisBottom/d3.axisLeft for tick labels. Interactive tooltips appear on mouseover via d3 event handlers, with a legend showing megapixel ranges and brand color dots, all rendered as SVG with D3 v7.

Vvaishnavi6gan@gmail.com
66% match
Loading thumbnail…

Fork of Fork of CV: Loading CSV Data

A React-based bar chart displays survey responses on trust in AI advertising in Germany, showing 22% for increased trust and 36% for increased distrust. The visualization uses d3.scaleBand and d3.scaleLinear for axes, while bars are filled with an image pattern from Unsplash via SVG defs and a brightness filter. D3 axis helpers render white labeled axes on a black background, with percentage labels above each bar. The chart reacts to container resizing through a ResizeObserver hook, redrawing with d3 selection methods.

Uudjeffrey.jay@gmail.com
65% match
Loading thumbnail…

Untitled

A reactive bubble chart visualizes January Medium articles, encoding each post's category by color and its view count by circle radius. Hovering a bubble reveals a tooltip with the article title, category, and number of hearts. The chart relies on `d3.forceSimulation` for layout, `d3.scaleOrdinal` with `schemeCategory10` for colors, and a `d3.scaleLinear` for radius. Data loads from a CSV file via `d3.csv`, and the reusable chart pattern exposes setters for width, height, and column mappings.

Ssergiofco
65% match
Loading thumbnail…

Interactive Color Legends

This interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting different attributes for the x and y axes via dropdown menus. Hovering over the color legend highlights points of a selected species while fading others, with an opacity transition applied to non-hovered marks. The visualization is built with React, d3.scaleLinear and d3.scaleOrdinal for scales, and renders SVG circles with tooltips. The data is loaded as CSV and parsed using d3.csv.

Tthomasjungcoe
65% match