TradeWarVisualization/index.html at main · RubyZh/TradeWarVisualization · 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
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
<!DOCTYPE HTML>
<!--
	Editorial by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>index</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
	</head>
	<body class="is-preload">

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<div id="main">
						<div class="inner">

							<!-- Header -->
								<header id="header">
									<a href="index.html" class="logo">China-US <strong>Trade War</strong></a>
									<ul class="icons">
										<li><a href="https://github.com/RubyZh/TradeWarVisualization" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
									</ul>
								</header>

							<!-- Banner -->
								<section id="banner">
									<div class="content">
										<header>
											<h1>Data visualization of the
											China-US Trade War</h1>
										</header>
										<p>A Comprehensive and in-depth visual analysis</p>
										<p>
											In 2025, the China-US trade war has entered a new and complex phase, shaped by the evolving dynamics of global supply chains, strategic competition in technology, and shifting geopolitical alliances.
											In this context, data visualization becomes an essential analytical tool. By converting complex data into interactive and comprehensible visual formats, this project aims to reveal underlying trends of the 2025 trade war.
										</p>
										<ul class="actions">
											<li><a href="#" class="button big">Learn More</a></li>
										</ul>
									</div>
									<span class="image object">
										<img src="images/pic00.webp" alt="" />
									</span>
								</section>

							<!-- Section -->
								<section>
									<header class="major">
										<h2>Our work</h2>
									</header>
<div class="features">
	<article>
		<span class="icon fa-gem"></span>
		<div class="content">
			<h3>Data Crawling</h3>
		</div>
	</article>
	<article>
		<span class="icon solid fa-cogs"></span>
		<div class="content">
			<h3>Data Preprocessing</h3>
		</div>
	</article>
	<article>
		<span class="icon solid fa-chart-bar"></span>
		<div class="content">
			<h3>2D Visualization Analysis</h3>
		</div>
	</article>
	<article>
		<span class="icon solid fa-vr-cardboard"></span>
		<div class="content">
			<h3>Immersive 3D Framework</h3>
		</div>
	</article>
</div>

								</section>

							<!-- Section -->
								<section>
									<header class="major">
										<h2>Data source</h2>
									</header>
									<div class="posts">
										<article>
											<a href="https://www.piie.com/research/piie-charts/2019/us-china-trade-war-tariffs-date-chart" class="image"><img src="images/pic01.png" alt="" /></a>
											<h3>PIIE CHARTS</h3>
											<p>US-China Trade War Tariffs: An Up-to-Date Chart.<br>
											This chart was originally published on September 20, 2019. <br>
											For more information related to this chart, see The US-China trade war and phase one agreement, Trump's Trade War Timeline: An Up-to-Date Guide, and Trump's trade war timeline 2.0: An up-to-date guide.</p>
											<ul class="actions">
												<li><a href="https://www.piie.com/" class="button">More</a></li>
											</ul>
										</article>
										<article>
											<a href="https://www.allsides.com/media-bias/ratings" class="image"><img src="images/pic02.png" alt="" /></a>
											<h3>Media Bias Ratings</h3>
											<p>AllSides Media Bias Ratings™ make the political leanings of media sources transparent so that you can get the full picture and think for yourself. AllSides has rated over 2,400 sources.</p>
											<ul class="actions">
												<li><a href="https://www.allsides.com/media-bias/ratings" class="button">More</a></li>
											</ul>
										</article>
										<article>
											<a href="https://dataverse.harvard.edu/" class="image"><img src="images/pic03.png" alt="" /></a>
											<h3>United Nations General Assembly Voting Data</h3>
											<p>
												This is a dataset of ideal point estimates based on roll-call votes in the UN General Assembly session. <br>
												Bailey, Michael A., Anton Strezhnev, and Erik Voeten. 2017. Estimating dynamic state preferences from united nations voting data. Journal of Conflict Resolution 61 (2): 430-56.
											</p>
											<ul class="actions">
												<li><a href="https://dataverse.harvard.edu/" class="button">More</a></li>
											</ul>
										</article>
										<article>
											<a href="#" class="image"><img src="images/pic04.png" alt="" /></a>
											<h3>Trade News Dataset</h3>
											<p>This news text dataset includes key fields such as Author, Publish Time (PTime), Crawl Time (DTime), and Title.
It also contains Mention Identifier, Mention Source Name, and a Unique ID to support entity recognition and data deduplication.</p>
											<ul class="actions">
												<li><a href="#" class="button">More</a></li>
											</ul>
										</article>

									</div>
								</section>

						</div>
					</div>

			<!-- Sidebar -->
					<div id="sidebar">
						<div class="inner">

							<!-- Search -->
								<section id="search" class="alt">
									<form method="post" action="#">
										<input type="text" name="query" id="query" placeholder="Search" />
									</form>
								</section>

							<!-- Menu -->
								<nav id="menu">
									<header class="major">
										<h2>Menu</h2>
									</header>
									<ul>
										<li><a href="index.html">Homepage</a></li>
										<li><a href="DataPreprocess.html">Data preprocess</a></li>
										<li><a href="Timeline.html">Timeline</a></li>
										<li>
											<span class="opener">Media Report</span>
											<ul>
												<li><a href="Topics.html">Topics</a></li>
												<li><a href="Emotions.html">Emotions</a></li>
											</ul>
										</li>
										<li>
											<span class="opener">3D Visualization</span>
											<ul>
												<li><a href="3D_0.html">Overview</a></li>
												<li><a href="3D_1.html">Data Import and Time Filtering</a></li>
												<li><a href="3D_2.html">Topic Heat Map</a></li>
												<li><a href="3D_3.html">Important Event Timeline and Daily News Sentiment Analysis</a></li>
												<li><a href="3D_4.html">National News Basic Information Analysis Panel</a></li>
												<li><a href="3D_5.html">National News Sentiment Dynamics Analysis</a></li>
												<li><a href="3D_6.html">News Summary Dynamic Carousel and Assisted Reading</a></li>
												<li><a href="3D_7.html">Tax</a></li>
												<li><a href="3D_8.html">VR Hardware Exploration Section</a></li>
											</ul>
										</li>
										<li><a href="#">Summary</a></li>
									</ul>
								</nav>

					<!-- Footer -->
					<footer id="footer">
						<p class="copyright">
							&copy; TradeVis360
						</p>
					</footer>

						</div>
					</div>

			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>