案例：跨越时空的奥运比赛

[Fanhr]

小组成员：洪梓栋、范宏瑞、陈文杰、税戈洋、史书晓

作品链接

澎湃新闻：H5｜东京奥运会前，我们让所有奥运冠军一起PK了一把

纽约时报：One (imaginary) race with every medalist ever

final.1037f052.mp4

创作缘起

这篇数据新闻受《纽约时报》8月1日发表的文章《One race with every medalist ever》的启发，介绍了1896-2016间田赛、径赛、游泳、射击等众多奥运项目的冠军成绩变化，以体现人类在各项奥运项目中对于更高、更快、更强的追求，回溯人类近百年来在运动方面不断突破极限的足迹。

纽约时报的文章主要介绍了跳远、百米赛跑和游泳三个项目自进入奥运会以来的成绩变化，并都制作了视频作相关介绍，而澎湃的这篇数据新闻则搜集了几乎所有的奥运项目自进入奥运以来的冠军成绩变化。

（纽约时报关于男子100米自进入奥运会以来的成绩变化的可视化作品截图）

内容介绍

引入：1996亚特兰大奥运会和2012伦敦奥运会100米冠军比赛过程的对比（视频）

• 作男子100米历届（1896~2012）冠军成绩曲线图
• 提出疑问：当2012年的博尔特跑到终点时，1896年的伯克刚跑了80.25米，那120年来奥运会各赛事项目都前进了多少呢？

数据呈现

• 作1896-2016田赛、径赛、游泳、射击奥运冠军成绩变化图：

以每个项目首次进入奥运会的成绩为标准值，将历届奥运冠军成绩相连，绘制出一根根成绩线，绘制出一根根成绩线，纵坐标表示选手在其比赛项目上的长度、高度或速度成绩，位置越高则成绩提升越快。

数据分析

• 奥运会成绩提升最厉害的项目：男子铁饼；
• 奥运会上纪录被打破次数超过14次的运动项目高达18项；
• 女子4×100游泳接力冠军成绩曾被突破22次；
• 到2016年里约奥运会为止，有16项奥运项目至少5届未能突破历史最佳成绩；
• 最受瞩目的世界纪录：1968年鲍勃·比蒙9米的跳远成绩至今未被超越；
• 科技的进步让我们更好地突破极限——如撑杆器材的进化让撑杆跳成绩节节高

附自由探索界面：读者可自行查看任一体育项目近百年来的奥运冠军成绩变化曲线

升华主题

提出疑问：奥运会的比拼已经进入白热化阶段：我们是不是逼近极限了？

1935年著名田径教练布鲁图斯对跳远、跳高等田径项目做出的预言已被打破，记录正不断被人类刷新——我们无法预测奥运项目中人类的极限。

开始的视频其实是参照纽约时报的做法，让历届百米飞人同台竞技，做了一个可视化，并把视角换到俯视图使得画面从竞赛视频巧妙地变成一个散点图。在散点图上，就能非常直观地看出随着时间的变化，奥运选手跑得越来越快。

可视化效果分析

1、动静结合、视角桥面的折线图

新闻主题是运动相关，在案例引入中，呈现贝利和博尔特两位冠军的差距时，由动态的视频对照，转变为静态的折线图，且将运动员轨迹连成折线，非常巧妙地体现出距离的差距。

2、插入视频，场景再现

在选取特殊案例时，展示了比赛现场的视频片段，更有视觉冲击力和代入感。

3、互动性好、检索功能强

在该新闻的最后一个板块，读者可以自由选择想要查看的历届奥运会冠军成绩，同时对标到折线图上的位置，检索便利，且达到了比较的效果。

4、热血漫画、简笔风

该新闻虽然是奥运会的宏大主题，但不落窠臼，利用热血漫画的整体风格，将运动精神朴实地呈现出来，也更有观赏性，受众更广且更容易产生兴趣。

5、音效和视觉的双重效果

音效上，从新闻开始就利用比赛现场原声烘托了整体氛围，与所提供的各个比赛夺冠片段一同对读者感官产生冲击。

与纽约时报报道的区别

纽约时报和澎湃的处理方式有一些细微的差别。纽约时报仅做了男子百米、自由泳和跳远三个项目的可视化，而且差距是以距离来衡量（即最快/最高的人和其它人的距离差别）；而澎湃则扩展了项目的范围，扩大至所有夏季奥运田径项目，在曲线的处理上维度是成绩，也就是最高点就是世界记录，所以在径赛中时间越短坐标越高（这一点其实不是很好）

纽约时报的形式是视频+可互动的散点图，每个点的颜色代表国籍，鼠标选中可以显示名字和成绩。澎湃的形式更加符合移动传播，是H5页面，开头有动漫风的视频作为引子，随着下滑不断推进叙事，并且整个数据可供读者自选探索，更为自由。

不过，纽约时报和澎湃的处理方式有一些细微的差别。纽约时报仅做了男子百米、自由泳和跳远三个项目的可视化，而且差距是以距离来衡量（即最快/最高的人和其它人的距离差别）；而澎湃则扩展了项目的范围，扩大至所有夏季奥运田径项目，在曲线的处理上维度是成绩，也就是最高点就是世界记录，所以在径赛中时间越短坐标越高（这一点其实不是很好）

纽约时报的形式是视频+可互动的散点图，每个点的颜色代表国籍，鼠标选中可以显示名字和成绩。澎湃的形式更加符合移动传播，是H5页面，开头有动漫风的视频作为引子，随着下滑不断推进叙事，并且整个数据可供读者自选探索，更为自由。

技术实现

我们采访了参与这篇报道的澎湃新闻实习生李嘉豪，了解做出这篇数据新闻的技术路径。首先是数据源：国际奥委会官网以及Olympedia奥运百科网站。这两篇网站有历届奥运会各项目冠军的记载，但是没有打包的数据集合，需要爬虫爬取名字、照片、国籍、时间和比赛成绩等数据，并对疏漏的地方人工清洗和补充。

而开头的动画，则需要视频动画团队进行制作，涉及AE等软件的使用。

另外，这样的H5作品具有良好的移动设备适配和交互性，也需要一定的开发工具。澎湃新闻使用的开发工具如下：

1. Scrollama.js —— 滚动交互

Vue Scrollama是一个可轻松设置滚动驱动的交互的组件。直接放置在Scrollama组件内部的任何元素都将被视为步骤。随着用户滚动，将触发并发出事件，可以对进入，退出或通过视口的元素进行监听。

观察《奥运》的H5源码，可以发现其自动展示部分主要是由11个事件（或者说是Step）构成，当用户上下滑动时，会进行步骤间的切换，从而呈现不同主题的信息。

2. webpack —— 打包压缩

webpack 是一个模块打包器。webpack 的主要目标是将JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

3. Vue-cli —— 组件式开发

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

《奥运》中最后的自由探索Part就是由搜索组件、信息框组件、数据展示组件三个部分组成。

4. canvas —— 视频控制

是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。这里需要划重点的是， 只是一个画布，本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。

《奥运》通过在一个 canvas （画布）上结合 video 元素功能，实时地操纵视频帧数据来合成各种视觉特效到正在呈现的视频画面中。

优点与缺点

本数据新闻案例优点如下：①互动性较强，受众可以自由选择自己感兴趣的奥运会项目进行单独的查阅；②结合事实，在奥运会期间推出数据新闻热度较高；③可视化效果好，H5动画呈现让受众一下子就被吸引。

但是，它也有可以进一步探索，从信息跃迁为知识的空间。比如：可以结合近年来运动科学、医学、营养学等的发展，尝试解释人类不断突破背后的原因，进而为读者提供更多的知识，而不是仅仅呈现了一个历史维度比较的信息。它还可以和其他方面的数据做对比，比如中国日渐下降的体测平均成绩，揭示出体质方面上出现的“马太定律”。此外，这个案例最为巧妙的在于开头的动画效果将跨越时空的赛跑转换为以跑道为纵横坐标的散点图，但这个创意却是纽约时报的报道先做出来的。总的而言，国内的数据新闻在可视化和交互上比起国外媒体缺乏一些创意。

综合而言，这是一篇很有趣、能够快速捕捉到热点的数据新闻，也有翔实的数据呈现以及精美的可视化。澎湃新闻美数课团队，在华语媒体中也属于数据新闻的第一梯队，值得我们学习。