之前进行过一个数据可视化的设计，初步有些成果，借此总结下自己设计时的步骤与方法。文中每步穿插当时设计的例子，希望可以更易理解，例子的原型图如下。

设计中经过多次反复，但总体可以归为以下3步。

1.分析数据

想要清楚地展现数据，就要先了解所要绘制的数据，包括元数据维度、元数据间关系、数据规模。元数据在这里指图形要表达的不可再细分的实体。

元数据的维度即数据的各属性度量，比如二维平面上的点的属性是,它的维度就是x坐标轴与y坐标轴。一般需要可视化的数据会有很多维度，分析清楚各维度及其关注度是最终把数据清晰表达的前提。过多的维度会加大可视化的难度，因为“想聊的故事太长了，反而就都沉默的笑着”。当然一直沉默就可能丢工作了，所以可以尝试从二维到 三维、加入颜色、形状等表现维度，如果真的觉得极限了，就应该考虑信息过载问题了，回头试着删减非必要的信息维度。

本例中的元数据是案件，维度有时间、类别、所在部门、前后案件。

元数据间关系，多数关系都与元数据本身的属性有关，也就是说，可以在一个维度上判断出数据间的关系。

案件的开始结束时间，可以知道各案件的前后关系。根据案件的前后案件，可以把案件连接在一条流转线上。

数据规模，往往需要采集真实数据，以便确定图形的容量、坐标刻度等。

幸好例子中的数据量不大，上图是最复杂的流程了。本例的可视化任务主要难点在关系上的表达。

2.匹配图形

分析清楚数据后，就要找个合适的箱子把这些“苹果”装进去。上一步，或许还可以靠自身的逻辑能力，采集到的现成数据分析得到，而这一步更多地需要自己的经验、阅历，数据可视化本来就是个很综合的学问啊！

西乔如是说：它涉足制图学、图形绘制设计、计算机视觉、数据采集、统计学、图解技术、数型结合以及动画、立体渲染、用户交互等。相关领域有影像学、视知觉。空间分析、科学建模等。

不过，幸运的是，现在已经有很多成熟的图形可以借鉴了。比如以下两个（本文的例子是它们两个的综合）。

Interactive History Timeline

Flowing Data

如何确定采用哪种图形模式呢？这要从数据出发。确定哪个维度最重要，是应该首要表现的，这个维度往往决定最后采用的图形模式。当你在脑中对图形有个预期后，如果觉得从空白开始太难，可以上网看看，或回想自己使用过的软件有无类似这种概念的表达。

在时间、类别、所在部门、前后案件4个维度中，根据业务分析得，前后案件是最重要的，但在这个业务中凑巧的是，时间与前后案件有很大关联——前后案件是无缝相接的，前一案件的结束时间是后一案件的开始时间。最后决定将时间与前后案件联合作为第一维度考虑。确定这个基调后，我参考了一些图形，如下图。

Chrome Developer Tools Resources

After Effect Render

最终我做了个艰难的决定，选用timelines图形，同时兼容了flowing图形！细心点还会发现，我山寨了chrome的样式。

3.优化图形

有了图形后，尝试把数据按属性，绘制到各维度上，不断调整直到合理。虽然这里说的很简单，但这是最耗时耗力的阶段。维度过多时，在信息架构上广而浅或窄而深都是需要琢磨的，而后再加上交互导航，使图形更“可视”。

在这个任务中，图形经过我的很多次修改。下图是一次修改前后的对比。

所做的修改主要有：

• 纵轴去掉一行一个部门（公诉、侦监、反贪等称为部门）的标识，改用同一颜色隐式表达。如此的考虑是，了解检察院业务的用户看到案件类别就能知道它属于哪个部门，而且少了部门后，单位区域更清楚——上下级单位的案件流转是很受关注的。
• 之前的时间轴是非等比显示的，它的标识由下方的图形决定，始终觉得这样不够严谨，后来看到一个开源组件：Simile Timeline。它对一个时间轴上不同时间段上信息量相差悬殊的情况，定义了一个Hotzone的概念，觉得与我的图形很契合，于是采用了。这个Hotzone概念，简单说就是放大一个指定的时间段，这个时间段里的刻度可以更细，表现更多信息。

对数据可视化，只能说接触了点皮毛，希望以此抛砖引玉。

打印  |  类别：设计思想  |  源地址