dlawler489/COS30045
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed darkmode and centred headings

Browse source
This commit is contained in:
dlawler489 2025-04-27 10:21:41 +10:00
parent 17f63a4fc8
commit e10e838745
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
CSS/style.css
View file

@ -67,3 +67,10 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.page-title {
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
font-size: 28px;
font-weight: bold;
}

2
index.html
View file

@ -8,7 +8,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js"></script>
</head> </head>
<body> <body>
<h2>How Education Level Shapes Perceived Health</h2> <h2 class="page-title">How Education Level Shapes Perceived Health</h2>
<div class="controls"> <div class="controls">
<label for="continentSelect">Continent:</label> <label for="continentSelect">Continent:</label>

25
script/script.js
View file

@ -63,11 +63,21 @@ darkModeToggle.addEventListener('click', () => {
darkMode = !darkMode; darkMode = !darkMode;
document.body.style.backgroundColor = darkMode ? '#121212' : '#fff'; document.body.style.backgroundColor = darkMode ? '#121212' : '#fff';
document.body.style.color = darkMode ? '#eee' : '#000'; 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.backgroundColor = darkMode ? '#eee' : '#333';
darkModeToggle.style.color = darkMode ? '#000' : '#fff'; darkModeToggle.style.color = darkMode ? '#000' : '#fff';
tooltip.style("background-color", darkMode ? "#222" : "#fff") tooltip.style("background-color", darkMode ? "#222" : "#fff")
.style("color", darkMode ? "#eee" : "#000"); .style("color", darkMode ? "#eee" : "#000");
g.selectAll("text").style("fill", 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) { d3.csv("PHSwithContinent.csv").then(function(data) {
@ -272,7 +282,7 @@ function drawGrouped(data) {
g.append("g") g.append("g")
.call(d3.axisLeft(y).ticks(10)); .call(d3.axisLeft(y).ticks(10));
// 📌 Smart Annotate lowest bar // 📌 Annotate lowest bar with dynamic box
if (groupedData.length > 0) { if (groupedData.length > 0) {
const flat = groupedData.flatMap(g => g.values); const flat = groupedData.flatMap(g => g.values);
const lowest = flat.reduce((min, d) => d.value < min.value ? d : min, flat[0]); 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 labelText = `Lowest: ${lowest["Reference area"]}`;
const tempText = g.append("text") const tempText = g.append("text")
.attr("x", -9999) // Place it offscreen first .attr("x", -9999)
.attr("y", -9999) .attr("y", -9999)
.style("font-size", "12px") .style("font-size", "12px")
.style("font-weight", "bold") .style("font-weight", "bold")
.text(labelText); .text(labelText);
const textWidth = tempText.node().getBBox().width; const textWidth = tempText.node().getBBox().width;
tempText.remove(); // Cleanup tempText.remove();
// Background rectangle scaled to text size
g.append("rect") g.append("rect")
.attr("class", "lowest-box")
.attr("x", barX - textWidth / 2 - 6) .attr("x", barX - textWidth / 2 - 6)
.attr("y", barY - 28) .attr("y", barY - 28)
.attr("width", textWidth + 12) .attr("width", textWidth + 12)
@ -304,8 +314,8 @@ function drawGrouped(data) {
.attr("stroke-width", 0.5) .attr("stroke-width", 0.5)
.attr("opacity", 0.9); .attr("opacity", 0.9);
// Final visible text
g.append("text") g.append("text")
.attr("class", "lowest-annotation")
.attr("x", barX) .attr("x", barX)
.attr("y", barY - 14) .attr("y", barY - 14)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -375,7 +385,6 @@ function drawDotPlot(data) {
g.append("g") g.append("g")
.call(d3.axisLeft(y)); .call(d3.axisLeft(y));
// Add X-axis label
g.append("text") g.append("text")
.attr("x", width / 2) .attr("x", width / 2)
.attr("y", height + 50) .attr("y", height + 50)
@ -384,7 +393,7 @@ function drawDotPlot(data) {
.style("fill", darkMode ? "#fff" : "#000") .style("fill", darkMode ? "#fff" : "#000")
.text("Percentage Reporting Good Health (%)"); .text("Percentage Reporting Good Health (%)");
// 📌 Smart annotate lowest dot // 📌 Annotate lowest dot with dynamic box
if (groupedData.length > 0) { if (groupedData.length > 0) {
const flat = groupedData.flatMap(g => g.values); const flat = groupedData.flatMap(g => g.values);
const lowest = flat.reduce((min, d) => d.value < min.value ? d : min, flat[0]); const lowest = flat.reduce((min, d) => d.value < min.value ? d : min, flat[0]);
@ -405,6 +414,7 @@ function drawDotPlot(data) {
tempText.remove(); tempText.remove();
g.append("rect") g.append("rect")
.attr("class", "lowest-box")
.attr("x", dotX - textWidth / 2 - 6) .attr("x", dotX - textWidth / 2 - 6)
.attr("y", dotY - 28) .attr("y", dotY - 28)
.attr("width", textWidth + 12) .attr("width", textWidth + 12)
@ -416,6 +426,7 @@ function drawDotPlot(data) {
.attr("opacity", 0.9); .attr("opacity", 0.9);
g.append("text") g.append("text")
.attr("class", "lowest-annotation")
.attr("x", dotX) .attr("x", dotX)
.attr("y", dotY - 14) .attr("y", dotY - 14)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")