9.4.2 互动图形界面
如果数据可视化的互动性强大到可以作为互动图形界面(GUI)会怎么样?随着在线数据可视化的发展,按钮、下拉列表和滑块都在进化为更加复杂的界面元素,加入能够调整数据范围的互动图形元素,推拉这些图形元素时输入参数和输出结果都会同步改变,在这种情况下,图形控制和内容已经合为一体。以下这些工具能够实现这些功能。
1.Crossfilter
当为了方便客户浏览数据开发出更加复杂的工具时,我们已经能够创建出既是图表又是互动图形用户界面的小程序,Javascript库的Crossfilter就是这样的工具。
Crossfilter是一个Javascript类库,能够在浏览器端对大量数据进行多维分析。它的特点是可以在不同的Group By查询之间实现“交叉过滤”,自动连接和更新查询结果。结合dc.js图表类库,我们就可以构建出高性能、交互式的分析报表了。
Crossfilter中有维度、度量等概念。如果用户对数据仓库或统计分析有所了解,这些术语和OLAP立方体中的定义是相似的。
数据集:即一张二维表,包含行和列,在Javascript中通常是由对象组成的数组。
维度:用于进行Group By操作的字段,它通常是可枚举的值,如日期、性别,也可以是数值范围,如年龄范围等。
度量:可以进行合计、计算标准差等操作,通常是数值型的,如收入、子女人数;记录数也是一种度量。(https://www.daowen.com)
Crossfilter官方网站提供的示例,基于ASA Data Expo数据集的航班延误统计。下面我们将介绍如何用dc.js来实现这份交互式报表。项目源码可以在JSFiddle中浏览,演示的数据量减少到1 000条,如图9.25所示。
图9.25 Crossfilter生成的航空延误统计图
2.Tangle
Tangle是一个用于创建交互式被动文档的js库。用户可以交互式地探索可能性,使用参数进行自定义的定制。
Tangle进一步模糊了内容与控制之间的界限。在图9.26这个应用实例中,Tangle生成了一个负载的互动方程,用户可以调整输入值获得相应数据。
图9.26 Tangle公式可视化展示效果
