数据可视化概述

2017

数据可视化概览及其应

用计算机1406班宋世波20143753

数据可视化概述•Data visualization overview

可视化（Visualization ）是利

用计算机图形学和图像处理技

术，将数据转换成图形或图像

在屏幕上显示出来，并进行交

互处理的理论、方法和技术。

它涉及到计算机图形学、图像

处理、计算机视觉、计算机辅

助设计等多个领域，成为研究

数据表示、数据处理、决策分

析等一系列问题的综合技术。将海量数据进行抽取、度量、分析进行高效展现，为及时掌握全局动向和应对突发事件提供有效保障。利用多维交互式报表、三维图形、大屏投影等高新技术，通过多维视角观察数据形态，显著提升对信息的认

知。通过制定可视化标准体系，实现可视化展现规范统一从大屏投影到普

通PC 桌面、Web

网再到移动终

端，接收信息不

受时间、空间限

制。

明确问题

清晰的问题可以有助于避免数据可视化的一个常见毛病：把不相干的事物放在一起比较。假设我们有这样一个数据集(见表1)，其中包含一个机构的作者总数、出版物总数、引用总数和它们特定一年的增长率。图1是一个糟糕的可视化案例，所有的变量都被包含在一张表格中。在同一张图中绘制出不同类型的多个变量，通常不是个好主意。注意力分散的读者会被诱导着去比较不相干的变量。比如，观察出所有机构的作者总数都少于出版物总数，这没有任何意义，又或者发现Athena University、Bravo University、Delta Institution三个研究机构的出版物总数依次增长，也没有意义。拥挤的图表难以阅读、难以处理。在有多个Y轴时就是如此，哪个变量对应哪个轴通常不清晰。简而言之，槽糕的可视化项目并不澄清事实而是引人困惑。

从基本的可视化着手

确定可视化项目的目标后，下一步是建

立一个基本的图形。它可能是饼图、线

图、流程图、散点图、表面图、地图、

网络图等等，取决于手头的数据是什么

样子。在明确图表该传达的核心信息时，

需要明确以下几件事：

我们试图绘制什么变量?

X轴和轴代表什么?

数据点的大小有什么含义吗?

颜色有什么含义吗?

我们试图确定与时间有关趋势，还

是变量之间的关系?

选择正确的图表类型

数据的规范化(如本例中的相对活跃

指数)是一个很常见也很有效的数据

转换方法，但需要基于帮助读者得

出正确结论的目的使用。如在此例

中，仅仅发现目标机构对某个小领

域非常重视没太大意义。

我们可以把出版量和活跃程度

在同一个图表中展示，以理解各领

域的活跃程度。使用图4的玫瑰图，

各块的面积表示文章数量，半径长

短表示相对活跃指数。注意在此例

中，半径轴是二次的(而图3中是典

型线性的)。图中可以看出，B领域

十分突出，拥有最大的数量(由面积

表示)和最高的相对活跃程度(由半

径长度表示)。

将注意力引向关键信息

用肉眼衡量半径长度可能并不容

易。由于在本例中，相对活跃指

数的1.0代表此领域的全球活跃

程度，我们可以通过给出1.0的

参照值来引导读者，见图5。这

样很容易看出哪些领域的半径超

出参考线。

我们还可以使用颜色帮助读者识

别出版物最多的领域。如图例所

示，一块的颜色深浅由出版物数

量决定。为了便于识别，我们还

可以把各领域名称作为标签(见图

6)。

02数据可视化开发工具介绍•Introduction to data visualization development tools

主要介绍：

1.Raphael raphael.js 是一小巧的javascript 库，它可以

在web 上画矢量图简化你的工作，如果你想创建你指定的图

表，图形区域或者可移动的组件，那么就使用raphael 吧。

2.Anychart 灵活的高度可定制的跨浏览器、跨平台

JavaScript (HTML5) 图表控件。

3.d3D3 的全称是（Data-Driven Documents ），

顾名思义可以知道是一个被数据驱动的文档。听名字有点抽

象，说简单一点，其实就是一个JavaScript 的函数库，使用

它主要是用来做数据可视化的。

4.离线百度地图很多项目中的应用都需要离线使用，

百度地图在地理信息展示上具有良好的表现，所以考虑使用离线百度地图。数据可视化开发工具介绍

计算机1406班宋世波

•Introduction to data visualization development tools

报表类如JReport ，Excel ，水晶报表

等。

BI 分析工具如BO ，BIEE, Yonghong Z-

Suite 等。

03数据可视化技术应用•Data visualization technology application

1.通过地图下载器下载离线百度地图

2.下载百度离线API等开发所需的js，修改其中的图片和标记的读取路径，使其从本地读取。

离线百度地图原理

百度地图由多张瓦片组成的，每次新图片请求都是往后台传递当前的放大等级和图片xy编码/tile/?qt=tile&x=16 48&y=547&z=13

通过修改离线API中图片请求的路径，将其指向本机的servlet，通过servlet将图片传输到前台，进行地图的展示

/gdcs/Getpng?qt=tile&x=767&y=160&z=12

注：瓦片就是图片，后台将图片传输到前台，这是一个在线的图片请求，它请求的路径是百度的服务器，下面是修改后的本机的图片的请求路径，这样就实现了百度地图的离线开发，百度API中的方法在离线的情况下也都可以使用