Religious Demographics Visualization

An interactive bubble chart visualization showing religious population distribution across countries, built with React, D3.js, and Reorder.js.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

Overview

This project visualizes religious demographic data using a bubble chart where:

• X-axis: Countries
• Y-axis: Religions
• Bubble size: Population count
• Interactivity: Click bubbles to highlight them

The visualization supports multiple matrix reordering algorithms from Reorder.js to reveal patterns in the data.

Features

• Interactive bubble chart with smooth transitions
• Multiple ordering algorithms:
  • By Name: Alphabetical ordering (default)
  • By Frequency: Sort by total population (rows/columns)
  • Leaf Order: Optimal leaf ordering using hierarchical clustering
  • Barycenter: Barycenter heuristic for bipartite graphs
  • Spectral: Spectral ordering for graph layouts
• Responsive design that adapts to window size
• Click interaction to highlight individual data points

Tech Stack

• React 19: UI framework
• D3.js 7: Data visualization and scales
• Reorder.js: Matrix reordering algorithms
• ES Modules: Modern JavaScript with import maps

Data Format

The visualization uses a CSV file (data.csv) with the following structure: