sharebnb/archive_index.html at main · charaschoe/sharebnb · GitHub

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>ShareBnB</title>
		<link
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
			rel="stylesheet"
		/>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/layout.css" />
		<link rel="stylesheet" href="css/tabs.css" />
		<link rel="stylesheet" href="css/tab-interaction.css" />
		<link rel="stylesheet" href="css/content.css" />
		<link rel="stylesheet" href="css/newyork_dots.css" />
		<link rel="stylesheet" href="css/tokyo.css" />
		<link rel="stylesheet" href="css/circle.css" />
	</head>
	<body>
		<main>
			<section>
				<div class="container">
					<label for="tab_1">
						<div id="content" class="sharebnb" style="color: black">
							ShareBnB
						</div>
						<div class="tab-content">
							<div>
								<h3 style="color: black">
									In vielen Großstädten wird Wohnraum knapp,
									während immer mehr Wohnungen über
									Plattformen wie Airbnb an Tourist*innen
									vermietet werden. Dies trägt zur Verdrängung
									von Einheimischen und steigenden Mietpreisen
									bei. Unsere Visualisierung zeigt die
									Verteilung von Airbnb-Angeboten in sieben
									Städten und soll ein Bewusstsein für die
									Auswirkungen auf den Wohnungsmarkt schaffen.
								</h3>
							</div>
							<div>
								<h6 style="color: black">
									Dr. Franklin Hernández Castro
									<br />Data Visualisation<br />
									HfG Schwäbisch Gmünd IG3 <br />Jonas
									Wienberg, Marlon Mutlu, Philipp Maginot
								</h6>
							</div>
						</div>
					</label>

					<label for="tab_2">
						<div id="content" class="new-york">NEW YORK</div>
						<div class="tab-content">
							<h1>
								N° of Airbnb listings
								<span class="city-name">New York</span>
								<span id="total-ids-new-york">Loading...</span>
							</h1>
							<h3>
								<span id="apartments-new-york">Loading...</span>
							</h3>
							<h3>
								<span id="population-new-york">Loading...</span> /
								<span id="tourists-new-york">Loading...</span>
							</h3>
							<h3>
								<span id="airbnb-index-new-york">Loading...</span>
							</h3>
							<div class="dots-wrapper" id="dots"></div>
							<p id="info-text">
								Out of 50 people, only a few can afford to live in NYC based on the median income.
							</p>
						</div>
					</label>

					<label for="tab_3">
						<div id="content" class="tokyo">TOKYO</div>
						<div class="tab-content">
							<h1>
								N° of Airbnb listings
								<span class="city-name">Tokyo</span>
								<span id="total-ids-tokyo">Loading...</span>
							</h1>
							<h3>
								<span id="apartments-tokyo">Loading...</span>
							</h3>
							<h3>
								<span id="population-tokyo">Loading...</span> /
								<span id="tourists-tokyo">Loading...</span>
							</h3>
							<h3>
								<span id="airbnb-index-tokyo">Loading...</span>
							</h3>
							<div id="treemap-container" style="width: 100%; height: 500px"></div>
							<div id="percentage-output"></div>
						</div>
						<script type="module" src="data/tokyo.js"></script>
						<script type="module" src="js/script_tokyo.js"></script>
					</label>

					<label for="tab_4">
						<div id="content" class="paris">PARIS</div>
						<div class="tab-content">
							<h1>
								N° of Airbnb listings
								<span class="city-name">Paris</span>
								<span id="total-ids-paris">Loading...</span>
							</h1>
							<h3>
								<span id="apartments-paris">Loading...</span>
							</h3>
							<h3>
								<span id="population-paris">Loading...</span> /
								<span id="tourists-paris">Loading...</span>
							</h3>
							<h3>
								<span id="airbnb-index-paris">Loading...</span>
							</h3>

							<!-- Neuer Canvas und Slider für die Kreise in Paris -->
							<div class="label-container">
								<div class="label">available</div>
								<div class="label">not available</div>
							</div>

							<!-- Kreise werden auf dem Canvas gezeichnet -->
							<canvas id="canvas"></canvas>

							<!-- Slider zur Steuerung -->
							<div id="slider-container">
								<input type="range" id="slider" min="1" max="32" value="7">
								<div id="slider-value">Minimum Nights: 7</div>
							</div>

							<script src="js/circle.js"></script>
						</div>
					</label>
				</div>
			</section>
		</main>

		<script type="module" src="js/script.js"></script>
		<script type="module" src="js/script4.js"></script>
		<script src="/data/apartmentPrices.js"></script>
		<script src="js/newyork.js"></script>
		<script src="js/circle.js"></script>
	</body>
</html>