9.4.1 入门工具和网络数据可视化
对于可视化工具而言,最基本的工具包括常用的数据分析工具Excel和对于一些网络数据可视化的类库等。
1.Excel
Excel的图形化功能并不强大,但是Excel是分析数据的理想工具,也能创建供内部使用的数据图,但是Excel在颜色/线条和样式上可选择的范围有限,这也意味着用Excel很难制作出能够符合专业出版和网站需要的数据图,但是作为一个高效的内部沟通工具,Excel应当是百宝箱中的必备工具。
(1)函数公式——直观星级评价
在人力资源管理或供应商管理的绩效评价中,常常用到星级评价。直观显示星级效果,推荐使用REPT函数,能够按照给定的次数重复显示文本,如图9.11所示。
REPT函数的语法结构如下:
=REPT(重复文本,重复次数)
图9.11 函数显示星级评价
单元格C2用实心五角星“★”显示等级,在C2中输入公式:
=REPT(“★”,B2)
单元格D2用实心五角星“★”和空心五角星“☆”显示等级,在D2中输入公式:
=REPT(“★”,B2)&REPT(“☆”,5-B2)
(2)条件格式——目标达成可视化
Excel有个能根据数据大小而变化单元格颜色的工具,叫条件格式,可以称它为Excel数据的“火眼金睛”。因为工作中常用这个工具对数据做格式提醒功能,用公式和条件格式结合可以实现预警功能。
年底常要体现年初制定目标或预算的完成情况,可以用数据条来实现,销售金额目标达成可视化如图9.12所示。
图9.12 销售金额目标达成可视化
(3)迷你图——趋势变化更清晰
Excel迷你图功能已推出多年了,但了解这项功能的人还是很少。Excel迷你图可快速解决多项任务,例如通过对上半年业务数据分析来了解业务趋势。
迷你图可以在单元格中用图表的方式来呈现数据的变化情况,共有三种类型,分别是折线图、柱形图和盈亏图。如图9.13所示,其中折线图和柱形图可以显示数据的高低变化,盈亏图只显示正负关系,不显示数据的高低变化。
图9.13 盈亏曲线迷你图
(4)动态透视图——多维度汇总
我们在创建数据透视表时,总是根据现有数据表(称为数据源)而设置,当数据源表发生改变时,一般希望数据透视表随之发生改变,这种数据透视表我们就称之为动态的数据透视表,如图9.14所示。
图9.14 入库数量动态透视图
数据透视表从Excel 2010开始增加了切片器功能,从Excel 2013开始增加了日程表功能。切片器和日程表都可以更快速直观地实现对数据的筛选操作。
(5)三维地图——分区域动态呈现
Microsoft 3D Maps for Excel是一款三维(3D)数据可视化工具。它是一种查看信息的新方式。使用3D地图可让你发现一些无法通过传统的二维(2D)表格和图表得出的见解。
通过3D地图可以将地理时空数据绘制成三维地球或自定义地图,显示数据随着时间推移而发生的变化,并创建可视化演示与他人共享。使用3D地图可以:
①映射数据。根据Excel表格或Excel中的“数据模型”,将数万行数据以可视化方式以三维格式绘制在必应地图上。
②激发灵感。以地理空间角度查看数据,并了解带有时间戳的数据随着时间推移而发生的变化,从而获得新的灵感。
③分享故事。捕获屏幕截图并生成影视化的指导式视频演示,可与他人广泛分享,以前所未有的方式吸引观众;或者可以将演示导出为视频,并以同样方式进行共享。
可以在Excel功能区的“插入”选项卡上的“演示”组中找到“三维地图”按钮,如图9.15所示。
图9.15 3D地图演示按钮
2.Google Chart API
如图9.16所示的Google Chart API为每个请求返回一个PNG格式图片。目前提供如下类型图表:折线图、柱状图、饼图、维恩图、散点图。用户可以设定图表尺寸、颜色和图例。
用户可以在网页中使用＜img＞元素插入图表,当浏览器打开该网页时,Chart API提供即时图表。
Google Chart API工具取消了静态图片的功能,目前只提供动态图表工具。能够在所有支持SVG\Canvas和VML的浏览器中使用,但是图表在客户端生成,那些不支持Javascript的设备将无法使用,此外也无法离线使用或者将结果另存为其他格式。尽管存在上述问题,不可否认的是Google Chart API的功能异常丰富。Google目前在map方面开放的API有好几个,可以根据不同的需求进行使用,如Directions API、Distance Matrix API、Elevation API、Geocoding API、Geolocation API、Time Zone API、Roads API、Places API。
图9.16 Google Chart API生成图像示例
一个使用Directions API来根据经纬度从API获取地图上两个节点开车所需的时间和距离,并且做出图表,查看开车时间以及距离各自所占比重的生成可视化图表如图9.17所示。
图9.17 按时间和距离分布比重示意图
3.Flot
Flot是一个jQuery绘图库,主要用于简单的绘制图表功能,具有吸引人的渲染外观和互操作的特性。其在Internet Explorer 6+、Chrome、Firefox 2+、Safari 3+和Opera 9.5+浏览器下工作正常。目前的版本是Version 0.8.3。
使用Flot的步骤包括添加所需要的脚本,加入placeholder,设置数据,设定实时更新等步骤。一个使用Flot生成的正弦曲线和余弦曲线的可视化图表如图9.18所示。
(https://www.daowen.com)
图9.18 Flot正弦余弦曲线
4.Raphael
Raphael Javascript是一个Javascript的矢量库。
2010年6月15日,著名的Javascript库ExtJS与触摸屏代码库项目jQTouch,以及SVG、VML处理库Raphael合并,形成新的库Sencha,主要应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。
Raphael Javascript的创始人Dmitry Baranovskiy也加入ExtJS。ExtJS是一个强大的Javascript框架,它重组件化,很容易做出强大的、可媲美客户端的界面(这个框架是收费的,所以国内用的人比jQuery少多了)。
jQTouch是jQuery的一个插件,主要用于在手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的Javascript库。
Raphael Javascript可以处理SVG、VML格式的矢量图。它使用SVG W3C推荐标准和VML作为创建图形的基础,可以用Javascript操作Dom,从而很容易地创建出复杂的柱状图、走势图、曲线图等各种图表,可以画图,可以画出任意复杂度的图像,以及图表或图像裁剪和旋转等复杂操作。
同时它是跨浏览器的,完全支持Internet Explorer 6.0+。Raphael Javascript目前支持的浏览器有:Firefox 3.0+、Chrome 3.0+、Safari 3.0+、Opera 9.5+、Internet Explorer 6.0+。
Raphael提供了图形绘制的基本元素:形状、图片和文本。图形有预定义的矩形、圆形、椭圆以及组合图形等。图形和文本是可以填充的。边框的填充只能是单色但是可以修改。填充可以是线性的也可以是渐变的。
使用Raphael绘制一个基本图形的步骤包括创建绘制环境(画布)、创建画布坐标系(用于使用坐标系定位绘制元素)、绘制基本图形等,如图9.19所示。
图9.19 Raphael图像示例
5.D3
如图9.20所示的D3(data driven documents)是支持SVG渲染的另一种Javascript库。但是D3能够提供大量线性图和条形图之外的复杂图表样式,如Voronoi图、树形图、圆形集群和单词云等。
图9.20 D3图像示例
D3由斯坦福可视化小组提出,论文发表在2011的IEEE info Vis上,项目主页:http://d3js.org/。D3工作是基于该小组另一个工作Proto Vis的改进,D3更改了对DOM操作的方式,提高了渲染效率,更重要的是D3融入到了整个Web开发体系中,使得学习调试变得容易。
现在已经有非常多的基于Web的可视化工具,其中有非常著名的Raphaël、processing等。但是随着需求的提高,这些工具还是存在一些问题。在这些工具中,有些进行了高层次抽象,为了提高可视化效率,这些工具对DOM进行了封装,优化了工作流程,虽然提高了效率,但是增加了学习和调试的难度,更重要的是:一些封装降低了表达的多样性,一些本来可以通过底层展示的效果由于封装而变得难以实现;另一些工具是非常底层的工具,如Processing等,这些工具自身非常高效,但是这些工具使用直接渲染的方式,不能与其他工具(如CSS等)共同协作,同时由于抽象层次低,使用起来非常烦琐。
针对以往的可视化工具存在的问题,D3提出了三个设计目标:
·兼容性:工具不能是一个孤岛,而应该是存在于Web生态圈之中,可以使用其他的工具,不能由于封装而限制工具的表达多样性。
·可调试:新工具需要易于学习和开发,让开发者能对错误代码方便地调试。
·性能:新工具要在交互性和动画上有很好的性能。
所以,D3被设计成基于数据绑定的直接对DOM文档进行修改的可视化工具,D3本身关注转换(transformation),而不是表达(representation)。D3大致包含四个部分:选择器、数据捆绑、交互与动画和常用模块。
(1)选择器
D3采用了W3C标准选择器API,(“tag”)直接选择元素,(“.class”)通过类名选择元素等。D3将DOM操作封装成operator,施加到任意选择元素上,同时D3支持链式表达。
(2)数据绑定
D3的核心概念是数据驱动,通过将数据绑定到元素上(如图9.21所示),用户可以非常容易地进行添加、修改和删除的操作。数据绑定分为三部分:①没有与已有元素上数据相同的数据会进入enter()区;②与数据相同的元素进入update()区;③剩下没有数据的已有元素进入exit()区。
图9.21 D3数据绑定示意图
(3)交互与动画
D3通过支持事件来响应用户的操作,可以在D3的on()操作符中指定监听的事件类型和响应操作。同时D3包含transtion()操作符支持动画效果,用户可以指定特定的动画效果,也可以使用一些标准的动画效果。
(4)常用模块
D3的设计者们没有完全抛弃Proto Vis,而是进行了去粗取精,通过用户对Proto Vis的反馈,D3保留了Proto Vis一些实用的功能,通过添加Scale、Layout、Geo等模块让开发者开发起来更加容易。
6.Visual.ly
如果需要制作信息图而不仅仅是数据可视化,Visual.ly是最流行的一个选择。虽然Visual.ly的主要定位是“信息图设计师的在线集市”,但是也提供了大量的信息模板。
Visual.ly这家网站以丰富的信息图资源而著称,很多用户乐意把自己制作的信息图上传到网站中与他人分享。最近网站不再局限于一个信息图分享平台的角色,它还将帮助人们制作信息图,在美国SXSW音乐节上Visual.ly公布了这则消息。
用Visual.ly制作信息图并不复杂,它是一个自动化工具。网站的联合创始人兼CEO Stew Langille称,他们打造了一个平台,让人快速而简易地插入不同种类的数据,并通过图形把数据表达出来。
用户只要注册了Visual.ly,并登录http://create.visual.ly/便可以尝试制作自己的信息图。
Visual.ly把其中一个利用Twitter数据,制作信息图的功能称为Twitter Showdown。它能够对比不同Twitter账号的情况,包括Follower人数多寡、被@的次数、发推的习惯时间、Follower的地域分布情况,如图9.22所示。
图9.22 Visual.ly选择生成Twitter数据
Facebook Insider是Visual.ly利用Facebook制作信息图的功能。它能够以图形化的方式展现Facebook专页的数据,比如粉丝数量、粉丝性别比例、年龄比例、来自何方、有多少人看过专页并转发过里面的故事等,如图9.23所示。
图9.23 Visual.ly选择生成信息图
由于Hashtag已经成为社交网络中常见的一种聚合话题的形式,因此Visual.ly也提供了利用Hashtag进行数据挖掘的功能:Life of a Hashtag。只要再输入一个特定的Hashtag,Visual.ly就会把和这个标签有关的情况制作成信息图展现出来,如图9.24所示。
图9.24 Visual.ly选择生成Hashtag
Visual.ly的思路是抓住每个数据来源的特性,从而制作相对应的信息图模板,最终实现自动化制图这个功能。因此目前这种限定数据来源的做法具有一定的合理性。例如,Twitter和Facebook,两个服务的数据侧重点并不相同,如果采用一个通用的模板去生成信息图,那么数据一定会有偏颇。
信息图以直观明了的方式,让人能够感受到数据背后的含义,然而制作信息图在目前来说并不容易,Visual.ly发布的自动化制图工具正好对应了这种需求。
