-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (284 loc) · 17.6 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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Health Care Resource Virtualization Group 6</title>
<link href="layui/css/layui.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
<script src="js/d3.v7.js"></script>
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/styles.css">
<!-- <link rel="stylesheet" href="css/icu_continent.css">-->
<style>
</style>
</head>
<body>
<div class="layui-container">
<!-- Header Section -->
<div class="layui-row layui-text-center">
<div class="layui-col-md12">
<h1>Comparing Development of Health Care Resources Over the Decade</h1>
<p>
Welcome to the Health Care Resource Visualization Data Display Platform. Here, we showcase the trends
and changes in health care resources over the past decade across various dimensions.
</p>
</div>
</div>
<!-- Introduction Section -->
<div class="layui-row content-section">
<div class="layui-col-md12">
<h2>Introduction to Health Resources</h2>
<p>
Health resources are key indicators of the quality and accessibility of medical services within society.
The following points outline major aspects of health resource development.
</p>
<hr>
<ul>
<li><strong>Medical Facilities:</strong> Covers the number and distribution of medical facilities.</li>
<li><strong>Medical Staff:</strong> The growth in the number of healthcare professionals.</li>
<li><strong>Health Service Coverage:</strong> Emphasizes the importance of expanding health service
coverage.
</li>
</ul>
</div>
</div>
<!-- Tab Section with Chart Area in Content -->
<div class="layui-row content-section">
<div class="layui-col-md12">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">Overall physician in counties</li>
<li>Physician changing trends</li>
<li>Hospital</li>
<li>ICU Bed</li>
<li>MED</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show ">
<div class="layui-row">
<div class="layui-col-md8">
<div class="tooltip" id="tooltip"></div>
<svg id="globe" width="960" height="800"></svg>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header"><b style="font-size: 20px"> Physician distribution in
the Wrold</b></div>
<div class="layui-card-body">
<input type="range" id="year-slider" min="2010" max="2020" step="1" value="2000"
style="float: right; margin-right: 50px">
<div id="year-label" style="float: right; padding-right: 50px">Year: 2000</div>
<br>
<b style="font-size: 15px">Description</b>
<hr>
<br>
This world map visualizes the global distribution of physicians across various
categories during the period from 2010 to 2020. Each country is color-coded to
reflect the total change in the number of physicians, providing an intuitive way
to identify regions with significant growth or decline. The map highlights
trends in healthcare workforce distribution, helping users understand shifts in
medical specialization on a global scale.
</div>
<div class="layui-card-body" style="margin-top: 10px">
<b style="font-size: 15px">How to use</b>
<hr>
The color of each country dynamically changes based on the total change in
physicians during the selected period. - Users can click on a country to view
detailed information about specific physician categories and their changes over
time.
<hr>
A slider allows users to select a specific year to analyze the data for
that particular time frame. - The map supports zooming, panning, and rotating
for enhanced navigation, making it easy to focus on specific regions or
countries. - Combine these features to explore global trends and analyze
detailed country-level data interactively.
</div>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-tab-item layui-show">
<div class="layui-card-body" style="margin-top: 10px">
<b style="font-size: 20px"> Description and How to Use</b>
<hr>
<p>This interactive line graph illustrates the trends in physician categories across
different years, from 2010 to 2020. Each line represents a category, allowing users
to observe how the number of physicians in each category has changed over time. This
visualization provides insights into the growth, stability, or decline of various
medical specialties within the selected timeframe.</p> <br>
<p>Users can utilize the country selector to view data for specific regions, enabling
comparisons and analysis of trends across different countries. Simply choose a
country from the selector to see how physician categories evolved in that location.
The graph dynamically updates based on your selection, helping identify regional
patterns and healthcare trends.</p>
</div>
<hr>
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px; position: relative;">
<div style="position: absolute; top: -20px; left: 0; margin: 20px;">
<label for="country-select">Select a Country:</label>
<select id="country-select"></select>
<br>
</div>
<svg id="line-chart" width="960" height="400" style="margin-top: 40px"></svg>
<div id="legend" style="margin-left: 20px;"></div>
<div class="tooltip" id="tooltip2" style="position: absolute;"></div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-tab-item layui-show">
<div class="info-box">
<h2>Contextual Information</h2>
<p>The hierarchical bar chart is designed to help users understand the distribution and
changes in the number of hospitals by type and ownership between the years 2010 and
2020. It visualizes the hierarchical structure of hospitals, breaking down the total
number of hospitals into various categories based on ownership type and whether they
are public or private.</p>
<h3>How to read</h3>
<p>Click on the bar to drill down for more details. Click the backgroud to return using
breadcrumbs.</p>
<p>Hover over to see the exact value.</p>
<p>
This breadcrumb trail shows your current position in the data hierarchy.
</p>
<p>When a bar changes color, it indicates that there are no further levels to explore
for that category.</p>
</div>
<div id="chart">
<!-- Chart content would go here -->
</div>
<div class="overview">
<h2>Hospital Distribution Overview (2010-2020)</h2>
<p>The hierarchical bar chart shows the distribution of hospitals by ownership and
category from 2010 to 2020. The data includes general, public, and private hospitals
(for-profit and not-for-profit).</p>
<h3>Hospital Ownership Models:</h3>
<ul>
<li><strong>Public Hospitals:</strong> Government-funded and focused on essential
services, often in underserved areas.
</li>
<li><strong>Private Hospitals:</strong> Divided into:
<ul>
<li><strong>For-Profit:</strong> Revenue-focused, offering specialized
services.
</li>
<li><strong>Not-for-Profit:</strong> Run by charitable entities, reinvesting
surplus into services.
</li>
</ul>
</li>
</ul>
<h3>General Hospitals:</h3>
<p>General hospitals cater to a wide range of healthcare needs and may be publicly or
privately operated, serving as the backbone of the healthcare system for communities
of all sizes.</p>
<h3>Healthcare Policies (2010-2020):</h3>
<p>Government initiatives and private healthcare regulations during this period likely
influenced hospital distribution and types, such as funding for public hospitals or
incentives for private ones.</p>
</div>
</div>
</div>
<!-- ICU Start-->
<div class="layui-tab-item">
<div id="chart-container">
<div class="layui-row">
<div class="layui-col-md8">
<svg></svg>
<span>Year:</span>
<span id="year-display"></span>
<input id="year-slider_bar" type="range" min="2000" max="2020" step="1" value="2000"
style="width: 900px;">
</div>
<div class="layui-col-md3 layui-col-md-offset1">
<div class="layui-card-body">
<h3>Description</h3>
<br>
This stacked bar chart shows ICU bed usage in OECD countries by continent and
bed type, including adult, pediatric, neonatal, and critical care ICUs. It
highlights regional variations and the relative share of each bed type, offering
insights into healthcare capacity for both routine and emergency needs.
<br>
<br>
Accurate ICU usage data supports proactive resource allocation, surge planning,
and healthcare resilience, promoting equitable access across OECD regions.
</div>
</div>
</div>
<!-- Static Timeslider for year selection -->
</div>
</div>
<div class="layui-tab-item">
<div class="layui-row">
<div class="layui-col-md8">
<!-- Chart container -->
<div id="chart-container_med">
<div id="chart_med"></div>
</div>
<div id="tooltip_med" class="tooltip"></div>
</div>
<div class="layui-col-md4">
<h2 class="chart-title">Availability of Medical Technology across OECD Countries</h2>
<!-- Controls container -->
<div class="controls">
<div>
<label for="technologyFilter">Technology Type:</label>
<select id="technologyFilter">
<option value="All">All</option>
</select>
</div>
<!-- Year Slider -->
<div class="timeslider-container" style="margin-top: 20px">
<label for="yearSlider_med">Year:</label>
<input type="range" id="yearSlider_med" min="2010" max="2020" step="1"
value="2020">
<span id="yearDisplay">2020</span>
</div>
<br>
<div id="details" style="background-color: #f1efef">
<h3>Details Panel</h3>
<p>Select a bubble to view more details here.</p>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
Medical technology encompasses a wide range of tools and methods for diagnosing,
monitoring, and treating health issues, directly impacting healthcare quality and
patient outcomes. This chart compares the availability of key medical technologies, such
as CT scanners, MRI units, and radiation therapy equipment, across OECD nations.
Understanding the distribution of these resources helps policymakers and healthcare
providers make informed decisions to enhance healthcare access and quality, address
disparities, and ensure timely, effective patient care.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<div class="footer">
<p>© 2024 Health Care Resource Visualization . All rights reserved.</p>
<p>©Group 6: Wang Chong Wan Huey Shin Jerusha Dass</p>
</div>
<!-- Import Layui JavaScript -->
<script src="layui/layui.js"></script>
<script src="js/map.js"></script>
<script src="js/line_chart.js"></script>
<script src="js/chart.js"></script>
<script src="js/icu_continent_chart.js"></script>
<script src="js/med_tech_avail.js"></script>
<script src="js/mri.js"></script>
<script>
const yearSlider_med = document.getElementById('yearSlider_med');
const yearDisplay = document.getElementById('yearDisplay');
yearSlider_med.addEventListener('input', function () {
yearDisplay.textContent = yearSlider_med.value;
});
</script>
</body>
</html>