2015 可视化盛会 OpenVis 实录：数据科学家和他们的可视化故事

OpenVis是个什么会？

下面这张图（来源自Lena Groeger 的 Twitter 截屏）从数据新闻的角度回答了这个问题：

坐标系右值域中，NICAR 是数据新闻的年度会议；SRCCON 是2014年第一次开始的为新闻室内程序员们准备的内部交流会议，多以小型圆桌为主；Tapstery 是为期一天的主题为用数据来讲故事的会议。这些会议的与会者大都是新闻人，讨论的技术多是为了做新闻、讲故事服务。

如果想见识更偏艺术创新的可视化作品，可以选择上图中左值域中的 Eyeo 看看；如果更学术、偏科学可视化，也有 IEEE Vis 等学界高尖端的可视化年会可参加。

而OpenVis，恰在两者的交汇点。它的与会者有擅长艺术创新可视化的可视化设计师，有钻研可视化应用的教授学者，有业界研究太空可视化的年轻小哥，也有做健康数据咨询的业界工程师。OpenVis 致力于为这所有的人服务，让在不同领域的可视化工从业者能够互相了解，共享经验和知识。

数据科学家和他们的可视化工具

可视化工具的重要性不言而喻。对于数据可视化从业人员而言，最基础的是能够使用已经存在的工具进行可视化的能力；有一些技术积累的从业者可以写教程指导某个可视化如何实现；能力更进一层者，可以对已有的可视化工具做出补充；而如果说最终目标，应当是新工具的创造。

如果说创造新工具的野心还不够大——写一个库也叫创造一个新工具 —— OpenVis 上有很多类似的开源库的介绍，那么当这个专为数据可视化服务的新工具可以自成体系、形成平台且还开源，其开发者也是理所应当地成为两场最受瞩目的主题演讲的主讲人。

二者分别都介绍自己开发工具背后的理念、工具的特性、一些实际应用和仍然存在的问题。

一

年仅36岁的 Jeff Heer 现任华盛顿大学教授，曾任斯坦福教授，是D3开发者Mike Bostock做博士生项目 (D3前身) 的老师，数据咨询公司 Trifacta 的创始人之一。

演讲中，他首先把可视化工具根据方便使用程度分成三类：第一类是完全不需要接触代码、点击生成图表类型就可以生成相应图表的制图工具（Charting tools: Excel, Many Eyes, Google Charts），第二类是根据代码指令描述绘制相应图表的描述性编程语言（Declarative language: ggplot2, Protovis, D3)，第三类是和电脑绘图系统沟通搭建起的计算机工具语言（Programming toolkit: Prefuse, Flare, VTK, Processing, OpenGL)。他的研究方向致力于开发第二类——描述性语言的可视化工具。

Heer主要介绍了他和学生们正在开发的可视化工具系统，包括D3简化版新工具vega、基于vega的统计绘图工具Vegalite、Vegalite的图形界面Polestar，以及自动分析数据生成多种图表类型的工具Voyager。而Lyra，是一个为不懂代码的设计师定制的，对Vega图表进行后期处理的工具。

Vega可视化工具生态系统

讲稿PDF

上面提到的所有工具都是开源的，可以在这找到。

http://vega.github.io/

33分钟的讲座视频可在YouTube上观看。

二

Santiago Ortiz 是数据科学家，许多炫酷的探索性数据可视化都是他的作品，但他用的工具却鲜有人知【比如他自己的网站，是一整张canvas画布】。在 OpenVis 的主题演讲中，他介绍了自己使用的 Moebio 框架，并把基于此框架的平台 Lichen 开源。Moebio 框架是一个集合了多种数据模型的系统，而正在开源的Lichen平台是一个可以自由随便添加外来库、网页、音频来形成集合效果的 GUI 平台，其目的是实现工程师和用户的互动、看到及时效果。Lichen 正在开源中，你可以在这里订阅最新动态 。

The beauty of mixed code — Lichen

Santiago Ortiz 在会上提到，Moebio 框架的开发工作从2007年开始的，而D3的原型 Protovis 发布于2009年，如果算上两年的前期开发时间，项目起始也在07年左右。想来两位都用了八年时间对一个可视化平台进行不断的改善和拓展，而这个过程还没远没有结束。

如何用可视化讲个好故事？

这里介绍 OpenVis 中的三场主题演讲。

图表不该是抽象的、隔绝感情的。如何设计出生动而有信息量的可视化是设计者、特别是可视化记者孜孜不倦的追求。今年 OpenVis 的三位主讲人从不同角度讨论了同一个问题：怎样用可视化讲个好故事？

不拘一格讲故事

Robert Kosara 是 Tableau 的研究学者。他认为故事可以吸引人们的注意力，故事是信息的粘结剂，所以可视化设计者应该多花功夫想想数据怎么讲故事。

首先，为了让数据讲出好故事，可视化记者未必要遵循学界的禁忌。例如，学界一直反对将散点图连线，因为这样很容易得到缠在一起的“线团儿折线图”（”hairball line chart”）。但纽约时报的有关行车安全的连线散点图 却用它做出了清晰而自带故事的可视化：

与通常的涉及时间序列的可视化不同，这里横轴不是时间，而是人均驾驶公里数，纵轴是每十万人中车祸的死亡人数，时间沿着折线流动。由于数据的特殊性（即人均驾驶公里数几乎一直在上升），折线不仅没有缠绕在一起，反而清晰地展示了1950到2011年间美国行车安全的变化驱使，数据特殊的形态也为页面设计提供了极大便利。这个作品在今年的OpenVis大会的其他演讲中出现了三四次，一直被当做典范表扬。

与此类似，3D图表一直为业界嘲笑，但是纽约时报这个解释美国国债利率与经济形式的关系的可视化将3D视觉用在了刀刃上，令人叹为观止。

x轴是年份，y轴是国债期限，z轴是国债收益率。这个3D图表将非常抽象的长短期国债利率随经济形势的变化用3D视觉具象化，还配有一步一步的注释，帮助从来没学过“收益率曲线”的读者直观地理解这个模型、发现故事的重点。不过这样的成功的3D图表，除了需要艺高人胆大，更需要恰好有三个重要维度的数据，恐怕很难复制。

Kosara 还呼吁可视化设计师向四格漫画家学习,推荐大家都去读读“ Understanding Comics ”。四格漫画之所以有特殊的魅力，是因为每则四格漫画都有一个完美的叙事弧线：场景设置（Establish）—— 开端（Initial）——高潮（Peak）——释放（Release）。数据可视化的设计者可以利用这样的叙事弧线来讲故事。以2009年纽约时报所做的温室气体排放折线图为例，与其让读者不停地翻页，不如改用small multiple的方式讲述一个有起承转合的故事。

不妨加一点幽默

Nigel Holmes 是著名的插画家，这个喜欢蓝色喜欢的不得了的小老头儿以充满幽默的信息图出名，作品经常刊登在纽约时报、时代周刊等等很有影响力的刊物上。最近，信息图表大家 Edward Tufte 在书中称 Nigel 为“垃圾图表的推行者”。 Holmes以此开场自嘲，但发出质疑：严肃地讲一件事情，真的能让传达的信息更真实更权威吗？为什么不用“好的幽默”让传达的信息更友好、更容易接近呢？

Holmes 认为目前有很多可视化设计师“被技术引诱”（seduced by technology），被呈现大量数据的可能性迷惑了。他笑称可视化设计者是“充满数据的豪猪” (The data rich porcupine)，而信息图的设计师是“精简的斑马”(The Edited Zebra)。避免被技术引诱的最好方式是精简，精简不是简化，而是清晰化。经过精简的图表和设计更加直观和清晰，让读者能有“恍然大悟”之感。

“恍然大悟”的瞬间

“恍然大悟”更是所有可视化新闻的最终目的。纽约时报的可视化编辑 Hannah Fairfield 与大家分享了纽约时报是如何为读者营造“恍然大悟”的瞬间的。

在有关北达科他州石油钻井的故事中，纽约时报将所有埋在地下的石油钻井管道都放在了地表之上，还适用世贸中心的高度作为参照，非常直观地展现了遍布北达科他州的石油钻井网络。

其他被用作展示的作品还包括：哈佛大学终身教职男女比例失衡；酒驾对年轻人更危险；等等。 完整演讲视频请戳这里。

SVG, Canvas 和 WebGL 之比较

OpenVis 也有多个演讲提到浏览器可视化的新宠 WebGL。虽然 WebGL 在好多年前就被高尖端的可视化工程师们广泛使用，但 WebGL 进入新闻可视化事业却是2014-2015年的事。

自从 iOS 开始支持 WebGL，以及在三月份纽约时报做了轰动一时的3D经济收益率曲线，各家媒体现在都开始考虑如何使用 WebGL 来绘制高性能的3D图。而在之前，这样的3D动画效果都是通过动画视频实现的。

那么和如今时兴的两种浏览器绘图模式: SVG (代表：D3.js, Raphael.js) 和 Canvas (代表: Echarts, Google Charts, p5.js) 相比，WebGL 有什么区别呢？

Dominikus Baur 的讲座（讲座视频可在 YouTube上观看，时长40分钟）比较了这三者在实际写代码和浏览器性能上的差异。

友情提示：如果下图你看懂了，就可以跳到文章最后去亲自测试一下了。

Performance vs. Pain

Baur 认为，如果浏览器载入速度不在考虑范围之内，SVG 绘图是最优的模式。

SVG 生成矢量图，并且和浏览器 DOM 的完全融合，这使它支持最灵活的交互效果和 CSS 样式。但是也正是因为每一个 SVG 元素都是一个 DOM 元素，绘制或移动一个 SVG 元素，浏览器都需要重新绘制、渲染页面，导致速度变慢，性能变差。要保证在浏览器绘制 SVG 过程中无时滞，一个页面静态 SVG 元素大约可以绘制一万个，动态的 SVG 元素，就最好不要超过一千个。

如果你需要一次绘制一千个以上的图形并让他们动起来，或者你需要你的图形做一些特殊的动画效果，这时候 Canvas 就有 SVG 所没有的优势了。

与 SVG 绘图不同的是，Canvas 内绘制的元素都是预先生成，预先定下元素特性，预先写好动画路径。使用 Canvas 绘图，你需要写下每一个元素的输出的轨迹。由于 Canvas内绘制的元素并不涉及 DOM 元素，和 SVG 绘制的元素相比，交互性差，但也正因如此，在元素自身的动画特效上不受 DOM 位置限制，能够绘制表现力更强的图形，同时 SVG 生成位图，在浏览器性能（载入速度）上比 SVG 更佳。

与 Canvas 和 SVG 不同的是，WebGL 通过 WebGL JS API 连接 Javascript 和 GPU 编译程序。GPU 绘图的渲染大部分在 GPU 上进行，对浏览器压力减小，性能几个量级地提高，使 WebGL 成为浏览器内的3D渲染、大数据可视化唯一的选择。

如果想使用 WebGL，Baur 还推荐了两个库 pixie.js (2D webGL renderer with canvas fallback), three.js (3D)。不使用库想用的 WebGL 画一个方块就要写200行代码，相比 canvas, SVG，效率极低，绝不建议实际项目中尝试。

为了更清楚地展示三者绘图上的差异，Dominikus Baur 建了一个测试器。你可以试着增加或减少星星，看在静态、动态和不同绘图模式下的浏览器绘图的快慢情况。在动态模式下，如果右上角显示能达到60fps，就是比较流畅的效果。友情提示：星星数量建议从1万左右开始，并在确认浏览器开启 webGL 下进行测试。

在实际新闻可视化运用中，因为数据点相对少、而D3占据大量市场份额，SVG 绘图是最常见的选择。基于 Canvas 的绘图，真正在新闻上的使用印象最深刻的一次是纽约时报在两年前的一次成功尝试，通过 Canvas 绘制1000多个点而不影响浏览器表现。

纽约时报Canvas绘图尝试

当然，画图的方式不止三种。

就在最近，纽约时报开始越来越多地尝试多种渲染混合的绘图方式。在提高性能的同时满足大数据量的内容需求。比如去年年底的汽车召回图，车轨由 SVG 渲染、车通过 Canvas 渲染；再举前文提到的3D经济收益率曲线一例，图表主体由 WebGL(three.js) 渲染，网格线和实际折线则由 Canvas 渲染完成。

Dominikus Baur 提到另一例今年五月将和大家见面的 Better Life Index，最早使用 Flash，13、14年用 SVG 绘图，下个月出的新版本就要全部使用 WebGL了，我们也拭目以待。

文章来源：数盟

★每日一题（答案次日公布）

昨日Q48 答案：B

Q49. 以下哪些分类方法可以较好地避免样本的不平衡问题， （ ）A，KNNB，SVMC，BayesD，神经网络

________________________________________________________

PPV课其他精彩文章：

1、回复“干货”查看干货 数据分析师完整知识结构

2、回复“答案”查看大数据Hadoop面试笔试题及答案

3、回复“设计”查看这是我见过最逆天的设计，令人惊叹叫绝

4、回复“可视化”查看数据可视化专题-数据可视化案例与工具

5、回复“禅师”查看当禅师遇到一位理科生，后来禅师疯了！！知识无极限

6、回复“啤酒”查看数据挖掘关联注明案例-啤酒喝尿布

7、回复“栋察”查看大数据栋察——大数据时代的历史机遇连载

8、回复“数据咖”查看数据咖——PPV课数据爱好者俱乐部省分会会长招募

9、回复“每日一课”查看【每日一课】手机在线视频集锦

原文始发于微信公众号（PPV课数据科学社区）：2015 可视化盛会 OpenVis 实录：数据科学家和他们的可视化故事