-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (189 loc) · 7.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quranic Visualization</title>
<link rel="icon" href="quran.png" type="image/x-icon">
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #2b2b2b;
color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
h1 {
font-size: 2em;
margin-top: 1em;
text-align: center;
}
#bismillah {
margin-top: 20px;
text-align: center;
}
#bismillah img {
width: 200px;
}
#logo {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
display: flex;
align-items: center;
}
#logo img {
width: 40px;
height: 40px;
border-radius: 50%;
}
#logo img:hover + .tooltip,
#logo .tooltip:hover {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.tooltip {
margin-left: 50px;
padding: 5px 10px;
background-color: #ffffff;
color: #000000;
font-size: 14px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
position: absolute;
transform: translateX(-10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#search-container {
display: flex;
align-items: center;
margin-top: 20px;
background-color: #444;
border-radius: 8px;
padding: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 50%;
}
#search-bar {
width: 100%;
padding: 10px;
font-size: 16px;
color: #f0f0f0;
background-color: transparent;
border: none;
outline: none;
}
#search-bar::placeholder {
color: #bbb;
font-style: italic;
}
#search-button {
background-color: #03ac00;
color: #fff;
font-size: 16px;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-left: -50px;
}
#search-button:hover {
background-color: #04d600;;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
gap: 20px;
}
#treemap {
width: 800px;
height: 600px;
border: 1px solid #555;
}
#verse-details {
width: 400px;
background-color: #3b3b3b;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
#verse-details h3 {
margin: 0;
font-size: 1.5em;
}
#verse-details p {
font-size: 1em;
margin-top: 10px;
}
.footer {
margin-top: 30px;
color: #999;
font-size: 0.8em;
}
#writeup {
width: 70%;
background-color: #333;
padding: 20px;
border-radius: 8px;
margin: 40px auto;
color: #f0f0f0;
font-size: 1em;
line-height: 1.6;
}
#writeup h2 {
text-align: center;
margin-bottom: 20px;
color: #fff;
}
a{
color: #039900;
}
</style>
</head>
<body>
<div id="logo" onclick="window.location.href='https://ymorsi.com';">
<img src="smiling.png" alt="YM Home">
<div class="tooltip">YM - Home</div>
</div>
<div id="bismillah">
<img src="bismillah.png" alt="Bismillah">
</div>
<h1 style="color: rgb(3, 174, 0);">Quranic Ayat Interactive Exploration</h1>
<p>Learn about different ayat and insights in the Holy Quran. Search by verse / keyword!</p>
<p><b>Notable Verses highlighted in gold!</b></p>
<div id="search-container">
<input id="search-bar" type="text" placeholder="Search for a Quranic keyword (i.e., 'loves')" />
<button id="search-button">🔍</button>
</div>
<div id="container">
<div id="treemap"></div>
<div id="verse-details">
<h3>Verse Details</h3>
<p>Pick a verse to view its details!</p>
</div>
</div>
<section id="writeup">
<h2 style="color: #03ac00;">About the Project</h2>
<h3>Rationale for Design Decisions</h3>
<p>I picked this visualiation so that users can have a cool and aesthetically-appealing way of seeing the entire Quran in one image. A treemap was implementd so that we could with ease see the hierarchy of the data (i.e. Surahs/Chapters by size). Every Surah has a color so that we have contrast with different ones, especially if they are next to each other in the treemap. We've also highlighted notable/meaningful verses in gold so the user can identify and click on it with ease. At the end, a zooming/pan functionality was implemented after realizing it was harder to click on individual Ayat/Verses in the smaller Surahs. Implementing that with the thinner borders was able to solve that issue. A search bar was also implememted so that the user can filter by keyword. For example, if they'd like to only see verses with the word 'love,' it will grey out all the Ayat in that treemap that don't have that word. We also get the full verse on a side-panel when a user clicks on one.</p>
<h3>Development Process Overview</h3>
<p>Being the sole member of my team, I developed the whole site by myself. Initially, it took a few minutes to just find a dataset and put it into my repository. The first dataset I found (which was on <a href = "https://www.kaggle.com/datasets/zusmani/the-holy-quran" target = "_blank">Kaggle</a>) had seperated the data by '|' rather than commas and also had some strange formatting issues so after spending about an hour trying to get something out of that data, I decided to find a new dataset (which was also on <a href = "https://www.kaggle.com/datasets/imrankhan197/the-quran-dataset" target = "_blank">Kaggle</a>). After finding a set easier to work with, I was able to quickly implement the D3.js treemap on my page (which took about an hour). However, after facing many issues in terms of extracting the data and being able to translate it, it took about another hour to figure out how to make the specific column values that I wanted to appear to be plotted. After figuring out how to plot, which also took about an hour, I was able to get the site to work well. I spent up to 30 minutes implementing nice CSS for the website to make it look nice. I then implemented the searching functionality, which was easy to implement and did not take that long to integrate, especially with the help of the internet. Finally, I had a working model. However, I had a couple issues; the site was slow to use, the borders were thick, and couldn't see what was going on in the smaller Surahs. To do this, I implemented zooming, thinner borders, and converted my CSV data into a JSON so that I would be able to quickly load the plot. All in all, what took the most time was being able to read and translate the data into the treemap. As soon as the treemap was properly working, everything else, including the search functionality was simple. Other touch-ups and styling adjustments at the end took about another hour or two.</p>
</section>
<div class="footer">
Created for DSC 209R | Interactive Visualization: The Holy Quran
</div>
<br><br>
<script src="script.js"></script>
</body>
</html>