HTML Export ZIP

Revision History

🌍 Public

Viewing a saved revision (read-only)

f01dd4fcbacd4d728f521f5776a94a71

HAW: Bday Data viz

0 stars1🌍 Public

Nng.tuoanh.cbn@gmail.com

Last edited Nov 28, 2025

Created on Nov 28, 2025

Forked from CV: Loading CSV Data

This visualization compares annual birth statistics across four years by rendering each year as a hospital building, with the number of birth dots inside representing relative crowdedness. React manages the component state and container sizing via a custom `useContainerDimensions` hook, while D3 v7 handles SVG rendering and data joins through `d3.select` and `d3.csv`. The chart pulses with an interactive hover effect on hospital bodies, and the code explicitly generates synthetic multi-year data by applying variations to the loaded CSV totals from `data.csv`.

AI-generated description

Birth Data Visualization

An interactive line chart showing daily birth statistics using React and D3.js.

Features

Interactive data points: Hover over points to see exact values
Responsive design: Chart automatically resizes to fit the window
Grid lines: Visual guides for easier data reading
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
renderLineChart.js - Line chart rendering logic
useContainerDimensions.js - Custom hook for responsive sizing
styles.css - Global styles
data.csv - Birth statistics data

How It Works

Data Loading: CSV data is loaded and parsed on component mount
Responsive Sizing: Container dimensions are tracked using ResizeObserver
D3 Rendering: Chart is rendered using D3.js scales, axes, and line generators
Interactivity: Tooltips appear on hover to show detailed information