43 lines
1.2 KiB
HTML
43 lines
1.2 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>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>
|
|
|
|
<button id="resetButton">Reset Filters</button>
|
|
<button id="downloadButton">Download Chart as PNG</button>
|
|
</div>
|
|
|
|
<div id="loading">Loading chart, please wait...</div>
|
|
|
|
<svg width="960" height="600"></svg>
|
|
|
|
<div class="legend" id="legend"></div>
|
|
|
|
<script src="script/script.js"></script>
|
|
</body>
|
|
</html>
|