当前位置：首页 > news >正文

【Hadoop】【hdfs】【大数据技术基础】课程作业四可视化工具的使用大数据基础编程、实验和案例教程（第2版）

news 2024/11/15 7:19:20

典型的可视化工具的使用方法

一、D3可视化库的使用方法

1.D3可视化库的安装

D3是一个JavaScript函数库，这里所说的“安装”，并非通常意义上的安装，而只需要在HTML中引用一个D3.js文件即可。可以有两种方法引用D3.js文件：

方法1：访问 D3.js官网（https://d3js.org/），下载D3.js文件，解压后，在HTML文件中包含相关的js文件即可。

方法2：直接包含网络的链接，即在HTML文件中写入如下代码：

方法1是把D3.js文件下载到本地使用，所以，在使用过程中不需要连接网络。而方法2则需要在使用过程中能够连接到互联网。

2.基本操作

添加元素：

比如，选择body标签，为之添加一个p标签，并设置它的内容为“New paragraph！”，则可以使用如下JavaScript语句：

d3.select("body").append("p").text("New paragraph!");

需要把这行JavaScript语句放入HTML代码中，文件名为example1.html，如下所示：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>D3测试</title><!-- 引入D3.js库 --><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script></head><body><!-- 使用D3.js向body标签追加一个新的p标签，并设置其文本内容 --><script type="text/javascript">d3.select("body").append("p").text("New paragraph!");</script></body></html>

数据绑定：

D3可以处理哪些类型的数据？它可以接受几乎任何数字数组、字符串或对象（本身包含其他数组或键/值对），还可以处理JSON和GeoJSON。

下面给出一段实例代码，文件名称为example2.html：

<!DOCTYPE html><html><head><title>testD3-1.html</title><!-- 引入D3.js库 --><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script></head><body>This is my HTML page.<br><!-- D3.js脚本 --><script type="text/javascript">// 定义数据集var dataset = [5, 10, 15, 20, 25];// 使用D3.js选择body元素，并为每个数据点添加一个新的p元素d3.select("body").selectAll("p").data(dataset).enter().append("p").text("New paragraph!");</script></body></html>

上面这段代码解释如下：

d3.select("body")：查找DOM中的body。

selectAll("p")：选择DOM中的所有段落。

data(dataset)：计数和分析数据值。本实例中，dataset中有五个值，每个值都会执行一次。

enter()：绑定数据和DOM元素。这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。

append("p")：通过enter()创建的占位符，在DOM中插入一个p元素。

text("New paragraph!")：为新创建的p标签插入一个文本值。

用层画条形图：

（1）为同类层添加样式

div.bar {

display: inline-block;

width: 20px;

height: 75px; /* We'll override this later */

background-color: teal;

}

（2）声明要为某类层设置属性

.attr("class", "bar")

（3）为每个特定的层设置属性

.style("height", function(d) {

var barHeight = d * 5; //Scale up by factor of 5

return barHeight + "px";

});

（4）设置层之间的间隔

margin-right: 2px;

（5）完整的源代码：

<!DOCTYPE html><html><head><title>testD3-3-drawingDivBar</title><style type="text/css">div.bar {display: inline-block;width: 20px;height: 75px; /* Gets overridden by D3-assigned height below */margin-right: 2px;background-color: teal;}</style></head><body><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script><script type="text/javascript">var dataset = [5, 10, 15, 20, 25];d3.select("body").selectAll("div").data(dataset).enter().append("div").attr("class", "bar").style("height", function(d) {var barHeight = d * 5;return barHeight + "px";});</script></body></html>

绘制SVG图形：

（1）简单形状

SVG标签包含一些视觉元素，包括矩形、圆形、椭圆形、线条、文字和路径等。绘制SVG图形采用了基于像素的坐标系统，其中，浏览器的左上角是原点(0,0)，x和y的正方向分别是右和下。

（a）矩形

使用x和y的指定左上角的坐标，width和height指定尺寸。绘制SVG矩形的代码如下：

（b）圆

使用cx和cy指定半径的中心的坐标，使用ŗ表示半径。例如：

（c）椭圆

使用cx和cy指定半径的中心的坐标，rx和ry分别指定x方向和y方向上圆的半径，例如：

（d）线

使用x1和Y1到指定线的一端的坐标，x2和y2指定另一端的坐标。stroke指定描边，使得线是可见的。例如：

（e）文本

使用 x和y指定文本的位置。例如：

<text x="250" y="25">Easy-peasy</text>

可以给文本设置样式。例如：

<text x="250" y="155" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>

绘图样例：

下面是一段绘制SVG图形的HTML源代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>SVG Graphics Example</title><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script><style type="text/css">.pumpkin {fill: yellow;stroke: orange;stroke-width: 5;}</style></head><body><svg width="500" height="960"><!-- 绘制一个矩形 --><rect x="0" y="0" width="500" height="50"/><!-- 绘制一个椭圆 --><ellipse cx="250" cy="225" rx="100" ry="25"/><!-- 绘制一条线 --><line x1="0" y1="120" x2="500" y2="50" stroke="black"/><!-- 绘制文本 --><text x="250" y="155" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text><!-- 绘制一系列圆形 --><circle cx="25" cy="80" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="100"/><circle cx="75" cy="80" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/><circle cx="125" cy="80" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/><circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/><circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/><circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/><circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/><circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/><circle cx="25" cy="625" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/><circle cx="65" cy="625" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/><circle cx="105" cy="625" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"/><!-- 绘制不同颜色的矩形 --><rect x="0" y="300" width="30" height="30" fill="purple"/><rect x="20" y="305" width="30" height="30" fill="blue"/><rect x="40" y="310" width="30" height="30" fill="green"/><rect x="60" y="315" width="30" height="30" fill="yellow"/><rect x="80" y="320" width="30" height="30" fill="red"/><!-- 绘制一个南瓜形状的圆形 --><circle cx="25" cy="425" r="22" class="pumpkin"/></svg></body></html>

散点图：

下面是给出绘制散点图的一段HTML代码样例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>testD3-9-drawScatterPlot.html</title><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script><style type="text/css">/* 可以在这里添加CSS样式 */</style></head><body><script type="text/javascript">// 宽度和高度var w = 600;var h = 100;var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];// 创建SVG元素var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);// 绘制散点图的圆圈svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", function(d) {return d[0];}).attr("cy", function(d) {return d[1];}).attr("r", function(d) {return Math.sqrt(h - d[1]);});// 绘制散点图上的文本标签svg.selectAll("text").data(dataset).enter().append("text").text(function(d) {return d[0] + "," + d[1];}).attr("x", function(d) {return d[0];}).attr("y", function(d) {return d[1];}).attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");</script></body></html>

二、使用ECharts图表制作

1.ECharts简介

ECharts是由百度公司前端数据可视化团队研发的图表库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、Firefox、Safari等），底层依赖轻量级的、Canvas类库ZRender，可以提供直观、生动、可交互、可高度个性化定制的数据可视化图表。

ECharts提供了非常丰富的图表类型，包括常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap，用于多维数据可视化的平行坐标，以及用于BI的漏斗图、仪表盘，并且支持图与图之间的混搭，能够满足用户绝大部分分析数据时的图表制作需求。

2.ECharts图标制作方法

下载ECharts：

可以在Windows或Linux系统中打开浏览器进行可视化图表制作，但是，建议在Windows系统下操作，使用起来会更加顺畅。访问ECharts官网（https://www.echartsjs.com），从官网下载界面选择需要的版本下载，根据开发者的不同需求，官网提供了不同的下载文件。需要注意的是，网站下载的ECharts文件名称不是echarts.js，一般需要手动把文件名称修改为echarts.js，因为在HTML中引入时的名称是echarts.js。

HTML引入ECharts：

因为ECharts底层是JavaScript，所以可以像JavaScript一样，直接嵌入到HTML中，如下所示：

绘制一个简单的图表：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px; height: 400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);</script></body></html>

导出图片：

ECharts可以很方便地导出制作的图表。只要在代码中加入如下代码，即可显示出如图11-6右上角所示的工具栏，其中，最右边矩形框中的图标即为“导出图表”的快捷图标，点击该图标就可以顺利完成图表的导出。

三、作业总结

数据可视化在大数据分析中具有非常重要的作用，尤其从用户角度而言，它是提升用户数据分析效率的有效手段。可视化工具包括信息图表工具、地图工具和高级分析工具等，每种工具都可以帮助我们实现不同类型的数据可视化分析，可以根据具体应用场合来选择适合的工具。本章选取了两种具有代表性的可视化工具，包括D3和ECharts，简要介绍了这两种工具的使用方法。

查看全文

http://www.mrgr.cn/news/75309.html