-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path3D_2.html
More file actions
191 lines (169 loc) · 8.55 KB
/
3D_2.html
File metadata and controls
191 lines (169 loc) · 8.55 KB
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
<!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>Topic Heat Map</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>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Topic Heat Map</h1>
</header>
<header class="major">
<h2 id="content">Introduction</h2>
</header>
<p>This feature dynamically displays the number of news articles published by each country within the user-selected time range, using color changes to indicate discussion heat.</p>
<p>Users can see the level of attention each country is giving to a specific news topic, enabling analysis of which countries are more focused on a particular event or topic during a specific time period.</p>
<p>The system dynamically adjusts colors based on each country's news volume, transitioning from red to transparent. Red indicates the highest heat, while transparent indicates no news discussions.</p>
<hr class="major" />
<header class="major">
<h2 id="content">Effect Demonstration</h2>
</header>
<span class="image object">
<video width="100%" controls poster="images/1_pic_0.jpg" autoplay muted loop playsinline>
<source src="videos/1_hot.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</span>
<hr class="major" />
<header class="major">
<h2 id="content">Core Design</h2>
</header>
<div class="row">
<div class="col-6 col-12-small">
<h3><code>ApplyHeatmapColors</code> Method</h3>
<p>This method retrieves the number of news articles for each country using <code>NewsDataLoader.Instance.GetNewsCountsInRange(start, end)</code> based on the user-defined time range, and maps each country's news count to a color value.</p>
</div>
<div class="col-6 col-12-small">
<h3><code>ToggleCountrySurface</code> Method</h3>
<p>Used to render the display status and color of each country on the map. Based on the input color parameters, it updates the display status and color values for each country.</p>
</div>
</div>
<hr class="major" />
<header class="major">
<h2 id="content">Case Study</h2>
</header>
<h3 id="content">Immersive Analysis of News Texts on the US-China Trade War in 2025</h3>
<p>Changes in the popularity of topics discussed in different countries
Using the topic popularity mapping function, we adjusted the time slider from 2018 to 2025 and observed several significant differences in the popularity of topics discussed in different geographical areas.</p>
<p><span class="image left"><img src="images/1_pic_0.jpg" alt="" /></span>
China and India in Asia, and the United States and Canada in the Americas exhibit the hottest discussion trends. As the main protagonists of the event, all policy changes, tariff adjustments, and diplomatic responses involving China and the United States are widely reported and discussed. India, as a neighboring country closely linked to China in terms of geography and economy, and Canada, as a neighboring country highly dependent on the United States economically, will be significantly impacted and become indirect victims, hence the media continues to report on this issue.
</p>
<hr class="major" />
<p><span class="image right"><img src="images/1_pic_1.jpg" alt="" /></span>
At the same time, we found that during the middle to late April 2025 period, the global discussion heat for this topic experienced a brief decline. This can be attributed to the following factors: After entering April, the new round of U.S. tariffs took effect on April 2, sparking high levels of media and public attention and creating a temporary peak in discussions. However, by mid-April, the U.S. did not introduce new sanctions, and negotiations entered a technical consultation phase. Meanwhile, China’s domestic focus shifted to internal economic adjustments: On April 8–9, China held a Central Peripheral Work Conference in Beijing, emphasizing diplomatic strategies and regional cooperation, followed by state visits to Vietnam, Malaysia, Cambodia, with a focus on regional partnerships and economic and trade cooperation. Media coverage of the “trade war” thus shifted its focus. Therefore, the decline in discussion intensity in the latter half of April was due to a combination of factors, including the absence of new conflicts, shifts in media attention, and the gradual implementation of policy adjustments.
</p>
<hr class="major" />
<header class="major">
<h2 id="content">Question</h2>
</header>
<div class="box">
<p>
Additionally, we identified a visualization issue: the heat distribution in Europe was not clearly discernible, as the geographical areas of European countries are relatively small, making subtle color differences difficult to perceive. We will optimize the visualization zoom or country selection mechanism in the future to present a more accurate distribution of public opinion.
</p>
</div>
<hr class="major" />
<ul class="pagination">
<li><a href="3D_1.html" class="button">Prev</a></li>
<li><a href="3D_0.html" class="page">0</a></li>
<li><a href="3D_1.html" class="page">1</a></li>
<li><a href="3D_2.html" class="page active">2</a></li>
<li><a href="3D_3.html" class="page">3</a></li>
<li><a href="3D_4.html" class="page">4</a></li>
<li><a href="3D_5.html" class="page">5</a></li>
<li><span>…</span></li>
<li><a href="3D_8.html" class="page">8</a></li>
<li><a href="3D_3.html" class="button">Next</a></li>
</ul>
<style>
.pagination {
text-align: center;
padding: 0;
list-style: none;
}
.pagination li {
display: inline-block;
margin: 0 2px;
}
</style>
</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">
© 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>