Ayatica: Islamic Texts Interactive Visualization 🕌📊

An interactive web application that explores patterns, miracles, and linguistic features in Islamic sacred texts through data visualization. The project focuses on both the Quran and authentic Hadith collections (Sahih Bukhari and Sahih Muslim).

Features ✨

Quran Visualization 📖

• Interactive Treemap Search 🔍: Explore Quranic verses through a hierarchical visualization
• Scientific Miracles Highlight 🧬: Special highlighting of verses containing scientific miracles
• Word Cloud Analysis ☁️: Interactive visualization of word frequencies and patterns
• Numerical Patterns 🔢: Visualization of mathematical and numerical patterns in the text

Hadith Visualization 📚

• Dual Treemap Interface 🔄: Parallel exploration of Sahih Bukhari and Sahih Muslim collections
• Prophetic Wisdom Highlights ✨: Special highlighting of notable hadith containing wisdom
• Search Functionality 🔎: Keyword-based search across both collections
• Detailed View 🔍: In-depth display of hadith text and context

Interactive Features ⚡

• Search Functionality 🔍: Real-time filtering of verses and hadith
• Zoom & Pan 🔎: Navigate through detailed sections of the visualizations
• Tooltips 💭: Contextual information on hover
• Responsive Design 📱: Adapts to different screen sizes

Technologies Used 🛠️

• D3.js for data visualization 📊
• Three.js for 3D animations 🎨
• JavaScript for interactivity ⚙️
• HTML5/CSS3 for structure and styling 🎯

Data Sources 📚

• Quran dataset with English translations 📖
• Sahih Bukhari and Sahih Muslim hadith collections 📚
• Curated collection of scientific miracles and numerical patterns ✨

Installation & Setup ⚙️

1. Clone the repository:

git clone https://github.com/ymorsi7/Ayatica/

2. Serve the files using a local server (e.g., using Python):

python -m http.server 8000

3. Open a web browser and navigate to:

http://localhost:8000

Project Structure 📁

├── index.html         # Main HTML file
├── style.css          # Stylesheet
├── script.js          # Main JavaScript file
├── data/              # Data directory
│   ├── hadith.json    # Hadith dataset
│   └── quran.json     # Quran dataset
├── audio/             # Audio directory
│   ├── emb.mp3   
│   └── expansion.mp3  
│   └── orbit.mp3   
│   └── plant.mp3    
│   └── rum.mp3    
│   └── cloud.mp3   
└── images/            # Image assets

Key Components 🔑

Visualization Components 📊

• Treemap visualization for both Quran and Hadith
• Interactive word cloud for linguistic analysis
• Animated scientific miracle demonstrations
• Numerical pattern visualizations

User Interface Elements 🖥️

• Navigation menu
• Search functionality
• Filters for specific content types
• Detailed information panels

Credits 🙏

• Quranic data from verified translations
• Hadith collections from authenticated sources
• Scientific miracle research from various Islamic scholars
• Icons and animations from open-source libraries