Skip to main content
SimilarExport ZIP
100%

HAW: Bday Data viz

✓ Published1🌍 Public
Nng.tuoanh.cbn@gmail.com
Last edited Nov 28, 2025
Created on Nov 28, 2025

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 - 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

Similar vizzes

Loading thumbnail…

#HAW: Birthday data viz

This visualization displays average weekly birth counts for multiple years as circular, animated dot plots. Each year is represented by a separate radial chart, with dots positioned by day of year and distance from the center encoding weekly average birth count. Built with React and D3.js v7, the chart uses SVG filters for a gooey merging effect and transitions to animate dot positions. Hover interactions enlarge individual dots, and the data comes from a CSV file containing daily live birth statistics.

MMatthias Stahl
88% match
Loading thumbnail…

#HAW: Birthday data viz

This dashboard displays daily live births in Germany from 2020 to 2024, plotting 1,826 data points as a line chart with clickable and hoverable circles. The visualization uses React for state management and D3.js's `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to render the time series. A tooltip shows the date and birth count on hover, while selected points are highlighted in red.

Wwjo672@haw-hamburg.de
83% match
Loading thumbnail…

Fork of #HAW: Birthday data viz

This fork of a "HAW: Birthday data viz" example presents daily birth counts across several years as a monthly line chart. A color-coded year selector lets the user switch between datasets, each rendered as a distinct colored line with a matching gradient area beneath it. The visualization is built with React for state and UI, while D3 v7 (via `csv`, `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`) handles data parsing and chart rendering. The code loads German-format dates from a CSV file, computes day-of-year values, and displays the time series on an SVG canvas with a dark theme.

Wwjo672@haw-hamburg.de
83% match
Loading thumbnail…

Fork of HAW: Bday Data viz

This interactive bubble chart visualizes the human toll of terrorist attacks, encoding each incident as a circle whose size and red color intensity correspond to the number of deaths. Built with React and D3 v7, the visualization uses `d3.forceSimulation` to position the bubbles in a force-directed layout, while custom hover interactions with `transition` and event listeners reveal detailed tooltips with the location, date, and death count. The are sized using a linear `radiusScale` and colored via a `colorScale`, both derived from the `attacksData` dataset.

Nng.tuoanh.cbn@gmail.com
76% match
Loading thumbnail…

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`.

Uudjeffrey.jay@gmail.com
75% match
Loading thumbnail…

#HAW New Year's Resolutions

This interactive bubble chart visualizes New Year’s resolution survey responses by demographic category, with gender and age group buttons toggling the displayed percentages. The visualization arranges color-coded bubbles in an orbital layout around a central hub, using D3 transitions to animate circles and connecting lines into position. React manages state and container dimensions, while D3’s scaleLinear and selection APIs render the responsive SVG and handle click interactions that highlight individual responses.

Nng.tuoanh.cbn@gmail.com
74% match
Loading thumbnail…

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.

Cchynnerio@gmail.com
73% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This visualization presents daily birth statistics for January–February 2024 as an interactive heatmap, using a viridis color scale to encode birth counts across days of the week and weeks of the month. Hovering highlights individual cells and displays a tooltip with the exact date and birth count, while a stats panel shows peak, minimum, and average values. Built with React and D3 v7, it uses `d3.csv` to load the data, `scaleSequential` with `interpolateViridis` for coloring, and D3 selections with transitions for smooth hover effects and cell rendering.

Cchynnerio@gmail.com
72% match