大数据可视化实验三——数据可视化工具使用

一、实验目的... 1

二、实验环境... 1

三、实验内容... 1

1. 下载并安装Tableau软件.. 1

2. 使用HTML5绘制Canvas图形.. 2

3. 使用HTML5编写SVG 图形... 5

4. 使用R 语言编写可视化实例.. 7

四、总结与心得体会... 7

五、思考问题... 8

一、实验目的

1）了解数据可视化工具，下载并安装可视化工具

2）掌握数据可视化的主流编程语言，能使用编程语言开发简单的可视化作品

二、实验环境

硬件：微型图像处理系统，

包括：主机， PC机；

操作系统：Windows 11

应用软件：Jupyter Notebook, pycharm, Tableau

数字图像处理软件：Excel/Python

三、实验内容

1. 下载并安装Tableau软件

Tableau软件已下载成功，软件界面如下所示：

2. 使用HTML5绘制Canvas图形

在pycharm中编辑如下代码进行Canvas图形的绘制，编写了以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的html绘制Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">
    你的浏览器不支持Canvas，建议使用最新版Chrome
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // 绘制一个圆
    ctx.beginPath();
    ctx.arc(100, 75, 40, 0, 2*Math.PI);
    ctx.stroke();
    // 绘制一个填充矩形，改变颜色为浅红色
    ctx.fillStyle = 'lightcoral'; // 浅红色
    ctx.fillRect(30, 30, 60, 60); // 修改位置和大小
    // 绘制另一个填充矩形，颜色保持为浅红色
    ctx.fillRect(140, 30, 60, 60); // 修改位置和大小
    // 绘制两个矩形边框，位置和大小根据填充矩形调整
    ctx.strokeRect(30, 30, 60, 60);
    ctx.strokeRect(140, 30, 60, 60);
    // 绘制一条直线
    ctx.moveTo(30, 30);
    ctx.lineTo(170, 170);
    ctx.stroke();
    var text = "我的canvas图";
    // 设置文本的字体样式和大小
    ctx.font = "16px Arial";
    // 设置文本颜色
    ctx.fillStyle = 'darkblue'; // 文本颜色改为深蓝色
    // 设置文本对齐方式
    ctx.textAlign = "center";
    // 设置文本的基线对齐方式
    ctx.textBaseline = "middle";
    // 计算文本的宽度
    var textWidth = ctx.measureText(text).width;
    // 设置文本绘制的起始点位置
    var x = 95 ;
    var y = 180;
    // 使用fillText()方法填充（实心）文本
    ctx.fillText(text, x, y);
</script>
</body>
</html>

整体上，这段代码在canvas上绘制了一个圆、两条直线、两个填充矩形和两个矩形边框，并在画布中心绘制了文本。通过调整参数，你可以改变这些图形的位置、大小和颜色。

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html lang="en">：根元素，定义了整个文档的语言为英语。
<head>：包含了文档的元数据，如字符集声明和标题。
<meta charset="UTF-8">：指定页面的字符编码为UTF-8，这是一种广泛使用的字符编码。
<title>我的html绘制Canvas</title>：定义了网页的标题，显示在浏览器的标签页上。
<body>：包含了网页的所有内容，用户将在这里看到网页的主体。
<canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">：创建了一个200x200像素的画布，并为其添加了红色的边框。id属性为"myCanvas"，用于在JavaScript中引用这个元素。如果浏览器不支持<canvas>元素，将显示canvas后面的文本。
<canvas>后面的文本是备选内容，用于那些不支持canvas的浏览器。推荐用户使用最新版的Chrome浏览器。
<script>：内嵌的JavaScript代码块，用于操作canvas元素。
var c = document.getElementById("myCanvas");：通过ID获取canvas元素。
var ctx = c.getContext("2d");：获取canvas的2D绘图上下文，这是绘制图形所需的。
使用ctx.beginPath()开始一个新的路径。
使用ctx.arc(100, 75, 40, 0, 2*Math.PI)绘制一个圆，圆心位于(100, 75)，半径为40，从0度到360度（即一个完整的圆）。
使用ctx.stroke()绘制当前路径的轮廓。
使用两个ctx.strokeRect()方法绘制两个矩形的边框，分别定义了矩形的位置和大小。
使用ctx.fillStyle = 'lightcoral';设置填充颜色为浅红色。
使用ctx.fillRect(30, 30, 60, 60);绘制一个填充矩形，定义了矩形的位置和大小。
另一个ctx.fillRect()方法绘制第二个填充矩形。
ctx.moveTo(30, 30);和ctx.lineTo(170, 170);定义了一条从左上角到右下角的直线的起点和终点。
使用ctx.stroke()绘制直线。
var text = "我的canvas图";定义了要绘制的文本内容。
ctx.font = "16px Arial";设置文本的字体样式和大小。
ctx.fillStyle = 'darkblue';设置文本的填充颜色为深蓝色。
ctx.textAlign = "center";和ctx.textBaseline = "middle";设置文本的水平和垂直对齐方式。
使用ctx.measureText(text).width计算文本的宽度。
计算文本绘制的起始点位置，确保文本位于画布的中心。
使用ctx.fillText(text, x, y);在指定位置填充（绘制实心）文本。

运行结果如下：

3. 使用HTML5编写SVG 图形

编写SVG绘制html5代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Advanced SVG Example</title>
    <style>
        /* 为SVG中的文本添加样式 */
        text {
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
    </style>
</head>
<body>
    
    <svg width="400" height="400">
        
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        
        <circle cx="100" cy="100" r="50" fill="url(#grad1)" />

        
        <line x1="200" y1="100" x2="250" y2="150" stroke="black" stroke-width="2">
            <polygon points="250,150 255,155 245,155" fill="black" />
        </line>

        
        <rect x="150" y="30" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />

        
        <text x="20" y="20">我的svg图形</text>
    </svg>
</body>
</html>