79 lines
No EOL
2.3 KiB
HTML
79 lines
No EOL
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Health Perception by Education Level</title>
|
|
|
|
<!-- Link to external stylesheet -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
<!-- D3.js library -->
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
<!-- TopoJSON client library for map rendering -->
|
|
<script src="https://unpkg.com/topojson-client@3"></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>
|
|
|
|
<!-- jsPDF for PDF generation -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script>
|
|
window.jspdf = window.jspdf;
|
|
</script>
|
|
|
|
<!-- svg2pdf.js for SVG to PDF conversion -->
|
|
<script src="https://unpkg.com/svg2pdf.js@2.0.0/dist/svg2pdf.umd.min.js"></script>
|
|
<script>
|
|
window.svg2pdf = window.svg2pdf?.svg2pdf;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Page Title -->
|
|
<h2 class="page-title">How Education Level Shapes Perceived Health</h2>
|
|
|
|
<!-- Filters and Controls -->
|
|
<div class="controls">
|
|
<label for="continentSelect">Continent:</label>
|
|
<select id="continentSelect">
|
|
<option value="All">All</option>
|
|
</select>
|
|
|
|
<label for="sexSelect">Sex:</label>
|
|
<select id="sexSelect">
|
|
<option value="All">All</option>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
|
|
<label for="incomeSelect">Education Level:</label>
|
|
<select id="incomeSelect">
|
|
<option value="All">All</option>
|
|
</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="downloadButton">Download Chart as PNG</button>
|
|
</div>
|
|
|
|
<!-- Loading Message -->
|
|
<div id="loading">Loading chart, please wait...</div>
|
|
|
|
<!-- Main SVG where the chart will be drawn -->
|
|
<svg id="chart" width="1400" height="600"></svg>
|
|
|
|
<!-- Legend Section -->
|
|
<div class="legend" id="legend"></div>
|
|
|
|
<!-- Link to custom JavaScript file -->
|
|
<script src="script/script.js"></script>
|
|
</body>
|
|
</html> |