https://github.com/ymorsi7/quranicvisualization
A visual exploration tool for the Holy Quran using D3.js treemaps.
https://github.com/ymorsi7/quranicvisualization
css d3 d3js data data-visualization html islam islamic javascript js quran quranic treemaps visualization
Last synced: 2 months ago
JSON representation
A visual exploration tool for the Holy Quran using D3.js treemaps.
- Host: GitHub
- URL: https://github.com/ymorsi7/quranicvisualization
- Owner: ymorsi7
- Created: 2024-11-10T18:33:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-10T21:22:37.000Z (over 1 year ago)
- Last Synced: 2025-03-16T23:42:40.549Z (over 1 year ago)
- Topics: css, d3, d3js, data, data-visualization, html, islam, islamic, javascript, js, quran, quranic, treemaps, visualization
- Language: HTML
- Homepage: https://ymorsi7.github.io/QuranicVisualization/
- Size: 2.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quranic Ayat Explorer
A visual exploration tool for the Holy Quran using D3.js treemaps. This project lets you explore Quranic verses in an interactive and visually appealing way.
## Why I Built This
I wanted to create something that would let people see the entire Quran in a single, visually appealing view. I chose to use a treemap visualization because it's perfect for showing the hierarchical structure of the Quran - you can easily see how different Surahs (chapters) compare in size and explore individual verses within them.
Some key design choices I made:
- Each Surah has its own color to create clear visual separation
- Important verses are highlighted in gold for easy spotting
- Added zoom/pan features when I realized smaller verses were hard to click
- Included a search bar that greys out non-matching verses (try searching "love"!)
- Side panel shows the full verse when you click on any section
## Setup
1. Clone this repo
2. Make sure you have all these files:
```
index.html
script.js
TheQuranDataset.json
quran.png
smiling.png
```
3. Start a local server (I use Python's `python -m http.server 8000`)
4. Open `localhost:8000` in your browser
## How It Works
- The treemap shows all verses of the Quran
- Each rectangle represents a verse, grouped by chapter
- Gold highlights = notable verses
- Click any verse to see its details in the side panel
- Use the search bar to filter verses by keyword
- Scroll to zoom, drag to pan around
## Development Story
This was a solo project that took several iterations to get right. The biggest challenge was actually finding usable data - I spent about an hour wrestling with a Kaggle dataset that used pipes instead of commas before finding a better one.
The development process went something like this:
1. Data prep (~1 hour)
- First attempt with pipe-separated data failed
- Found and formatted a cleaner dataset
2. Basic visualization (~2 hours)
- Got D3.js treemap working
- Figured out how to map the data correctly
- Added verse plotting
3. Making it look good (~30 min)
- Added dark theme
- Styled search bar and panels
- Made sure everything was readable
4. Improvements (~1-2 hours)
- Added search functionality
- Fixed performance issues
- Converted CSV to JSON for faster loading
- Added zoom/pan for better interaction with small verses
- Made borders thinner for cleaner look
The trickiest part was getting the data to play nice with the treemap. Once that was working, adding features like search was pretty straightforward.
## Made With
- D3.js v7
- Vanilla JavaScript
- A lot of trial and error with data formats