[主題地圖]川普全球關稅戰統計地圖

1
<script src="https://cdn.tailwindcss.com"></script>
2
<script src="https://d3js.org/d3.v7.min.js"></script>
3
<style>
4
    /* Tooltip 基本樣式 - 深色 */
5
    #tooltip {
6
        position: absolute;
7
        opacity: 0;
8
        background-color: #1f2937; /* 深灰 */
9
        color: #e5e7eb; /* 淺灰文字 */
10
        border: 1px solid #4b5563; /* 中灰邊框 */
11
        padding: 10px;
12
        border-radius: 8px;
13
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
14
        pointer-events: none;
15
        transition: opacity 0.2s ease-in-out, left 0.1s linear, top 0.1s linear;
16
        z-index: 10;
17
        max-width: 200px;
18
    }
19
    #tooltip.visible {
20
        opacity: 1;
21
    }
22
    /* Tooltip 內部文字顏色 */
23
    #tooltip .font-bold.text-blue-600 {
24
         color: #fca5a5; /* 淺紅色 */
25
    }
26
    #tooltip .text-gray-800 {
27
        color: #f9fafb; /* 更亮的灰色 */
28
    }
29
     #tooltip .text-gray-700 {
30
        color: #d1d5db; /* 稍暗的淺灰 */
31
    }
32

33
    /* SVG 文本選取禁用 */
34
    svg text::selection {
35
        background: none;
36
    }
37
    /* 強制 Tailwind 深色模式 (如果瀏覽器預設淺色) */
38
    :root {
39
        color-scheme: dark;
40
    }
41
</style>

1
<div class="flex flex-col items-center">
2
    <h2 class="text-3xl font-bold mb-6 text-white-100">川普關稅戰統計地圖</h2>
3

4
    <div id="chart-container" class="relative bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 mb-8">
5
        <svg id="bubble-chart" width="800" height="450" viewBox="0 0 800 450">
6
            <title>關稅泡泡圖</title>
7
            <desc>顯示各國關稅稅率的泡泡圖，泡泡大小和顏色代表稅率高低。</desc>
8
        </svg>
9
        <div id="tooltip"></div>
10
    </div>
11

12
    <div class="w-full max-w-3xl space-y-8">
13
        <div class="flex flex-col md:flex-row justify-between bg-gray-800 p-6 rounded-xl shadow-md border border-gray-700 gap-6">
14
            <div id="color-legend">
15
                <h3 class="text-lg font-semibold mb-3 text-gray-100">關稅稅率 (顏色)</h3>
16
                <div class="flex items-center flex-wrap gap-x-4 gap-y-2">
17
                </div>
18
            </div>
19
            <div id="size-legend">
20
                <h3 class="text-lg font-semibold mb-3 text-gray-100">關稅稅率 (大小)</h3>
21
                <div class="flex items-end flex-wrap gap-x-4 gap-y-2">
22

23
                </div>
24
            </div>
25
        </div>
26

27
        <div id="top-countries" class="bg-gray-800 p-6 rounded-xl shadow-md border border-gray-700">
28
            <h3 class="text-xl font-semibold mb-5 text-center text-gray-100">關稅最高的五個國家</h3>
29
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6 md:gap-8">
30
            </div>
31
        </div>
32
    </div>
33
</div>
34

35
<script>
36
    document.addEventListener('DOMContentLoaded', function() {
37

38
        const tariffData = [
39
            {country: "中國", tariff: 34, region: "亞洲", x: 650, y: 180, originalName: "China"},
40
            {country: "歐盟", tariff: 20, region: "歐洲", x: 450, y: 150, originalName: "European Union"},
41
            {country: "越南", tariff: 46, region: "亞洲", x: 670, y: 210, originalName: "Vietnam"},
42
            {country: "台灣", tariff: 32, region: "亞洲", x: 690, y: 190, originalName: "Taiwan"},
43
            {country: "日本", tariff: 24, region: "亞洲", x: 720, y: 170, originalName: "Japan"},
44
            {country: "印度", tariff: 26, region: "亞洲", x: 580, y: 210, originalName: "India"},
45
            {country: "南韓", tariff: 25, region: "亞洲", x: 700, y: 175, originalName: "South Korea"},
46
            {country: "泰國", tariff: 36, region: "亞洲", x: 650, y: 220, originalName: "Thailand"},
47
            {country: "瑞士", tariff: 31, region: "歐洲", x: 430, y: 160, originalName: "Switzerland"},
48
            {country: "印尼", tariff: 32, region: "亞洲", x: 650, y: 250, originalName: "Indonesia"},
49
            {country: "馬來西亞", tariff: 24, region: "亞洲", x: 640, y: 230, originalName: "Malaysia"},
50
            {country: "柬埔寨", tariff: 49, region: "亞洲", x: 655, y: 215, originalName: "Cambodia"},
51
            {country: "英國", tariff: 10, region: "歐洲", x: 410, y: 145, originalName: "United Kingdom"},
52
            {country: "南非", tariff: 30, region: "非洲", x: 480, y: 300, originalName: "South Africa"},
53
            {country: "巴西", tariff: 10, region: "南美洲", x: 320, y: 280, originalName: "Brazil"},
54
            {country: "孟加拉", tariff: 37, region: "亞洲", x: 600, y: 200, originalName: "Bangladesh"},
55
            {country: "新加坡", tariff: 10, region: "亞洲", x: 645, y: 240, originalName: "Singapore"},
56
            {country: "以色列", tariff: 17, region: "中東", x: 510, y: 200, originalName: "Israel"},
57
            {country: "菲律賓", tariff: 17, region: "亞洲", x: 680, y: 220, originalName: "Philippines"},
58
            {country: "智利", tariff: 10, region: "南美洲", x: 300, y: 320, originalName: "Chile"},
59
            {country: "澳洲", tariff: 10, region: "大洋洲", x: 700, y: 310, originalName: "Australia"},
60
            {country: "巴基斯坦", tariff: 29, region: "亞洲", x: 560, y: 200, originalName: "Pakistan"},
61
            {country: "土耳其", tariff: 10, region: "中東", x: 490, y: 180, originalName: "Turkey"},
62
            {country: "斯里蘭卡", tariff: 44, region: "亞洲", x: 590, y: 230, originalName: "Sri Lanka"},
63
            {country: "哥倫比亞", tariff: 10, region: "南美洲", x: 290, y: 260, originalName: "Colombia"},
64
            {country: "秘魯", tariff: 10, region: "南美洲", x: 280, y: 270, originalName: "Peru"},
65
            {country: "尼加拉瓜", tariff: 18, region: "中美洲", x: 260, y: 230, originalName: "Nicaragua"},
66
            {country: "挪威", tariff: 15, region: "歐洲", x: 430, y: 130, originalName: "Norway"},
67
            {country: "哥斯大黎加", tariff: 10, region: "中美洲", x: 255, y: 240, originalName: "Costa Rica"},
68
            {country: "約旦", tariff: 20, region: "中東", x: 520, y: 190, originalName: "Jordan"},
69
            {country: "多明尼加", tariff: 10, region: "加勒比海", x: 280, y: 220, originalName: "Dominican Republic"},
70
            {country: "阿聯酋", tariff: 10, region: "中東", x: 540, y: 210, originalName: "United Arab Emirates"},
71
            {country: "紐西蘭", tariff: 10, region: "大洋洲", x: 760, y: 330, originalName: "New Zealand"},
72
            {country: "阿根廷", tariff: 10, region: "南美洲", x: 310, y: 320, originalName: "Argentina"},
73
            {country: "厄瓜多", tariff: 10, region: "南美洲", x: 270, y: 260, originalName: "Ecuador"},
74
            {country: "瓜地馬拉", tariff: 10, region: "中美洲", x: 250, y: 220, originalName: "Guatemala"},
75
            {country: "宏都拉斯", tariff: 10, region: "中美洲", x: 255, y: 225, originalName: "Honduras"},
76
            {country: "馬達加斯加", tariff: 47, region: "非洲", x: 520, y: 290, originalName: "Madagascar"},
77
            {country: "緬甸", tariff: 44, region: "亞洲", x: 630, y: 210, originalName: "Myanmar"},
78
            {country: "突尼西亞", tariff: 28, region: "非洲", x: 440, y: 190, originalName: "Tunisia"},
79
            {country: "哈薩克", tariff: 27, region: "亞洲", x: 560, y: 150, originalName: "Kazakhstan"},
80
            {country: "塞爾維亞", tariff: 37, region: "歐洲", x: 460, y: 170, originalName: "Serbia"},
81
            {country: "埃及", tariff: 10, region: "非洲", x: 490, y: 210, originalName: "Egypt"},
82
            {country: "沙烏地阿拉伯", tariff: 10, region: "中東", x: 530, y: 220, originalName: "Saudi Arabia"},
83
            {country: "薩爾瓦多", tariff: 10, region: "中美洲", x: 245, y: 230, originalName: "El Salvador"},
84
            {country: "象牙海岸", tariff: 21, region: "非洲", x: 420, y: 250, originalName: "Côte d'Ivoire"},
85
            {country: "寮國", tariff: 48, region: "亞洲", x: 640, y: 205, originalName: "Laos"},
86
            {country: "波札那", tariff: 37, region: "非洲", x: 470, y: 290, originalName: "Botswana"},
87
            {country: "千里達及托巴哥", tariff: 10, region: "加勒比海", x: 290, y: 235, originalName: "Trinidad and Tobago"},
88
            {country: "摩洛哥", tariff: 10, region: "非洲", x: 410, y: 200, originalName: "Morocco"},
89
            {country: "阿爾及利亞", tariff: 30, region: "非洲", x: 425, y: 210, originalName: "Algeria"},
90
            {country: "阿曼", tariff: 10, region: "中東", x: 550, y: 220, originalName: "Oman"},
91
            {country: "烏拉圭", tariff: 10, region: "南美洲", x: 320, y: 310, originalName: "Uruguay"},
92
            {country: "美國", tariff: 0, region: "北美洲", x: 230, y: 170, originalName: "United States"},
93
            {country: "墨西哥", tariff: 20, region: "北美洲", x: 220, y: 210, originalName: "Mexico"},
94
            {country: "加拿大", tariff: 10, region: "北美洲", x: 230, y: 130, originalName: "Canada"},
95
            {country: "俄羅斯", tariff: 20, region: "歐亞", x: 520, y: 130, originalName: "Russia"},
96
            {country: "留尼旺", tariff: 73, region: "非洲", x: 530, y: 300, originalName: "Reunion"},
97
            {country: "賴索托", tariff: 50, region: "非洲", x: 480, y: 310, originalName: "Lesotho"},
98
            {country: "法國", tariff: 20, region: "歐洲", x: 425, y: 155, originalName: "France"},
99
            {country: "德國", tariff: 20, region: "歐洲", x: 440, y: 145, originalName: "Germany"},
100
            {country: "義大利", tariff: 20, region: "歐洲", x: 450, y: 165, originalName: "Italy"},
101
            {country: "西班牙", tariff: 20, region: "歐洲", x: 410, y: 170, originalName: "Spain"},
102
            {country: "奈及利亞", tariff: 14, region: "非洲", x: 440, y: 240, originalName: "Nigeria"},
103
            {country: "肯亞", tariff: 10, region: "非洲", x: 510, y: 260, originalName: "Kenya"},
104
            {country: "烏克蘭", tariff: 10, region: "歐洲", x: 480, y: 150, originalName: "Ukraine"},
105
            {country: "伊朗", tariff: 10, region: "中東", x: 550, y: 190, originalName: "Iran"},
106
            {country: "伊拉克", tariff: 39, region: "中東", x: 540, y: 200, originalName: "Iraq"}
107
        ];
108

109
        const svg = d3.select("#bubble-chart");
110
        const width = +svg.attr("width");
111
        const height = +svg.attr("height");
112
        const tooltip = d3.select("#tooltip");
113

114
        // --- 紅色漸層顏色比例尺 ---
115
        const colorScale = d3.scaleLinear()
116
            .domain([0, 10, 25, 50, 75]) // 保持不變
117
            .range(['#fee2e2', '#fca5a5', '#ef4444', '#b91c1c', '#7f1d1d']) // 紅色系 (從淺到深)
118
            .clamp(true);
119

120
        const sizeScale = d3.scaleSqrt()
121
            .domain([0, 75])
122
            .range([5, 28]);
123

124
        // --- SVG 背景調整 ---
125
        svg.append("rect")
126
            .attr("x", 0)
127
            .attr("y", 0)
128
            .attr("width", width)
129
            .attr("height", height)
130
            .attr("fill", "#1f2937") // 深灰色背景
131
            .attr("rx", 10)
132
            .attr("ry", 10);
133

134
        const gridGroup = svg.append("g").attr("class", "grid-lines");
135

136
        // --- 網格線顏色調整 ---
137
        const gridColor = "#4b5563"; // 中灰色
138
        for (let x = 100; x <= 700; x += 100) {
139
            gridGroup.append("line")
140
                .attr("x1", x).attr("y1", 50)
141
                .attr("x2", x).attr("y2", 400)
142
                .attr("stroke", gridColor).attr("stroke-width", 0.5).attr("stroke-dasharray", "3,3"); // 變細一點
143
        }
144
        for (let y = 100; y <= 350; y += 50) {
145
            gridGroup.append("line")
146
                .attr("x1", 100).attr("y1", y)
147
                .attr("x2", 700).attr("y2", y)
148
                .attr("stroke", gridColor).attr("stroke-width", 0.5).attr("stroke-dasharray", "3,3"); // 變細一點
149
        }
150

151
        const regionLabels = [
152
            { x: 230, y: 90, text: "北美洲" }, { x: 445, y: 100, text: "歐洲" },
153
            { x: 650, y: 120, text: "亞洲" }, { x: 520, y: 170, text: "中東" },
154
            { x: 450, y: 350, text: "非洲" }, { x: 230, y: 200, text: "中美洲" },
155
            { x: 280, y: 340, text: "南美洲" }, { x: 730, y: 340, text: "大洋洲" }
156
        ];
157

158
        // --- 地區標籤顏色調整 ---
159
        svg.append("g")
160
            .attr("class", "region-labels")
161
            .selectAll("text")
162
            .data(regionLabels)
163
            .join("text")
164
            .attr("x", d => d.x)
165
            .attr("y", d => d.y)
166
            .attr("class", "font-semibold text-sm")
167
            .style("font-size", "14px")
168
            .style("fill", "#9ca3af") // 淺灰色標籤
169
            .text(d => d.text);
170

171
        const bubbles = svg.append("g")
172
            .attr("class", "bubbles")
173
            .selectAll("g")
174
            .data(tariffData)
175
            .join("g")
176
            .attr("transform", d => `translate(${d.x}, ${d.y})`)
177
            .style("cursor", "pointer")
178
            .on("mouseover", function(event, d) {
179
                tooltip.transition().duration(100).style("opacity", 1).attr("class", "visible");
180
                tooltip.html(`
181
                    <p class="font-bold text-lg text-gray-800">${d.country}</p> {/* Tooltip 樣式已在 <style> 中調整 */}
182
                    <p class="text-base text-gray-700">關稅: <span class="font-bold text-blue-600">${d.tariff}%</span></p>
183
                    <p class="text-base text-gray-700">地區: ${d.region}</p>
184
                `);
185

186
                const chartRect = document.getElementById('chart-container').getBoundingClientRect();
187
                const tooltipRect = tooltip.node().getBoundingClientRect();
188
                let left = event.pageX + 15;
189
                let top = event.pageY - 15;
190

191
                if (left + tooltipRect.width > chartRect.right) left = event.pageX - tooltipRect.width - 15;
192
                if (top + tooltipRect.height > chartRect.bottom) top = event.pageY - tooltipRect.height - 15;
193
                if (top < chartRect.top) top = event.pageY + 15;
194

195
                tooltip.style("left", `${left}px`).style("top", `${top}px`);
196

197
                d3.select(this).select("circle")
198
                    .transition().duration(150)
199
                    .attr("stroke-width", 1.5)
200
                    .attr("stroke", "#f3f4f6") // 懸停時用亮邊框
201
                    .attr("opacity", 1);
202
            })
203
            .on("mouseout", function(event, d) {
204
                tooltip.transition().duration(200).style("opacity", 0).attr("class", "");
205
                d3.select(this).select("circle")
206
                    .transition().duration(150)
207
                    .attr("stroke-width", 0.5)
208
                    .attr("stroke", "#6b7280") // 恢復深色邊框
209
                    .attr("opacity", 0.9);
210
            });
211

212
        // --- 泡泡邊框顏色調整 ---
213
        bubbles.append("circle")
214
            .attr("r", d => sizeScale(d.tariff))
215
            .attr("fill", d => colorScale(d.tariff)) // 使用新的紅色比例尺
216
            .attr("stroke", "#6b7280") // 深灰色邊框
217
            .attr("stroke-width", 0.5)
218
            .attr("opacity", 0.9);
219

220
        const labelGroup = svg.append("g")
221
            .attr("class", "labels")
222
            .style("pointer-events", "none");
223

224
        const getLabelPosition = (country) => {
225
             const manualPositions = { /* ...保持不變... */
226
                "中國": "right", "越南": "right", "柬埔寨": "left", "寮國": "top",
227
                "緬甸": "left", "留尼旺": "right", "馬達加斯加": "left", "泰國": "bottom",
228
                "斯里蘭卡": "top", "印尼": "bottom", "賴索托": "top", "台灣": "right",
229
                "塞爾維亞": "right", "孟加拉": "left", "伊拉克": "bottom", "日本": "top",
230
                "印度": "left", "巴西": "right", "澳洲": "right", "美國": "top",
231
                "歐盟": "top", "俄羅斯": "top"
232
            };
233
            if (manualPositions[country.country]) return manualPositions[country.country];
234
            if (country.x < 400) return "left";
235
            return "right";
236
        };
237

238
        const getLabelCoordinates = (country, direction) => {
239
             const radius = sizeScale(country.tariff);
240
            const offset = 5;
241
            switch(direction) { /* ...保持不變... */
242
                case "top":    return { x: 0, y: -radius - offset, anchor: "middle" };
243
                case "right":  return { x: radius + offset, y: 4, anchor: "start" };
244
                case "bottom": return { x: 0, y: radius + offset + 7, anchor: "middle" };
245
                case "left":   return { x: -radius - offset, y: 4, anchor: "end" };
246
                default:       return { x: radius + offset, y: 4, anchor: "start" };
247
            }
248
        };
249

250
        const countriesToShowLabel = tariffData.filter(d =>
251
            d.tariff > 30 ||
252
            ["美國", "中國", "歐盟", "俄羅斯", "印度", "巴西", "日本", "澳洲"].includes(d.country)
253
        );
254

255
        countriesToShowLabel.forEach(country => {
256
            const labelPos = getLabelPosition(country);
257
            const coords = getLabelCoordinates(country, labelPos);
258
            const group = labelGroup.append("g")
259
                            .attr("transform", `translate(${country.x}, ${country.y})`);
260

261
            // --- 連接線顏色調整 ---
262
            if (labelPos === "left" || labelPos === "right") {
263
                group.append("line")
264
                    .attr("x1", labelPos === "left" ? -sizeScale(country.tariff) : sizeScale(country.tariff))
265
                    .attr("y1", 0)
266
                    .attr("x2", coords.x * 0.8)
267
                    .attr("y2", 0)
268
                    .attr("stroke", "#9ca3af") // 淺灰色線
269
                    .attr("stroke-width", 0.5)
270
                    .attr("stroke-dasharray", "2,1");
271
            }
272

273
            // --- 標籤文字顏色和描邊調整 ---
274
            const labelColor = country.tariff > 40 ? "#f9fafb" : "#e5e7eb"; // 高關稅用亮白色，其他用淺灰
275
            const labelWeight = country.tariff > 40 ? "bold" : "normal";
276

277
            // 背景描邊 (用深色背景的顏色)
278
            group.append("text")
279
                .attr("x", coords.x)
280
                .attr("y", coords.y)
281
                .attr("text-anchor", coords.anchor)
282
                .attr("font-size", "11px")
283
                .attr("font-weight", labelWeight)
284
                .attr("stroke", "#1f2937") // 深灰色描邊
285
                .attr("stroke-width", 3)
286
                .attr("stroke-linejoin", "round")
287
                .text(`${country.country} (${country.tariff}%)`);
288

289
            // 前景文字
290
            group.append("text")
291
                .attr("x", coords.x)
292
                .attr("y", coords.y)
293
                .attr("text-anchor", coords.anchor)
294
                .attr("font-size", "11px")
295
                .attr("font-weight", labelWeight)
296
                .attr("fill", labelColor) // 使用計算出的標籤顏色
297
                .text(`${country.country} (${country.tariff}%)`);
298
        });
299

300
        // --- 圖例文字顏色調整 ---
301
        const legendTextColor = "text-gray-300"; // 圖例文字用稍暗的淺灰
302

303
        const colorLegendContainer = d3.select("#color-legend .flex");
304
        const colorRates = [0, 10, 25, 50, 75];
305
        colorRates.forEach((rate, i) => {
306
            const item = colorLegendContainer.append("div")
307
                .attr("class", "flex flex-col items-center");
308
            item.append("div")
309
                .attr("class", "w-8 h-8 md:w-10 md:h-10 mb-1 md:mb-2 rounded-md shadow-sm border border-gray-600") // 加個邊框
310
                .style("background-color", colorScale(rate)); // 自動使用新比例尺
311
            let label = '';
312
            if (i === 0) label = '0%';
313
            else if (i === colorRates.length - 1) label = `${colorRates[i-1]+1}%+`;
314
            else label = `${colorRates[i-1]+1}-${rate}%`;
315
            item.append("span")
316
                .attr("class", `text-xs md:text-sm ${legendTextColor} font-medium`) // 應用文字顏色
317
                .text(label);
318
        });
319

320
        const sizeLegendContainer = d3.select("#size-legend .flex");
321
        const sizeRates = [10, 25, 50, 75];
322
        sizeRates.forEach(rate => {
323
            const item = sizeLegendContainer.append("div")
324
                .attr("class", "flex flex-col items-center");
325
            const radius = sizeScale(rate);
326
            const svgSize = radius * 2 + 4;
327
            item.append("svg")
328
                .attr("width", svgSize)
329
                .attr("height", svgSize)
330
                .append("circle")
331
                .attr("cx", radius + 2)
332
                .attr("cy", radius + 2)
333
                .attr("r", radius)
334
                .attr("fill", "none")
335
                .attr("stroke", "#9ca3af") // 淺灰色圓圈
336
                .attr("stroke-width", 1);
337
            item.append("span")
338
                .attr("class", `text-xs md:text-sm ${legendTextColor} font-medium mt-1`) // 應用文字顏色
339
                .text(`${rate}%`);
340
        });
341

342
        // --- 前五名列表文字顏色調整 ---
343
        const top5Countries = [...tariffData].sort((a, b) => b.tariff - a.tariff).slice(0, 5);
344
        const topCountriesContainer = d3.select("#top-countries .grid");
345

346
        top5Countries.forEach((country, i) => {
347
            const item = topCountriesContainer.append("div")
348
                .attr("class", "flex flex-col items-center");
349
            item.append("div")
350
                .attr("class", "w-10 h-10 md:w-12 md:h-12 rounded-full mb-2 md:mb-3 flex items-center justify-center font-bold text-white shadow-md text-sm md:text-base border border-gray-600") // 加邊框
351
                .style("background-color", colorScale(country.tariff)) // 自動使用新比例尺
352
                .text(i + 1);
353
            const textDiv = item.append("div").attr("class", "text-center");
354
            textDiv.append("p").attr("class", "text-sm md:text-base font-bold text-gray-100").text(country.country); // 亮白
355
            textDiv.append("p").attr("class", "text-lg md:text-2xl font-bold text-red-400").text(`${country.tariff}%`); // 紅色關稅數字
356
            textDiv.append("p").attr("class", "text-xs md:text-sm text-gray-400").text(country.region); // 灰色地區
357
        });
358

359
    });
360
</script>