From b578c5359418ebbba8c0d55f3bfc6ee7de641380 Mon Sep 17 00:00:00 2001 From: dlawler489 <104159223@student.swin.edu.au> Date: Mon, 28 Apr 2025 15:33:26 +1000 Subject: [PATCH] fixed code commenting --- CSS/style.css | 171 ++++++++++++++++++++++++++--------------------- index.html | 18 ++++- script/script.js | 92 ++++++++++++++++--------- 3 files changed, 173 insertions(+), 108 deletions(-) diff --git a/CSS/style.css b/CSS/style.css index b19cbfe..855e082 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -1,76 +1,97 @@ +/* Base body styles */ body { - font-family: sans-serif; - } - .bar { - opacity: 0.8; - transition: opacity 0.3s; - } - .bar:hover { - opacity: 1; - } - .axis-label { - font-size: 14px; - font-weight: bold; - } - .tooltip { - position: absolute; - padding: 6px; - background: #fff; - border: 1px solid #ccc; - border-radius: 5px; - box-shadow: 0px 2px 8px rgba(0,0,0,0.2); - font-size: 12px; - pointer-events: none; - opacity: 0; - transition: all 0.3s ease; - } - .controls { - margin-bottom: 20px; - } - select { - margin-right: 10px; - padding: 5px; - } - button { - margin: 5px; - padding: 8px 12px; - font-size: 14px; - cursor: pointer; - background-color: #4E79A7; - color: white; - border: none; - border-radius: 4px; - } - button:hover { - background-color: #3a5f8c; - } - .legend { - margin-top: 20px; - } - .legend-item { - display: inline-block; - margin-right: 20px; - font-size: 14px; - } - .legend-color { - width: 12px; - height: 12px; - display: inline-block; - margin-right: 5px; - vertical-align: middle; - } - #loading { - font-size: 18px; - text-align: center; - margin: 20px; - } - .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 + font-family: sans-serif; +} + +/* Chart bars */ +.bar { + opacity: 0.8; + transition: opacity 0.3s; +} +.bar:hover { + opacity: 1; +} + +/* Axis labels */ +.axis-label { + font-size: 14px; + font-weight: bold; +} + +/* Tooltip styles */ +.tooltip { + position: absolute; + padding: 6px; + background: #fff; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0px 2px 8px rgba(0,0,0,0.2); + font-size: 12px; + pointer-events: none; + opacity: 0; + transition: all 0.3s ease; +} + +/* Controls section (dropdowns and buttons) */ +.controls { + margin-bottom: 20px; +} + +/* Dropdown (select) styling */ +select { + margin-right: 10px; + padding: 5px; +} + +/* Buttons styling */ +button { + margin: 5px; + padding: 8px 12px; + font-size: 14px; + cursor: pointer; + background-color: #4E79A7; + color: white; + border: none; + border-radius: 4px; +} +button:hover { + background-color: #3a5f8c; +} + +/* Legend area */ +.legend { + margin-top: 20px; +} +.legend-item { + display: inline-block; + margin-right: 20px; + font-size: 14px; +} +.legend-color { + width: 12px; + height: 12px; + display: inline-block; + margin-right: 5px; + vertical-align: middle; +} + +/* Loading message */ +#loading { + font-size: 18px; + text-align: center; + margin: 20px; +} + +/* Hidden class (for hiding elements like loading spinner) */ +.hidden { + display: none; +} + +/* Main page title */ +.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 d31d7c6..6ad0bfb 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,22 @@ Health Perception by Education Level + + + + + + + +

How Education Level Shapes Perceived Health

+
+
- - +
Loading chart, please wait...
+ +
+ - + \ No newline at end of file diff --git a/script/script.js b/script/script.js index 8edb336..6084930 100644 --- a/script/script.js +++ b/script/script.js @@ -1,25 +1,31 @@ +// SVG setup const svg = d3.select("svg"), margin = {top: 80, right: 30, bottom: 150, left: 160}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); +// Scales for grouped bar and dot plots const x0 = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1); const x1 = d3.scaleBand().padding(0.05); const y = d3.scaleLinear().rangeRound([height, 0]); +// Education levels for legend and grouped charts const educationLevels = [ "Pre-primary, primary and lower secondary education", "Upper secondary and post-secondary non-tertiary, all programmes", "Tertiary education" ]; +// Color scale for education levels const color = d3.scaleOrdinal() .domain(educationLevels) .range(["#4E79A7", "#F28E2B", "#59A14F"]); +// Tooltip div const tooltip = d3.select("body").append("div").attr("class", "tooltip"); +// Chart titles const chartTitle1 = svg.append("text") .attr("x", +svg.attr("width") / 2) .attr("y", 30) @@ -34,6 +40,7 @@ const chartTitle2 = svg.append("text") .style("font-size", "18px") .style("fill", "#666"); +// "No Data" placeholder text const noDataText = g.append("text") .attr("x", width / 2) .attr("y", height / 2) @@ -43,7 +50,7 @@ const noDataText = g.append("text") .style("display", "none") .text("No data available for selected filters"); -// Dark Mode toggle button (unchanged) +// Dark mode toggle button const darkModeToggle = document.createElement('button'); darkModeToggle.textContent = 'Toggle Dark Mode'; Object.assign(darkModeToggle.style, { @@ -58,6 +65,7 @@ Object.assign(darkModeToggle.style, { }); document.querySelector('.controls').appendChild(darkModeToggle); +// Dark mode logic let darkMode = false; darkModeToggle.addEventListener('click', () => { darkMode = !darkMode; @@ -70,19 +78,15 @@ darkModeToggle.addEventListener('click', () => { 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"); + g.selectAll(".lowest-annotation").style("fill", darkMode ? "#eee" : "red"); + g.selectAll(".lowest-box").attr("fill", darkMode ? "#222" : "#fff").attr("stroke", darkMode ? "#aaa" : "#999"); }); +// Load data d3.csv("PHSwithContinent.csv").then(function(data) { const allData = data; + // Populate continent and education dropdowns const continents = Array.from(new Set(data.map(d => d.CONTINENT))).sort(); continents.forEach(continent => { d3.select("#continentSelect") @@ -98,6 +102,7 @@ d3.csv("PHSwithContinent.csv").then(function(data) { .text(level); }); + // Setup static legend (initial) const legend = d3.select("#legend"); color.domain().forEach(d => { const item = legend.append("div").attr("class", "legend-item"); @@ -107,6 +112,7 @@ d3.csv("PHSwithContinent.csv").then(function(data) { item.append("span").text(d); }); + // Update the chart function updateChart() { const selectedContinent = d3.select("#continentSelect").property("value"); const selectedSex = d3.select("#sexSelect").property("value"); @@ -115,26 +121,26 @@ d3.csv("PHSwithContinent.csv").then(function(data) { updateLegend(selectedChart); + // Update chart titles let title1 = "Self-Reported Health"; let title2 = ""; if (selectedContinent !== "All") title2 += `${selectedContinent}`; if (selectedSex !== "All") title2 += (title2 ? ", " : "") + selectedSex; if (selectedEdu !== "All") title2 += (title2 ? ", " : "") + selectedEdu; - chartTitle1.text(title1); chartTitle2.text(title2); + // Filter data based on selections let filteredData = allData.filter(d => (selectedContinent === "All" || d.CONTINENT === selectedContinent) && (selectedSex === "All" || d.Sex === selectedSex) && (selectedEdu === "All" || d["Socio-economic status"] === selectedEdu) - ); - - filteredData = filteredData.filter(d => + ).filter(d => educationLevels.includes(d["Socio-economic status"]) && !isNaN(parseFloat(d.OBS_VALUE)) ); + // Clear and redraw g.selectAll("*").remove(); if (filteredData.length === 0) { noDataText.style("display", null); @@ -143,7 +149,6 @@ d3.csv("PHSwithContinent.csv").then(function(data) { noDataText.style("display", "none"); } - // 🆕 Decide which chart type to draw if (selectedChart === "grouped") { drawGrouped(filteredData); } else if (selectedChart === "dot") { @@ -156,64 +161,65 @@ d3.csv("PHSwithContinent.csv").then(function(data) { updateChart(); d3.select("#loading").classed("hidden", true); + // Attach event listeners d3.selectAll("select").on("change", updateChart); - d3.select("#resetButton").on("click", function() { d3.select("#continentSelect").property("value", "All"); d3.select("#sexSelect").property("value", "All"); d3.select("#incomeSelect").property("value", "All"); - d3.select("#chartTypeSelect").property("value", "grouped"); // 🆕 Reset chart type too + d3.select("#chartTypeSelect").property("value", "grouped"); updateChart(); }); + // Download chart as PNG d3.select("#downloadButton").on("click", function() { const c = d3.select("#continentSelect").property("value"); const s = d3.select("#sexSelect").property("value"); const e = d3.select("#incomeSelect").property("value"); - + const parts = [ "education_health", c !== "All" ? c : null, s !== "All" ? s : null, e !== "All" ? e.replace(/[^a-zA-Z0-9]+/g, "_").toLowerCase() : null ].filter(Boolean); - + const filename = parts.join("_") + ".png"; - - saveSvgAsPng(document.getElementById("chart"), filename); + + saveSvgAsPng(document.getElementById("chart"), { + filename: filename, + scale: 2, + backgroundColor: darkMode ? "#121212" : "#ffffff" + }); }); }); +// Update legend depending on chart type function updateLegend(chartType) { const legend = d3.select("#legend"); legend.html(""); // Clear existing if (chartType === "heatmap") { - // Create a wrapper for gradient + labels const wrapper = legend.append("div") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center") .style("margin-top", "10px"); - // Gradient bar wrapper.append("div") .style("width", "300px") .style("height", "20px") .style("background", "linear-gradient(to right, #edf8b1, #2c7fb8)") .style("margin-bottom", "5px"); - // Tick labels (0% — 50% — 100%) - const ticks = wrapper.append("div") + wrapper.append("div") .style("width", "300px") .style("display", "flex") .style("justify-content", "space-between") - .style("font-size", "12px"); - - ticks.html('0%50%100%'); + .style("font-size", "12px") + .html('0%50%100%'); } else { - // Grouped/Dot Chart — categorical legend educationLevels.forEach(level => { const item = legend.append("div").attr("class", "legend-item"); item.append("div") @@ -225,11 +231,13 @@ function updateLegend(chartType) { } function drawGrouped(data) { + // Setup x0, x1, and y domains const countries = Array.from(new Set(data.map(d => d["Reference area"]))); x0.domain(countries); x1.domain(educationLevels).rangeRound([0, x0.bandwidth()]); y.domain([0, 100]); + // Group data by country const groupedData = data.reduce((acc, d) => { const found = acc.find(v => v.Country === d["Reference area"]); const value = parseFloat(d.OBS_VALUE); @@ -239,6 +247,7 @@ function drawGrouped(data) { return acc; }, []); + // Draw grouped bars const countryGroups = g.append("g") .selectAll("g") .data(groupedData) @@ -255,6 +264,7 @@ function drawGrouped(data) { .attr("y", height) .attr("height", 0) .on("mouseover", function(event, d) { + // Show tooltip tooltip.html(`${d["Reference area"]}
${d["Socio-economic status"]}
${d.OBS_VALUE}%`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 40) + "px") @@ -263,6 +273,7 @@ function drawGrouped(data) { .style("transform", "translateY(-10px)"); }) .on("mouseout", function() { + // Hide tooltip tooltip.transition().duration(500) .style("opacity", 0) .style("transform", "translateY(0px)"); @@ -273,6 +284,7 @@ function drawGrouped(data) { .attr("y", d => y(d.value)) .attr("height", d => height - y(d.value)); + // Add X axis g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x0)) @@ -280,10 +292,11 @@ function drawGrouped(data) { .attr("transform", "rotate(45)") .style("text-anchor", "start"); + // Add Y axis g.append("g") .call(d3.axisLeft(y).ticks(10)); - // 📌 Annotate lowest bar with dynamic box + // Annotate lowest bar 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]); @@ -293,6 +306,7 @@ function drawGrouped(data) { const labelText = `Lowest: ${lowest["Reference area"]}`; + // Measure text width const tempText = g.append("text") .attr("x", -9999) .attr("y", -9999) @@ -303,6 +317,7 @@ function drawGrouped(data) { const textWidth = tempText.node().getBBox().width; tempText.remove(); + // Draw annotation background box g.append("rect") .attr("class", "lowest-box") .attr("x", barX - textWidth / 2 - 6) @@ -315,6 +330,7 @@ function drawGrouped(data) { .attr("stroke-width", 0.5) .attr("opacity", 0.9); + // Draw annotation text g.append("text") .attr("class", "lowest-annotation") .attr("x", barX) @@ -328,6 +344,7 @@ function drawGrouped(data) { } function drawDotPlot(data) { + // Setup x and y scales const x = d3.scaleLinear() .domain([0, 100]) .range([0, width]); @@ -337,6 +354,7 @@ function drawDotPlot(data) { .range([0, height]) .padding(0.3); + // Group data by country const groupedData = data.reduce((acc, d) => { const found = acc.find(v => v.Country === d["Reference area"]); const value = parseFloat(d.OBS_VALUE); @@ -346,6 +364,7 @@ function drawDotPlot(data) { return acc; }, []); + // Draw dot points const countryGroups = g.append("g") .selectAll("g") .data(groupedData) @@ -361,6 +380,7 @@ function drawDotPlot(data) { .attr("r", 0) .attr("fill", d => color(d["Socio-economic status"])) .on("mouseover", function(event, d) { + // Show tooltip tooltip.html(`${d["Reference area"]}
${d["Socio-economic status"]}
${d.OBS_VALUE}%`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 40) + "px") @@ -369,6 +389,7 @@ function drawDotPlot(data) { .style("transform", "translateY(-10px)"); }) .on("mouseout", function() { + // Hide tooltip tooltip.transition().duration(500) .style("opacity", 0) .style("transform", "translateY(0px)"); @@ -379,6 +400,7 @@ function drawDotPlot(data) { .attr("cx", d => x(d.value)) .attr("r", 6); + // Add axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(10)); @@ -386,6 +408,7 @@ 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) @@ -394,7 +417,7 @@ function drawDotPlot(data) { .style("fill", darkMode ? "#fff" : "#000") .text("Percentage Reporting Good Health (%)"); - // 📌 Annotate lowest dot with dynamic box + // Annotate lowest dot 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]); @@ -404,6 +427,7 @@ function drawDotPlot(data) { const labelText = `Lowest: ${lowest["Reference area"]}`; + // Measure text width const tempText = g.append("text") .attr("x", -9999) .attr("y", -9999) @@ -414,6 +438,7 @@ function drawDotPlot(data) { const textWidth = tempText.node().getBBox().width; tempText.remove(); + // Draw annotation background box g.append("rect") .attr("class", "lowest-box") .attr("x", dotX - textWidth / 2 - 6) @@ -426,6 +451,7 @@ function drawDotPlot(data) { .attr("stroke-width", 0.5) .attr("opacity", 0.9); + // Draw annotation text g.append("text") .attr("class", "lowest-annotation") .attr("x", dotX) @@ -439,6 +465,7 @@ function drawDotPlot(data) { } function drawHeatmap(data) { + // Setup x and y scales for heatmap const countries = [...new Set(data.map(d => d["Reference area"]))]; const x = d3.scaleBand() @@ -451,10 +478,12 @@ function drawHeatmap(data) { .range([0, height]) .padding(0.05); + // Color scale for heatmap (sequential) const colorScale = d3.scaleSequential() .interpolator(d3.interpolateYlGnBu) .domain([0, 100]); + // Draw heatmap squares g.selectAll() .data(data) .join("rect") @@ -464,6 +493,7 @@ function drawHeatmap(data) { .attr("height", y.bandwidth()) .attr("fill", d => colorScale(parseFloat(d.OBS_VALUE))) .on("mouseover", function(event, d) { + // Show tooltip tooltip.html(`${d["Reference area"]}
${d["Socio-economic status"]}: ${d.OBS_VALUE}%`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 40) + "px") @@ -472,11 +502,13 @@ function drawHeatmap(data) { .style("transform", "translateY(-10px)"); }) .on("mouseout", function() { + // Hide tooltip tooltip.transition().duration(500) .style("opacity", 0) .style("transform", "translateY(0px)"); }); + // Add axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x));