数据可视化基础实验

实验一：Tableau数据可视化入门

实验目的

1.熟悉TableauDesktop使用方法。
2.通过Tableau软件来实现Excel中数据的基本可视化。

实验原理

Tableau是新一代商业智能工具软件，它将数据连接、运算、分析与图表结合在 一起，通过拖放方式创建各种图表。 Tableau产品包括TableauDesktop、Tableauserver、TableauPublic、Tableau Online和Tableaureader等多种。其中，TableauDesktop、TableauServer、Tableau Reader使用最多。 本次基础实验使用TableauDesktop。TableauDesktop是一款基于斯坦福大学突 破性技术的桌面软件应用程序，分为个人版和专业版。TableauDesktop能连接到许 多数据源，如Access、Excel、文本文件、DB2、MSSQLServer、Sybase等。在获 取数据源中的各类结构化数据后，TableauDesktop可以通过拖放式界面快速地生成 各种美观的图表、坐标图、仪表盘与报告，并允许用户以自定义的方式设置视图、 布局、形状、颜色等，从而通过各种视角来展现业务领域数据及其内在关系。

实验环境

TableauDesktop10.5

实验步骤

1、双击桌面图标打开Tableau软件。出现TableauDesktop引导界面。

界面的左边指示数据的来源，Tableau可以连接到本地的Excel表格，文本， Access数据库，统计文件等，也可以连接数据库服务器，例如MicrosoftSQLServer 数据库，MySQL数据库，Oracle数据库等。左边最下面显示了已保存的数据源。 中间上部分显示最近打开过的工作薄，下部分显示示例工作薄，即Tableau自带 的一些工作薄，可以点击更多样本查看更多的数据图。 右边显示了探索，每周精选以及Tableau一些社区，博客，新闻等等。第一次运 行该软件，可以点击某一个示例工作薄，查看该软件数据展示的图示，以及如何简 单操作。 本次入门实践使用自带的超市工作簿。
2、点击上图示左侧“已保存数据源”下的“示例-超市”。打开界面后，点击左下角的 “数据源”，结果如下。

上图中按“地区经理”进行数据筛选。 在“筛选器”中选中范彩和洪光两位地区经理的名字，确定后，筛选结果如下。

在界面的右下角可以新建一个工作表或者直接用软件默认打开的工作表1。这里 打开默认工作表1，是超市订单中的数据。左侧就是订单这个表格的维度和度量。 维度通常是类别字段，例如“产品”和“地区”。具体来说，Tableau中的维度用于 设置粒度，即视图中的详细级别。 度量通常是指标，即数字数据，例如“销售额”。 大多数情况下，维度是离散的，而度量是连续的。

点击右上角的“智能显示”，还可以把同样的数据显示成不同形式的图表。例如， 点击填充气泡图，即可制作出漂亮的类别和地区的气泡图。点击单个气泡会显示出具体的销售额。

4、制作填充地球图。
用Excel制作填充地球图十分复杂，但是Tableau制作填充地球图却十分方便， 一键生成。 Tableau将数据分为：数字（十进制），数字（整数），字符串，布尔，日期， 日期和时间，还有地理类型（如果数据源中有城市，省份的数据可以分配为地理类 型）。 选择任意一个字段，单击鼠标右键，在菜单中指向“更改数据类型”即可查看该字 段的默认类型，也可更改其数据类型。

制作填充地球图首先必须先将国家、城市、地区和省/自治区字段的属性改成地 理维度。然后，制作中国各个省份利润填充地球图，这里需要将国家和省/自治区维度拖 到列，把利润拖到行，再点击“智能显示”里的填充气球图。

5、制作中国各个省份地区的利润仪表板。 仪表板中想同时显示出“产品子类别利润条形图”、“产品销售数量气泡图”、“省 份利润地图”三种图表。首先在Tableau中分别建立“产品子类别利润条形图”、“产品 销售数量气泡图”、“省份利润地图”三个工作图表。如下图：



下面开始建立仪表板。在Tableau的菜单中选择“仪表板”，选择“新建仪表板”。 在左下角选中“显示仪表板标题”，然后双击顶端的“仪表板1”，修改标题内容为 “相关信息比较图”，可对标题做格式化操作，改变其大小、显示位置和颜色等属性。 这是新建仪表板的标题，放在最顶部。

然后，在左侧的对象中双击“水平”对象，则在中间空白处添加了一个水平对象。对水平对象的高度进行调整，大小设为300。

然后，将“产品子类别利润条形图”、“产品销售数量气泡图”工作表拖进这个水平 对象里，并排放置。最后再将省份利润工作表拖进水平对象的下部，仪表板制作完成。

实验二：D3数据可视化基础

实验目的

熟悉D3数据可视化的使用方法。

实验原理

D3的全称是（Data-DrivenDocuments），是一个被数据驱动的文档，其实就是 一个JavaScript的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍 D3一些最基本的使用方法，以及生成一些比较简单的图表。 D3是一个JavaScript函数库。它只有一个文件，在HTML中引用即可。有两种 方法： （1）下载D3.js的文件，解压后，在HTML文件中包含相关的js文件即可。 （2）还可以直接包含网络的链接，这种方法较简单： 但使用的时候要保持网络连接有效，不能再断网的情况下使用。 D3可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值 对），可以处理JSON和GeoJSON。

实验环境

IE9以上或Firefox或Chrome（推荐）等浏览器、Notepad++等编辑工具。D3.js 库。

实验步骤

题目一：制作一个简单的柱形图

1、打开Notepad++，新建文件，并编辑好html框架
2、添加SVG画布。
3、定义数据和比例尺。
4、定义坐标轴。
5、添加矩形和文字元素。
6、添加坐标轴的元素


最后运行结果如下图所示：

题目二：制作动态的柱形图

D3 提供了4个方法用于实现图形的过渡：

1. transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜 色等等）。D3会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB 值）进行插值计算，得到过渡用的颜色值。
2. duration()指定过渡的持续时间，单位为毫秒。如duration(3000)，指持续 3 秒。
3. ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地 到达变换的最终状态；elastic：带有弹跳的到达最终状态；bounce：在最终 状态处弹跳几次。
4. delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此 函数可以对整体指定延迟，也可以对个别指定延迟。
   下面我们将在题目一完成的柱形图的基础上稍作修改，做成一个带动态效果的 柱形图。把题目一中添加矩形元素和添加文字元素的代码换成如下代码，就可以启 动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。
   
   
   
   运行结果如下：
   

题目三：制作饼形图

1、定义一个饼状图布局
2、绘制图形 。这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一段弧。定义颜色比例尺。color是一个颜色比例尺，它能根据传入的索引号获取相应的 20 颜色值。然后在每一个弧线中心添加文本。

运行结果如下：

题目四：制作交互式的饼形图

交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说， 交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到 图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三 种：鼠标、键盘、触屏。
在D3中，每一个选择集都有on()函数，用于添加事件监听器。on()的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。
鼠标常用的事件有：
click- 鼠标单击某元素时，相当于mousedown和mouseup组合在一起。
mouseover- 光标放在某元素上。
mouseout- 光标从某元素上移出来时。
mousemove- 鼠标被移动的时候。
mousedown- 鼠标按钮被按下。
mouseup- 鼠标按钮被松开。
下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入 mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout时恢复原色。

运行结果为：