数据可视化基础实验（实验一：Tableau数据可视化入门 实验二：D3数据可视化基础）

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

【实验名称】实验一：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中的维度用于 设置粒度，即视图中的详细级别。

       度量通常是指标，即数字数据，例如“销售额”。

       大多数情况下，维度是离散的，而度量是连续的。

3、制作中国各个地区的利润图表。

       将国家和地区维度拖到列，把利润度量拖到行，即可制作出一个简单的条形 图。Tableau最具有特色的功能就是拖放式的操作，只需要把维度以及度量拖到适当 的位置，即可制作数据图表

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

点击单个气泡会显示出具体的销售额。

4、制作填充地球图。

       用Excel制作填充地球图十分复杂，但是Tableau制作填充地球图却十分方便， 一键生成。

       Tableau将数据分为：数字（十进制），数字（整数），字符串，布尔，日期， 日期和时间，还有地理类型（如果数据源中有城市，省份的数据可以分配为地理类 型）。

       选择任意一个字段，单击鼠标右键，在菜单中指向“更改数据类型”即可查看该字 段的默认类型，也可更改其数据类型。

制作填充地球图首先必须先将国家、城市、地区和省/自治区字段的属性改成地理维度。

       然后，制作中国各个省份利润填充地球图，这里需要将国家和省/自治区维度拖 到列，把利润拖到行，再点击“智能显示”里的填充气球图。

5、制作中国各个省份地区的利润仪表板。

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

      下面开始建立仪表板。在Tableau的菜单中选择“仪表板”，选择“新建仪表板”。

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

      然后，在左侧的对象中双击“水平”对象，则在中间空白处添加了一个水平对象。

      对水平对象的高度进行调整，大小设为300。

       然后，将“产品子类别利润条形图”、“产品销售数量气泡图”工作表拖进这个水平 对象里，并排放置。

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

【实验名称】实验二：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画布。

     要绘图，首要需要的是一块绘图的“画布”。HTML5提供两种强有力的“画布”： SVG和Canvas。

     SVG，指可缩放矢量图形（ScalableVector Graphics），是用于描述二维矢量图 形的一种图形格式，是由万维网联盟制定的开放标准。SVG使用XML格式来定义 图形，除了IE8之前的版本外，绝大部分浏览器都支持SVG，可将SVG文本直接嵌 入HTML中显示。

     Canvas 是通过JavaScript 来绘制2D图形，是HTML5中新增的元素。

     D3 虽然没有明文规定一定要在SVG中绘图，但是D3提供了众多的SVG图形 的生成器，它们都是只支持SVG的。因此，建议使用SVG画布。在body标签中加 入代码。

3、定义数据和比例尺。 在添加画布的代码后面加入如下代码。

4、定义坐标轴。

5、添加矩形和文字元素。

6、添加坐标轴的元素。

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

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

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

1) transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜 色等等）。D3会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB 值）进行插值计算，得到过渡用的颜色值。

2) duration()指定过渡的持续时间，单位为毫秒。如duration(3000)，指持续 3 秒。

3) ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地 到达变换的最终状态；elastic：带有弹跳的到达最终状态；bounce：在最终 状态处弹跳几次。

4) delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此 函数可以对整体指定延迟，也可以对个别指定延迟。 下面我们将在题目一完成的柱形图的基础上稍作修改，做成一个带动态效果的 柱形图。把题目一中添加矩形元素和添加文字元素的代码换成如下代码，就可以启 动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。

题目三：制作饼形图。

布局是D3中一个十分重要的概念。布局的作用是：将不适合用于绘图的数据转 换成了适合用于绘图的数据。

D3 总共提供了12个布局：饼状图（Pie）、力导向图（Force）、弦图 （Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图 （Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图 （Treemap）、层级图（Hierarchy）。 12个布局中，层级图（Hierarchy）不能直接 使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。这些布 局的作用都是将某种数据转换成有利于可视化的另一种数据。 在布局的应用中，最简单的就是饼状图。

1、定义一个饼状图布局

定义布局的代码为：varpie=d3.layout.pie()；此时 pie 可以当做函数使用。然后 将数组dataset（里面是要可视化的数据）作为pie()的参数，返回值piedata就是转换 后的数据。varpiedata =pie(dataset)。

2、绘制图形

SVG 有一个叫做路径的元素，它可以结合使用直线，曲线等来制作各种 不规则的复杂的图形。通过布局转换后的数据piedata很难计算得到路径值。为此， 我们需要用到生成器。

这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一 段弧。

弧生成器返回的结果赋值给arc。arc可以当做一个函数使用，把piedata作为参 数传入，即可得到路径值。

接下来，在里添加分组元素（g），每一个分组用于存放一段弧的相关元 素。再对每个元素，添加。

定义颜色比例尺。color是一个颜色比例尺，它能根据传入的索引号获取相应的 20 颜色值。

然后在每一个弧线中心添加文本。

运行结果如下：

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

         交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说，

交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到

图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三

种：鼠标、键盘、触屏。

       在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。 on()的第一个参

数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函

数。鼠标常用的事件有：

       click - 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。

21mouseover - 光标放在某元素上。

mouseout - 光标从某元素上移出来时。

mousemove - 鼠标被移动的时候。

mousedown - 鼠标按钮被按下。

mouseup - 鼠标按钮被松开。

下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入

mouseover 和 mouseout 事件， mouseover 某部分时变换成黄色， mouseout 时恢复原

色。在代码中加入如下代码。  

运行结果为：

实验总结：

本次实验围绕数据可视化展开，分别使用了 Tableau 和 D3 两种工具，旨在熟悉它们的使用方法并实现基本的数据可视化操作。通过这两个实验，对数据可视化技术有了更深入的理解和实践经验。

 

1. 实验一：Tableau 数据可视化入门
   • 实验内容与成果：熟悉了 Tableau Desktop 的使用，连接自带的超市数据源，利用拖放操作快速生成了多种图表。制作出中国各个地区的利润条形图和气泡图，通过改变数据显示方式，直观展示了不同地区的利润情况。还轻松制作了填充地球图，只需将相关字段属性改成地理维度，便一键生成，与 Excel 制作相比，大大简化了操作流程。成功创建了包含多种图表的仪表板，如 “产品子类别利润条形图”“产品销售数量气泡图”“省份利润地图”，并对仪表板标题进行了个性化设置。
   • 实验收获：掌握了 Tableau Desktop 连接数据源、筛选数据、创建图表和仪表板的基本操作。理解了维度和度量的概念，以及如何利用它们构建有价值的数据可视化视图。体会到 Tableau 拖放式操作的便捷性和强大功能，能快速将数据转化为直观的可视化图表，帮助用户从不同角度探索和分析数据。
2. 实验二：D3 数据可视化基础
   • 实验内容与成果：在熟悉 D3 基本使用方法的基础上，完成了多个图表制作任务。制作了简单柱形图，通过定义数据、比例尺、坐标轴，添加矩形和文字元素，实现了数据的可视化展示。在此基础上，利用 D3 的过渡方法，如transition()、duration()、ease()和delay()，制作出动态柱形图，使图表更具吸引力和表现力。完成了饼形图的制作，通过定义饼状图布局和弧生成器，将数据转换为适合绘图的格式，并添加颜色比例尺和文本，成功绘制出饼形图。最后，为饼形图添加了mouseover和mouseout事件监听器，实现了交互式饼形图，增强了图表的交互性和用户体验。
   • 实验收获：掌握了 D3 在 HTML 环境中进行数据可视化的基本流程，包括创建 SVG 画布、定义数据和比例尺、绘制图形元素以及添加交互效果。深入理解了 D3 布局的概念和作用，学会使用饼状图布局将数据转换为适合可视化的格式。了解了 SVG 在 D3 绘图中的重要性，以及如何利用 SVG 的路径元素绘制复杂图形。学会了使用 D3 的事件监听器实现图表的交互功能，提升了图表的实用性和用户体验。
3. 综合对比与思考：Tableau 和 D3 在数据可视化方面各有优势。Tableau 操作简单，无需编写代码，通过拖放操作就能快速创建各种美观的图表和仪表板，适合非技术人员进行数据探索和分析。而 D3 则更加灵活和强大，基于 JavaScript 语言，能够实现高度定制化的可视化效果和交互功能，适合专业开发人员根据具体需求进行个性化开发。在实际应用中，可以根据项目需求和团队技术能力选择合适的工具。对于快速探索和展示数据，Tableau 是一个不错的选择；而对于需要实现复杂交互和定制化的场景，D3 则能发挥更大的作用。未来，随着数据可视化需求的不断增长，这两种工具都将在不同领域得到广泛应用，并且可能会出现更多融合两者优势的可视化解决方案。