Skip to content

Commit fa07d0a

Browse files
ymorsi7ymorsi7
committed
Update script.js
1 parent 13cb6b3 commit fa07d0a

File tree

1 file changed

+88
-103
lines changed

1 file changed

+88
-103
lines changed

‎script.js

Lines changed: 88 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,96 @@
1-
d3.json("TheQuranDataset.json").then(data => {
2-
const width = 800;
3-
const height = 600;
1+
d3.json("https://raw.githubusercontent.com/ymorsi7/Quran-Interactive-Visualization/main/TheQuranDataset.json")
2+
.then(data => {
3+
const nestedData = d3.groups(data.children, d => d.surah_name_en);
4+
const hierarchyData = {
5+
name: "Quran",
6+
children: nestedData.map(([surah, verses]) => ({
7+
name: surah,
8+
children: verses.map(verse => ({
9+
...verse,
10+
value: +verse.no_of_word_ayah || 1
11+
}))
12+
}))
13+
};
14+
const root = d3.hierarchy(hierarchyData)
15+
.sum(d => d.value)
16+
.sort((a, b) => b.value - a.value);
417

5-
const root = d3.hierarchy(data)
6-
.sum(d => d.value)
7-
.sort((a, b) => b.value - a.value);
18+
const width = 800;
19+
const height = 600;
20+
d3.treemap().size([width, height]).padding(1)(root);
821

9-
const color = d3.scaleOrdinal(d3.schemeCategory10);
22+
const svg = d3.select("#treemap").append("svg")
23+
.attr("width", width)
24+
.attr("height", height)
25+
.call(d3.zoom().on("zoom", (event) => {
26+
svg.attr("transform", event.transform);
27+
}))
28+
.append("g");
1029

11-
const zoom = d3.zoom()
12-
.scaleExtent([0.5, 5])
13-
.on("zoom", (event) => {
14-
g.attr("transform", event.transform);
15-
});
16-
17-
const svg = d3.select("#treemap")
18-
.append("svg")
19-
.attr("width", width)
20-
.attr("height", height)
21-
.call(zoom);
30+
const color = d3.scaleOrdinal()
31+
.domain(root.children.map(d => d.data.name))
32+
.range(d3.schemeCategory10);
2233

23-
const g = svg.append("g");
34+
const notableVerses = [
35+
{ surah: 'The Cow', ayah: 255, highlightColor: 'gold' },
36+
{ surah: 'The Opening', ayah: 1, highlightColor: 'gold' },
37+
{ surah: 'The Beneficent', ayah: 13, highlightColor: 'gold' },
38+
{ surah: 'Joseph', ayah: 4, highlightColor: 'gold' }
39+
];
2440

25-
d3.treemap()
26-
.size([width, height])
27-
.padding(1)(root);
41+
svg.selectAll("rect")
42+
.data(root.leaves())
43+
.enter()
44+
.append("rect")
45+
.attr("x", d => d.x0)
46+
.attr("y", d => d.y0)
47+
.attr("width", d => d.x1 - d.x0)
48+
.attr("height", d => d.y1 - d.y0)
49+
.style("fill", d => {
50+
const notableVerse = notableVerses.find(v =>
51+
v.surah === d.data.surah_name_en && v.ayah === d.data.ayah_no_surah
52+
);
53+
return notableVerse ? notableVerse.highlightColor : color(d.parent.data.name);
54+
})
55+
.style("stroke", d => {
56+
return d.data.surah_name_en && d.data.ayah_no_surah ? "#333" : "none";
57+
})
58+
.on("click", function(event, d) { displayDetails(d); });
2859

29-
const notableVerses = [
30-
{ surah: 'The Cow', ayah: 255, highlightColor: 'gold' },
31-
{ surah: 'The Cow', ayah: 285, highlightColor: 'gold' },
32-
{ surah: 'The Cow', ayah: 286, highlightColor: 'gold' },
33-
{ surah: 'The Opening', ayah: 1, highlightColor: 'gold' },
34-
{ surah: 'The Sincerity', ayah: 1, highlightColor: 'gold' },
35-
{ surah: 'The Sincerity', ayah: 2, highlightColor: 'gold' },
36-
{ surah: 'The Sincerity', ayah: 3, highlightColor: 'gold' },
37-
{ surah: 'The Sincerity', ayah: 4, highlightColor: 'gold' },
38-
{ surah: 'The Dawn', ayah: 1, highlightColor: 'gold' },
39-
{ surah: 'The Dawn', ayah: 5, highlightColor: 'gold' },
40-
{ surah: 'The People', ayah: 1, highlightColor: 'gold' },
41-
{ surah: 'The People', ayah: 6, highlightColor: 'gold' },
42-
{ surah: 'Mary', ayah: 19, highlightColor: 'gold' },
43-
{ surah: 'Mary', ayah: 23, highlightColor: 'gold' },
44-
{ surah: 'Mary', ayah: 47, highlightColor: 'gold' },
45-
{ surah: 'Mary', ayah: 96, highlightColor: 'gold' },
46-
{ surah: 'Joseph', ayah: 4, highlightColor: 'gold' },
47-
{ surah: 'Joseph', ayah: 18, highlightColor: 'gold' },
48-
{ surah: 'Joseph', ayah: 87, highlightColor: 'gold' },
49-
{ surah: 'Joseph', ayah: 92, highlightColor: 'gold' },
50-
{ surah: 'The Beneficent', ayah: 13, highlightColor: 'gold' },
51-
{ surah: 'The Beneficent', ayah: 46, highlightColor: 'gold' },
52-
{ surah: 'The Beneficent', ayah: 76, highlightColor: 'gold' },
53-
{ surah: 'The Sovereignty', ayah: 2, highlightColor: 'gold' },
54-
{ surah: 'The Sovereignty', ayah: 13, highlightColor: 'gold' },
55-
{ surah: 'The Light', ayah: 35, highlightColor: 'gold' },
56-
{ surah: 'The Cave', ayah: 10, highlightColor: 'gold' },
57-
{ surah: 'The Cave', ayah: 65, highlightColor: 'gold' },
58-
{ surah: 'The Cave', ayah: 110, highlightColor: 'gold' },
59-
{ surah: 'The Groups', ayah: 53, highlightColor: 'gold' },
60-
{ surah: 'The Rooms', ayah: 13, highlightColor: 'gold' },
61-
{ surah: 'The Human', ayah: 3, highlightColor: 'gold' },
62-
{ surah: 'The Declining Day', ayah: 1, highlightColor: 'gold' },
63-
{ surah: 'The Morning Hours', ayah: 3, highlightColor: 'gold' },
64-
{ surah: 'The Relief', ayah: 5, highlightColor: 'gold' },
65-
{ surah: 'The Exile', ayah: 22, highlightColor: 'gold' },
66-
{ surah: 'The Clot', ayah: 1, highlightColor: 'gold' }
67-
];
60+
function displayDetails(d) {
61+
const details = d3.select("#verse-details");
62+
details.html("");
63+
64+
if (d && d.data) {
65+
console.log("Clicked Data:", d.data);
66+
if (d.data.surah_name_en && d.data.ayah_en) {
67+
const surahName = d.data.surah_name_en || "Unknown Surah";
68+
const ayahText = d.data.ayah_en || "No translation available";
69+
const ayahNo = d.data.ayah_no_surah || "No Ayah Number";
70+
71+
details.append("h3").text(`${surahName} - Ayah ${ayahNo}`);
72+
details.append("p").text(ayahText);
73+
} else {
74+
details.append("p").text("No data found for this specific verse in the dataset.");
75+
}
76+
} else {
77+
details.append("p").text("No data available for this verse.");
78+
console.error("Data missing for clicked element:", d);
79+
}
80+
}
81+
6882

69-
g.selectAll("rect")
70-
.data(root.leaves())
71-
.enter()
72-
.append("rect")
73-
.attr("x", d => d.x0)
74-
.attr("y", d => d.y0)
75-
.attr("width", d => d.x1 - d.x0)
76-
.attr("height", d => d.y1 - d.y0)
77-
.style("fill", d => {
78-
const notableVerse = notableVerses.find(v =>
79-
v.surah === d.data.surah_name_en && +v.ayah === +d.data.ayah_no_surah
80-
);
81-
return notableVerse ? notableVerse.highlightColor : color(d.parent.data.name);
82-
})
83-
.style("stroke", "#333")
84-
.on("click", function(event, d) {
85-
displayDetails(d.data);
83+
d3.select("#search-bar").on("input", function() {
84+
const keyword = this.value.toLowerCase();
85+
svg.selectAll("rect")
86+
.style("opacity", d => {
87+
const text = (d.data.ayah_en || "").toLowerCase();
88+
return text.includes(keyword) ? 1 : 0.2;
89+
})
90+
.style("stroke", d => {
91+
const text = (d.data.ayah_en || "").toLowerCase();
92+
return text.includes(keyword) ? "orange" : "#333";
93+
});
8694
});
87-
88-
function displayDetails(data) {
89-
const details = d3.select("#verse-details");
90-
details.html("");
91-
if (data && data.surah_name_en && data.ayah_en) {
92-
const surahName = data.surah_name_en || "Unknown Surah";
93-
const ayahText = data.ayah_en || "No translation available";
94-
const ayahNo = data.ayah_no_surah || "No Ayah Number";
95-
details.append("h3").text(`${surahName} - Ayah ${ayahNo}`);
96-
details.append("p").text(ayahText);
97-
} else {
98-
details.append("p").text("No data available for this verse.");
99-
}
100-
}
101-
102-
const searchBar = d3.select("#search-bar");
103-
searchBar.on("input", function() {
104-
const keyword = this.value.toLowerCase();
105-
svg.selectAll("rect")
106-
.style("opacity", d => {
107-
const text = (d.data.ayah_en || "").toLowerCase();
108-
return text.includes(keyword) ? 1 : 0.2;
109-
});
110-
});
111-
});
95+
})
96+
.catch(error => console.error("Error loading JSON:", error));

0 commit comments

Comments
 (0)