From 67ce87d40b843eee733a1d49a4a0ee7ce63c75d7 Mon Sep 17 00:00:00 2001
From: duyumeng <2073576831@qq.com>
Date: Sun, 31 May 2026 23:47:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20'project/visualization'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/visualization/earthquake.html | 15 +++++++++++++++
 project/visualization/news.html       | 14 ++++++++++++++
 project/visualization/weather.html    | 11 +++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 project/visualization/earthquake.html
 create mode 100644 project/visualization/news.html
 create mode 100644 project/visualization/weather.html
diff --git a/project/visualization/earthquake.html b/project/visualization/earthquake.html
new file mode 100644
index 0000000..d3b7de3
--- /dev/null
+++ b/project/visualization/earthquake.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='UTF-8'>
+<title>Earthquake Data 2026</title>
+<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
+<style>
+body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#1a2a6c 0%,#b21f1f 50%,#fdbb2d 100%);}
+.container{max-width:1400px;margin:0 auto;}
+.panel{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);margin-bottom:30px;}
+h1{text-align:center;color:#fff;margin-bottom:30px;}
+table{width:100%;border-collapse:collapse;margin-top:20px;}
+th,td{padding:12px;border:1px solid #ddd;text-align:center;}
+th{background:#f5f5f5;}
+</style></head><body><div class='container'><h1>Earthquake Data 2026</h1><div class='panel'><canvas id='magnitudeChart'></canvas></div><div class='panel'><table><tr><th>Time</th><th>Magnitude</th><th>Location</th></tr><tr><td>2026-05-30 20:53:55</td><td>5.0</td><td>Sichuan Aba</td></tr><tr><td>2026-05-29 02:53:55</td><td>4.4</td><td>Yunnan Dali</td></tr><tr><td>2026-05-28 22:53:55</td><td>5.1</td><td>Xinjiang Hotan</td></tr><tr><td>2026-05-27 15:53:55</td><td>5.4</td><td>Qinghai Yushu</td></tr><tr><td>2026-05-26 09:53:55</td><td>6.3</td><td>Tibet Shigatse</td></tr><tr><td>2026-05-25 15:53:55</td><td>5.2</td><td>Gansu Gannan</td></tr><tr><td>2026-05-24 18:53:55</td><td>6.2</td><td>Sichuan Liangshan</td></tr><tr><td>2026-05-23 17:53:55</td><td>4.1</td><td>Yunnan Baoshan</td></tr><tr><td>2026-05-22 11:53:55</td><td>5.6</td><td>Xinjiang Kizilsu</td></tr><tr><td>2026-05-21 19:53:55</td><td>5.2</td><td>Qinghai Haixi</td></tr></table></div></div><script>const magnitudes=[5.0,4.4,5.1,5.4,6.3,5.2,6.2,4.1,5.6,5.2];new Chart(document.getElementById('magnitudeChart'),{type:'bar',data:{labels:magnitudes.map((_,i)=>'EQ'+(i+1)),datasets:[{label:'Magnitude',data:magnitudes,backgroundColor:'rgba(231,76,60,0.8)'}]},options:{responsive:true}});</script></body></html>
\ No newline at end of file
diff --git a/project/visualization/news.html b/project/visualization/news.html
new file mode 100644
index 0000000..370a9ea
--- /dev/null
+++ b/project/visualization/news.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='UTF-8'>
+<title>News Rank 2026</title>
+<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
+<style>
+body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);}
+.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
+h1{text-align:center;color:#333;margin-bottom:30px;}
+.item{padding:20px;margin:15px 0;border-radius:10px;background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);}
+.rank{font-size:28px;font-weight:bold;color:#e74c3c;display:inline-block;margin-right:15px;background:#fff;width:50px;height:50px;border-radius:50%;text-align:center;line-height:50px;}
+.title{font-size:18px;font-weight:bold;color:#333;}
+</style></head><body><div class='container'><h1>News Rank Top 10</h1><canvas id='newsChart'></canvas><h2 style='margin-top:40px;'>News Details</h2><div class='item'><span class='rank'>1</span><span class='title'>Tech Frontier: AI Model Breaks Record</span></div><div class='item'><span class='rank'>2</span><span class='title'>Economic Outlook: Q1 2026 Analysis</span></div><div class='item'><span class='rank'>3</span><span class='title'>Sports: World Cup Qualifiers</span></div><div class='item'><span class='rank'>4</span><span class='title'>Culture: Annual Film Festival Opens</span></div><div class='item'><span class='rank'>5</span><span class='title'>Health: New Vaccine Developed</span></div><div class='item'><span class='rank'>6</span><span class='title'>Environment: Carbon Neutral Progress</span></div><div class='item'><span class='rank'>7</span><span class='title'>Education: Exam Policy Adjusted</span></div><div class='item'><span class='rank'>8</span><span class='title'>Military: Defense Tech Breakthrough</span></div><div class='item'><span class='rank'>9</span><span class='title'>Entertainment: Celebrity's New Work</span></div><div class='item'><span class='rank'>10</span><span class='title'>Society: Infrastructure Accelerates</span></div></div><script>const titles=['Tech Frontier: AI Model B...','Economic Outlook: Q1 2026...','Sports: World Cup Qualifi...','Culture: Annual Film Fest...','Health: New Vaccine Devel...','Environment: Carbon Neutr...','Education: Exam Policy Ad...','Military: Defense Tech Br...','Entertainment: Celebrity'...','Society: Infrastructure A...'];const hots=[4982567,3892456,3567234,2987654,2876543,2567890,2345678,2109876,1987654,1876543];new Chart(document.getElementById('newsChart'),{type:'bar',data:{labels:titles,datasets:[{label:'Hot Index',data:hots,backgroundColor:['rgba(255,99,132,0.8)','rgba(54,162,235,0.8)','rgba(255,206,86,0.8)','rgba(75,192,192,0.8)','rgba(153,102,255,0.8)','rgba(255,159,64,0.8)','rgba(199,199,199,0.8)','rgba(83,102,255,0.8)','rgba(40,167,69,0.8)','rgba(220,53,69,0.8)']}]},options:{indexAxis:'y',responsive:true}});</script></body></html>
\ No newline at end of file
diff --git a/project/visualization/weather.html b/project/visualization/weather.html
new file mode 100644
index 0000000..272ee13
--- /dev/null
+++ b/project/visualization/weather.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='UTF-8'>
+<title>Changsha Weather 2026</title>
+<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
+<style>
+body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}
+.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
+h1{text-align:center;color:#333;margin-bottom:30px;}
+</style></head><body><div class='container'><h1>Changsha Weather 2026</h1><canvas id='weatherChart'></canvas></div><script>const ctx=document.getElementById('weatherChart').getContext('2d');const labels=['2026-01-01','2026-01-02','2026-01-03','2026-01-04','2026-01-05','2026-01-06','2026-01-07','2026-01-08','2026-01-09','2026-01-10','2026-01-11','2026-01-12','2026-01-13','2026-01-14','2026-01-15'];const highTemps=[26,30,33,26,31,32,27,26,27,26,27,30,33,26,34];const lowTemps=[18,23,22,15,22,16,24,20,19,23,20,18,18,24,22];new Chart(ctx,{type:'line',data:{labels:labels,datasets:[{label:'High',data:highTemps,borderColor:'rgb(255,99,132)',backgroundColor:'rgba(255,99,132,0.1)',tension:0.4,fill:true},{label:'Low',data:lowTemps,borderColor:'rgb(54,162,235)',backgroundColor:'rgba(54,162,235,0.1)',tension:0.4,fill:true}]},options:{responsive:true,plugins:{title:{display:true,text:'Temperature'}}}});</script></body></html>
\ No newline at end of file

Time	Magnitude	Location
2026-05-30 20:53:55	5.0	Sichuan Aba
2026-05-29 02:53:55	4.4	Yunnan Dali
2026-05-28 22:53:55	5.1	Xinjiang Hotan
2026-05-27 15:53:55	5.4	Qinghai Yushu
2026-05-26 09:53:55	6.3	Tibet Shigatse
2026-05-25 15:53:55	5.2	Gansu Gannan
2026-05-24 18:53:55	6.2	Sichuan Liangshan
2026-05-23 17:53:55	4.1	Yunnan Baoshan
2026-05-22 11:53:55	5.6	Xinjiang Kizilsu
2026-05-21 19:53:55	5.2	Qinghai Haixi