Tableau数据可视化入门、D3数据可视化基础
实验一：Tableau数据可视化入门
一、实验目的
1、熟悉Tableau Desktop 使用方法。2、通过Tableau软件来实现Excel中数据的基本可视化。
二、实验原理
Tableau是新一代商业智能工具软件，它将数据连接、运算、分析与图表结合在一起，通过拖放方式创建各种图表。
Tableau 产品包括 Tableau Desktop、Tableau server、Tableau Public、TableauOnline 和 Tableau reader 等多种。其中，Tableau Desktop、Tableau Server、Tableau Reader 使用最多。
本次基础实验使用 Tableau Desktop。Tableau Desktop 是一款基于斯坦福大学突破性技术的桌面软件应用程序，分为个人版和专业版。 Tableau Desktop 能连接到许多数据源，如 Access、Excel、文本文件、DB2、 MS SQL Server、 Sybase 等。在获取数据源中的各类结构化数据后， Tableau Desktop 可以通过拖放式界面快速地生成各种美观的图表、坐标图、仪表盘与报告，并允许用户以自定义的方式设置视图、布局、形状、颜色等，从而通过各种视角来展现业务领域数据及其内在关系。
三、实验环境
Tableau Desktop 10.5
四、实验步骤
1、双击桌面图标打开Tableau软件。出现Tableau Desktop引导界面。
界面的左边指示数据的来源，Tableau 可以连接到本地的 Excel 表格，文本，Access 数据库，统计文件等，也可以连接数据库服务器，例如 Microsoft SQL Server数据库，MySQL 数据库，Oracle 数据库等。左边最下面显示了已保存的数据源。中间上部分显示最近打开过的工作薄，下部分显示示例工作薄，即 Tableau 自带的一些工作薄，可以点击更多样本查看更多的数据图。右边显示了探索，每周精选以及 Tableau 一些社区，博客，新闻等等。第一次运行该软件，可以点击某一个示例工作薄，查看该软件数据展示的图示，以及如何简单操作。
本次入门实践使用自带的超市工作簿。
2、点击上图示左侧“已保存数据源”下的“示例-超市”。打开界面后，点击左下角的“数据源”，结果如下。
左边列出了超市这个表格下的三个子工作表，当我们选中一个子表时，双击，在右边区域的下部分就会显示子表的数据，例如,双击销售人员，则显示具体销售人员表信息。还可以点击右上角的“筛选器”的“添加”，按需要进行数据过滤。
上图中按“地区经理”进行数据筛选。
在“筛选器”中选中范彩和洪光两位地区经理的名字，确定后，筛选结果如下。
在界面的右下角可以新建一个工作表或者直接用软件默认打开的工作表 1。这里打开默认工作表 1，是超市订单中的数据。左侧就是订单这个表格的维度和度量。
维度通常是类别字段，例如“产品”和“地区”。具体来说，Tableau 中的维度用于设置粒度，即视图中的详细级别。
度量通常是指标，即数字数据，例如“销售额”。
大多数情况下，维度是离散的，而度量是连续的。
3、制作中国各个地区的利润图表。
将国家和地区维度拖到列，把利润度量拖到行，即可制作出一个简单的条形图。Tableau 最具有特色的功能就是拖放式的操作，只需要把维度以及度量拖到适当的位置，即可制作数据图表。
点击右上角的“智能显示”，还可以把同样的数据显示成不同形式的图表。例如，点击填充气泡图，即可制作出漂亮的类别和地区的气泡图。
点击单个气泡会显示出具体的销售额。
4、制作填充地球图。
用 Excel 制作填充地球图十分复杂，但是 Tableau 制作填充地球图却十分方便，一键生成。
Tableau 将数据分为：数字（十进制），数字（整数），字符串，布尔，日期，日期和时间，还有地理类型（如果数据源中有城市，省份的数据可以分配为地理类
型）。
选择任意一个字段，单击鼠标右键，在菜单中指向“更改数据类型”即可查看该字段的默认类型，也可更改其数据类型。
制作填充地球图首先必须先将国家、城市、地区和省/自治区字段的属性改成地理维度。
然后，制作中国各个省份利润填充地球图，这里需要将国家和省/自治区维度拖到列，把利润拖到行，再点击“智能显示”里的填充气球
5、制作中国各个省份地区的利润仪表板。
仪表板中想同时显示出“产品子类别利润条形图”、“产品销售数量气泡图”、“省份利润地图”三种图表。首先在 Tableau 中分别建立“产品子类别利润条形图”、“产品销售数量气泡图”、“省份利润地图”三个工作图表。如下图：
下面开始建立仪表板。在 Tableau 的菜单中选择“仪表板”，选择“新建仪表板”。
在左下角选中“显示仪表板标题”，然后双击顶端的“仪表板 1”，修改标题内容为“相关信息比较图”，可对标题做格式化操作，改变其大小、显示位置和颜色等属性。这是新建仪表板的标题，放在最顶部。
然后，在左侧的对象中双击“水平”对象，则在中间空白处添加了一个水平对象。
对水平对象的高度进行调整，大小设为 300。
然后，将“产品子类别利润条形图”、“产品销售数量气泡图”工作表拖进这个水平对象里，并排放置。
最后再将省份利润工作表拖进水平对象的下部，仪表板制作完成。
五、总结
1、实验步骤回顾
-
启动Tableau Desktop： 熟悉软件界面，了解数据源连接方式，并打开示例工作簿进行探索。
-
数据源探索： 学习如何查看数据源中的子工作表，以及如何使用筛选器进行数据过滤。
-
创建基本图表： 通过拖放维度和度量到行和列，快速创建条形图和填充气泡图，并利用“智能显示”功能切换图表类型。
-
制作填充地球图： 学习如何更改数据类型，将地理位置信息设置为地理维度，并创建填充地球图。
-
创建仪表板： 学习如何创建仪表板，并添加多个工作表进行布局和排版，实现信息对比。
2、实验收获
-
掌握了Tableau Desktop 的基本操作和界面布局。
-
熟悉了数据源连接和数据探索的方法。
-
学会了利用拖放方式快速创建各种图表，并进行图表类型切换。
-
了解如何制作填充地球图和仪表板，进行数据可视化展示。
3、实验反思
-
需要进一步学习Tableau Desktop 的进阶功能，例如数据清洗、数据计算、图表定制等。
-
可以尝试连接其他数据源，例如数据库服务器，进行更复杂的数据分析和可视化。
-
需要提升对数据可视化的理解和设计能力，制作更具吸引力和信息量的图表。
总体而言，本次实验成功实现了实验目的，使我初步掌握了Tableau Desktop 的使用方法，为后续学习和实践数据可视化奠定了基础。
实验二：D3数据可视化基础
一、实验目的
熟悉 D3 数据可视化的使用方法。
二、实验原理
D3 的全称是（Data-Driven Documents），是一个被数据驱动的文档，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本次实践主要介绍D3 一些最基本的使用方法，以及生成一些比较简单的图表。
D3 是一个 JavaScript 函数库。它只有一个文件，在 HTML 中引用即可。有两种方法：
（1）下载 D3.js 的文件，解压后，在 HTML 文件中包含相关的 js 文件即可。
（2）还可以直接包含网络的链接，这种方法较简单：<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>但使用的时候要保持网络连接有效，不能再断网的情况下使用。
D3 可以接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对），可以处理 JSON 和 GeoJSON。
三、实验环境
IE9 以上或 Firefox 或 Chrome（推荐）等浏览器、Notepad++等编辑工具。D3.js库。
四、实验步骤
题目一：制作一个简单的柱形图。
1、打开Notepad++，新建文件，并编辑好html框架。
2、添加 SVG 画布。
要绘图，首要需要的是一块绘图的“画布”。HTML5 提供两种强有力的“画布”：SVG 和 Canvas。
SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。
Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
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、定义一个饼状图布局
定义布局的代码为：var pie = d3.layout.pie()；此时 pie 可以当做函数使用。然后将数组 dataset（里面是要可视化的数据）作为 pie()的参数，返回值 piedata 就是转换后的数据。var piedata = pie(dataset)。
2、绘制图形
SVG 有一个叫做路径 <path>的元素，它可以结合使用直线，曲线等来制作各种不规则的复杂的图形。通过布局转换后的数据 piedata 很难计算得到路径值。为此，我们需要用到生成器。
这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一段弧。
弧生成器返回的结果赋值给 arc。arc 可以当做一个函数使用，把 piedata 作为参数传入，即可得到路径值。
接下来，在 <svg> 里添加分组元素（g），每一个分组用于存放一段弧的相关元素。再对每个 <g> 元素，添加 <path>。
定义颜色比例尺。color 是一个颜色比例尺，它能根据传入的索引号获取相应的20颜色值。
然后在每一个弧线中心添加文本。
运行结果如下：
题目四：制作交互式的饼形图。
交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三种：鼠标、键盘、触屏。
在 D3 中，每一个选择集都有 on()函数，用于添加事件监听器。on()的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。鼠标常用的事件有：
click - 鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
21mouseover - 光标放在某元素上。
mouseout - 光标从某元素上移出来时。
mousemove - 鼠标被移动的时候。
mousedown - 鼠标按钮被按下。
mouseup - 鼠标按钮被松开。
下面开始进行简单的交互式饼形图制作，目标是在上面的饼形图的基础上加入mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout 时恢复原
色。在代码中加入如下代码：
运行结果为：
五、总结
1、实验过程：
-
环境搭建： 在 HTML 文件中引入 D3.js 库，并创建 SVG 画布作为绘图区域。
-
数据准备： 定义数据数组，并使用 D3 的比例尺功能将数据映射到 SVG 画布的坐标轴上。
-
图形绘制：
-
柱形图： 使用 SVG 的
rect元素绘制矩形，并通过设置其位置和宽度来表示数据。 -
动态柱形图： 利用 D3 的过渡效果，让柱形图动态地变化到目标高度。
-
饼形图： 使用 D3 的饼图布局将数据转换成适合绘制饼图的形式，并使用 SVG 的
path元素绘制饼图的各个扇区。 -
交互式饼形图： 添加鼠标事件监听器，实现在鼠标悬停在饼图扇区时改变颜色，并在鼠标移开后恢复原色的交互效果。
2、实验收获：
-
掌握了 D3.js 库的基本使用方法，包括 SVG 画布的创建、数据的准备、比例尺的应用、图形的绘制以及事件监听器的添加。
-
理解了 D3 的布局概念，以及如何使用布局将数据转换成适合绘图的格式。
-
体验了 D3 的强大功能，能够通过编写简单的代码实现复杂的数据可视化效果。
附录：
柱状图代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美化柱形图及文字</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.MyRect {
fill: #0000EE;
transition: fill 0.3s ease;
}
.MyRect:hover {
fill: #408b7d;
}
.MyText {
font-family: sans-serif;
font-size: 12px;
fill: white;
text-anchor: middle;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script>
// 画布大小
var width = 400;
var height = 400;
// 在 body 里添加一个 svg 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 画布周边的空白
var padding = { left: 30, right: 30, top: 20, bottom: 20 };
// 定义一个数组
var dataset = [16, 23, 54, 46, 33, 24, 19, 37, 9];
// x轴的比例尺
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, width - padding.left - padding.right]);
// y轴的比例尺
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
// 矩形之间的空白
var rectPadding = 4;
// 定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
// 定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// 添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("width", xScale.rangeBand() - rectPadding)
.attr("y", function () {
var min = yScale.domain()[0];
return yScale(min);
})
.attr("height", 0)
.transition()
.delay(function (d, i) {
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y", function (d) {
return yScale(d);
})
.attr("height", function (d) {
return height - padding.top - padding.bottom - yScale(d);
});
// 添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.attr("x", function (d, i) {
return xScale(i) + rectPadding / 2;
})
.attr("dx", function () {
return (xScale.rangeBand() - rectPadding) / 2;
})
.attr("dy", function (d) {
return 20;
})
.text(function (d) {
return d;
})
.attr("y", function () {
var min = yScale.domain()[0];
return yScale(min);
})
.transition()
.delay(function (d, i) {
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y", function (d) {
return yScale(d);
});
// 添加x轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
// 添加y轴
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
饼状图代码：
<html>
<head>
<meta charset="utf-8">
<title>饼状图</title>
</head>
<style>
</style>
<body>
<!-- 确保D3.js的链接是有效的 -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var dataset = [11, 6, 34, 27, 13, 9];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.layout.pie();
var piedata = pie(dataset);
var outerRadius = 150;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius); // 设置外半径
var color = d3.scale.category10();
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", function (d) {
return arc(d);
})
// 添加鼠标悬停事件
.on("mouseover", function (d, i) {
d3.select(this)
.attr("fill", "yellow");
})
.on("mouseout", function (d, i) {
d3.select(this)
.transition()
.duration(500)
.attr("fill", color(i));
});
arcs.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d.data;
});
console.log(dataset);
console.log(piedata);
</script>
</body>
</html>
浙公网安备 33010602011771号