From ab0443461cd348a73df695fb6d6d5af68a4ffae4 Mon Sep 17 00:00:00 2001 From: dlawler489 <104159223@student.swin.edu.au> Date: Tue, 13 May 2025 19:06:48 +1000 Subject: [PATCH] updated axis labels and other minor changes --- CSS/style.css | 164 +++++++++------- index.html | 27 ++- script/script.js | 484 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 502 insertions(+), 173 deletions(-) diff --git a/CSS/style.css b/CSS/style.css index aeb1de8..855e082 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -1,69 +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; - } \ 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 d94c17b..6ad0bfb 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,22 @@ Health Perception by Education Level + + + + + + -

How Education Level Shapes Perceived Health

+ +

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 1c72b72..840dfa0 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: 60}, + 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 +// Dark mode toggle button const darkModeToggle = document.createElement('button'); darkModeToggle.textContent = 'Toggle Dark Mode'; Object.assign(darkModeToggle.style, { @@ -58,21 +65,28 @@ Object.assign(darkModeToggle.style, { }); document.querySelector('.controls').appendChild(darkModeToggle); +// Dark mode logic let darkMode = false; 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"); + 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") @@ -88,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"); @@ -97,39 +112,36 @@ 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"); const selectedEdu = d3.select("#incomeSelect").property("value"); + const selectedChart = d3.select("#chartTypeSelect").property("value"); - // Two-line title + 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)) ); - const countries = Array.from(new Set(filteredData.map(d => d["Reference area"]))); - x0.domain(countries); - x1.domain(educationLevels).rangeRound([0, x0.bandwidth()]); - y.domain([0, 100]); - + // Clear and redraw g.selectAll("*").remove(); - if (filteredData.length === 0) { noDataText.style("display", null); return; @@ -137,102 +149,25 @@ d3.csv("PHSwithContinent.csv").then(function(data) { noDataText.style("display", "none"); } - const groupedData = filteredData.reduce((acc, d) => { - const found = acc.find(v => v.Country === d["Reference area"]); - const value = parseFloat(d.OBS_VALUE); - const entry = { ...d, value }; - if (found) found.values.push(entry); - else acc.push({ Country: d["Reference area"], values: [entry] }); - return acc; - }, []); - - const countryGroups = g.append("g") - .selectAll("g") - .data(groupedData) - .join("g") - .attr("transform", d => `translate(${x0(d.Country)},0)`) - .attr("class", "country-group"); - - const bars = countryGroups.selectAll("rect") - .data(d => d.values) - .join("rect") - .attr("x", d => x1(d["Socio-economic status"])) - .attr("width", x1.bandwidth()) - .attr("fill", d => color(d["Socio-economic status"])) - .attr("y", height) - .attr("height", 0) - .attr("class", "bar") - .on("mouseover", function(event, d) { - tooltip.html(`${d["Reference area"]}
${d["Socio-economic status"]}: ${d.OBS_VALUE}%`) - .style("left", (event.pageX + 10) + "px") - .style("top", (event.pageY - 40) + "px") - .transition().duration(300) - .style("opacity", 1) - .style("transform", "translateY(-10px)"); - d3.select(this.parentNode).selectAll("rect").style("opacity", 1); - g.selectAll(".country-group").filter(gd => gd.Country !== d["Reference area"]) - .selectAll("rect").style("opacity", 0.2); - }) - .on("mouseout", function() { - tooltip.transition().duration(500) - .style("opacity", 0) - .style("transform", "translateY(0px)"); - g.selectAll("rect").style("opacity", 0.8); - }); - - bars.transition() - .duration(800) - .ease(d3.easeCubicOut) - .attr("y", d => y(d.value)) - .attr("height", d => height - y(d.value)); - - g.append("g") - .attr("transform", `translate(0,${height})`) - .call(d3.axisBottom(x0)) - .selectAll("text") - .attr("transform", "rotate(45)") - .style("text-anchor", "start"); - - g.append("g") - .call(d3.axisLeft(y).ticks(10)); - - // Annotate lowest - 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]); - - const barX = x0(lowest["Reference area"]) + x0.bandwidth() / 2; - const barY = y(lowest.value); - - g.append("rect") - .attr("x", barX - 50) - .attr("y", barY - 30) - .attr("width", 100) - .attr("height", 18) - .attr("rx", 4) - .attr("fill", darkMode ? "#222" : "#fff") - .attr("opacity", 0.85); - - g.append("text") - .attr("x", barX) - .attr("y", barY - 17) - .attr("text-anchor", "middle") - .style("font-size", "12px") - .style("font-weight", "bold") - .style("fill", darkMode ? "#fff" : "red") - .text(`Lowest: ${lowest["Reference area"]}`); + if (selectedChart === "grouped") { + drawGrouped(filteredData); + } else if (selectedChart === "dot") { + drawDotPlot(filteredData); + } else if (selectedChart === "heatmap") { + drawHeatmap(filteredData); } } 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"); updateChart(); }); @@ -240,15 +175,360 @@ d3.csv("PHSwithContinent.csv").then(function(data) { const c = d3.select("#continentSelect").property("value"); const s = d3.select("#sexSelect").property("value"); const e = d3.select("#incomeSelect").property("value"); - + const chartType = d3.select("#chartTypeSelect").property("value"); // 🆕 Get selected chart type + const parts = [ "education_health", + chartType, // 🆕 Add chart type into the filename 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.saveSvgAsPng(document.querySelector("svg"), filename); + + saveSvgAsPng(document.getElementById("chart"), filename, { + scale: 2, + backgroundColor: darkMode ? "#121212" : "#ffffff" + }); }); -}); \ No newline at end of file +}); +// Update legend depending on chart type +function updateLegend(chartType) { + const legend = d3.select("#legend"); + legend.html(""); // Clear existing + + if (chartType === "heatmap") { + const wrapper = legend.append("div") + .style("display", "flex") + .style("flex-direction", "column") + .style("align-items", "center") + .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") + .style("width", "300px") + .style("height", "20px") + .style("background", "linear-gradient(to right, #edf8b1, #2c7fb8)") + .style("margin-bottom", "5px"); + + wrapper.append("div") + .style("width", "300px") + .style("display", "flex") + .style("justify-content", "space-between") + .style("font-size", "12px") + .html('0%50%100%'); + + } else { + educationLevels.forEach(level => { + const item = legend.append("div").attr("class", "legend-item"); + item.append("div") + .attr("class", "legend-color") + .style("background-color", color(level)); + item.append("span").text(level); + }); + } +} + +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); + const entry = { ...d, value }; + if (found) found.values.push(entry); + else acc.push({ Country: d["Reference area"], values: [entry] }); + return acc; + }, []); + + // Draw grouped bars + const countryGroups = g.append("g") + .selectAll("g") + .data(groupedData) + .join("g") + .attr("transform", d => `translate(${x0(d.Country)},0)`) + .attr("class", "country-group"); + + countryGroups.selectAll("rect") + .data(d => d.values) + .join("rect") + .attr("x", d => x1(d["Socio-economic status"])) + .attr("width", x1.bandwidth()) + .attr("fill", d => color(d["Socio-economic status"])) + .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") + .transition().duration(300) + .style("opacity", 1) + .style("transform", "translateY(-10px)"); + }) + .on("mouseout", function() { + // Hide tooltip + tooltip.transition().duration(500) + .style("opacity", 0) + .style("transform", "translateY(0px)"); + }) + .transition() + .duration(800) + .ease(d3.easeCubicOut) + .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)) + .selectAll("text") + .attr("transform", "rotate(45)") + .style("text-anchor", "start"); + + // Add Y axis + g.append("g") + .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 + 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]); + + const barX = x0(lowest["Reference area"]) + x1(lowest["Socio-economic status"]) + x1.bandwidth() / 2; + const barY = y(lowest.value); + + const labelText = `Lowest: ${lowest["Reference area"]}`; + + // Measure text width + const tempText = g.append("text") + .attr("x", -9999) + .attr("y", -9999) + .style("font-size", "12px") + .style("font-weight", "bold") + .text(labelText); + + 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) + .attr("y", barY - 28) + .attr("width", textWidth + 12) + .attr("height", 20) + .attr("rx", 4) + .attr("fill", darkMode ? "#222" : "#fff") + .attr("stroke", darkMode ? "#aaa" : "#999") + .attr("stroke-width", 0.5) + .attr("opacity", 0.9); + + // Draw annotation text + g.append("text") + .attr("class", "lowest-annotation") + .attr("x", barX) + .attr("y", barY - 14) + .attr("text-anchor", "middle") + .style("font-size", "12px") + .style("font-weight", "bold") + .style("fill", darkMode ? "#eee" : "red") + .text(labelText); + } +} + +function drawDotPlot(data) { + // Setup x and y scales + const x = d3.scaleLinear() + .domain([0, 100]) + .range([0, width]); + + const y = d3.scaleBand() + .domain([...new Set(data.map(d => d["Reference area"]))]) + .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); + const entry = { ...d, value }; + if (found) found.values.push(entry); + else acc.push({ Country: d["Reference area"], values: [entry] }); + return acc; + }, []); + + // Draw dot points + const countryGroups = g.append("g") + .selectAll("g") + .data(groupedData) + .join("g") + .attr("transform", d => `translate(0,${y(d.Country)})`) + .attr("class", "country-group"); + + countryGroups.selectAll("circle") + .data(d => d.values) + .join("circle") + .attr("cy", d => 0) + .attr("cx", 0) + .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") + .transition().duration(300) + .style("opacity", 1) + .style("transform", "translateY(-10px)"); + }) + .on("mouseout", function() { + // Hide tooltip + tooltip.transition().duration(500) + .style("opacity", 0) + .style("transform", "translateY(0px)"); + }) + .transition() + .duration(800) + .ease(d3.easeCubicOut) + .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)); + + g.append("g") + .call(d3.axisLeft(y)); + + // Add x-axis label + g.append("text") + .attr("x", width / 2) + .attr("y", height + 50) + .attr("text-anchor", "middle") + .style("font-size", "14px") + .style("fill", darkMode ? "#fff" : "#000") + .text("Percentage Reporting Good Health (%)"); + + // 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]); + + const dotX = x(lowest.value); + const dotY = y(lowest["Reference area"]); + + const labelText = `Lowest: ${lowest["Reference area"]}`; + + // Measure text width + const tempText = g.append("text") + .attr("x", -9999) + .attr("y", -9999) + .style("font-size", "12px") + .style("font-weight", "bold") + .text(labelText); + + 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) + .attr("y", dotY - 28) + .attr("width", textWidth + 12) + .attr("height", 20) + .attr("rx", 4) + .attr("fill", darkMode ? "#222" : "#fff") + .attr("stroke", darkMode ? "#aaa" : "#999") + .attr("stroke-width", 0.5) + .attr("opacity", 0.9); + + // Draw annotation text + g.append("text") + .attr("class", "lowest-annotation") + .attr("x", dotX) + .attr("y", dotY - 14) + .attr("text-anchor", "middle") + .style("font-size", "12px") + .style("font-weight", "bold") + .style("fill", darkMode ? "#eee" : "red") + .text(labelText); + } +} + +function drawHeatmap(data) { + // Setup x and y scales for heatmap + const countries = [...new Set(data.map(d => d["Reference area"]))]; + + const x = d3.scaleBand() + .domain(educationLevels) + .range([0, width]) + .padding(0.05); + + const y = d3.scaleBand() + .domain(countries) + .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") + .attr("x", d => x(d["Socio-economic status"])) + .attr("y", d => y(d["Reference area"])) + .attr("width", x.bandwidth()) + .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") + .transition().duration(300) + .style("opacity", 1) + .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)); + + g.append("g") + .call(d3.axisLeft(y)); +} \ No newline at end of file