大数据学习笔记八（数据可视化）_d3 库学习资料

作者：花生_TL007 | 2024-03-03 00:57:11

踩

d3 库学习资料

数据可视化即为将数据进行分析后用图形的方式直观展示出信息的统计情况，这对于大数据的处理结果展示有非常重要的作用，具体事例如下：

百度地图交通情况
人物关系

数据可视化常用工具
Office系列
Excel是微软公司的办公软件Office家族的系列软件之一，可以进行各种数据的处理、统计分析和辅助决策操作，已经广泛地应用于管理、统计、金融等领域，这也是最常见的数据可视化的工具
D3
D3是最流行的可视化库之一，是一个用于网页作图、生成互动图形的JavaScript函数库，提供了一个D3对象，所有方法都通过这个对象调用。D3能够提供大量线性图和条形图之外的复杂图表样式，例如Voronoi图、树形图、圆形集群和单词云等
D3 的全称是（Data-Driven Documents），顾名思义，它是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的
学习 D3 最好的地方是：http://d3js.org/
D3 是一个 JavaScript 函数库，并不需要通常所说的“安装”。它只有一个文件，在 HTML 中引用即可。有两种方法：

方法一：下载 D3.js 的文件，解压后，在 HTML 文件中包含相关的 js 文件即可。
方法二：可以直接包含网络的链接，这种方法较简单：

示例：

<!DOCTYPE html>  
<html>  
  <head>  
        <meta charset="utf-8">  
        <title>testD3-3-drawingDivBar</title>  
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"> </script>  
    <style type="text/css">  
 
            div.bar {  
                display: inline-block;  
                width: 20px;  
                height: 75px;   /* Gets overriden by D3-assigned height below */  
                margin-right: 2px;  
                background-color: teal;  
            }  
 
        </style>  
    </head>  
    <body>  
        <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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

展示效果：
在这里插入图片描述
示例2：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>testD3-6-SVG.html</title>  
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>  
    <style type="text/css">  
        .pumpkin {  
            fill: yellow;  
           stroke: orange;  
               stroke-width: 5;  
       }  
   </style>  
   </head>  
   <body>  
   <script type="text/javascript"></script>  
   <svg width=500 height=960>  
       <rect x="0" y="0" width="500" height="50"/>  
       <text x="250" y="155" font-family="sans-serif"   
               font-size="25" fill="gray">Easy-peasy</text>  
       <rect x="0" y="300" width="30" height="30" fill="purple"/>  
       <circle cx="25" cy="425" r="22" class="pumpkin"/>  
       <circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>  
       <circle cx="25" cy="625" r="20" fill="purple"   
               stroke="green" stroke-width="10"  
               opacity="0.9"/>  
   </svg>  
   </body>  
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

展示效果：
在这里插入图片描述
使用D3需要学习的知识：
HTML：超文本标记语言，用于设定网页的内容，比如和

标签
CSS：层叠样式表，用于设定网页的样式
JavaScript：一种直译式脚本语言，用于设定网页的行为
DOM：文档对象模型，用于修改文档的内容和结构
SVG：可缩放矢量图形，用于绘制可视化的图形
语法解释：
d3.select(“body”)查找DOM中的body。
selectAll(“p”)选择DOM中的所有段落。由于没有存在，这将返回一个空的选择。这个选择为空，代表段落很快就会存在。
data(dataset)计数和分析我们的数据值。有五个值，之后我们的数据集执行了5次，每个值一次。
enter()绑定数据和DOM元素。这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。
append(“p”)通过enter()创建的占位符在DOM中插入一个p元素。
text(“New paragraph!”)为新创建的p标签插入一个文本值。
SVG标签包含一些视觉元素，包括矩形，圆形，椭圆形，线条，文字和路径等。基于像素的坐标系统，其中浏览器的左上角是原点(0,0)。x,y的正方向分别是右和下。
矩形。使用x和y的指定左上角的坐标，width和height指定的尺寸。绘制SVG的矩形可以这样写：

SVG的默认样式是黑色填充。如果想换颜色，就必须将样式应用到相应的元素。常见的SVG性质：1. 填充（fill） -颜色值。正如用CSS，颜色可以被指定为。命名的颜色- green。十六进制值- ＃3388aa或38A。RGB值- RGB(10,150,20)* RGB与Alpha透明度- RGBA(10,150,20,0.5)。

描边（stroke） -颜色值。3. 描边宽度（stroke-width） -数字（通常以像素为单位）。4. 不透明度（opacity） – 0.0（完全透明）和1.0（完全不透明）之间的数值。5. 有了文字，也可以使用CSS样式，如：字体类型（font-family）字体大小（font-size）
Easel.ly

Easel.ly 是现下非常流行的信息图制作软件之一，其具有界面简洁、操作简a便、图片精美等特点。用户只需要登录Easel.ly官方网站即可开始进行信息图制作。
Easel.ly信息图制作步骤：
第一步：选择模板
进入Easel.ly页面后，可以开始创建信息图，如下图所示，可以选择两种方法创建信息图：方法1：创建空白模版；2、选择一个已有模版，在其基础上进行制作，模版内的内容可以修改。目前Easel.ly官网上已经有数量超过2百万的模版，且可以通过选项进行筛选，推荐使用模版进行制作。
在这里插入图片描述
第二步：编辑内容
选好模版后便可以开始进行信息图的制作。下图展示的是Easel.ly的操作台，其展示了Easel.ly的所有功能，从左到右依次是：1、“Vhemes”模版选择；2、“Objects”添加元素；3、“backgrounds”选择背景；4、“shaps”添加线条；5、“text”添加文本；6、“charts”添加数据图表，可选直方图、曲线图、卫星图、雷达图、饼状图；7、“upload”上传图片。只要将元素拖到需要添加的地方便能完成元素的添加，过程十分简便。
在这里插入图片描述
第三步：导出图片
在运用Easel.ly制作出信息图后，便可以进行图片的导出：1、先点击操作台最右侧的“Present”；2、用鼠标右键点击完成的图片选择“图片另存为”，便可将制作的图片保存到本机。
详细过程请参考厦门大学数据库实验室制作教程：
《Easel.ly信息图制作实践》
http://dblab.xmu.edu.cn/blog/easel-ly_use/

ECharts

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

ECharts 提供了非常丰富的图表类型，常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭，满足用户绝大部分用户分析数据时的图表制作需求
Echarts开发环境
ECharts是一款可视化开发库，底层用的是javascript封装，所以可以在网页HTML中嵌入ECharts代码显示数据图表。在网页中嵌入ECharts步骤如下：
1.下载ECharts
2.HTML引入 ECharts

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</header>
</html>
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/183275