Skip to content

Commit 47c53b6

Browse files
Changlan-ChenChanglan-Chen
authored
Add files via upload
1 parent ecace81 commit 47c53b6

1 file changed

Lines changed: 323 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="description"
8+
content="An interactive data visualization project exploring whether Belt and Road Initiative countries show different development trajectories from non-BRI countries."
9+
/>
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
12+
<link rel="icon" href="img/logo-cropped.png" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
16+
rel="stylesheet"
17+
/>
18+
19+
<link rel="stylesheet" href="css/general.css" />
20+
<link rel="stylesheet" href="css/style.css" />
21+
<link rel="stylesheet" href="css/plots.css" />
22+
<link rel="stylesheet" href="css/queries.css" />
23+
24+
<script
25+
type="module"
26+
src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"
27+
></script>
28+
<script
29+
nomodule
30+
src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"
31+
></script>
32+
<script
33+
defer
34+
src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
35+
></script>
36+
37+
<script src="https://d3js.org/d3.v7.min.js"></script>
38+
<script defer src="js/script.js"></script>
39+
<script defer src="js/vis.js"></script>
40+
41+
<title>BRI Development Dashboard</title>
42+
</head>
43+
44+
<body>
45+
<header class="header">
46+
<a href="#overview">
47+
<img class="logo" alt="BRI project logo" src="img/logo-cropped.png" />
48+
</a>
49+
50+
<nav class="main-nav">
51+
<ul class="main-nav-list">
52+
<li><a class="main-nav-link" href="#overview">Overview</a></li>
53+
<li><a class="main-nav-link" href="#map">World Map</a></li>
54+
<li><a class="main-nav-link" href="#trends">Time Trends</a></li>
55+
<li><a class="main-nav-link" href="#snapshot">Snapshot</a></li>
56+
<li><a class="main-nav-link" href="#change">Change</a></li>
57+
</ul>
58+
</nav>
59+
60+
<button class="btn-mobile-nav">
61+
<ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
62+
<ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
63+
</button>
64+
</header>
65+
66+
<main>
67+
<section class="section-hero" id="overview">
68+
<div class="hero">
69+
<div class="hero-text-box">
70+
<h1 class="heading-primary">
71+
Belt and Road Initiative: Development Paths in Comparison
72+
</h1>
73+
<p class="hero-description">
74+
This project explores whether countries participating in the Belt
75+
and Road Initiative show different development trajectories from
76+
comparable non-BRI countries. Using World Development Indicators,
77+
we compare long-run trends, country-level snapshots, and regional
78+
changes across economic and infrastructure-related measures.
79+
</p>
80+
<a href="#map" class="btn btn--full margin-right-sm">Start Exploring &darr;</a>
81+
<a href="#trends" class="btn btn--outline">View Trends</a>
82+
</div>
83+
<div class="hero-img-box">
84+
<img
85+
src="img/train.jpg"
86+
class="hero-img"
87+
alt="Freight train representing international connectivity"
88+
/>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<section class="section-cta">
94+
<div class="container">
95+
<div class="cta">
96+
<div class="cta-text-box">
97+
<h2 class="heading-secondary">Project Introduction</h2>
98+
<p class="cta-text">
99+
Launched in 2013, the Belt and Road Initiative (BRI) is often
100+
associated with infrastructure, trade connectivity, and regional
101+
cooperation. But do BRI countries actually look different in the
102+
data? This dashboard approaches that question descriptively,
103+
comparing BRI and non-BRI countries across time and space.
104+
</p>
105+
<p class="cta-text">
106+
Instead of reducing the story to one indicator, the site combines
107+
a world map, long-run trend lines, a country snapshot scatter plot,
108+
and a post-2013 change chart. Together, these views show both
109+
average patterns and the heterogeneity hidden behind them.
110+
</p>
111+
</div>
112+
<div class="cta-img-box" role="img" aria-label="Project introduction illustration"></div>
113+
</div>
114+
</div>
115+
</section>
116+
117+
<section class="section-map" id="map">
118+
<div class="container center-text">
119+
<span class="subheading">Geographic Overview</span>
120+
<h2 class="heading-secondary">Where Are BRI Countries Located?</h2>
121+
<p class="map-description">
122+
The map gives a spatial overview of BRI and non-BRI countries in our dataset.
123+
Click any country to inspect its classification and open a radar profile of
124+
its development indicators over time.
125+
</p>
126+
</div>
127+
128+
<div class="container">
129+
<div id="world-map" class="map-box"></div>
130+
<p class="map-legend-note">
131+
Green countries are labeled as BRI participants, grey countries are non-BRI/control countries,
132+
orange marks China, and light grey means no classification is available.
133+
</p>
134+
<div id="country-info" class="country-info-box">
135+
Click a country on the map to inspect its classification and radar profile.
136+
</div>
137+
</div>
138+
</section>
139+
140+
<section class="section-time" id="trends">
141+
<div class="container">
142+
<span class="subheading">Main Visualization</span>
143+
<h2 class="heading-secondary">Time Trends Across Countries</h2>
144+
</div>
145+
146+
<div class="container map-narrative">
147+
<div class="thread">
148+
<div class="thread-text-box">
149+
<p class="cta-text">
150+
This section keeps the main time-series view. It shows how key development indicators evolve
151+
from 2000 onward for BRI and non-BRI countries.
152+
</p>
153+
<p class="cta-text">
154+
The vertical reference lines highlight 2013, when the BRI was announced, and 2019 as a later
155+
reference point. Together they help users inspect whether average trajectories appear to diverge,
156+
converge, or remain similar across groups.
157+
</p>
158+
</div>
159+
</div>
160+
</div>
161+
</section>
162+
163+
<section class="video-sec container grid-2-rows">
164+
<div class="video-box">
165+
<div class="viz-controls">
166+
<label for="indicator-select">Indicator</label>
167+
<select id="indicator-select"></select>
168+
169+
<label for="region-select">Region</label>
170+
<select id="region-select"></select>
171+
</div>
172+
173+
<div id="line-chart" class="viz-box"></div>
174+
<p class="viz-note">
175+
Solid line = BRI average, dashed line = non-BRI average. The country selector is added automatically by the script.
176+
</p>
177+
178+
<div class="insight-grid">
179+
<div id="region-filter-panel" class="viz-small"></div>
180+
<div id="tooltip-panel" class="viz-small"></div>
181+
</div>
182+
</div>
183+
</section>
184+
185+
<section class="section-feature-viz" id="snapshot">
186+
<div class="container center-text">
187+
<span class="subheading">Country Snapshot</span>
188+
<h2 class="heading-secondary">Development Snapshot in a Single Year</h2>
189+
</div>
190+
191+
<div class="container feature-card">
192+
<div class="feature-grid">
193+
<div>
194+
<div class="control-row">
195+
<label for="snapshot-year">Year</label>
196+
<input type="range" id="snapshot-year" min="2000" max="2020" step="1" value="2019" />
197+
<span id="snapshot-year-value" style="font-size:1.5rem;font-weight:600;">2019</span>
198+
199+
<label for="snapshot-region">Region</label>
200+
<select id="snapshot-region"></select>
201+
</div>
202+
<div id="snapshot-chart" class="viz-box"></div>
203+
<p class="viz-note">
204+
Each dot is a country. The x-axis shows GDP per capita (log scale), the y-axis shows internet use.
205+
Color indicates BRI status. This makes within-group heterogeneity visible much better than a single summary statistic.
206+
</p>
207+
</div>
208+
209+
<div class="feature-text">
210+
<p>
211+
Instead of another boxplot, this snapshot view lets users see the spread of countries directly.
212+
It answers a more intuitive question: <strong>where do individual countries sit</strong> in the
213+
development space for a given year?
214+
</p>
215+
<p>
216+
Countries in the upper-right tend to combine higher income with wider internet adoption, while those in the
217+
lower-left are still earlier in that transition. Because every country appears as a point, outliers and clusters
218+
become much easier to notice.
219+
</p>
220+
<ul class="feature-bullets">
221+
<li>Use the year slider to move from early 2000s conditions to more recent snapshots.</li>
222+
<li>Use the region filter to see whether the same BRI/non-BRI pattern holds within Africa, Asia, or Europe.</li>
223+
<li>Hover a point to read the exact country values.</li>
224+
</ul>
225+
</div>
226+
</div>
227+
</div>
228+
</section>
229+
230+
<section class="section-change" id="change">
231+
<div class="container center-text">
232+
<span class="subheading">Change Since the BRI Launch</span>
233+
<h2 class="heading-secondary">How Much Did Regions Change After 2013?</h2>
234+
</div>
235+
236+
<div class="container feature-card">
237+
<div class="feature-grid">
238+
<div>
239+
<div class="control-row">
240+
<label for="change-indicator-select">Indicator</label>
241+
<select id="change-indicator-select"></select>
242+
243+
<label for="change-year">End year</label>
244+
<input type="range" id="change-year" min="2014" max="2020" step="1" value="2019" />
245+
<span id="change-year-value" style="font-size:1.5rem;font-weight:600;">2019</span>
246+
</div>
247+
<div id="change-chart" class="viz-box"></div>
248+
<p class="viz-note">
249+
Bars show the change in regional averages between 2013 and the selected end year.
250+
Positive bars indicate improvement on the selected indicator; negative bars indicate decline.
251+
</p>
252+
</div>
253+
254+
<div class="callout-box">
255+
<h3>Why this view works better</h3>
256+
<p>
257+
Your earlier “Data and Methods” panel was mostly text. This replacement turns it into an analytical visualization.
258+
The chart directly summarizes <strong>post-2013 change</strong>, which is probably one of the first comparisons a user wants to make.
259+
</p>
260+
<p>
261+
The bar layout also complements the line chart nicely: the line chart shows full trajectories, while this view compresses them into a simple comparison of change magnitude.
262+
</p>
263+
<p>
264+
Read it as descriptive evidence, not causal proof. It helps identify where BRI and non-BRI regions appear to move differently, and where they do not.
265+
</p>
266+
</div>
267+
</div>
268+
</div>
269+
</section>
270+
</main>
271+
272+
<footer class="footer">
273+
<div class="container grid grid--footer">
274+
<div class="logo-col">
275+
<a href="#overview" class="footer-logo">
276+
<img class="logo" alt="Project logo" src="img/logo-cropped.png" />
277+
</a>
278+
<p class="copyright">COM-480 Data Visualization Project Prototype</p>
279+
</div>
280+
281+
<div class="address-col">
282+
<p class="footer-heading">Dataset</p>
283+
<address class="contacts">
284+
<p class="address">World Development Indicators + BRI labels</p>
285+
<p>
286+
<a class="footer-link" href="https://data.worldbank.org/" target="_blank">World Bank Data</a><br />
287+
<a class="footer-link" href="#overview">Project Overview</a>
288+
</p>
289+
</address>
290+
</div>
291+
292+
<nav class="nav-col">
293+
<p class="footer-heading">Sections</p>
294+
<ul class="footer-nav">
295+
<li><a class="footer-link" href="#map">World Map</a></li>
296+
<li><a class="footer-link" href="#trends">Time Trends</a></li>
297+
<li><a class="footer-link" href="#snapshot">Snapshot</a></li>
298+
<li><a class="footer-link" href="#change">Change</a></li>
299+
</ul>
300+
</nav>
301+
302+
<nav class="nav-col">
303+
<p class="footer-heading">Tools</p>
304+
<ul class="footer-nav">
305+
<li><a class="footer-link" href="#">D3.js</a></li>
306+
<li><a class="footer-link" href="#">HTML / CSS</a></li>
307+
<li><a class="footer-link" href="#">JavaScript</a></li>
308+
<li><a class="footer-link" href="#">CSV + GeoJSON</a></li>
309+
</ul>
310+
</nav>
311+
312+
<nav class="nav-col">
313+
<p class="footer-heading">Team</p>
314+
<ul class="footer-nav">
315+
<li><a class="footer-link" href="#">Changlan Chen</a></li>
316+
<li><a class="footer-link" href="#">Yizhi Zhao</a></li>
317+
<li><a class="footer-link" href="#">Kaile Chu</a></li>
318+
</ul>
319+
</nav>
320+
</div>
321+
</footer>
322+
</body>
323+
</html>

0 commit comments

Comments
 (0)