Tableau数据可视化入门
目录
实验一：Tableau数据可视化入门
一、实验目的
二、实验原理
三、实验环境
四、实验步骤
1、双击桌面图标打开Tableau软件。出现TableauDesktop引导界面。编辑
2 、点击上图示左侧“已保存数据源”下的“示例-超市” 。打开界面后，点击左下角的 “数据源” ，结果如下。
3 、制作中国各个地区的利润图表。
4 、制作填充地球图。
5 、制作中国各个省份地区的利润仪表板。
五、实验心得
实验二：D3数据可视化基础
一、实验目的
二、实验原理
三、实验环境
四、实验步骤
题目一：制作一个简单的柱形图。
题目二：制作动态的柱形图。
题目三：制作饼形图。
题目四：制作交互式的饼形图。
五、实验心得
实验一：Tableau数据可视化入门
一、实验目的
1.熟悉TableauDesktop使用方法。
2.通过Tableau软件来实现Excel中数据的基本可视化。
二、实验原理
Tableau是一款强大的数据可视化工具，它通过拖拽式操作和直观的界面，使用户能够轻松地连接、分析和可视化数据。Tableau支持多种数据源（如Excel、SQL数据库、云平台等），并提供了丰富的可视化组件（如柱状图、折线图、地图、仪表盘等），能够快速生成交互式的可视化报告。Tableau通过连接数据源，将原始数据导入到工具中。在实验中，用户需要理解如何选择合适的数据源，并对数据进行初步的整理和清洗，以确保数据的准确性和可用性。Tableau提供了多种可视化组件，每种组件适用于不同类型的数据和分析需求。例如，柱状图用于比较不同类别之间的数值大小，折线图用于展示数据随时间的变化趋势，地图用于地理数据的可视化等。实验中，用户将学习如何根据数据特点选择合适的图表类型，并调整图表的样式和参数以优化可视化效果。
本次基础实验使用TableauDesktop。TableauDesktop是一款基于斯坦福大学突破性技术的桌面软件应用程序，分为个人版和专业版。TableauDesktop能连接到许多数据源，如Access、Excel、文本文件、DB2、MSSQLServer、Sybase等。在获取数据源中的各类结构化数据后，TableauDesktop可以通过拖放式界面快速地生成各种美观的图表、坐标图、仪表盘与报告，并允许用户以自定义的方式设置视图、布局、形状、颜色等，从而通过各种视角来展现业务领域数据及其内在关系。
三、实验环境
TableauDesktop10.5
四、实验步骤
1、双击桌面图标打开Tableau软件。出现TableauDesktop引导界面。
界面的左边指示数据的来源，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。
然后，将“产品子类别利润条形图” 、“产品销售数量气泡图”工作表拖进这个水平 对象里，并排放置。
最后再将省份利润工作表拖进水平对象的下部，仪表板制作完成。
五、实验心得
我深入学习了Tableau Desktop的使用方法，掌握了其界面布局、数据连接和字段操作等基础功能。通过对Excel数据的基本可视化，我体会到Tableau在数据处理和展示方面的强大优势，它为我今后的数据分析工作提供了有力的工具。
实验二：D3数据可视化基础
一、实验目的
熟悉D3数据可视化的使用方法。
二、实验原理
D3.js（Data-Driven Documents）是一个基于JavaScript的开源库，用于生成和操作Web文档中的图形元素。它通过数据驱动的方式，将数据绑定到DOM（文档对象模型）元素上，并通过编程方式动态生成可视化图形。D3.js具有高度的灵活性和可定制性，适合开发复杂的、交互式的可视化项目。数据绑定与DOM操作：D3.js的核心原理是将数据绑定到DOM元素上。通过d3.select()和d3.selectAll()方法选择DOM元素，然后使用.data()方法将数据绑定到这些元素上。实验中，用户将学习如何选择和操作DOM元素，并理解数据绑定的基本概念。D3.js利用SVG（Scalable Vector Graphics）技术生成图形元素。SVG是一种基于XML的标记语言，用于描述二维图形。D3.js提供了丰富的交互式功能，如鼠标事件（点击、悬停等）、动画效果等。通过绑定事件监听器和使用过渡动画，用户可以创建交互式的可视化效果。实验中，用户将学习如何为图形元素添加事件监听器，并实现简单的动画效果。
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框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完整的柱形图</title>
</head>
<body>
<!-- 引入 D3.js -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
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 标签中加 入代码。
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// 画布大小
var width = 400;
var height = 400;
// 在 body 里添加一个 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
</script>
</body>
3 、定义数据和比例尺。
在添加画布的代码后面加入如下代码。
// 定义一个数组
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], 0.1);
// y轴的比例尺
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
4 、定义坐标轴。
// 定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
// 定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
5 、添加矩形和文字元素。
// 添加矩形元素
svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "MyRect")
.attr("x", function(d, i) {
return xScale(i) + padding.left;
})
.attr("y", function(d) {
return yScale(d) + padding.top;
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return height - padding.top - padding.bottom - yScale(d);
})
.style("fill", "blue"); // 设置柱形图颜色为蓝色
// 添加文字元素
svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("x", function(d, i) {
return xScale(i) + padding.left + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return yScale(d) + padding.top - 5; // 调整文字位置
})
.attr("text-anchor", "middle") // 文字居中对齐
.text(function(d) {
return d;
});
6 、添加坐标轴的元素
// 添加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);
最后运行结果如下图所示:
题目二：制作动态的柱形图。
D3 提供了4 个方法用于实现图形的过渡：
1) transition()启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜 色等等） 。D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB 值）进行插值计算，得到过渡用的颜色值。
2) duration()指定过渡的持续时间，单位为毫秒 。如 duration(3000) ，指持续 3 秒。
3) ease()指定过渡的方式，常用的有：linear：普通的线性变化；circle：慢慢地 到达变换的最终状态；elastic：带有弹跳的到达最终状态；bounce：在最终 状态处弹跳几次。
4) delay()指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此 函数可以对整体指定延迟，也可以对个别指定延迟。
下面我们将在题目一完成的柱形图的基础上稍作修改，做成一个带动态效果的 柱形图。把题目一中添加矩形元素和添加文字元素的代码换成如下代码，就可以启 动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。
// 添加矩形元素
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(d) {
return yScale(0); // 初始高度为0
})
.attr("height", 0) // 初始高度为0
.style("fill", "blue") // 设置柱形图颜色为蓝色
.transition() // 添加动画效果
.delay(function(d, i) {
return i * 300; // 每个柱子延迟300ms
})
.duration(1000) // 动画持续时间1秒
.ease("elastic") // 使用弹性动画效果
.attr("y", function(d) {
return yScale(d); // 动态调整y位置
})
.attr("height", function(d) {
return height - padding.top - padding.bottom - yScale(d); // 动态调整高度
});
// 添加文字元素
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 + (xScale.rangeBand() - rectPadding) / 2;
})
.attr("y", function(d) {
return yScale(0) - 5; // 初始位置在顶部
})
.attr("text-anchor", "middle") // 文字居中对齐
.text(function(d) {
return d;
})
.transition() // 添加动画效果
.delay(function(d, i) {
return i * 300; // 每个文字延迟300ms
})
.duration(1000) // 动画持续时间1秒
.ease("elastic") // 使用弹性动画效果
.attr("y", function(d) {
return yScale(d) - 5; // 动态调整文字位置
});
最后运行结果如下图所示:
题目三：制作饼形图。
布局是 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)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼形图</title>
</head>
<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];
// 创建 SVG 画布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 定义饼图布局
var pie = d3.layout.pie();
// 计算饼图数据
var piedata = pie(dataset);
2 、绘制图形
SVG 有一个叫做路径 <path>的元素，它可以结合使用直线，曲线等来制作各种 不规则的复杂的图形。通过布局转换后的数据 piedata 很难计算得到路径值。为此， 我们需要用到生成器。
这里要用到的叫做弧生成器，能够生成弧的路径，因为饼图的每一部分都是一 段弧。
// 设置内外半径
var outerRadius = 150; // 外半径
var innerRadius = 0; // 内半径，为0则中间没有空白
// 定义弧生成器
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
弧生成器返回的结果赋值给 arc 。arc 可以当做一个函数使用，把 piedata 作为参 数传入，即可得到路径值。
接下来，在 <svg> 里添加分组元素（g），每一个分组用于存放一段弧的相关元 素。再对每个 <g> 元素，添加 <path>。
// 创建弧形元素
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); // 使用弧生成器生成路径
});
定义颜色比例尺。color 是一个颜色比例尺，它能根据传入的索引号获取相应的颜色值。
// 定义颜色比例尺
var color = d3.scale.category10();
然后在每一个弧线中心添加文本。
// 添加文本标签
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")"; // 将文本放置在弧形的中心
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.data; // 显示每个弧形对应的数据值
});
运行结果如下：
题目四：制作交互式的饼形图。
交互是指用户输入了某种指令后程序就可做出某种响应。对可视化图表来说， 交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到 图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互的工具一般有三 种：鼠标、键盘、触屏。
在 D3 中，每一个选择集都有 on()函数，用于添加事件监听器。on()的第一个参 数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函 数。鼠标常用的事件有：
click - 鼠标单击某元素时，相当于mousedown 和mouseup 组合在一起。
mouseover - 光标放在某元素上。
mouseout - 光标从某元素上移出来时。
mousemove - 鼠标被移动的时候。
mousedown - 鼠标按钮被按下。
mouseup - 鼠标按钮被松开。
下面开始进行简单的交互式饼形图制作， 目标是在上面的饼形图的基础上加入 mouseover 和 mouseout 事件，mouseover 某部分时变换成黄色，mouseout 时恢复原 色。在代码中加入如下代码。
// 添加弧形路径
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));
});
运行结果为：
五、实验心得
在使用D3.js进行数据可视化时，我深刻意识到细节和语法准确性的重要性。在绘制饼图和柱状图的过程中，我遇到了一些技术难题，比如变量名拼写错误、链式调用中断、坐标系错位等问题，导致图形无法渲染或交互失效。通过逐步调试和参考文档，我学会了如何通过浏览器的控制台定位错误，同时也深入理解了D3.js的核心机制——数据绑定（selectAll().data().enter()）。此外，我还掌握了交互实现的技巧，尤其是在利用闭包和事件监听的配合下，能通过datum()准确提取数据索引。这次实验不仅加深了我对D3布局（d3.layout.pie()）、比例尺（d3.scale）和生成器（d3.svg.arc）等功能的理解，更让我意识到数据可视化不仅仅是代码的实现，更是对数据逻辑与视觉表达之间关系的精准体现。只有通过反复调试和验证，才能确保数据顺畅地转化为图形。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
29
0- 0
已为社区贡献1条内容
所有评论(0)