周琦的NBA之路

声明:本文转载自公众号 镝次元数据传媒实验室,本文对引用原文有调整。

本文的主要内容有:

一、全方位解答《周琦的NBA之路》

此部分包含了《周琦的NBA之路》作品解读、可视化思路、数据指标选择以及制作流程、周期等多个方面。

二、体育数据可视化,如何更好地为报道服务?

\1. 体育类数据新闻的选题都有哪些切入角度?

\2. 数据的使用对体育类新闻报道有何影响?

三、关于体育数据可视化,还有什么干货推荐?

\1. 体育类数据来源网站及处理工具推荐

\2. 国内外体育类数据新闻作品赏析

\3. 《周琦的NBA之路》作品链接

一、全方位解答《周琦的NBA之路》

1.我们在《周琦的NBA之路》里讲了什么?

这一项目与NBA项目有所不同,是一个数据新闻产品,借助数据可视化技术分析周琦在CBA比赛数据及NBA体测数据,从而对周琦在NBA的未来发展做出合理猜测。

作为数据新闻作品,强调有一定的叙事结构。该作品回顾了周琦从青年队开始所取得的成绩,并通过数据图表分析周琦近一个赛季在新疆队的表现,再加上他在NBA的体测数据,从而对周琦整体分析,对他的未来合理展望。

以下为项目中图表的详解及相关技术分析。

数据散点图

此图为周琦及新疆队在CBA常规赛数据散点图(点击查看大图,下同),呈现了四个维度数据,分别为:

·散点横坐标表示CBA常规赛随时间进行的轮次
·散点纵坐标表示新疆队在常规赛中的联盟实时排名
·散点矩形面积大小表示周琦及新疆队本轮得分多少
·不同颜色区分不同意义数据,浅红色及深灰色代表周琦的得分,亮红色与深灰色代表新疆队全队得分,不同颜色也代表新疆队在本次比赛中是取得胜利或失利。

图例

左图为上文散点图的图例。

右图为散点图的交互效果。在PC端打开网页,将鼠标放在特定的小矩形上,会显示新疆队本轮次比赛的对手以及部分得分情况,从中也可以获取新疆队在整个常规赛轮次中排名的变化,并且每一次比赛中周琦在其中占有的小矩形的大小也有所不同,相关数据还能实时反映出周琦在每场比赛中发挥。

季后赛流程视图

季后赛流程视图。用一个双色的矩形代表两队在季后赛中的一场交战。其中在上方的队伍代表该队伍在本次比赛中取得胜利。每一个矩形周围也展示了交战双方各自得分。

在网页端开发了一个交互,当鼠标放在特定的队伍上时,能显示出该队伍的季后赛之旅。在图片中就可以看到新疆队的季后赛之旅,通过这样一张图可以表现出各队在季后赛中的激烈竞争以及它们的比赛进程。

此图横向表现了随时间进行的季后赛轮次,也能回顾新疆队的季后赛表现,但缺乏周琦的相关部分。

球队数据统计图

球队数据统计图(treemap图)

灵感源自《华盛顿邮报》,相较于常规饼状图更富设计感,从矩形面积可以获得直观数据,如周琦的得分在队中排名第三,封盖则在队中相当突出,从而可以直观感受到周琦的队中重要地位。

场均封盖

周琦的封盖在队中比重相当之大。

对比

箱线图图例

箱线图图例

箱线图(box-plot),用以表现周琦在联盟中锋中的地位。

箱线图主要由下边缘、下四分位数、中位数、上四分位数、上边缘构成。上四分位数及下四分位数属于统计学概念,在图中,下四分位数代表了CBA联盟中排名百分之二十五的球员,上四分位数代表是百分之七十五的球员,从下四分位数到上四分位数代表了平均水平,如果超越了这两个范围就可以认为球员要么是较为成功或是水平稍有不足。

从第一张图可以看到,周琦的篮板显示已经超越了同位置中锋球员的正常范围,并且盖帽已经接近了联盟的顶尖水平。第一张箱线图也就可以看出从篮板得分以及盖帽等方面周琦已经可以称得上是CBA联盟中较为顶尖的中锋。

innba3

相同的制图方法也应用于周琦在NBA的体测数据。作为一名2016年参加了NBA选秀并且被选中的球员,相关的体测数据可以在NBA相应的数据网站上获取。用同样的方法制成箱线图后,可以发现周琦在NBA的新秀中锋中他的身高臂展都是处于非常好的水平。

当然,也可以看到在体重体脂率这一方面周琦显然要低于NBA联盟中锋水平,这样也就可以看出周琦存在的问题而不只是看出他的优点,从而发现周琦将来进入NBA后的短处。

最后一部分图涉及到MDS降维算法(Multidimensional Scaling)。由于小组成员在询问专业人士关于周琦进入NBA后的模板时得到了许多答案,有人说是穆托姆博,有人说是波尔津吉斯等等,进而产生了一个想法,希望用身体数据对球员作相似度分析从而找到他真正的模板,而不仅仅按照球探的想法为周琦寻找某一位模板球员。因此就利用到了在机器学习中常用的降维算法。

MDS1
MDS降维算法效果图,包含六个维度数据

首先,对每个球员选取了六个维度的数据,包括有:

代表球员速度体质的冲刺跑数据;
代表球员敏捷度的折返跑数据;
代表球员爆发力的垂直纵跳数据;
以及代表球员身体指标的身高、臂展、体重三个纬度的数据。

将这六个维度的数据,通过之前提到的MDS降维算法,就可以得到一张平面图上的坐标。

上图是通过球员六个维度的数据算出来的平面图,为了区分用不同的颜色给不同位置的球员做出标记,例如后位卫或前锋等。

可以看到不同位置的球员体现了一个很好的趋合度,相同位置的球员分布是相近的。

可以看到周琦分布在中锋大部分分布的区域,但并不是聚在一堆点的中间。由于通过MDS降维算法之后平面图上的距离实际代表了球员之间的相似度,说明周琦虽然适合中锋位置,但和普通的中锋又有一定的远离。为了探究其原因,小组又制作了另外两张降维图。

MDS2

MDS降维算法效果图,包含三个维度数据

此图中选择了代表球员速度的冲刺跑数据、代表球员敏捷的折返跑数据、代表球员爆发的垂直纵跳数据。

在忽略了身高体重之后,可以发现周琦混杂在了一堆球员中间。也就说明了周琦的速度、敏捷、爆发力,与传统中锋并不相似。

可以看到,他其实更趋向于前锋后卫这些小个子球员。可以发现,周琦在这方面相比传统中锋有着不一样的潜质,因此也就猜测他未来可能会成为新型中锋。

MDS3

考虑到周琦它有着灵活的脚步篮下得分能力以及他的射程能够到三分线,猜想周琦可能会成为既能投三分也能在篮下得分和防守的新型空间型中锋。

上图单独分析了球员的各项身体指标,即身高臂展和体重。

周琦的特点在于他出众的身高和臂展以及他过轻的体重。当两个极端出现在同一个球员身上,他必然会显得与众不同。

同时小组成员分析了在周琦周围的球员,包括本赛季NBA篮板王怀特塞德、NBA盖帽王戈伯特。
可见,通过MDS降维算法的相似性分析,周琦的未来的确值得期待。

2.为什么我们会选择周琦

在劳天溢老师看来,周琦的知名度和话题性是她的一大考量标准,也是选题的重要指标,“当时我们想做些相关的体育可视化专题,然后周琦在CBA年轻一代当中是表现非常突出,而且他今年所在的新疆队也获得了CBA的总冠军,去年的时候他是在第二轮四十三顺位被火箭队选中,成为当时比较热门的话题,今年在我们确定主题的时候,周琦是在休斯敦训练,今年能否跟火箭队签约也是一个热门的话题,所以我们选择了周琦作为我们专题的主人公。”

而陈建旭老师则更多地想到了周琦的争议性,“因为我们当时认为周琦是一个非常有争议性的人物,从亚青赛时被许多人看好,到奥运会表现不佳,而16-17赛季又夺下CBA总冠军。周琦集称赞与谩骂于一身,并且对于周琦的评价负面居多且许多评价主观色彩浓厚。所以我们想通过数据分析来看一下周琦到底拥有着怎样的实力。”

3.制作流程是怎么样的?

整个项目周期大概在一个月左右,主要在于项目前期调研和主题确定花费了大量时间。真正的动手设计较前一部分则快了很多。

项目的流程主要分为四部分,一是前期的调研,其次是概念形成,第三是叙事框架搭建,最后则是前端实现。

4.如何通过可视化,读懂一场比赛或者一个球员?

张玮老师的回答是:“首先要对内容复杂、难以形象表达的数据,进行充分的理解、系统的梳理,然后再选择合适的方法呈现,其次还要充分考虑到不同读者的需求和接受能力,作为一个面向大众的可视化产品,在项目的前期一定要做好目标用户的定位,这样才能确保最后的成果能够‘接地气’。”

“还有一点需要注意的是,像数据新闻这一类的数据可视化产品最重要的是是否能够清晰的传达一个故事。在做完准备工作之后,就要开始组织整个故事的框架,叙事结构。比如《周琦的NBA之路》就是一个明显的线性的叙事结构,从他青年时期的背景介绍再到CBA,最后到NBA选秀。这样的叙事结构有时会显得单一,冗长。但是优点是对于不熟悉或者不了解相关背景人读者来说会更容易读懂你想传递的信息。”

“在开始设计之前最好确定好作品的视觉语言,比如形状,颜色,质感,空间等等,这样做的好处是会使每一部分的可视化都相对和谐,能大大提高整个作品的完整度。可视化的元素可以理解为各种类型的符号,符号学中的本义和内涵也是我们在选择视觉语言时需要考虑的。适当的使用抽象符号和视觉暗示也能帮助读者更快的提取信息,更好的理解图表。”

视觉语言与抽象符号

为了更形象说明视觉语言与抽象符号的作用,张玮老师举出了上图中的例子。显然,中间的符号相较于左右两端更容易被广大读者所接受。

5.在技术层面如何实现?团队如何配合?

张玮老师:“对于一个好的可视化作品来说,跨学科的合作是必不可少的,我们团队中有来自浙大计算机学院的学生负责前端实现,还有专门负责设计的学生,同时还有陈为老师以及博士生的指导。比如在文章后半部分我们用到了MDS多维尺度分析的方法,并且用设计把这样抽象的可视化方法合理的诠释了出来,这就是跨学科交流的成果。后期和媒体打交道也花了很多功夫,作品要在各个平台兼容,不断进行修改。”

陈建旭老师:“我们三位本科生通过自学一些d3.js与设计师配合完成数据图的制作;其中一位成员有着使用javascript网页开发的基础,由他来完成最初网页版的制作。”

6.在作品中如何确定数据指标?这些指标的使用是如何帮助读者更好的全面了解球员?

陈建旭老师的考量是:“最重要也最常见的数据就是常规的场边统计,得分,篮板,助攻,封盖等,其实还有一些更有趣的数据,就拿NBA来说,除了这些常规数据外,还有我们用到的球员选秀时的身体数据,NBA也提供了大量基于传感器的数据,比如球员的跑位,投篮得分位置等等,国外的一些媒体比如《华盛顿邮报》,ESPN等也利用这些数据做出过令人耳目一新的作品。”

“当初之所选择这些数据,也是考虑到一些客观的因素,比如国内CBA没有很多传感器数据,能做的分析也就限定下来了,NBA方面因为周琦还没有正式的NBA数据,所以能用来比较的也只有选秀的身体数据,但是这些指标不光是我们在用,看到包括ESPN等报道也都是从身体数据这方面着手。因为通过这些身体数据的对比,能对周琦有一个相对全面的认识,而且通过MDS这样相似度的对比也找出一些周琦未来发展的方向或模版。”

“我们采集数据的时候基本上分为周琦的比赛数据以及身体数据,比赛数据包括所有的赛后统计数据,身体数据则包括NBA新秀体测的身体数据。随后我们通过网上搜集资料以及询问篮球教练等专业人士得出各项指标对于衡量不同位置球员的作用。以周琦为例,作为中锋或是大前锋,篮板、盖帽这两项比赛数据是特别重要的,至于身体数据,则可以从身高、体重、臂展看出一位中锋的‘硬性条件’如何。”

7.这些数据统计可以在多大程度上帮助读者得出相对准确的结论?

尽管小组拿到的比赛数据或者是身体数据都是球员场上表现和身体素质的直接反映,但陈老师也坦承,体育运动的魅力在于数据没有办法完全准确地预测比赛。但他也认为,这些数据能够在较大程度上帮助读者得出结论。

8.对于体育领域的专业问题,团队请了什么外援?

陈建旭老师称,在选取数据过程中,针对各项数据对于衡量不同位置球员能力的作用,对专业人士进行了请教。其中在与篮球教练、篮球记者等人的讨论交流中,他们提到了周琦进入NBA后的模板球员可能是戈伯特、穆托姆博、波尔津吉斯等球员,这直接启发了小组通过数据可视化的技术去制作球员相似度的对比。

陈建旭老师还认为,制作数据可视化图表的时候常常会涉及到其它行业,有一个缺陷是制作者容易站在局外人的角度去看待整个问题,那么制作出来的作品自然会有所失准。因此还是要多请教相关的专业人士,这样才能够更好地完成数据可视化作品。

二、体育数据可视化,如何更好地为报道服务?

1.体育类数据新闻的选题都有哪些切入角度?

劳天溢老师:其实我的角度可以从球员的角度出发,也可以从比赛的角度出发,比如说分析球员的能力在比赛当中的贡献。如果是从比赛角度出发的话,可以分析一下决定比赛胜负的关键因素还有转折点,等等。

夏菁老师:论文方面,我们见过很多关于棒球、桌球、篮球、足球、乒乓球等各个领域;切入角度方面,比分、比赛时间、球员轨迹、整个比赛的进程、球员技术统计等等都有。然后我之前看过一个推特做的一个很棒的整个欧冠联赛的可视化作品,我个人是非常喜欢的。它将整个欧冠赛季的两两对战直到最后的决赛全过程予以清晰呈现,是对欧冠赛季的一个较好表达。
(原链接:https://uclfinal.twitter.com/)

欧冠赛季

2.数据的使用对体育类新闻报道有何影响?

夏菁老师:是对传统的文本以及统计图的解说的一个补充版,更加全面也更加生动、更加有说服力的一种解说方式。这种解说方式的话在吸引球迷的注意力上有比较大的优势。

劳天溢老师:对数据的一些分析或者处理的方法能够发现一些一般报道没有办法发现的问题,比如在《周琦的NBA之路》当中,对周琦的身体素质做MDS聚类,可以发现他的身体素质很特殊,也可以找到跟他相似的球员,这是一般传统分析方法做不到的。所以说这能够增加体育新闻报道的一些影响力和说服力。

三、关于体育数据可视化,还有什么干货推荐?

1.体育类数据来源网站及处理工具推荐

数据网站:

http://www.basketball-reference.com

http://hoopdata.com

http://www.82games.com

http://stats.nba.com/

以及
ESPN等体育类网站;
Sportradar体育博彩数据;
SportVU球员追踪分析系统,涵盖比赛轨迹数据;
Second Spectrum数据分析,提供多维比赛数据等。

处理工具:
包括Java、Python等编程工具;
百度echarts、阿里云DataV、镝数(http://www.dydata.io/chart)等前端可视设计工具;
以及Infogram等其它编辑工具。

2.国内外体育类数据新闻作品赏析

ChartBall(http://www.chartball.com/)
Buckets NBA Shot Visualization
Sloan Sports Analytics
篮球比赛可视化案例分析(劳天溢)(此处用超链接解决)

http://mp.weixin.qq.com/s/VlUtp95Dt34i0WxZ7IK2_A

3.《周琦的NBA之路》作品链接:

新华网手机端:http://fms.news.cn/swf/2017_sjxw/zhouqi/mobile/index.html?from=singlemessage&isappinstalled=0

新华网网页端:http://news.xinhuanet.com/video/sjxw/2017-07/07/c_129650006.htm

特别鸣谢镝次元数据传媒实验室

整理:魏逸丰

编辑:周芮、曾明

运营:钱佳佳



Questions & Discussion: ✉️ zjuvis@cad.zju.edu.cn