Skip to content

Commit 361211c

Browse files
danielchen3danielchen3
committed
part data visualization
1 parent 9b632b5 commit 361211c

File tree

12 files changed

+270
-144
lines changed

12 files changed

+270
-144
lines changed

‎usa_map/AZ/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Arizona</title>
7-
<link rel="stylesheet" href="sty.css">
8-
7+
<link rel="stylesheet" href="../sty.css">
98
</head>
109

1110
<body>
1211
<h1>Welcome to Arizona</h1>
13-
<p>This is the Arizona map:</p>
1412

1513
<div class="button-container">
1614
<a href="https://danielchen3.github.io/usa_map" target="_blank">
17-
<button >Go Back Map</button>
15+
<button>Main Map</button>
1816
</a>
1917
</div>
2018

‎usa_map/AZ/sty.css‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎usa_map/CA/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>California</title>
7-
<link rel="stylesheet" href="sty.css">
7+
<link rel="stylesheet" href="../sty.css">
88
</head>
99
<body>
1010
<h1>Welcome to California</h1>
11-
<p>This is the California map:</p>
1211

1312
<div class="button-container">
1413
<a href="https://danielchen3.github.io/usa_map" target="_blank">
15-
<button>Go Back Map</button>
14+
<button>Main Map</button>
1615
</a>
1716
</div>
1817

‎usa_map/CA/sty.css‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎usa_map/NY/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>New York</title>
7-
<link rel="stylesheet" href="sty.css">
7+
<link rel="stylesheet" href="../sty.css">
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
810
</head>
911
<body>
1012
<h1>Welcome to New York</h1>
11-
<p>This is the New York map:</p>
1213

1314
<div class="button-container">
1415
<a href="https://danielchen3.github.io/usa_map" target="_blank">
15-
<button>Go Back Map</button>
16+
<button>Main Map</button>
1617
</a>
1718
</div>
1819

‎usa_map/NY/sty.css‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎usa_map/NY/usa_ny.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {data_list, state_code, state_name} from "../resources.js"
2+
import {Create_County_Chart} from "../util.js"
23

34
// async function processData() {
45
// const querySnapshot = await data_list;
@@ -36,6 +37,37 @@ async function get_corresponding_regions(){
3637
}
3738
get_corresponding_regions();
3839

40+
const test_data_pattern1 = {
41+
"2025.1.10": 1,
42+
"2025.1.11": 0,
43+
"2025.1.12": 1,
44+
"2025.1.13": 1,
45+
"2025.1.14": 0,
46+
"2025.1.15": 0,
47+
"2025.1.16": 0,
48+
"2025.1.17": 0,
49+
"2025.1.18": 1,
50+
"2025.1.19": 1,
51+
};
52+
53+
const test_data_pattern2 = {
54+
"2025.1.10": 0,
55+
"2025.1.11": 0,
56+
"2025.1.12": 1,
57+
"2025.1.13": 0,
58+
"2025.1.14": 1,
59+
"2025.1.15": 1,
60+
"2025.1.16": 1,
61+
"2025.1.17": 0,
62+
"2025.1.18": 0,
63+
"2025.1.19": 0,
64+
};
65+
66+
function getRandomPattern(pattern1, pattern2) {
67+
return Math.random() < 0.5 ? pattern1 : pattern2;
68+
}
69+
70+
3971
const targetRegions = ["Bronx", "Suffolk", "Westchester","New York"];
4072
const svgObject = document.getElementById('usaMap');
4173
svgObject.addEventListener('load', () => {
@@ -61,11 +93,18 @@ svgObject.addEventListener('load', () => {
6193
return `
6294
<p>Climate Zone: ${value.BA_zone}</p>
6395
<p>State: ${value.state_name}</p>
96+
<div style="width: 100%; height: 200px;">
97+
<canvas id="tempChart"></canvas>
98+
</div>
6499
`;
65100
}
66101
return 'Data not match';
67102
})()}
68103
`;
104+
// 如果找到匹配数据，创建图表
105+
if (Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId))) {
106+
Create_County_Chart('tempChart', getRandomPattern(test_data_pattern1, test_data_pattern2), 'County Alert Trend');
107+
}
69108
});
70109
region.addEventListener('mouseout', () => {
71110
region.style.fill = '';
@@ -95,11 +134,17 @@ svgObject.addEventListener('load', () => {
95134
return `
96135
<p>Climate Zone: ${value.BA_zone}</p>
97136
<p>State: ${value.state_name}</p>
137+
<div style="width: 100%; height: 200px;">
138+
<canvas id="tempChart"></canvas>
139+
</div>
98140
`;
99141
}
100142
return 'Data not match';
101143
})()}
102144
`;
145+
if (Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId))) {
146+
Create_County_Chart('tempChart', test_data, 'County Alert Trend');
147+
}
103148
});
104149
path.addEventListener('mouseout', () => {
105150
path.style.fill = '';

‎usa_map/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>USA map</title>
77
<link rel="stylesheet" href="sty.css">
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
89
</head>
910
<body>
1011
<h1>Welcome to USA ALERT</h1>
@@ -15,6 +16,6 @@ <h1>Welcome to USA ALERT</h1>
1516
<div id="stateInfo"></div>
1617
</div>
1718

18-
<script src="usa_whole.js"> </script>
19+
<script type= 'module' src="usa_whole.js"> </script>
1920
</body>
2021
</html>

‎usa_map/resources.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,59 @@ export const state_name = {
105105
"Wyoming": "WY"
106106
};
107107

108+
export const state_abbr = {
109+
"AL": "Alabama",
110+
"AK": "Alaska",
111+
"AZ": "Arizona",
112+
"AR": "Arkansas",
113+
"CA": "California",
114+
"CO": "Colorado",
115+
"CT": "Connecticut",
116+
"DE": "Delaware",
117+
"FL": "Florida",
118+
"GA": "Georgia",
119+
"HI": "Hawaii",
120+
"ID": "Idaho",
121+
"IL": "Illinois",
122+
"IN": "Indiana",
123+
"IA": "Iowa",
124+
"KS": "Kansas",
125+
"KY": "Kentucky",
126+
"LA": "Louisiana",
127+
"ME": "Maine",
128+
"MD": "Maryland",
129+
"MA": "Massachusetts",
130+
"MI": "Michigan",
131+
"MN": "Minnesota",
132+
"MS": "Mississippi",
133+
"MO": "Missouri",
134+
"MT": "Montana",
135+
"NE": "Nebraska",
136+
"NV": "Nevada",
137+
"NH": "New Hampshire",
138+
"NJ": "New Jersey",
139+
"NM": "New Mexico",
140+
"NY": "New York",
141+
"NC": "North Carolina",
142+
"ND": "North Dakota",
143+
"OH": "Ohio",
144+
"OK": "Oklahoma",
145+
"OR": "Oregon",
146+
"PA": "Pennsylvania",
147+
"RI": "Rhode Island",
148+
"SC": "South Carolina",
149+
"SD": "South Dakota",
150+
"TN": "Tennessee",
151+
"TX": "Texas",
152+
"UT": "Utah",
153+
"VT": "Vermont",
154+
"VA": "Virginia",
155+
"WA": "Washington",
156+
"WV": "West Virginia",
157+
"WI": "Wisconsin",
158+
"WY": "Wyoming"
159+
};
160+
108161

109162
// import { initializeApp } from "./../../node_modules/firebase/app";
110163
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";

‎usa_map/sty.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,22 @@ p {
2525
gap: 20px;
2626
}
2727

28+
button {
29+
background-color: #4CAF50;
30+
color: white;
31+
border: none;
32+
padding: 10px 20px;
33+
font-size: 16px;
34+
border-radius: 5px;
35+
cursor: pointer;
36+
margin: 10px;
37+
transition: background-color 0.3s, transform 0.2s;
38+
}
39+
2840
#usaMap {
2941
width: 60%;
3042
height: 80vh;
31-
min-height: 500px;
43+
min-height: 400px;
3244
border: 1px solid #ddd;
3345
}
3446

@@ -38,6 +50,6 @@ p {
3850
border-radius: 5px;
3951
background-color: #fff;
4052
display: none;
41-
width: 200px;
53+
width: 400px;
4254
height: fit-content;
4355
}

0 commit comments

Comments
 (0)