图表可视化工具Protovis介绍及经典案例

图表可视化工具"Protovis"介绍及经典案例

Protovis是一款免费和开源的可视化的图表工具，由斯坦福大学可视化组（Stanford University's Visualization Group）的Mike Bostock and Jeff Heer 开发，基于JavaScript 和SVG （Scalable Vector Graphics，可伸缩向量图形）技术。

尤为值得一提的是，其“Examples”一栏为我们提供了超过60多个精彩的案例，即使我们不会使用此工具进行数据视觉化处理，这些案例本身的风格和思路也是值得学习的，它可以为我们使用其它工具绘制图表提供很好的借鉴。小博“图表汇”特意将其整理出来，推荐给大家，一起学习！

1、常规图表（Conventional）

Protovis通过使用例如条形及点等简单标记将自定义数据视图组合起来，创建标准化的图表。与一般绘图库不同，Protovis不会显得太过单调，它可以通过动态属性定义标记。这些属性通过对数据编码，继承，形变及布局以简化结构。

包括：（1）面积图（Area Chart）；（2）条形图和柱形图（Bar & Column Charts）；（3）散点图（Scatterplots）；（4）饼图和圆环图（Pie & Donut Charts）；（5）阶梯线图表（Line & Step Charts）；（6）堆叠面积图（Stacked Charts）；（7）分组图表（Grouped Charts）。

2、自定义图表（Custom）

（1）安德森鸢尾花卉数据集散布图（Anderson's Iris data set），也称鸢尾花卉数据集（Iris flower data set）或费雪鸢尾花卉数据集（Fisher's Iris data set），是一类多重变量分析的数据集。它最初是埃德加·安德森（Edgar Anderson）从加拿大加斯帕半岛（Gaspé Peninsula）上的鸢尾属花朵中提取的地理变异数据，后由罗纳德·费雪（Sir Ronald Aylmer Fisher）作为判别分析的一个例子，运用到统计学中。

其数据集包含了50个样本，都属于鸢尾属下的三个亚属，分别是山鸢尾（Iris setosa）、变色鸢尾（Iris versicolor）和维吉尼亚鸢尾（Iris virginica）。四个

特征被用作样本的定量分析，它们分别是花萼和花瓣的长度和宽度。基于这四个特征的集合，费雪发展了一个线性判别分析以确定其属种。

（2）贝克尔格子图（Becker's Barley，Trellis display），这张图表应该算是“滑珠图”（Excelpro的图表博客）的原型图，比较有名的改进版为“Obama vs. McCain美国大选”的“滑珠图”。

3）（Bertin's Hotel），这张图的作者是图形学理论的创始人Jacques Bertin，用来描述旅店客流量的季节性变化。

（4）（Streamgraphs），由堆积面积图（Stacked Charts）演变而来，区别在于其基线不是固定的。

（5）波形图（Sparklines），是一种文字大小数据视觉化图形，如下图红框所示。

（6）子弹图（Bullet Charts），由Stephen Few设计，“在有限的空间内表达丰富的数据信息”（有点高密小型化的意思，呵呵），从条形图发展变化而来。一般由文字标签和主体条柱、刻度量表、主要标记标识、用于对比的标识（可选）、定性范围标识构成。

（7）气泡图（Bubble Charts），气泡图作为散点图的一种变体，虽然从视知觉的角度看没有条形图表达的精准，但是它可以在有限的空间内展示大量的信息，这种形式也常用在数据地图中。

（8）地平线图（Horizon Graphs），基于一种压缩空间展示数据信息的图表形式，具体绘制原理可参考下图。

（9）K线图（Candlestick Charts），起源于日本十八世纪德川幕府时代（1603～1867年）的米市交易，用来计算米价每天的涨跌。现已经广泛应用于股票、期货、外汇，期权等证券市场。

（10）Burtin抗生素图（Burtin’s Antibiotics），第二次世界大战之后，抗生素被冠以“特效药”的美名。在此基础上收集了几中抗生素治疗的效果，绘制了此图。

（11）南丁格尔玫瑰图（Nightingale's Rose），或称之为“不等径扇区图”。

（12）波雷费小麦图（Playfair's Wheat），这是1822年Playfair为国会制作的一幅精致图表，描绘了250年来的小麦价格走势图。

（13）汽油里程图（Gas & Driving），这张图表最早来源于2010年5月2日《New York Times》的一篇文章“Driving Shifts Into Reverse”，用来分析油价与年人均里程数的关系，使用方式路线图的方式表达，形象易懂。

（14）西雅图天气预报图（Seattle Weather），此图为西雅图一周的天气预报，包含了丰富的信息，包括以往的、正常的、真实的和气温预报的数据范围。

有点类似于K线图和了弹图。

（15）加州火车时刻表（Marey's Trains），这张图表是E. J. Marey重绘另一种风格的加州火车时刻表，站台按地理里程距离按垂直比例排列，斜线表示火车的速度，另外还将普快，快速，高速列车的信息用不同颜色区别开来，与原版时刻表对比一下，是不是很新颖易读呢。

（16）（Stemplots），接上图，另一种风格的加洲火车时刻表，你看懂了

吗？（17）归并排序（Merge Sort），使用角度的变化来表达信息，还可以通过不同线条的颜色来表达更为丰富的信息。见下图第二幅。

3、交互图表（Interaction）

可视化图表不仅仅是静态的，图表的交互性使其具有更强大的功能和视觉表现力。

（1）索引图表（Index Charts），某些情况下，数据源的真实值可能没有它的变化趋势那么重要。比如对于投资者来说，一支股票的价值变化趋势比它的价格要重要的多。所以下图所示的纵坐标由真值转为百分比，方便投资者对比多支股票的价格变化趋势。