Fork of CV: Loading CSV Data
This visualization compares live birth counts across multiple years as a "Heartbeat Map," a radical circular layout where each year forms its own orbital system. Daily birth data from January and February of 2022–2024 is loaded via d3.csv, grouped by year, and rendered as SVG points whose distance from the center encodes intensity, colored with a muted grayscale scale. The React component uses a ResizeObserver to track container dimensions and re-renders the D3 visualization on data or hover changes, with SVG filters providing glow and pulse effects.
AI-generated descriptionHeartbeat of Life - Radical Map
A radical year-by-year comparison visualization of birth data using D3.js and React.
Features
🔄 Multi-Year Comparison: Side-by-side circular heartbeats for each year
🌟 Synchronized Hearts: Each year pulses independently while maintaining visual rhythm
💫 Dynamic Animation: Elastic entrance effects andwith cascading animations
🎨 ConsisteColor Palette: Gradient from teal to pin k tgold based on birth intensity
✨ Glow Effects: SVG filters create an ereal, gwing app earance
🎯 Interactive Particles: Particle bursts on hover for
across all years🌊 Smooth Transitions**: Fluid animations throughout the experience
📊 Distance Encoding: Orbit distance represents birth count intensity
🎭 Dark Theme: Cosmic background with radial gradients
Design Concept
The visualization reimagines birth statistics as a livi hmultiple eartbe t:
- sCentral Heart**: Repr per Year**: Each year has its ownting continuouenteriting Cells**: Each dayDaily datalike planets, distan around each year's heartor Journey**: Warm colors (teal → pink → gold) represent the spectrum of life
- Glow- Year Comparison: Side-by-side layout enables immediate pattern recognition across years & Blur: Creates a dream-like, organic feeling
- Particle Effects: On hover, life energy radiates outward
Insight Keys
This creativeradical map:
- Visual RAnnhmPatterns**: Compare seasonal variations year-over-year
- Trend Analysis: Visual rhythm shows consistency or divergence between years
- **Peak Identificationer, more distant points show hi highlightrth days t hrou
- **Cyclical Behaviorular arrangement shows temporal continuity
- **Emo within each year
- Year Relationships: Side-by-side layout makes comparative analysis intuitivea
Bunts (Lirth datadeboreneg) fromJanuar - Februayy 2024, oracross
multiple years, organizan interactive cosmic dance of life
for comparisonteraction
- Hover: See detailed birth counts with particle effects
- Visu from any year al Feedback: Points grow and glow on interaction
- Smooth AYear Grouping: Each year maintains independent animations
- Smooth Animations: All transitions are fluid and organic
- Cascading Entry: Years animate in sequence for dramatic effect
Technical
Built with:
- React 19: Component management
- D3.js 7: Data visualization and animations
- ES Modules: Modern JavaScript structure
- SVG Filters: Professional glow and pulse effects