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

updated axis labels and other minor changes

Browse source
This commit is contained in:
dlawler489 2025-05-13 19:06:48 +10:00
parent effcec3bef
commit ab0443461c
3 changed files with 502 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
CSS/style.css
View file

@ -1,6 +1,9 @@
/* Base body styles */
body { body {
font-family: sans-serif; font-family: sans-serif;
} }
/* Chart bars */
.bar { .bar {
opacity: 0.8; opacity: 0.8;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -8,10 +11,14 @@ body {
.bar:hover { .bar:hover {
opacity: 1; opacity: 1;
} }
/* Axis labels */
.axis-label { .axis-label {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
/* Tooltip styles */
.tooltip { .tooltip {
position: absolute; position: absolute;
padding: 6px; padding: 6px;
@ -24,13 +31,19 @@ body {
opacity: 0; opacity: 0;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* Controls section (dropdowns and buttons) */
.controls { .controls {
margin-bottom: 20px; margin-bottom: 20px;
} }
/* Dropdown (select) styling */
select { select {
margin-right: 10px; margin-right: 10px;
padding: 5px; padding: 5px;
} }
/* Buttons styling */
button { button {
margin: 5px; margin: 5px;
padding: 8px 12px; padding: 8px 12px;
@ -44,6 +57,8 @@ body {
button:hover { button:hover {
background-color: #3a5f8c; background-color: #3a5f8c;
} }
/* Legend area */
.legend { .legend {
margin-top: 20px; margin-top: 20px;
} }
@ -59,11 +74,24 @@ body {
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
/* Loading message */
#loading { #loading {
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin: 20px; margin: 20px;
} }
/* Hidden class (for hiding elements like loading spinner) */
.hidden { .hidden {
display: none; display: none;
} }
/* Main page title */
.page-title {
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
font-size: 28px;
font-weight: bold;
}

25
index.html
View file

@ -3,13 +3,22 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Health Perception by Education Level</title> <title>Health Perception by Education Level</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<!-- D3.js library -->
<script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Save SVG as PNG library -->
<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>
<!-- Page Title -->
<h2 class="page-title">How Education Level Shapes Perceived Health</h2>
<!-- Filters and Controls -->
<div class="controls"> <div class="controls">
<label for="continentSelect">Continent:</label> <label for="continentSelect">Continent:</label>
<select id="continentSelect"> <select id="continentSelect">
@ -28,16 +37,28 @@
<option value="All">All</option> <option value="All">All</option>
</select> </select>
<label for="chartTypeSelect">Chart Type:</label>
<select id="chartTypeSelect">
<option value="grouped">Grouped Bar Chart</option>
<option value="dot">Dot Plot</option>
<option value="heatmap">Heatmap</option>
</select>
<!-- Buttons for Reset and Download -->
<button id="resetButton">Reset Filters</button> <button id="resetButton">Reset Filters</button>
<button id="downloadButton">Download Chart as PNG</button> <button id="downloadButton">Download Chart as PNG</button>
</div> </div>
<!-- Loading Message -->
<div id="loading">Loading chart, please wait...</div> <div id="loading">Loading chart, please wait...</div>
<svg width="960" height="600"></svg> <!-- Main SVG where the chart will be drawn -->
<svg id="chart" width="1400" height="600"></svg>
<!-- Legend Section -->
<div class="legend" id="legend"></div> <div class="legend" id="legend"></div>
<!-- Link to custom JavaScript file -->
<script src="script/script.js"></script> <script src="script/script.js"></script>
</body> </body>
</html> </html>

394
script/script.js
View file

@ -1,25 +1,31 @@
// SVG setup
const svg = d3.select("svg"), 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, width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom, height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); 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 x0 = d3.scaleBand().rangeRound([0, width]).paddingInner(0.1);
const x1 = d3.scaleBand().padding(0.05); const x1 = d3.scaleBand().padding(0.05);
const y = d3.scaleLinear().rangeRound([height, 0]); const y = d3.scaleLinear().rangeRound([height, 0]);
// Education levels for legend and grouped charts
const educationLevels = [ const educationLevels = [
"Pre-primary, primary and lower secondary education", "Pre-primary, primary and lower secondary education",
"Upper secondary and post-secondary non-tertiary, all programmes", "Upper secondary and post-secondary non-tertiary, all programmes",
"Tertiary education" "Tertiary education"
]; ];
// Color scale for education levels
const color = d3.scaleOrdinal() const color = d3.scaleOrdinal()
.domain(educationLevels) .domain(educationLevels)
.range(["#4E79A7", "#F28E2B", "#59A14F"]); .range(["#4E79A7", "#F28E2B", "#59A14F"]);
// Tooltip div
const tooltip = d3.select("body").append("div").attr("class", "tooltip"); const tooltip = d3.select("body").append("div").attr("class", "tooltip");
// Chart titles
const chartTitle1 = svg.append("text") const chartTitle1 = svg.append("text")
.attr("x", +svg.attr("width") / 2) .attr("x", +svg.attr("width") / 2)
.attr("y", 30) .attr("y", 30)
@ -34,6 +40,7 @@ const chartTitle2 = svg.append("text")
.style("font-size", "18px") .style("font-size", "18px")
.style("fill", "#666"); .style("fill", "#666");
// "No Data" placeholder text
const noDataText = g.append("text") const noDataText = g.append("text")
.attr("x", width / 2) .attr("x", width / 2)
.attr("y", height / 2) .attr("y", height / 2)
@ -43,7 +50,7 @@ const noDataText = g.append("text")
.style("display", "none") .style("display", "none")
.text("No data available for selected filters"); .text("No data available for selected filters");
// Dark mode toggle // Dark mode toggle button
const darkModeToggle = document.createElement('button'); const darkModeToggle = document.createElement('button');
darkModeToggle.textContent = 'Toggle Dark Mode'; darkModeToggle.textContent = 'Toggle Dark Mode';
Object.assign(darkModeToggle.style, { Object.assign(darkModeToggle.style, {
@ -58,21 +65,28 @@ Object.assign(darkModeToggle.style, {
}); });
document.querySelector('.controls').appendChild(darkModeToggle); document.querySelector('.controls').appendChild(darkModeToggle);
// Dark mode logic
let darkMode = false; let darkMode = false;
darkModeToggle.addEventListener('click', () => { 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");
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) { d3.csv("PHSwithContinent.csv").then(function(data) {
const allData = data; const allData = data;
// Populate continent and education dropdowns
const continents = Array.from(new Set(data.map(d => d.CONTINENT))).sort(); const continents = Array.from(new Set(data.map(d => d.CONTINENT))).sort();
continents.forEach(continent => { continents.forEach(continent => {
d3.select("#continentSelect") d3.select("#continentSelect")
@ -88,6 +102,7 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
.text(level); .text(level);
}); });
// Setup static legend (initial)
const legend = d3.select("#legend"); const legend = d3.select("#legend");
color.domain().forEach(d => { color.domain().forEach(d => {
const item = legend.append("div").attr("class", "legend-item"); 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); item.append("span").text(d);
}); });
// Update the chart
function updateChart() { function updateChart() {
const selectedContinent = d3.select("#continentSelect").property("value"); const selectedContinent = d3.select("#continentSelect").property("value");
const selectedSex = d3.select("#sexSelect").property("value"); const selectedSex = d3.select("#sexSelect").property("value");
const selectedEdu = d3.select("#incomeSelect").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 title1 = "Self-Reported Health";
let title2 = ""; let title2 = "";
if (selectedContinent !== "All") title2 += `${selectedContinent}`; if (selectedContinent !== "All") title2 += `${selectedContinent}`;
if (selectedSex !== "All") title2 += (title2 ? ", " : "") + selectedSex; if (selectedSex !== "All") title2 += (title2 ? ", " : "") + selectedSex;
if (selectedEdu !== "All") title2 += (title2 ? ", " : "") + selectedEdu; if (selectedEdu !== "All") title2 += (title2 ? ", " : "") + selectedEdu;
chartTitle1.text(title1); chartTitle1.text(title1);
chartTitle2.text(title2); chartTitle2.text(title2);
// Filter data based on selections
let filteredData = allData.filter(d => let filteredData = allData.filter(d =>
(selectedContinent === "All" || d.CONTINENT === selectedContinent) && (selectedContinent === "All" || d.CONTINENT === selectedContinent) &&
(selectedSex === "All" || d.Sex === selectedSex) && (selectedSex === "All" || d.Sex === selectedSex) &&
(selectedEdu === "All" || d["Socio-economic status"] === selectedEdu) (selectedEdu === "All" || d["Socio-economic status"] === selectedEdu)
); ).filter(d =>
filteredData = filteredData.filter(d =>
educationLevels.includes(d["Socio-economic status"]) && educationLevels.includes(d["Socio-economic status"]) &&
!isNaN(parseFloat(d.OBS_VALUE)) !isNaN(parseFloat(d.OBS_VALUE))
); );
const countries = Array.from(new Set(filteredData.map(d => d["Reference area"]))); // Clear and redraw
x0.domain(countries);
x1.domain(educationLevels).rangeRound([0, x0.bandwidth()]);
y.domain([0, 100]);
g.selectAll("*").remove(); g.selectAll("*").remove();
if (filteredData.length === 0) { if (filteredData.length === 0) {
noDataText.style("display", null); noDataText.style("display", null);
return; return;
@ -137,7 +149,101 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
noDataText.style("display", "none"); noDataText.style("display", "none");
} }
const groupedData = filteredData.reduce((acc, d) => { 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();
});
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 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(document.getElementById("chart"), 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") {
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('<span>0%</span><span>50%</span><span>100%</span>');
} 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 found = acc.find(v => v.Country === d["Reference area"]);
const value = parseFloat(d.OBS_VALUE); const value = parseFloat(d.OBS_VALUE);
const entry = { ...d, value }; const entry = { ...d, value };
@ -146,6 +252,7 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
return acc; return acc;
}, []); }, []);
// Draw grouped bars
const countryGroups = g.append("g") const countryGroups = g.append("g")
.selectAll("g") .selectAll("g")
.data(groupedData) .data(groupedData)
@ -153,7 +260,7 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
.attr("transform", d => `translate(${x0(d.Country)},0)`) .attr("transform", d => `translate(${x0(d.Country)},0)`)
.attr("class", "country-group"); .attr("class", "country-group");
const bars = countryGroups.selectAll("rect") countryGroups.selectAll("rect")
.data(d => d.values) .data(d => d.values)
.join("rect") .join("rect")
.attr("x", d => x1(d["Socio-economic status"])) .attr("x", d => x1(d["Socio-economic status"]))
@ -161,31 +268,28 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
.attr("fill", d => color(d["Socio-economic status"])) .attr("fill", d => color(d["Socio-economic status"]))
.attr("y", height) .attr("y", height)
.attr("height", 0) .attr("height", 0)
.attr("class", "bar")
.on("mouseover", function(event, d) { .on("mouseover", function(event, d) {
tooltip.html(`<strong>${d["Reference area"]}</strong><br/>${d["Socio-economic status"]}: ${d.OBS_VALUE}%`) // Show tooltip
tooltip.html(`<strong>${d["Reference area"]}</strong><br/>${d["Socio-economic status"]}<br/><strong>${d.OBS_VALUE}%</strong>`)
.style("left", (event.pageX + 10) + "px") .style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 40) + "px") .style("top", (event.pageY - 40) + "px")
.transition().duration(300) .transition().duration(300)
.style("opacity", 1) .style("opacity", 1)
.style("transform", "translateY(-10px)"); .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() { .on("mouseout", function() {
// Hide tooltip
tooltip.transition().duration(500) tooltip.transition().duration(500)
.style("opacity", 0) .style("opacity", 0)
.style("transform", "translateY(0px)"); .style("transform", "translateY(0px)");
g.selectAll("rect").style("opacity", 0.8); })
}); .transition()
bars.transition()
.duration(800) .duration(800)
.ease(d3.easeCubicOut) .ease(d3.easeCubicOut)
.attr("y", d => y(d.value)) .attr("y", d => y(d.value))
.attr("height", d => height - y(d.value)); .attr("height", d => height - y(d.value));
// Add X axis
g.append("g") g.append("g")
.attr("transform", `translate(0,${height})`) .attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x0)) .call(d3.axisBottom(x0))
@ -193,62 +297,238 @@ d3.csv("PHSwithContinent.csv").then(function(data) {
.attr("transform", "rotate(45)") .attr("transform", "rotate(45)")
.style("text-anchor", "start"); .style("text-anchor", "start");
// Add Y axis
g.append("g") g.append("g")
.call(d3.axisLeft(y).ticks(10)); .call(d3.axisLeft(y).ticks(10));
// Annotate lowest // 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) { 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]);
const barX = x0(lowest["Reference area"]) + x0.bandwidth() / 2; const barX = x0(lowest["Reference area"]) + x1(lowest["Socio-economic status"]) + x1.bandwidth() / 2;
const barY = y(lowest.value); 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") g.append("rect")
.attr("x", barX - 50) .attr("class", "lowest-box")
.attr("y", barY - 30) .attr("x", barX - textWidth / 2 - 6)
.attr("width", 100) .attr("y", barY - 28)
.attr("height", 18) .attr("width", textWidth + 12)
.attr("height", 20)
.attr("rx", 4) .attr("rx", 4)
.attr("fill", darkMode ? "#222" : "#fff") .attr("fill", darkMode ? "#222" : "#fff")
.attr("opacity", 0.85); .attr("stroke", darkMode ? "#aaa" : "#999")
.attr("stroke-width", 0.5)
.attr("opacity", 0.9);
// Draw annotation text
g.append("text") g.append("text")
.attr("class", "lowest-annotation")
.attr("x", barX) .attr("x", barX)
.attr("y", barY - 17) .attr("y", barY - 14)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.style("font-size", "12px") .style("font-size", "12px")
.style("font-weight", "bold") .style("font-weight", "bold")
.style("fill", darkMode ? "#fff" : "red") .style("fill", darkMode ? "#eee" : "red")
.text(`Lowest: ${lowest["Reference area"]}`); .text(labelText);
} }
} }
updateChart(); function drawDotPlot(data) {
d3.select("#loading").classed("hidden", true); // Setup x and y scales
const x = d3.scaleLinear()
.domain([0, 100])
.range([0, width]);
d3.selectAll("select").on("change", updateChart); const y = d3.scaleBand()
.domain([...new Set(data.map(d => d["Reference area"]))])
.range([0, height])
.padding(0.3);
d3.select("#resetButton").on("click", function() { // Group data by country
d3.select("#continentSelect").property("value", "All"); const groupedData = data.reduce((acc, d) => {
d3.select("#sexSelect").property("value", "All"); const found = acc.find(v => v.Country === d["Reference area"]);
d3.select("#incomeSelect").property("value", "All"); const value = parseFloat(d.OBS_VALUE);
updateChart(); 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(`<strong>${d["Reference area"]}</strong><br/>${d["Socio-economic status"]}<br/><strong>${d.OBS_VALUE}%</strong>`)
.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(`<strong>${d["Reference area"]}</strong><br/>${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)");
}); });
d3.select("#downloadButton").on("click", function() { // Add axes
const c = d3.select("#continentSelect").property("value"); g.append("g")
const s = d3.select("#sexSelect").property("value"); .attr("transform", `translate(0,${height})`)
const e = d3.select("#incomeSelect").property("value"); .call(d3.axisBottom(x));
const parts = [ g.append("g")
"education_health", .call(d3.axisLeft(y));
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);
});
});