Export Image

HAW: Bday Data viz

0
Forks
0
Likes

TuOanh-HAW

0 views in last 90 days
Last edited Nov 28, 2025
Created on Nov 28, 2025

Birth Data Visualization - Radial Chart

An interactive radial chart showing monthly birth statistics from multiple years using React and D3.js.

Features

  • Radial layout: Months arranged around a circle starting with January at the top
  • Multi-year comparison: All available years displayed together for easy comparison
  • Monthly aggregation: Daily birth data aggregated by month (showing average births per day)
  • Interactive data points: Hover over points to see exact values and year information
  • Responsive design: Chart automatically resizes to fit the window
  • Grid lines: Both circular and angular guides for easier data reading
  • Color-coded years: Each year has a distinct color for easy identification
  • Legend: Year labels with corresponding colors
  • Smooth rendering: Optimized for performance

Data Format

The chart displays data from data.csv with the following columns:

  • Datum: Date in DD-MM-YYYY format
  • Lebendgeborene: Number of live births

File Structure

  • index.html - Main HTML entry point
  • index.jsx - React app initialization
  • App.jsx - Main React component
  • viz.js - D3 visualization orchestrator
  • renderRadialChart.js - Radial chart rendering logic
  • useContainerDimensions.js - Custom hook for responsive sizing
  • styles.css - Global styles
  • data.csv - Birth statistics data

How It Works

  1. Data Loading: CSV data is loaded and parsed on component mount
  2. Grouping by Year: Daily data is organized by year
  3. Monthly Aggregation: Each year's data is aggregated by month, calculating average births per day
  4. Responsive Sizing: Container dimensions are tracked using ResizeObserver
  5. D3 Rendering: Chart is rendered using D3.js radial scales, with months as angles and birth data as radii
  6. Multi-Year Display: All years are displayed simultaneously with different colors
  7. Interactivity: Tooltips appear on hover to show detailed information including year

Chart Layout

  • January starts at the top (12 o'clock position)
  • Months progress clockwise around the circle
  • Radius represents average daily births for that month
  • Circular grid lines show magnitude
  • Angular grid lines separate months
  • Each year is represented by a different color
  • Legend in the top-right shows which color corresponds to which year
MIT Licensed