diff --git a/CSS/style.css b/CSS/style.css
index aeb1de8..b19cbfe 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -66,4 +66,11 @@ body {
}
.hidden {
display: none;
+ }
+ .page-title {
+ text-align: center;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-size: 28px;
+ font-weight: bold;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 949d24f..84acc3b 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
- How Education Level Shapes Perceived Health
+ How Education Level Shapes Perceived Health
diff --git a/script/script.js b/script/script.js
index f1c6e38..38c724b 100644
--- a/script/script.js
+++ b/script/script.js
@@ -63,11 +63,21 @@ darkModeToggle.addEventListener('click', () => {
darkMode = !darkMode;
document.body.style.backgroundColor = darkMode ? '#121212' : '#fff';
document.body.style.color = darkMode ? '#eee' : '#000';
+ chartTitle1.style("fill", darkMode ? "#eee" : "#000");
+ chartTitle2.style("fill", darkMode ? "#ccc" : "#666");
darkModeToggle.style.backgroundColor = darkMode ? '#eee' : '#333';
darkModeToggle.style.color = darkMode ? '#000' : '#fff';
tooltip.style("background-color", darkMode ? "#222" : "#fff")
.style("color", darkMode ? "#eee" : "#000");
g.selectAll("text").style("fill", darkMode ? "#eee" : "#000");
+
+ // 🆕 THESE MUST BE INSIDE the event listener block
+ g.selectAll(".lowest-annotation")
+ .style("fill", darkMode ? "#eee" : "red");
+
+ g.selectAll(".lowest-box")
+ .attr("fill", darkMode ? "#222" : "#fff")
+ .attr("stroke", darkMode ? "#aaa" : "#999");
});
d3.csv("PHSwithContinent.csv").then(function(data) {
@@ -272,7 +282,7 @@ function drawGrouped(data) {
g.append("g")
.call(d3.axisLeft(y).ticks(10));
- // 📌 Smart Annotate lowest bar
+ // 📌 Annotate lowest bar with dynamic box
if (groupedData.length > 0) {
const flat = groupedData.flatMap(g => g.values);
const lowest = flat.reduce((min, d) => d.value < min.value ? d : min, flat[0]);
@@ -283,17 +293,17 @@ function drawGrouped(data) {
const labelText = `Lowest: ${lowest["Reference area"]}`;
const tempText = g.append("text")
- .attr("x", -9999) // Place it offscreen first
+ .attr("x", -9999)
.attr("y", -9999)
.style("font-size", "12px")
.style("font-weight", "bold")
.text(labelText);
const textWidth = tempText.node().getBBox().width;
- tempText.remove(); // Cleanup
+ tempText.remove();
- // Background rectangle scaled to text size
g.append("rect")
+ .attr("class", "lowest-box")
.attr("x", barX - textWidth / 2 - 6)
.attr("y", barY - 28)
.attr("width", textWidth + 12)
@@ -304,8 +314,8 @@ function drawGrouped(data) {
.attr("stroke-width", 0.5)
.attr("opacity", 0.9);
- // Final visible text
g.append("text")
+ .attr("class", "lowest-annotation")
.attr("x", barX)
.attr("y", barY - 14)
.attr("text-anchor", "middle")
@@ -375,7 +385,6 @@ function drawDotPlot(data) {
g.append("g")
.call(d3.axisLeft(y));
- // Add X-axis label
g.append("text")
.attr("x", width / 2)
.attr("y", height + 50)
@@ -384,7 +393,7 @@ function drawDotPlot(data) {
.style("fill", darkMode ? "#fff" : "#000")
.text("Percentage Reporting Good Health (%)");
- // 📌 Smart annotate lowest dot
+ // 📌 Annotate lowest dot with dynamic box
if (groupedData.length > 0) {
const flat = groupedData.flatMap(g => g.values);
const lowest = flat.reduce((min, d) => d.value < min.value ? d : min, flat[0]);
@@ -405,6 +414,7 @@ function drawDotPlot(data) {
tempText.remove();
g.append("rect")
+ .attr("class", "lowest-box")
.attr("x", dotX - textWidth / 2 - 6)
.attr("y", dotY - 28)
.attr("width", textWidth + 12)
@@ -416,6 +426,7 @@ function drawDotPlot(data) {
.attr("opacity", 0.9);
g.append("text")
+ .attr("class", "lowest-annotation")
.attr("x", dotX)
.attr("y", dotY - 14)
.attr("text-anchor", "middle")