52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Health Perception by Education Level</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h2 class="page-title">How Education Level Shapes Perceived Health</h2>
|
|
|
|
<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>
|
|
|
|
<button id="resetButton">Reset Filters</button>
|
|
<button id="downloadButton">Download Chart as PNG</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="loading">Loading chart, please wait...</div>
|
|
|
|
<svg id="chart" width="1400" height="600"></svg>
|
|
|
|
<div class="legend" id="legend"></div>
|
|
|
|
<script src="script/script.js"></script>
|
|
</body>
|
|
</html>
|