-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (77 loc) · 3.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive US Urban Growth Visualization</title>
<!-- Include D3.js and TopoJSON libraries -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v4.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- Ribbon -->
<div class="ribbon">
<div>Interactive US Urban Growth Map</div>
<button onclick="switchToNewPage()">Go to Comparisons</button>
<script>
function switchToNewPage() {
window.location.href = "comparisons.html"; // Replace with your target HTML file
}
</script>
<a href="https://youtu.be/VeeJf4gAHz0" target="_blank" class="youtube-button">Watch Screencast</a>
</div>
<!-- Dropdown for dataset selection -->
<div class="vis-container">
<div class = "text-description">
<p>
Over the past decade, the United States has seen steady increases in population, job opportunities, and median income.
However, these trends are dwarfed by the explosive rise in housing prices. This visualization explores how these metrics interrelate
and the challenges that accompany such rapid housing market growth.
</p>
</div>
<!-- Main layout container -->
<div id="map-container">
<div class="dropdown-container">
<label for="datasetSelect">Dataset:</label>
<select id="datasetSelect">
<option value="population">Population</option>
<option value="jobGrowth">Job Growth</option>
<option value="medianIncome">Median Income</option>
<option value="housing">Housing Price</option>
</select>
<div id="scroll-bar-container">
<label for="year-slider">Select Year:</label>
<input type="range" id="year-slider" min="2012" max="2024" step="1" value="2012">
<span id="year-display">2012</span>
</div>
</div>
<div id="us-map-svg"></div>
<div id="legend-container"></div> <!-- Legend is now above -->
<div id="dynamic-text-container">
<p id="dynamic-text">Select a state to see percentage changes.</p>
</div>
</div>
<div id="dynamic-text-container">
<p>Explore how housing prices, population, job growth, and median income vary across states. Select from the dropdown the specific urban growth variable you want to visualize, as well as choose the year.
Click on a state to compare changes between 2012 and the selected year. Observe how housing prices outpace other metrics
in nearly every state, reshaping the economic landscape.</p>
</div>
</div>
<!-- Tooltip for map interaction -->
<div class="tooltip" id="tooltip"></div>
<!-- JavaScript files -->
<script src="js/script.js"></script>
<script src="js/map.js"></script>
<div class="ribbon">
<button onclick="switchToProcessPage()">See Process Book</button>
<script>
function switchToProcessPage() {
window.location.href = "Process Book.pdf";
}
</script>
</div>
</body>
</html>