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

Merge branch 'main' of https://github.com/dlawler489/COS30045

Browse source
This commit is contained in:
dlawler489 2025-05-13 19:08:58 +10:00
commit 44048b9e29
1 changed files with 2 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
script/script.js
View file

@ -175,11 +175,11 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
const c = d3.select("#continentSelect").property("value"); const c = d3.select("#continentSelect").property("value");
const s = d3.select("#sexSelect").property("value"); const s = d3.select("#sexSelect").property("value");
const e = d3.select("#incomeSelect").property("value"); const e = d3.select("#incomeSelect").property("value");
const chartType = d3.select("#chartTypeSelect").property("value"); // 🆕 Get selected chart type const chartType = d3.select("#chartTypeSelect").property("value"); //Get selected chart type
const parts = [ const parts = [
"education_health", "education_health",
chartType, // 🆕 Add chart type into the filename chartType, //Add chart type into the filename
c !== "All" ? c : null, c !== "All" ? c : null,
s !== "All" ? s : null, s !== "All" ? s : null,
e !== "All" ? e.replace(/[^a-zA-Z0-9]+/g, "_").toLowerCase() : null e !== "All" ? e.replace(/[^a-zA-Z0-9]+/g, "_").toLowerCase() : null
@ -205,18 +205,11 @@ function updateLegend(chartType) {
.style("align-items", "center") .style("align-items", "center")
.style("margin-top", "10px"); .style("margin-top", "10px");
wrapper.append("div")
.style("font-size", "13px")
.style("margin-bottom", "6px")
.style("font-weight", "bold")
.text("Percentage of population reporting good health");
wrapper.append("div") wrapper.append("div")
.style("width", "300px") .style("width", "300px")
.style("height", "20px") .style("height", "20px")
.style("background", "linear-gradient(to right, #edf8b1, #2c7fb8)") .style("background", "linear-gradient(to right, #edf8b1, #2c7fb8)")
.style("margin-bottom", "5px"); .style("margin-bottom", "5px");
wrapper.append("div") wrapper.append("div")
.style("width", "300px") .style("width", "300px")
.style("display", "flex") .style("display", "flex")
@ -301,17 +294,6 @@ function drawGrouped(data) {
g.append("g") g.append("g")
.call(d3.axisLeft(y).ticks(10)); .call(d3.axisLeft(y).ticks(10));
// Add Y-axis label (final adjusted for better alignment)
g.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -45) // Adjust this closer or farther as needed
.attr("dy", "-1em")
.style("text-anchor", "middle")
.style("font-size", "14px")
.style("fill", darkMode ? "#fff" : "#000")
.text("Percentage of population reporting good health");
// Annotate lowest bar // Annotate lowest bar
if (groupedData.length > 0) { if (groupedData.length > 0) {
const flat = groupedData.flatMap(g => g.values); const flat = groupedData.flatMap(g => g.values);