Viewing a saved revision (read-only)
f2860a869ee145ba9935959b5c9190bf
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.
AI-generated descriptionWedding Photography Market Growth Visualization
An interactive D3.js data visualization inspired by the OECD Better Life Index flower metaphor, adapted to show exponential market growth over time.
Features
- Flower Glyphs: Each year is represented by a beautiful, multi-layered flower glyph
- Growth Curve: Flowers are connected by a smooth gradient line showing market trajectory
- Interactive Tooltips: Click or hover on any flower to see detailed market information
- Animated Entry: Staggered animation reveals the growth story from left to right
- Keyboard Accessible: Full keyboard navigation support (Tab + Enter/Space)
- Responsive Design: Adapts seamlessly to different screen sizes
Data
The visualization shows the Wedding Photography Market growth from 2021 to 2034:
- Starting value (2021): $6.68 Billion
- Projected value (2034): $52.04 Billion
- Total growth: ~679% over 13 years
All values follow a smooth exponential growth curve with year-over-year growth rates.
Visual Encoding
- Vertical Position: Represents market size (USD Billion)
- Horizontal Position: Time axis from 2021 → 2034
- Flower Size: Scales proportionally with market value (0.75x to 1.45x)
- Color: Teal gradient representing continuous growth and vitality
- Petal Layers: Two layers for visual depth and organic feel
Interaction
- Hover: Preview data with animated ring effect
- Click: Pin a year to keep tooltip visible
- Click Background: Deselect and hide tooltip
- Keyboard: Tab to navigate between years, Enter/Space to select
Technologies
- React 19.1.0
- D3.js v7.9.0
- Modern CSS with gradients, animations, and transitions
- ES6 Modules via importmap
Design Inspiration
The flower metaphor draws from the OECD Better Life Index, where petals represent different dimensions. Here, the entire flower represents a moment in time, with its size and position encoding market data in an approachable, organic visual form.
Performance
- Optimized D3 join patterns for minimal DOM manipulation
- Memoized data calculations
- Hardware-accelerated CSS transitions
- Efficient ResizeObserver for responsive updates