Apple Pencil 刚刚上市没几天便被 iFixit 拆解如何实现数据的实时可视化，以供人们欣赏其优秀的内部工程设计。没错，当如何实现数据的实时可视化我们遇到极其精妙与魔法无异的事物时，好奇心总会驱使我们去探究它背后的原理。

　　对于数据可视化来说更是如此。

　　最近在知乎看到一个问题如何实现数据的实时可视化：”圆形锯齿数据可视图是如何做出来的？”，其中提到的可视化图出自网易数读新闻《中国危险化学品事故多发地分布》，如下图所示：

　　这则数据新闻中的可视化数据图本身并不复杂，在尝试重制后我觉得可以整理一下思路，分享给大家作为参考，希望能对逆向可视化案例有些帮助。

　　通过本文可以如何实现数据的实时可视化了解到：

逆向一个可视化案例的大致步骤；

类似"圆形锯齿”数据可视化图是如何实现的；

更多的类似的数据可视化的设计。

　　第一步：分析原始数据

　　数据是可视化背后的主角，逆向可视化与从零构建可视化的第一步一样：从原始数据入手。不同的是在逆向时我们看到的是数据经过图形映射、加工、修饰后的最终结果，而原始数据隐藏在纷繁复杂的视觉效果中。抛开华丽的可视化效果，从中找到数据、分析数据是我们的首要工作。

　　此例的数据结构比较简单，从图中可以方便的整理出来，如下表所示：

　　有些可视化案例的原始数据可能会比较复杂，不能从图中很方便的整理出来，可通过项目介绍中数据来源来寻找原始数据。

　　原始数据包含了 31 个省、直辖市、自治区在 2007 年至 2011 年的事故数与死亡人数，数据之间并没有太深层次的逻辑关系，只是单纯的数值。

　　分析原始数据及其结构可以帮助我们还原可视化作者最初拿到数据时的场景，帮助我们更好地揣摩设计者的想法，理解设计思路，为进行下一步的图形分析做准备。

　　第二步：分析图形

　　图形是可视化中的关键元素，也是我们最关注的部分。分析可视化中的图形可以从很多角度来进行，我们可以先从整体入手，利用经验尝试解答以下几个问题：

之前是否见过类似的可视化案例？

案例是否属于某种常见的可视化形式？

案例是否是某种可视化形式的演进变化形式或某几种可视化形式的组合？

　　在本例中，“圆形锯齿数据可视化图”其实可看做是在雷达图（Radar Chart）基础之上的修改形式。雷达图有很多别名或类似形式，例如星状图（Star plot）、蛛网图（Spider chart）等等（它们有个共同的特点就是基于极坐标系的）。

　　我们现在看到的大多数可视化案例都是从某种基础的可视化方法演进而来，借鉴经典可视化方法，并在其基础之上进行创新。 如果可以通过图形大致确定可视化的形式，就可以借助一些专有工具快速做出相似原型。

　　我们还可以利用更为通用、更深层次的方法来分析：将可视化划分为不同的组件与层。Leland Wilkinson 在 《The Grammar of Graphics》中阐述了一种描述统计图形的语法，把图形拆分为一些相互独立、可组装的模块元素。例如下图的例子，将坐标系看做一个组件，在不修改其他图形元素的情况下，仅仅通过修改不同的坐标系我们就能获得不同的统计图：

　　图形语法的出现让我们有了更加适合描述可视化图形的方法。R 语言中著名的 ggplot2 图形包就是 Hadley Wickham 基于这个理论而建立的，其名字中的 “gg” 指的便是 Grammar of Graphics。

　　Nathan Yau 在 《Data Points》中也介绍过类似的方法，将可视化组件分为：视觉暗示（几何特征）、坐标系、标尺、背景信息。视觉暗示包含位置、长度、角度、方向、形状、面积、体积、饱和度、色调，如下图所示：

　　坐标系包含常见的直角坐标系（笛卡尔坐标系）、极坐标系（根据夹角和距原点距离定位）、地理坐标系等。

　　将不同的视觉暗示与不同的坐标系相组合，会产生很多种不同的可视化效果。《Data Points》书中的这幅图很好的展示了可视化组件进行组合的强大表现力（点击查看大图）：

　　基于图形语法，数据可视化可以看做是由不同组件构成的不同图层叠加复合而成。就像 PhotoShop 中的图层一样，复杂的视觉效果可以拆分成不同几何特征、不同坐标系、不同标尺所构成图层的组合。我们经常会看到很多复杂的可视化案例，当无从下手时，分类拆分成各种基础组件和图层是一个很好的方法。

　　回到案例，我们将整个图拆分为以下几个元素：

省、地区文字标签

死亡人数、事故数数值标签

死亡人数折线

事故数面积图

事故数刻度标尺(白色)

极坐标

　　于是，我们便得到了一个分层展开的可视化图：

　　拆分结构后，我们看到了一个由多层基础元素组成的结构：折线、文字标签、数字标签。这里的折线图和面积图其实本质上是常见的折线图和面积图，只不过由直角坐标系变成了极坐标系，从而形成了锯齿状的整体图形。

　　第三步：深入挖掘背后技术

　　通过上面的分析我们其实已经可以通过一些工具制作出类似可视化效果。但是作为可视化硬核玩家的如何实现数据的实时可视化你不能止步于此，应该深入地了解更底层的实现方法江南体育。我们可以查看开源工具的源代码，例如我们可以从 d3-plugin的项目代码中发现一些可视化的具体实现方法。还可以搜索与案例相关的博客或者论文等等。

　　并不是所有的可视化方法背后都有一个复杂的算法，大部分可视化技术用到的也许只是一些基础数学知识。

　　在逆向时，可以先将问题转化为一个简单的模型，例如在本例中，我们可以将问题简化为“如何将 n 个点均匀的排列在一个半径为 r 的圆上”。通过三角函数可以很方便的解决这个问题，如下图所示：

　　而死亡人数折线的数据点坐标即为半径为 r + scale(death) 圆形上对应的点。同理，事故数的数据点坐标即为半径为 r + scale(accdient) 圆形上对应的点，如下图所示：

　　第四步：实施

　　进行到这里，难道你不想亲自实现一下可视化效果吗？有了数据、分析了结构、深入理解了背后的原理，具体实施将会变得十分简单，可以根据需求选择适合自己的工具。我在这里选择使用 d3.js 简单的实现了一下，仅供参考。

　　第五步：可读性优化

　　在上面的分析中我们可能漏掉了一些细节：针对可读性进行优化。可读性会直接影响可视化内容的质量，混乱的颜色、重叠的标签都会大大降低可读性。在逆向可视化案例时，我们应该注意发现和积累对可读性优化的方法，以更好地应用到自己的案例中去。

　　在中国危化事故可视化图中，我们可以看到为了提高可读性，做了以下几点调整：

处于圆形下半部分的省、地区文字并没有像上半部分的文字一样指向圆心，而是背离圆心。保证了下半部分文字的可读性；

事故数与死亡人数数值标签如果过于靠近则需要调整标签位置，以免重叠。

　　提高可读性的工作可能并不充满乐趣甚至是痛苦的：不断的手动调整参数、硬编码数值、破坏已有代码和设计等等。但是为了更好的体验，这部分工作是非常值得的。不考虑可读性，仅仅追求视觉效果并不可取。

　　等等，还没有结束

　　在完成了上面的步骤之后，我们可以想想如何来改进这个可视化，让它变得更好。数据是否有值得深挖的地方？是否可以展现更多更有趣的信息？设计上是否已经做到完美？

　　在本例我们可以看到一些问题：城市在圆形的分布上并没有什么规律性，能否进行一下排序或者再添加一些数据维度，例如按照人口排序或者将各省市按照 GDP 在圆形上排序是否就可以看出危化事故与经济水平的关系等等。

　　小结

　　至此，我们的逆向之旅可以画上句号了。总结一下我们走过的步骤：

　　通过上面的步骤，我们基本上可以还原一个可视化内容的产生路径，也从中学到了很多知识。在学习资源较少的可视化领域，深入地逆向自己喜欢的可视化作品，不失为一种好的学习方法。

　　在看到一个可视化作品时，我们应该像庖丁一样：目无全『牛』，看到可视化背后的数据、组件、图层、几何模型，看到更多的数据可视化之美。

　　更多案例

　　下面是一些与《中国危化品事故统计》类似的可视化案例，形式上与《中国危化品事故统计》十分类似，在设计和数据的深度上有更多值得学习的地方。

　　Weather radials是一个关于城市温度与降水的信息图。整个圆形代表一个城市，圆形中围绕圆心的柱状图代表一年中每天的最高温度与最低温度。浅蓝色的圆形代表降水量。

　　有人用 D3.js 实现了类似的项目，New York 2015 Historical Weather Data。

　　Weather Eindhoven 2014- 下面也是一个关于城市气候的可视化案例。埃因霍温位于荷兰南部，气候属于暖温带气候。降水在埃因霍温非常普遍，全年平均降水量为 776 mm。图中圆心部分是温度分布，红色代表对应日期的最高气温，白色代表最低气温。外侧绿色柱状图代表降水量，最外侧由线连接的点代表风力。

　　Brain dance是一个关于人脑对音乐反应的可视化项目。该图记录了其中一位志愿者在听到 kleemar为该项目特殊制作的一首音乐时的脑电波。这首音乐的时间为 2 分 14 秒（134秒），可以看到整个圆形按每秒中被划分为了134秒。主要记录了 Focus (专注)和 Flow (放松) 两组指标的变化数据，制作出了该项目。

　　Quantified self data visualization

　　下面是用 Nodebox 实现的一个关于睡眠的自我量化信息图。整个圆形代表 8 小时的推荐睡眠时间，每个颜色代表一个人，靠近圆形代表重度睡眠（sonno profondo），圆形外代表轻度睡眠（sonno lieve）。每根线结尾部分的虚线代表睡眠不足（sonno perso）的时间。

（正文完）

　　源于知乎（https://zhuanlan.zhihu.com/p/20366289），GeoTalks转载已获作者授权，感谢作者对GeoTalks的大力支持。

GeoTalks

微信号：GeoTalks

地信|遥感|导航|测绘|地学|大数据|可视化|人工智能

收稿邮箱: geotalks@qq.com