udjeffrey.jay@gmail.com

Hochzeitsfotografie-Markt Wachstum in Mrd. USD

This visualization displays the projected growth of the wedding photography market in billions of USD from 2025 to 2034, using a line and area chart with a gradient fill. The chart includes interactive hover effects on data points, grid lines, and axis labels, plus an annotated CAGR reference box. Built with React and D3 v7, it loads data from a CSV file and renders via SVG, using `scaleLinear`, `curveMonotoneX`, and custom D3 selection methods. A custom x-scale compresses the uneven time intervals between data points.

Fork of Fork of Interactive Flower Timeline – Wedding Photography Market Growth 2

Asia Pacific Wedding Photography Market Size, 2025 (USD Billion)

This interactive world map visualizes 2025 wedding photography market sizes across five global regions, with Asia Pacific emphasized as the largest market at $9.72 billion. A D3 geoNaturalEarth1 projection renders countries and graticules from TopoJSON data, while scaled teardrop pins mark regional values. Clicking a pin selects and highlights it, with Asia Pacific featuring a red glow filter. D3 scaleLinear and scaleOrdinal encode market size and categorical colors, with React managing state and container dimensions via ResizeObserver.

Fork of Prognostizierte Marktgröße für Hochzeitsfotografie

This dark-themed infographic displays projected wedding photography market sizes for 2034 globally (USD 52.04 bn) and 2032 in the USA (USD 8.5 bn) as horizontal bars. Using React and D3 v7, the `renderBarChart` function draws SVG rects with `scaleLinear` and `scalePoint`, includes a legend, grid lines, and axis labels in German. A `ResizeObserver` updates chart dimensions responsively.

96% Zeiterpannis

Fork of Fork of CV: Loading CSV Data

This example visualizes the time savings achieved by AI processes compared to traditional methods through a symmetric horizontal bar chart. Three image-processing tasks are displayed, with traditionell (traditional) durations extending left in red and KI (AI) durations extending right in green. The chart loads process data from a local CSV file using `d3.csv`, then renders SVG elements within a React application. The visualization employs D3's `scaleBand` and `scaleLinear` for positioning, with interactive hover effects and value labels on each bar.

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.

Interactive Flower Timeline – Wedding Photography Market Growth 2

An interactive D3.js timeline visualizing the projected growth of the Asia Pacific wedding photography market from 2021 to 2034. Each year is represented by a vertical line topped with a colorful camera shutter icon, where the icon's size corresponds to the market value in USD billions. Users can click any year to display its specific value and year-over-year growth percentage in a detail panel. The visualization uses D3 scales (scaleLinear, scaleSqrt), SVG rendering, and React state management to handle interactions and responsive container sizing via ResizeObserver.

Interactive Flower Timeline – Wedding Photography Market Growth

An interactive flower timeline visualizes the projected growth of the wedding photography market from 2021 to 2034. Each year is represented by a multi-layered flower glyph whose vertical position and size encode market value in USD billions, connected by a smooth monotone curve to show the upward trajectory. Built with React and D3.js (v7), the visualization uses `scaleLinear` for axes, `line` with `curveMonotoneX` for the growth curve, and SVG paths for the petal glyphs. Hovering a flower reveals a tooltip with market size and growth percentage, while clicking pins the selection; a staggered animation reveals the line and flowers from left to right on initial render.

Fork of Interactive Flower Timeline – Wedding Photography Market Growth

An interactive line chart and flower glyph visualization projects the wedding photography market's growth from 2021 to 2034, showing market size in billions of dollars with year-over-year growth ratios. Using D3's `scaleLinear`, `axisBottom`, and `axisLeft`, the chart renders an animated monotone growth line alongside eight-petal flowers scaled proportionally to market value. Hovering over a flower displays a tooltip with market size and growth percentage, while clicking pins the selection; a click on empty space deselects. The React-based implementation uses `useContainerDimensions` with a `ResizeObserver` for responsive sizing.

Fork of CV: Loading CSV Data

This example shows how to load and visualize a small CSV dataset as interactive circles in an SVG. The chart displays five data points positioned by their x and y coordinates, with clickable circles that highlight the selected point. Built with React and D3 v7, the App component uses d3.csv to parse the data, scales it with d3.scaleLinear, and renders the visualization through d3.select and selection.join. A custom useContainerDimensions hook tracks the container size via ResizeObserver, enabling responsive scaling of the fixed-domain coordinates.

Prognostizierte Marktgröße für Hochzeitsfotografie

This visualization compares the projected market size of wedding photography for the global market in 2034 against the US market in 2032, displayed as a horizontal bar chart in billions of USD. Built with React and D3 v7, it renders SVG bars with value labels, grid lines, and a legend using a dark infographic style. The chart uses `scaleLinear` and `scalePoint` from D3 to position elements, while a `ResizeObserver` tracks container dimensions to redraw the visualization responsively.

Fork of CV: TWedding Photography

This chart visualizes the projected growth of the global wedding photography market from 2025 to 2034, using data plotted in billions of USD. It displays a line and area chart with gradient fills, interactive grid lines, and hover effects that highlight data points and annotations. The visualization is built with React and D3 v7, using an SVG rendering approach where the chart is composed through D3’s `scaleLinear` for the y-axis and a custom interpolation function for the compressed x-axis year positions. The code includes interactive elements such as tick labels, data points, and a CAGR annotation box, all styled to respond to mouse events.

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.

Fork of CV: KI vs traditionelle Work flow

A symmetric bar chart contrasts traditional workflow times against AI-accelerated times across three processes. Red bars extending left represent conventional durations in hours or minutes, while green bars on the right show the equivalent AI times in seconds, revealing dramatic efficiency gains. Built with D3 v7 within a React application, the visualization uses `scaleBand` for process categories and `scaleLinear` for the diverging time axis, rendering SVG rects with hover effects. The chart draws from a CSV file and displays value labels in their respective units, with a central dashed zero-line and a legend distinguishing the two workflows.

Fork of CV: Loading CSV Data

This example shows grouped horizontal bars comparing two metrics—"Ermüdungspunkt" (fatigue point) and "Stilkonstanz" (style consistency)—across five image-processing features. The React component loads a local CSV file using d3.csv, parses numeric fields, and renders an SVG chart via d3.scaleBand and d3.scaleLinear. Axis ticks come from d3.axisBottom and d3.axisLeft, with value labels and a color-coded legend appended to the SVG. The chart updates responsively using a ResizeObserver hook.

Fork of Fork of CV: Loading CSV Data

A React and D3 v7 donut chart compares AI consistency (95%) with human variability (5%) in image generation. Each colored arc is rendered using d3.pie and d3.arc generators, with icons and percentage labels positioned via arcGenerator.centroid. Clicking a segment toggles an info panel displaying category details while dimming inactive arcs. Data is hardcoded in App.jsx, and the chart responds to container resize events through a ResizeObserver hook.

Fork of CV: Loading CSV Data

This interactive donut chart visualizes the distribution of consistency between AI-generated (95%) and human-created (5%) content, with a clickable segmented display that reveals detailed attributes for each category in a side panel. Built with React and D3 v7, the visualization uses d3.pie and d3.arc to generate SVG paths, with ResizeObserver-driven container dimensions for responsive scaling. The chart features animated opacity transitions on segment selection and a dark-themed info panel with custom styling.

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.

Fork of CV: Loading CSV Data

This example presents a bar chart comparing German survey responses on trust versus distrust in AI advertising, with two bars showing 22% and 36% respectively. The visualization uses React with D3 v7 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, rendered as SVG. Bars are filled with a building image pattern via D3 `defs` and `pattern` elements, enhanced by a brightness filter, while horizontal grid lines and percentage labels clarify the data values.

Fork of CV: Loading CSV Data

This example shows a stacked bar chart of time allocation across work sessions, breaking down each session into focused work, interruptions, and recovery percentages. It loads a small CSV file with raw text parsing and renders the data using React with D3 v7 and SVG. The visualization uses d3.stack, scaleBand, and scaleLinear to create the bars, with value labels, axes, and a color-coded legend. A ResizeObserver hook tracks container dimensions to redraw the chart responsively.

Pixar Films Rating Version 2

This interactive visualization presents Pixar films as a garden of SVG flowers, where each flower’s petal lengths and colors encode four weighted metrics: runtime, rating score, year relevance, and sequel factor. Users adjust slider weights to recalculate each film’s aggregate score, trigger re-sorting, and click to inspect individual film details. Built with React and D3 v7, the visualization uses `<path>` elements to construct petal shapes and dynamic rotation transforms driven by film indices. The dataset loads from a local CSV file parsed with D3’s `csv` function.

Pixar Films Rating Version 3

A grid of petal-shaped charts compares ten films across eight weighted dimensions, with each flower's petal length encoding a normalized metric and its width reflecting the user-assigned weight. Petal color intensity scales with film rating, and a center label shows the overall score. Built with React and D3 v7, the visualization uses `scaleLinear`, `extent`, and `interpolateRgb` utilities within `flowerUtils.js`, while `renderFlowers.js` constructs each SVG petal path. Interactive sliders on the right adjust dimension weights, and clicking a flower displays a details tooltip.

Pixar Films

A dark, poster-style visualization presents song fingerprint data for "Ethereal Echoes," combining a central frequency amplitude ring with surrounding time-series rings for streams, chart position, playlist adds, and video views. Built with React and D3 v7, it uses SVG elements, `lineRadial`, and `scaleLinear` to render heatmap-like concentric layers, while hover and click interactions trigger a custom tooltip showing detailed values.

HAW: Sommer baby Boom

This visualization displays daily birth counts (Lebendgeborene) in Germany for 2024 as a circular, radial chart. It highlights seasonal patterns, with each day represented as a colored dot positioned by date angle and birth-count radius, and users can click dots or hover for tooltips. Built with D3 v7 and React 19, the chart uses `d3.scaleLinear` for positioning and color mapping, drawing SVG circles with a line generator. Data is loaded from a CSV file, and the visualization is responsive via a `ResizeObserver`.

Fork of #HAW: Svelte + D3: Voronoi

This interactive Voronoi diagram visualizes the spatial partitioning of 100 randomly generated points, with a highlighted cell tracking the mouse position. The visualization updates the Voronoi tessellation in real time as the cursor moves, using `Delaunay.from()` and the resulting `voronoi()` method to compute cells. The Svelte app binds client dimensions to size the SVG, while `scaleLinear` maps data coordinates to screen space. Yellow fill and green stroke emphasize the active cell, while a larger green circle marks the cursor’s data point.