Skip to main content
SimilarExport ZIP
100%

#HAW: Birthday data viz

✓ Published0🌍 Public
Wwjo672@haw-hamburg.de
Last edited Jan 16, 2026
Created on Nov 28, 2025

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.

AI-generated description

Birth Statistics Dashboard

An interactive D3.js visualization displaying daily live births data (Lebendgeborene) for Germany across 2020-2024.

Features

  • Interactive Line Chart: Visualize birth trends over 5 years of complete daily data
  • Hover Information: See detailed statistics when hovering over individual data points
  • Point Selection: Click on any data point to highlight it
  • Responsive Design: Automatically adapts to window size
  • Professional Styling: Clean, modern interface with gradient header and legend
  • Comprehensive Data: All 1,826 daily data points from 2020-2024

Data

The visualization uses complete daily birth statistics from data.csv with the following columns:

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

Data covers January 1, 2020 through September 30, 2024.

Technologies

  • React 19
  • D3.js 7
  • Modern CSS with gradients and animations

Getting Started

  1. Serve the files using a local web server
  2. Open index.html in your browser
  3. Interact with the chart by hovering and clicking on data points
  4. X-axis shows years 2020-2024 with properly balanced spacing
  5. Y-axis displays the number of births per day

Chart Characteristics

  • Dense Data Visualization: Shows all 1,826 daily data points
  • Clear Trends: Visual patterns in births across years
  • Year-based X-Axis: Properly scaled to show the 5-year period
  • High-Resolution: All daily fluctuations visible
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
86% 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
86% 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
86% match
Loading thumbnail…

HAW: Bday Data viz

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

Nng.tuoanh.cbn@gmail.com
83% 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
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
72% match
Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones
72% match
Loading thumbnail…

Fork of React Starter

An interactive circular heatmap visualizes daily birth counts for 2024, with colored dots orbiting a pulsing center circle. The visualization uses a D3.js v7 SVG animation to map birth data from a CSV file, encoding values through color gradients and glow effects. Hovering over data points reveals details via React state management, while CSS transitions and D3's ease functions create smooth orbital movement.

Cchynnerio@gmail.com
72% match