今天在公司看到数据可视化的效果，很直观很酷炫。正好之后的产品可能会涉及到这块内容，就查了查相关资料。这篇文章还是比较清晰明了的。
转载地址：https://zhuanlan.zhihu.com/p/20366289
作者：Xhinking
Apple Pencil 刚刚上市没几天便被 iFixit 拆解，以供人们欣赏其优秀的内部工程设计。没错，当我们遇到极其精妙与魔法无异的事物时，好奇心总会驱使我们去探究它背后的原理。
对于数据可视化来说更是如此。
最近在知乎看到一个问题：”圆形锯齿数据可视图是如何做出来的？”，其中提到的可视化图出自网易数读新闻《中国危险化学品事故多发地分布》，如下图所示：
通过本文可以了解到：
- 逆向一个可视化案例的大致步骤；
- 类似"圆形锯齿”数据可视化图是如何实现的；
- 更多的类似的数据可视化的设计。
第一步：分析原始数据
数据是可视化背后的主角，逆向可视化与从零构建可视化的第一步一样：从原始数据入手。不同的是在逆向时我们看到的是数据经过图形映射、加工、修饰后的最终结果，而原始数据隐藏在纷繁复杂的视觉效果中。抛开华丽的可视化效果，从中找到数据、分析数据是我们的首要工作。
此例的数据结构比较简单，从图中可以方便的整理出来，如下表所示：
原始数据包含了 31 个省、直辖市、自治区在 2007 年至 2011 年的事故数与死亡人数，数据之间并没有太深层次的逻辑关系，只是单纯的数值。
分析原始数据及其结构可以帮助我们还原可视化作者最初拿到数据时的场景，帮助我们更好地揣摩设计者的想法，理解设计思路，为进行下一步的图形分析做准备。
第二步：分析图形
图形是可视化中的关键元素，也是我们最关注的部分。分析可视化中的图形可以从很多角度来进行，我们可以先从整体入手，利用经验尝试解答以下几个问题：
- 之前是否见过类似的可视化案例？
- 案例是否属于某种常见的可视化形式？
- 案例是否是某种可视化形式的演进变化形式或某几种可视化形式的组合？
在本例中，“圆形锯齿数据可视化图”其实可看做是在雷达图（Radar Chart）基础之上的修改形式。雷达图有很多别名或类似形式，例如星状图（Star plot）、蛛网图（Spider chart）等等（它们有个共同的特点就是基于极坐标系的）。
我们还可以利用更为通用、更深层次的方法来分析：将可视化划分为不同的组件与层。Leland Wilkinson 在 《The Grammar of Graphics》**中阐述了一种描述统计图形的语法，把图形拆分为一些相互独立、可组装的模块元素。例如下图的例子，将坐标系看做一个组件，在不修改其他图形元素的情况下，仅仅通过修改不同的坐标系我们就能获得不同的统计图：
Nathan Yau 在 《Data Points》中也介绍过类似的方法，将可视化组件分为：视觉暗示（几何特征）、坐标系、标尺、背景信息。视觉暗示包含位置、长度、角度、方向、形状、面积、体积、饱和度、色调，如下图所示：
回到案例，我们将整个图拆分为以下几个元素：
- 省、地区文字标签
- 死亡人数、事故数数值标签
- 死亡人数折线
- 事故数面积图
- 事故数刻度标尺(白色)
- 极坐标
于是，我们便得到了一个分层展开的可视化图：
第三步：深入挖掘背后技术
通过上面的分析我们其实已经可以通过一些工具制作出类似可视化效果。但是作为可视化硬核玩家的你不能止步于此，应该深入地了解更底层的实现方法。我们可以查看开源工具的源代码，例如我们可以从 d3-plugin 的项目代码中发现一些可视化的具体实现方法。还可以搜索与案例相关的博客或者论文等等。
并不是所有的可视化方法背后都有一个复杂的算法，大部分可视化技术用到的也许只是一些基础数学知识。
在逆向时，可以先将问题转化为一个简单的模型，例如在本例中，我们可以将问题简化为“如何将 n 个点均匀的排列在一个半径为 r 的圆上”。通过三角函数可以很方便的解决这个问题，如下图所示：
第四步：实施
进行到这里，难道你不想亲自实现一下可视化效果吗？有了数据、分析了结构、深入理解了背后的原理，具体实施将会变得十分简单，可以根据需求选择适合自己的工具。我在这里选择使用 d3.js 简单的实现了一下，仅供参考。
第五步：可读性优化
在上面的分析中我们可能漏掉了一些细节：针对可读性进行优化。可读性会直接影响可视化内容的质量，混乱的颜色、重叠的标签都会大大降低可读性。在逆向可视化案例时，我们应该注意发现和积累对可读性优化的方法，以更好地应用到自己的案例中去。
在中国危化事故可视化图中，我们可以看到为了提高可读性，做了以下几点调整：
- 处于圆形下半部分的省、地区文字并没有像上半部分的文字一样指向圆心，而是背离圆心。保证了下半部分文字的可读性；
- 事故数与死亡人数数值标签如果过于靠近则需要调整标签位置，以免重叠。
提高可读性的工作可能并不充满乐趣甚至是痛苦的：不断的手动调整参数、硬编码数值、破坏已有代码和设计等等。但是为了更好的体验，这部分工作是非常值得的。不考虑可读性，仅仅追求视觉效果并不可取。
等等，还没有结束
在完成了上面的步骤之后，我们可以想想如何来改进这个可视化，让它变得更好。数据是否有值得深挖的地方？是否可以展现更多更有趣的信息？设计上是否已经做到完美？
在本例我们可以看到一些问题：城市在圆形的分布上并没有什么规律性，能否进行一下排序或者再添加一些数据维度，例如按照人口排序或者将各省市按照 GDP 在圆形上排序是否就可以看出危化事故与经济水平的关系等等。
小结
至此，我们的逆向之旅可以画上句号了。总结一下我们走过的步骤：
在看到一个可视化作品时，我们应该像庖丁一样：目无全『牛』，看到可视化背后的数据、组件、图层、几何模型，看到更多的数据可视化之美。
更多案例
下面是一些与《中国危化品事故统计》类似的可视化案例，形式上与《中国危化品事故统计》十分类似，在设计和数据的深度上有更多值得学习的地方。
Weather radials** 是一个关于城市温度与降水的信息图。整个圆形代表一个城市，圆形中围绕圆心的柱状图代表一年中每天的最高温度与最低温度。浅蓝色的圆形代表降水量。
下面是用 Nodebox 实现的一个关于睡眠的自我量化信息图。整个圆形代表 8 小时的推荐睡眠时间，每个颜色代表一个人，靠近圆形代表重度睡眠（sonno profondo），圆形外代表轻度睡眠（sonno lieve）。每根线结尾部分的虚线代表睡眠不足（sonno perso）的时间。
（正文完）
相关书目：
《The Grammar of Graphics》 - Leland Wilkinson
《Data Points》 - Nathan Yau 中文版《数据之美：一本书学会可视化设计》
相关链接：
知乎提问：圆形锯齿数据可视化图是如何做出来的？
网易数读：中国危险化学品事故多发地分布**
d3-plugin - Github
使用 d3.js 重制的案例 - CodePen
