数据可视化工具介绍与演示

VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室各种数据可视化工具介绍与演示孟庆香2014-10-07VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室写在前面“当你有一把榔头，所有的东西看上去都像是钉子”。VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室目录(一)在线数据可视化工具(二)互动图形用户界面（GUI）控制(三)地图工具(四)专家级工具(五)其它VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具1、D32、Visualy.ly3、SmoothieCharts4、FusionCharts5、ProtovisVisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----D31D3这个例子（）显示了使用D3来描述一个事件的所有可能发生的情况，即一个事件时间序列。右图事件太阳序列图这个用例是通过网站导航这一事件的序列。我们通过这幅事件旭日序列图看到了网站网页浏览导航的所有可能的发生情景和每一情景的概率。1.1D3简介D3（DataDrivenDocuments，数据驱动文件）是一种支持SVG渲染的可跨平台运行的开源的JavaScript库。不仅可以做简单的条形图和折线图，还可以完成更复杂的Voronoi图、树形图、圆形集群、日历图和字符云等。D3运行过程：把数据加载到浏览器内存空间绑定数据到文档中的元素解析元素并为其设置相应的可视化属性，实现元素的变换响应用户输入实现元素状态的过渡。1.2D3数据可视化实例1.2.1太阳序列图图1.2.1太阳序列图VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室1.2.2多维数据集可视化图1）实例一纵轴平行坐标()图1.2.2-1泰坦尼克号幸存者图1.2.2-1利用D3可以进行多个维度的多个粒度的分类数据可视化。图中，在水平方向上：水平条表示它的每个属性的可能的取值，条的宽度是指该属性的取值及所占比重。在垂直方向上：是维度。2）实例二横轴平行坐标()图1.2.2-2美国农业部营养数据库的交互式可视化图图1.2.2-2，在水平方向上：水平条表示它的每个属性的可能的取值，条的宽度是指该属性的取值及所占比重。在垂直方向上：是维度。（一）在线数据可视化工具----D3综上，平行坐标可以快速查询一个单元的多个属性，并与其它单元进行对比。VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----D31.2.3树形图使用D3的树来实现。从数据结构上来看，这是一个二叉树，每个分支是通过一定的算法生成的。一些随机性结合使它看起来更像一个真正的树。图1.2.3树形图1.2.4排名预测信息图图1.2.4世界杯排名预测信息图图1.2.4世界杯排名预测信息（）鼠标放在图中某个节点、国家名称、地图区域上，左图中即会显示该国家队在世界杯各轮比赛中获胜的几率。VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室1.2.5日历图本实例()通过加载CSV数据，将其量化为发散的色阶。每天的值利用不同的着色细胞来显示。天按周排列成列，然后按月份和年份进行分组。图1.2.5日历图（一）在线数据可视化工具----D3VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室1.2.6气泡趋势图图1.2.6WhereAreHouseHuntersSearching?（一）在线数据可视化工具----D3VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具1、D32、Visualy.ly3、SmoothieCharts4、FusionCharts5、ProtovisVisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室2Visual.ly2.1Visual.ly简介数据可视化平台Visual.ly是一个结合图库和信息的生成器。利用Visual.ly不仅仅可以进行数据可视化，而且可以制作信息化图表。尽管Visual.ly的主要定位是：“信息图设计师的在线集市”，但是也提供了大量信息图模板。Visual.ly发布了制作信息化图表的网络工具Visual.lyCreate，Visual.lyCreate可以允许你从Twitter、Facebook以及GooglePlus等社交网站采集数据，目前支持提供5种可视化模版。（一）在线数据可视化工具----Visual.ly2.2Visual.ly应用实例图2.2信息图简历VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具1、D32、Visualy.ly3、SmoothieCharts4、FusionCharts5、ProtovisVisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----SmoothieChartsSmoothieCharts（）是一个小型的动态流数据图表库。通过推送一个WebSocket来显示实时数据流，比如可以用于生成CPU使用情况的图表（）。SmoothieCharts只支持Chrome和Safari浏览器，并且不支持刻印文字或饼图。它很擅长显示流媒体数据。是开源软件。3.2SmoothieCharts应用实例图3.2-1CPU负载实例3SmoothieCharts3.1SmoothieCharts简介VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具1、D32、Visualy.ly3、SmoothieCharts4、FusionCharts5、ProtovisVisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----FusionCharts4FusionCharts4.1FusionCharts简介FusionCharts是InfoSoftGlobal公司的一个产品，FusionChartsfree是一个跨平台，跨浏览器的flash图表组件解决方案，能够被ASP.NET,ASP,PHP,JSP,ColdFusion,RubyonRails,简单HTML页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。可进行动画和交互。4.2FusionCharts应用实例4.2.1GannttchartsGannttcharts用于表示安排项目计划与任务日程规划的图表。图4.2.1产品开发周期图VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----FusionCharts4.2.2仪表盘图图4.2.2-1评分表图中利用仪表盘指示图给出了总体评分情况。VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----FusionCharts4.2.3漏斗图和金字塔图漏斗图是用来更好地展示某物从一个阶段进入到另一个阶段的数量变化情况。在金字塔状结构的数据中构建金字塔图可以更好地展示数据的等级结构以及数量关系。图4.2.3-1漏斗图（）图4.2.3-2金字塔图（）VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----FusionCharts4.2.4面板数据可视化图图4.2.4会员保留情况分布图（）VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具1、D32、Visualy.ly3、SmoothieCharts4、FusionCharts5、ProtovisVisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----Protovis5.1Protovis简介图5.2.1Line&StepCharts5ProtovisProtovis（）是一款免费和开源的可视化的图表工具，由斯坦福大学可视化组开发，基于JavaScript和SVG（ScalableVectorGraphics，可伸缩向量图形）本地可视化技术，不需要插件。尤为值得一提的是，其“Examples”一栏为我们提供了超过60多个精彩的案例，即使我们不会使用此工具进行数据视觉化处理，这些案例本身的风格和思路也是值得学习的，它可以为我们使用其它工具绘制图表提供很好的借鉴。学习资料可参考（）。5.2Protovis应用实例5.2.1阶梯线图表（Line&StepCharts）Line&StepCharts通常用于展示时间序列数据。VisualAnalyticsGroup2013-浙江大学-数据可视化-暑期研讨会浙江大学CAD&CG国家重点实验室（一）在线数据可视化工具----Protovis5.2.2归并排序（MergeSort）归并排序（MergeSort），使用角度的变化来表达信息，还可以通过不同线条的颜色来表达更为丰富的信息。图5.2.2归并排序（MergeSort）5.2.3工作导航图（JobVoyager）图5.2.3-1工作导航图这是一个可以交互的图（）。一个信息单元包含某职业在某年份所占的比例，以及男女性别比例构成等信息，在一个平面图内即展示大量的交互