图表可视化工具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〕，某些情况下，数据源的真实值可能没有它的变化趋势那么重要。比方对于投资者来说，一支股票的价值变化趋势比它的价格要重要的多。所以下列图所示的纵坐标由真值转为百分比，方便投资者比照多支股票的价格变化趋势。

学习文档 仅供参考

〔2〕平行坐标图〔Parallel Coordinates〕，可以快速查询一个单元的多个属性，并与其它单元进行比照。

学习文档 仅供参考

〔3〕工作导航图〔Job Voyager〕，一个信息单元包含某职业在某年份所占的比例，以及男女性别比例构成等信息，在一个平面图内即展示大量的交互信息。红色为女性，蓝色为男性。

学习文档 仅供参考

学习文档 仅供参考

〔4〕明尼苏达职业信息表〔Minnesota Employment〕，另一种平行坐标图，一个单元格内，即是一张某职业的数据量丰富的面积图；而整张图表又是将各种不同的职业图表组合在一起，形成一个动态数据库。

学习文档 仅供参考

〔5〕全局与局部图〔Focus + Context〕，包括一张总图和局部放大图，这种布局在很多行业分析软件都有成熟的应用。

学习文档 仅供参考

〔6〕〔Pan + Zoom〕，可以通过鼠标中轮对数据面板进行缩放处理，横-纵坐标的刻度也随之变化。

〔7〕〔Brush + Link〕，一个交互版的安德森鸢尾花卉数据集散布图。

学习文档 仅供参考

〔8〕工具提示〔Tooltips〕，

学习文档 仅供参考

〔9〕〔Pointing〕，与之前的散点图相似。

〔10〕曲线编辑器〔Spline Editor〕，可单击空白区域添加节点，Delete键则删除节

学习文档 仅供参考

点。节点的控制点有多种形式可以选择。

〔11〕气泡图〔Bubbles〕，很有动感的韵律。

〔12〕眼图〔Eyes〕，使用与上图相似的技术。

学习文档 仅供参考

4、层级关系图表〔Hierarchies〕

〔1〕系统树图〔Dendrograms〕。

学习文档 仅供参考

〔2〕太阳辐射图〔Sunbursts〕，一种圆环镶接图，可以表达清晰的层级和归属关系。

〔3〕 冰柱图〔Icicles〕。

学习文档 仅供参考

〔4〕缩进树〔Indented Trees〕。

〔5〕圆形装填〔Circle Packing〕， 通过圆圈的大小和归属表达明确的层级关系。

学习文档 仅供参考

〔6〕节点树〔Node-Link Trees〕。

学习文档 仅供参考

〔7〕树状图〔Treemaps〕。

学习文档 仅供参考

5、网络关系图〔Networks〕

〔1〕弧状图〔Arc Diagrams〕，是一种一维布局图，通过圆弧的两端表达连接关系。

学习文档 仅供参考

〔2〕力导向布局图〔Force-Directed Layouts〕，当拉动一个节点时，其它节点也随之被吸引到相同的方向。

〔3〕矩阵图 〔Matrix Diagrams〕，

学习文档 仅供参考

6、数据地图〔Maps〕

〔1〕〔Minard's Napoleon〕，Charles Minard绘制的拿破仑进军俄国的人员损失图。

学习文档 仅供参考

〔2〕奥克兰犯罪地图〔Oakland Crimespotting〕，使用“Google Maps API”绘制。

学习文档 仅供参考

〔3〕地区分布图〔Choropleth Maps〕，使用不同的颜色表示不同的数据范围。

〔4〕符号图〔Symbol Maps〕，

学习文档 仅供参考

〔5〕〔Dorling Cartograms〕，将传统的数据地图背底隐去，只保留关键数据。

学习文档 仅供参考

〔6〕地图投影〔Map Projections〕，

学习文档 仅供参考

〔7〕热图〔Heatmaps〕，

学习文档 仅供参考

〔8〕〔Dymaxion Map〕，

学习文档 仅供参考

8、统计图〔Statistics〕

〔1〕P-P图〔Q-Q Plots〕

〔2〕箱线图〔Box-and-Whisker Plots〕

〔3〕柱状图〔Histograms〕

学习文档 仅供参考

〔4〕误差线图〔Error Bars〕

〔5〕〔Mean & Deviation〕，08/09赛季，NBA场均比赛的50强得分手。

学习文档 仅供参考

9、艺术图表〔Art〕

并非所有的信息图表都需要以数据来支撑，有时候以图表呈现出来的艺术美感和娱乐氛围也会给我们带来深刻的视觉享受。

〔1〕康威生命游戏〔Conway's Game of Life〕

学习文档 仅供参考

〔2〕〔Automaton Explorer〕

〔3〕〔Belousov–Zhabotinsky〕

学习文档 仅供参考

〔4〕〔N-Body Problem〕

学习文档 仅供参考

〔5〕〔PolarClock〕

〔6〕彩虹蠕虫〔Rainbow Worm〕

学习文档 仅供参考