奧運數據可視化：探索數據講述奧運故事

在數據可視化的世界里，體育數據因其豐富的歷史和文化意義，常常成為最有吸引力的主題之一。今天我要分享一個令人著迷的奧運數據可視化項目，它巧妙地利用交互式圖表和動態動畫，展現了自1896年至今奧運會的發展歷程和各國奧運成就的演變。

項目概覽

該項目基于夏季奧運會的歷史數據，構建了一套完整的交互式可視化系統，主要包含三個核心模塊：

奧運獎牌歷時演變：通過動態時間軸展示各國獎牌數量隨歷屆奧運會的變化，以及排名的動態變化過程

主辦城市表現分析：直觀展示"東道主效應"，即舉辦國在主辦奧運會前后的表現變化

國家運動項目優勢：揭示各國在特定體育項目上的統治力及其隨時間的演變

項目采用了Flask作為后端框架，結構清晰：

from flask import Flask, render_template, jsonify, request
import sqlite3
import pandas as pd
import os
import jsonapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')@app.route('/medals-evolution')
def medals_evolution():return render_template('medals_evolution.html')@app.route('/host-city-performance')
def host_city_performance():return render_template('host_city_performance.html')@app.route('/sport-dominance')
def sport_dominance():return render_template('sport_dominance.html')

奧運獎牌歷時演變

這個模塊最引人注目的特點是排名的動態變化動畫。在傳統的靜態圖表中，我們只能看到某一時刻的排名情況，而無法直觀感受排名變化的過程。

后端數據接口設計如下：

@app.route('/api/medal-tally')def?get_medal_tally():conn?=?sqlite3.connect('olympic_data.db')conn.row_factory?=?sqlite3.Rowcursor?=?conn.cursor()cursor.execute('''SELECT?mt.NOC?as?noc,?mt.Games_ID?as?games_id,?gs.Year?as?year,mt.Gold?as?gold,?mt.Silver?as?silver,?mt.Bronze?as?bronze,mt.Total?as?total,?gs.Host_country?as?host_countryFROM?medal_tally?mtJOIN?games_summary?gs?ON?mt.Games_ID?=?gs.Games_IDORDER?BY?gs.Year,?mt.Total?DESC''')medals?=?[dict(row)?for?row?in?cursor.fetchall()]conn.close()return?jsonify(medals)

前端動畫實現的核心代碼：

function animateRankings(data, selectedCountries, medalType) {// 設置動畫的基本參數const duration = 750;const maxDisplayCount = 10;// 更新排名圖表函數function updateRankingChart(yearIdx) {// 獲取當前年份數據const currentYear = data.years[yearIdx];const yearData = selectedCountries.map(country => ({country: country,medals: data.medals[country][medalType][yearIdx] || 0})).filter(d => d.medals > 0)  // 只顯示有獎牌的國家.sort((a, b) => b.medals - a.medals)  // 按獎牌數排序.slice(0, maxDisplayCount);  // 只取前N名// 創建動態更新的比例尺const xScale = d3.scaleLinear().domain([0, d3.max(yearData, d => d.medals) * 1.1]).range([0, width]);const yScale = d3.scaleBand().domain(yearData.map(d => d.country)).range([0, height]).padding(0.1);// 使用D3的enter-update-exit模式更新條形圖const bars = svg.selectAll(".rank-bar").data(yearData, d => d.country);// 新增條形(enter)bars.enter().append("rect").attr("class", "rank-bar").attr("x", 0).attr("y", d => yScale(d.country)).attr("height", yScale.bandwidth()).attr("width", 0).attr("fill", d => colorScale(d.country)).attr("opacity", 0).transition().duration(duration).attr("width", d => xScale(d.medals)).attr("opacity", 1);// 更新現有條形(update)bars.transition().duration(duration).attr("y", d => yScale(d.country)).attr("width", d => xScale(d.medals));// 移除多余條形(exit)bars.exit().transition().duration(duration).attr("width", 0).attr("opacity", 0).remove();// 更新標簽updateLabels(yearData, xScale, yScale);}// 播放控制let animationTimer;playButton.on("click", () => {if (isPlaying) {clearInterval(animationTimer);playButton.text("播放");} else {animationTimer = setInterval(() => {yearIndex = (yearIndex + 1) % data.years.length;updateRankingChart(yearIndex);}, duration + 200);playButton.text("暫停");}isPlaying = !isPlaying;});
}

這種動態可視化方式讓我們能夠直觀觀察到冷戰時期美蘇兩強的競爭，中國在改革開放后的迅速崛起，以及東歐國家在蘇聯解體后的排名變化等歷史現象。

主辦城市表現分析

"東道主效應"是奧運研究中常被提及的現象。該模塊的后端數據處理如下：

@app.route('/api/host-performance')
def get_host_performance():host_country = request.args.get('country')if not host_country:return jsonify({"error": "Host country parameter is required"}), 400conn = sqlite3.connect('olympic_data.db')conn.row_factory = sqlite3.Rowcursor = conn.cursor()# 查找主辦國的所有主辦年份cursor.execute('''SELECT Year as yearFROM games_summaryWHERE Host_country = ?ORDER BY Year''', (host_country,))host_years = [row['year'] for row in cursor.fetchall()]if not host_years:return jsonify({"error": f"No hosting records found for {host_country}"}), 404# 查找該國的所有奧運表現cursor.execute('''SELECT cp.Country as country, gs.Year as year, mt.Gold as gold, mt.Silver as silver, mt.Bronze as bronze, mt.Total as total,(gs.Host_country = cp.Country) as is_hostFROM medal_tally mtJOIN games_summary gs ON mt.Games_ID = gs.Games_IDJOIN country_profiles cp ON mt.NOC = cp.NOCWHERE cp.Country = ?ORDER BY gs.Year''', (host_country,))performance = [dict(row) for row in cursor.fetchall()]result = {"country": host_country,"host_years": host_years,"performance": performance}return jsonify(result)

前端實現東道主效應的動畫效果：

function createHostEffectChart(data) {// 獲取主辦年和表現數據const hostYears = data.host_years;const performance = data.performance;// 創建時間比例尺const xScale = d3.scaleBand().domain(performance.map(d => d.year)).range([0, width]).padding(0.1);// 創建獎牌數量比例尺const yScale = d3.scaleLinear().domain([0, d3.max(performance, d => d.total) * 1.1]).range([height, 0]);// 添加柱狀圖，使用時間流動動畫const bars = svg.selectAll(".medal-bar").data(performance).enter().append("rect").attr("class", d => d.is_host ? "medal-bar host-bar" : "medal-bar").attr("x", d => xScale(d.year)).attr("width", xScale.bandwidth()).attr("y", height)  // 初始位置在底部.attr("height", 0)  // 初始高度為0.attr("fill", d => d.is_host ? "#FF9900" : "#3498db").attr("stroke", "#fff").attr("stroke-width", 1);// 按時間順序添加生長動畫bars.transition().duration(800).delay((d, i) => i * 100)  // 時間順序延遲.attr("y", d => yScale(d.total)).attr("height", d => height - yScale(d.total));// 計算并展示東道主效應const hostYearsData = performance.filter(d => d.is_host);const nonHostYearsData = performance.filter(d => !d.is_host);const avgHostMedals = d3.mean(hostYearsData, d => d.total);const avgNonHostMedals = d3.mean(nonHostYearsData, d => d.total);const hostEffect = avgHostMedals / avgNonHostMedals;// 添加效應數值動畫d3.select('#host-effect-value').transition().duration(1500).tween('text', function() {const i = d3.interpolate(1, hostEffect);return t => this.textContent = i(t).toFixed(2) + 'x';});
}

國家運動項目優勢

該模塊創新地設計了"統治力指數"這一綜合指標，后端計算實現如下：

@app.route('/api/sport-country-matrix')
def sport_country_matrix():try:import pandas as pd# 讀取奧運項目結果數據event_data = pd.read_csv('Olympic_Event_Results.csv')# 只分析夏季奧運會數據summer_data = event_data[event_data['edition'].str.contains('Summer', na=False)]# 計算每個國家在每個項目上的獎牌總數medal_counts = summer_data.groupby(['sport', 'country_noc']).size().reset_index(name='count')# 計算金牌數gold_counts = summer_data[summer_data['medal'] == 'Gold'].groupby(['sport', 'country_noc']).size().reset_index(name='gold_count')# 合并數據medal_data = pd.merge(medal_counts, gold_counts, on=['sport', 'country_noc'], how='left')medal_data['gold_count'] = medal_data['gold_count'].fillna(0)# 計算統治力指數medal_data['dominance_score'] = medal_data.apply(lambda row: calculate_dominance(row['count'], row['gold_count']), axis=1)# 獲取排名前20的國家和項目組合top_combinations = medal_data.sort_values('dominance_score', ascending=False).head(100)# 構建國家-項目矩陣matrix_data = []for _, row in top_combinations.iterrows():matrix_data.append({'country': row['country_noc'],'sport': row['sport'],'total_medals': int(row['count']),'gold_medals': int(row['gold_count']),'dominance_score': float(row['dominance_score'])})return jsonify(matrix_data)except Exception as e:print(f"Error generating sport-country matrix: {e}")import tracebacktraceback.print_exc()return jsonify({"error": str(e)}), 500def calculate_dominance(medal_count, gold_count):# 簡化的統治力計算公式base_score = medal_count * 1.0gold_bonus = gold_count * 1.5return base_score + gold_bonus

前端實現"賽馬圖"動畫的核心代碼：

function createRaceChart(sportData, countries) {// 按年份組織數據const yearData = {};sportData.forEach(d => {if (!yearData[d.year]) yearData[d.year] = [];yearData[d.year].push({country: d.country,score: d.dominance_score});});// 獲取所有年份并排序const years = Object.keys(yearData).sort();// 設置動畫參數let currentYearIndex = 0;const duration = 1000;function updateChart() {const year = years[currentYearIndex];const data = yearData[year].sort((a, b) => b.score - a.score).slice(0, 10);// 更新標題d3.select('#current-year').text(year);// 更新比例尺xScale.domain([0, d3.max(data, d => d.score) * 1.1]);yScale.domain(data.map(d => d.country));// 更新條形const bars = svg.selectAll('.bar').data(data, d => d.country);// 進入的條形bars.enter().append('rect').attr('class', 'bar').attr('x', 0).attr('y', d => yScale(d.country)).attr('height', yScale.bandwidth()).attr('width', 0).attr('fill', d => colorScale(d.country)).transition().duration(duration).attr('width', d => xScale(d.score));// 更新現有條形bars.transition().duration(duration).attr('y', d => yScale(d.country)).attr('width', d => xScale(d.score));// 退出的條形bars.exit().transition().duration(duration).attr('width', 0).remove();// 更新國家標簽updateLabels(data);}// 自動播放控制playButton.on('click', () => {if (isPlaying) {clearInterval(timer);playButton.text('播放');} else {timer = setInterval(() => {currentYearIndex = (currentYearIndex + 1) % years.length;updateChart();}, duration + 100);playButton.text('暫停');}isPlaying = !isPlaying;});// 初始化圖表updateChart();
}

高維數據可視化的創新

項目實現了一個高維熱力圖來展示國家-項目之間的關系：

function createHeatmap(data) {// 提取唯一的國家和項目const countries = [...new Set(data.map(d => d.country))];const sports = [...new Set(data.map(d => d.sport))];// 創建二維網格數據const gridData = [];countries.forEach(country => {sports.forEach(sport => {const match = data.find(d => d.country === country && d.sport === sport);gridData.push({country: country,sport: sport,value: match ? match.dominance_score : 0});});});// 創建比例尺const xScale = d3.scaleBand().domain(sports).range([0, width]).padding(0.05);const yScale = d3.scaleBand().domain(countries).range([0, height]).padding(0.05);// 創建顏色比例尺const colorScale = d3.scaleSequential(d3.interpolateYlOrRd).domain([0, d3.max(gridData, d => d.value)]);// 繪制熱力圖單元格svg.selectAll(".heatmap-cell").data(gridData).enter().append("rect").attr("class", "heatmap-cell").attr("x", d => xScale(d.sport)).attr("y", d => yScale(d.country)).attr("width", xScale.bandwidth()).attr("height", yScale.bandwidth()).attr("fill", d => d.value > 0 ? colorScale(d.value) : "#eee").attr("stroke", "#fff").attr("stroke-width", 0.5).on("mouseover", showTooltip).on("mouseout", hideTooltip);// 實現聚類算法以識別相似模式// ... 聚類實現代碼 ...
}

桑基圖實現

為展示奧運會中獎牌的"流動"情況，項目實現了桑基圖：

function createSankeyDiagram(data) {// 準備節點和連接數據const nodes = [];const links = [];// 創建國家節點data.countries.forEach((country, i) => {nodes.push({id: `country-${country}`,name: country,type: 'country'});});// 創建項目節點data.sports.forEach((sport, i) => {nodes.push({id: `sport-${sport}`,name: sport,type: 'sport'});});// 創建連接data.flows.forEach(flow => {links.push({source: `country-${flow.country}`,target: `sport-${flow.sport}`,value: flow.medals});});// 設置桑基圖參數const sankey = d3.sankey().nodeWidth(15).nodePadding(10).extent([[1, 1], [width - 1, height - 5]]);// 計算布局const graph = sankey({nodes: nodes.map(d => Object.assign({}, d)),links: links.map(d => Object.assign({}, d))});// 繪制連接svg.append("g").selectAll("path").data(graph.links).enter().append("path").attr("d", d3.sankeyLinkHorizontal()).attr("stroke-width", d => Math.max(1, d.width)).attr("stroke", d => {// 基于國家的顏色插值return colorScale(d.source.name);}).attr("fill", "none").attr("stroke-opacity", 0.5).on("mouseover", highlightLink).on("mouseout", resetHighlight);// 繪制節點svg.append("g").selectAll("rect").data(graph.nodes).enter().append("rect").attr("x", d => d.x0).attr("y", d => d.y0).attr("height", d => d.y1 - d.y0).attr("width", d => d.x1 - d.x0).attr("fill", d => d.type === 'country' ? colorScale(d.name) : "#aaa").attr("stroke", "#000").on("mouseover", highlightNode).on("mouseout", resetHighlight);
}