大数据可视化技术教学课件整本书电子教案全套教学教程电子教案.ppt

第第1章章 数据可视化概述数据可视化概述 1.1 数据可视化概述数据可视化概述数据可视化，指在是借助于图形化手段展示大数据分析结果，使数据清晰有效地表达，使人们快速高效的理解并使用，它集成了数据采集、统计、分析、呈现等多环节。1.1.1 数据可视化基本概念数据可视化基本概念1数据数据数据是对客观事物属性的一种符号化的表示。从数据处理的角度看，数据是计算机处理及数据库中存储的基本对象。2图形图形图形一般指在一个二维空间中的若干空间形状，可由计算机绘制的图形有直线、圆、曲线、图标以及各种组合形状等。3数据、图形与可视化数据、图形与可视化数据可视化可通过对真实数据的采集、清洗、预处理、分析等过程建立数据模型，并最终将数据转换为各种图形，以打造较好的视觉效果。1.1.2 数据可视化的类型数据可视化的类型1科学可视化科学可视化科学可视化是数据可视化中的一个应用领域，主要关注空间数据与三维现象的可视化，包含气象学、生物学、物理学、农学等，重点在于对客观事物的体、面及光源等的逼真渲染2信息可视化信息可视化信息可视化是一个跨学科领域，旨在研究大规模非数值型信息资源的视觉呈现（如软件系统之中众多的文件或者一行行的程序代码）。通过利用图形图像方面的技术与方法，帮助人们理解和分析数据。3可视化分析可视化分析可视化分析是科学可视化与信息可视化领域发展的产物，侧重于借助交互式的用户界面而进行对数据的分析与推理。可视化分析是一个多学科领域，它将新的计算和基于理论的工具与创新的交互技术和视觉表示相结合，以实现人类信息话语。1.1.3 数据可视化的标准数据可视化的标准 数据可视化的标准通常包含实用性、完整性、真数据可视化的标准通常包含实用性、完整性、真实性实性、艺术性以及交互性。、艺术性以及交互性。1实用性实用性衡量数据实用性的主要参照是要满足使用者的需求，需要清楚的这些数据了解是不是人们想要知道的、与他们切身相关的信息。2完整性完整性衡量数据完整性的重要指标是指该可视化的数据应当能够纳入所有能帮助使用者理解数据的信息。3真实性真实性可视化的真实性考量的是信息的准确度和是否有据可依。如果信息是能让人信服的、精确的，那么它的准确度就达标了4艺术性艺术性艺术性是指数据的可视化呈现应当具有艺术性，符合审美规则。5交互性交互性交互性是实现用户与数据的交互，方便用户控制数据。1.1.4 数据可视化与其它学科的关数据可视化与其它学科的关系系1数据可视化与图形学数据可视化与图形学计算机图形学是一门通过软件生成二维或三维图形的学科，它的主要研究内容就是研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。2.数据可视化与统计学数据可视化与统计学统计学中的统计图表是使用最早的可视化图形，大部分的统计图表都已应用在数据可视化中，如散点图、热力图等。3.数据可视化与数据库数据可视化与数据库数据库是按照数据结构来组织、存储和管理数据的仓库，它高效地实现数据的录入、查询、统计等功能。4.数据可视化与数据挖掘数据可视化与数据挖掘数据挖掘一般是指从大量的数据中通过算法搜索隐藏于其中信息的过程。1.1.5 数据可视化的常见形式1数据分析与可视化数据分析与可视化数据分析可视化广泛用于政府、企业经营分析，包括企业的财务分析、供应链分析、销售生产分析、客户关系分析等，将企业经营所产生的所有有价值数据集中在一个系统里集中体现，可用于商业智能、政府决策、公众服务、市场营销等领域。2趋势可视化趋势可视化趋势可视化是在特定环境中，对随时间推移而不断动作并变化的目标实体进行觉察、认知、理解，最终展示整体态势。3工业生产可视化工业生产可视化工业企业中生产线处于高速运转，由工业设备所产生、采集和处理的数据量远大于企业中计算机和人工产生的数据，生产线的高速运转则对数据的实时性要求也更高，在实际生产中对大数据的要求也极高。1.2 数据可视化的流程数据可视化的流程数据可视化是一个系统的流程，该流程以数据为基础，以数据流为导向，还包括了数据采集、数据预处理和变换、可视化映射和用户感知等环节。1.2.1 数据采集数据采集数据可视化的基础是数据，数据可以通过仪器采样、调查记录等方式进行采集。数据采集又称为“数据获取”或“数据收集”，是指对现实世界的信息进行采样，以便产生可供计算机处理的数据的过程。1.2.2 数据预处理和变换数据预处理和变换数据预处理和数据变换，是进行数据可视化的前提条件。原因有两点：有一方面，通过前期的数据采集得到的数据，不可避免的含有噪声和误差，数据质量较低；另一方面，数据的特征、模式往往隐藏在海量的数据中，需要进一步的数据挖掘才能提取出来。1.2.3 可视化映射可视化映射对数据进行清洗、去噪，并按照业务目的进行数据处理之后，接下来就到了可视化映射环节。可视化映射是整个数据可视化流程的核心，通常是指将处理后的数据信息映射成可视化元素的过程。可视化元素由3部分组成：可视化空间、标记以及视觉通道。1.3 数据可视化的应用数据可视化的应用可视化就其运用而言，范围极为广泛，如商业智能、政府决策、公共服务、市场营销、新闻传播、地理信息等等，均可运用。宏观态势可视化宏观态势可视化是在特定环境中对随时间推移而不断动作并变化的目标实体进行觉察、认知、理解，最终展示整体态势。卫星分布运行可视化通过将宇宙空间内所有卫星的运行数据进行可视化展示，大众可以一目了然宇宙空间的卫星态势。设备仿真运行可视化设备仿真运行可视化是通过图像、三维动画以及计算机程控技术与实体模型相融合，实现对设备的可视化表达设备仿真运行可视化是“工业4.0”涉及的“智能生产“的具体应用之一，特别是在智慧工厂中的应用尤为广泛。数据统计分析可视化此领域是目前媒体大众提及最多的应用，可用于商业智能、政府决策、公众服务、市场营销等领域。商业智能可视化系统对于提升组织决策的判断力、整合优化企业信息资源和服务、提高决策人员的工作效率等具有显著的意义。智能硬件数据可视化智能硬件是继智能手机之后的一个科技概念，通过软硬件结合的方式，让设备拥有智能化的功能。1.4 实训实训第第2章章 大数据可视化原理与方法大数据可视化原理与方法2.1 视觉通道视觉通道数据可视化为了达到增强人脑认知的目的，会利用不同的视觉通道对冰冷的数据进行视觉编码。2.1.1 视觉通道的原理视觉通道的原理1潜意识处理潜意识处理潜意识认为人类少数的视觉属性可以通过潜意识瞬间完成分析判断，换言之，不需要集中注意力即可以完成信息的处理。2格式塔视觉原理格式塔视觉原理格式塔视觉原理认为距离相近的部位(相近性)、在某一方面相似的部位(相似性)、彼此相属倾向于构成封闭实体的部位(封闭性)、具有对称规则平滑等具有简单特征的图形(简单性)在一起时会被人们认为成一个整体。2.1.2 视觉通道的类型视觉通道的类型人类对视觉通道的识别有两种基本的感知模式。1空间空间空间是所有放置可视化元素的容器，可视化中涉及的空间可以是一维、二维或是三维。2标记标记标记，是数据属性到可视化几何图形元素的映射，用来代表数据属性的归类。标记定义用来映射数据的几何单元，例如点、线、面以及立方体等。3位置位置平面位置在所有的视觉通道中比较特殊，一方面，平面上相互接近的对象会被分成一类，所以位置可以用来表示不同的分类；另一方面，平面使用坐标来标定对象的属性大小时，位置可以代表对象的属性值大小，即平面位置可以映射定序或者定量的数据。4尺寸尺寸尺寸是定量或者定序的视觉通道，适合于映射有序的数据属性。长度也可以被称之为一维尺寸5颜色颜色在常见的视觉通道中颜色最为复杂，不过因此也在可视化设计中最为有用。6透明度透明度透明度与颜色密切相关，通常也可作为颜色第四个维度，取值范围在0-1之间7亮度亮度亮度是表示人眼对发光体或被照射物体表面的发光或反射光强度实际感受的物理量。8饱和度饱和度饱和度指得是色彩的纯度，也叫色度或彩度，是“色彩三属性”之一。如大红就比玫红更红，这就是说大红的色度要高。9色调色调色调是指图像的相对明暗程度，比较适合于编码分类的数据属性10方向方向方向可用于分类的或有序的数据属性的映射，标记的方向可用于表示数据中的向量信息11形状形状对于人类的感知系统，形状所代表含义很广，一般理解为对象的轮廓，或者对事物外形的抽象，用来定性描述一个东西12图案图案/纹理纹理图案也被称为纹理，大致可以被分为自然纹理、人工纹理。2.2 可视化图可视化图1折线图折线图折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。2柱状图柱状图柱状图也可叫作条形图，是使用垂直或水平的柱子显示类别之间的数值比较。在柱状图中其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。3饼图饼图饼图用于表示不同分类的占比情况，通过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于100%4面积图面积图面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。5散点图散点图散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。6气泡图气泡图气泡图是一种多变量图表，是散点图的变体，可用于展示三个变量之间的关系，也可以认为是散点图和百分比区域图的组合。7雷达图雷达图雷达又叫戴布拉图、蜘蛛网图。传统的雷达图被认为是一种表现多维（4维以上）数据的图表。8漏斗图漏斗图漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策9热力图热力图热力图以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示，一般来讲热力图可以显示不可点击区域发生的事情。10环形图环形图环形图是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形，主要是在制作Excel中区分或表明某种关系。11仪表盘图仪表盘图仪表盘图是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。12箱型图箱型图箱形图又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。13玫瑰图玫瑰图玫瑰图也叫做南丁格尔玫瑰图，又名极坐标面积图。玫瑰图和饼图类似，用法也一样，主要适用于多组对比数据的场景中。14桑基图桑基图桑基图也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。2.2.2 可视化图的选择可视化图的选择1柱状图的使用柱状图的使用柱状图利用柱子的高度，能够比较清晰的反映数据的差异，通常用于不同时期或不同类别数据之间的比较，也可以用来反映不同时期和不同数据的差异。2折线图的的使用折线图的的使用折线图是数据随着时间推移而发生变化的一种图表，可以预测未来的发展趋势，相对柱状图，折线图能反映较大数据集的走势，还适合多个数据集走势的比较3散点图的使用散点图的使用散点图使用两组数据构成多个坐标点，分析坐标点的分布情况，判断两个变量之间的关联或分布趋势。4饼图的使用饼图的使用饼图主要用来分析内部各个组成部分对事件的影响，其各部分百分比之和必须是100%。在需要描述某一部分占总体的百分比时，适合使用饼图。5漏斗图的使用漏斗图的使用使用漏斗图可以清晰明了的看出每个层级的转化，如果想查看具体到每天的日期与实施转化数据的关系，则可以使用漏斗图。【例2-1】使用折线图反映空气指数近3个月的变化趋势。【案例分析】要反映几个月以来的空气指数变化趋势，需要用到时间轴，因此使用折线图是较好的选择。通过折线图的展示既可以让时间轴不拥挤，又可以友好的呈现相关数据。使用折线图图描述近3个月的空气指数变化趋势如图2-17所示。【例2-2】使用饼图反映某网站个浏览器访问占比。【案例分析】要反映某网站个浏览器访问占比，较好的方法是使用饼图，该图利用饼图的每个分区来阐释不同的数据比例，如图2-18所示。【例2-3】使用柱状图反映商业竞争对手数量。【案例分析】要直观反映某变量的统计数量，较好的方法是使用柱状图，不过柱状图的绘制需要一些技巧。图2-19绘制的柱状图较为简单，图2-20进行了一些修改，将纵坐标轴的最小值调整为0，并且在每个数据条中添加了对应的数据标签，最后依据不同的数据值对数据条进行了排序【例2-4】使用柱状图反映不同学生的考试分数。【案例分析】要直观对比不同变量的数据值，比较简单的方法是使用柱状图。如可以通过多个柱状图来展示学生的考试分数，并用不同的颜色来表示不同的变量数值2.2.4 可视化图的使用技巧可视化图的使用技巧1明确业务指标明确业务指标当我们拿到业务需求后，首先就是要确认需求，梳理有疑问的地方，及时与产品经理沟通。在沟通这一步中，着重考虑3个指标：主要指标、次要指标、辅助指标。2选择合适的数据选择合适的数据可视化设计需要解决的关键问题是设计者如何选择最合适的数据以便进行可视化的展示。3交互设计交互设计数据可视化系统中除了视觉呈现部分，另一个核心要素是人机交互。交互技术是用户与信息系统之间的信息交流方法。图2-23显示了一个邮件联系人关联图。该图中人员非常多，因此用户可以通过交互（鼠标选中节点）来了解的邮件联系人（节点），以便进一步研究。图2-24显示了在EChart中的用户交互设计，用户可以使用鼠标点击感兴趣的区域来显示不同的内容。2.3 数据可视化常见方法数据可视化常见方法2.3.1 文本可视化文本可视化文本可视化是指将文本中复杂的或者难以通过文字表达的内容和规律以视觉符号的形式表达出来，同时向人们提供与视觉信息进行快速交互的功能文本可视化涵盖了信息收集、数据预处理、知识表示、可视化呈现和用户认知等过程。词云，又称为标签云或是文本云，是一种典型的文本可视化技术。词云对文本中出现频率较高的“关键词”予以视觉上的突出。目前，要想制作词云，有两种方法。一种方法是登录在线词云制作网站，制作在线词云，如易词云，网址：http:/ 社交网络可视化社交网络可视化社交网络可视化通常是展示数据在网络中的关联关系，一般用于描绘互相连接的实体。社交网络是一种复杂网络，单纯的研究网络中的节点或计算网络中的统计信息并不能完全揭示网络中的潜在关系。因此，对于社交网络来说最直观的可视化方式是网络结构。在Python3中可以制作社交网络图，在制作时需先导入networkx库，该库是一个用Python语言开发的图论与复杂网络建模工具，内置了常用的图与复杂网络分析算法，可以方便的进行复杂网络数据分析、仿真建模等工作。使用networkx库绘制网络图时，常用node表示节点，cycle表示环（通常环是封闭的），edges表示边。2.3.3 日志数据可视化日志数据可视化日志数据是一种记录所观察的对象的行为数据。例如电子商务平台每天都会产生大量的日志数据。在人们的工作和生活中存在着很多的日志数据：网站服务器记录的该服务器下所有的活动行为，如用户的IP地址，用户的访问记录，用户的点击量等日志数据记录着对象随着时序的不断变化的特征信息，因此对日志数据进行分析能够有效地挖掘对象的行为特征。但是，由于日志数据存储量极大，因此一般要进行可视化才能呈现日志数据中隐藏的大量不易于被人们直接发觉的各种信息。2.3.4 地理空间信息可视化地理空间信息可视化据不完全统计，人们所接触的数据中有80%与地理空间位置相关。在大数据时代也不例外，甚至占比还在加大。1地理空间可视化概述地理空间可视化概述地理空间信息可视化是以可视化的方式显示输出空间信息，通过视觉传输和空间认知活动，去探索空间事物的分布及其相互关系，以获取有用的知识，并进而发现规律。地图投影是利用一定数学法则把地球表面的经、纬线转换到平面上的理论和方法。空间信息可视化建模与传统可视化建模的最大区别是，用户可以在自己的地理空间中交互，从而获取不同层面的信息。在空间信息可视化的实现中经常要使用到3D图形，3D图形可以让空间信息的展现变得真实。2.4 实训实训第第3章章 Excel数据可视化数据可视化3.1 Excel函数与图表函数与图表Excel是微软Office办公系统中的一个软件，也是一般办公中数据处理和显示的常用软件。可以使用Excel创建工作簿文件，在每个工作簿中可以创建若干工作表。3.1.1 Excel简介简介信息、数据、数据库、数据库管理系统、数据库系统是与数据库技术密切相关的基本概念，数据库主要用来存储数据。在不使用数据库的情况下，Excel是一般数据存储和处理的有效工具。Excel在制作表格时候可以对单元格样式进行自定义设定，也可以使用各种系统设定好的表格样式，或通过条件格式根据数据取值自动设定相关样式。如图3-2所示。图3-2Excel表格样式的设置2图表的绘制图表的绘制图表可以帮助我们更好的理解数据中包含的信息，Excel中有大量自带的图表模板，其中常用的有散点图、条形图、折线图、饼图、面积图、股价图、雷达图等。3公式和函数应用公式和函数应用在Excel单元格中输入等于号（=）后，即可输入相关计算公式完成计算。也可以采用系统提供的函数进行数据计算和处理。4数据分析数据分析Excel能对数据进行分析。我们可以使用数据分析函数以及筛选、高级筛选、分类汇总和数据透视表等功能完成基本的数据分析。3.1.2 Excel函数函数在Excel中，函数实际上是一个预先定义的特定计算公式。按照这个特定的计算公式对一个或多个参数进行计算，并得出一个或多个计算结果即函数值。【例3-1】根据不同部门的提成系数对员工销售表按部门填充相应提成系数。如图3-7所示。在该示例任务中，可以使用MATCH函数匹配员工表中的部门和提成系数表中的部门，从而得到其索引位置，再通过index函数取得提成系数中相应索引的值。3.1.3 Excel函数图表函数图表在Excel中可以直接通过函数实现简易图表显示。较常用的函数为REPT函数。REPT函数的作用是将文本重复一定次数。1制作横向条形图制作横向条形图在部门员工数据表中计算出每个员工的提成，在图形列中输入公式使用REPT函数显示横向条形图。2制作柱形图制作柱形图首先将数据横向放置（即通过选取姓名列和提成列进行复制，通过在选择性粘选中数值和转置），然后在数据上方的单元格中输入公式：=REPT(|,B12/20)3制作蝴蝶图制作蝴蝶图蝴蝶图是一种特殊类型的条形图，可以很直观的比较两组数据的不同之处。在条件格式中可以自定义显示规则3.2 Excel数据源数据源Excel可以进行数据的处理分析和图表展示，其处理的数据可以是Excel工作簿工作表已有的数据，也可以是存储在外部数据源（如文本文件、数据库或联机分析处理（OLAP）多维数据集）中的数据。3.2.1 外部导入数据外部导入数据在Excel中选择数据选项卡，如图3-14所示。可以看到Excel可以从Access、网页、文本文件、CSV文件、XML文件、其他工作簿以及SQLServer、MySQL或其他ODBC连接等等各种来源中导入数据。1导入导入Access数据库中的数据数据库中的数据2导入导入Web数据数据需要导入网站Web在线表格，可以在选项卡中点击“自Web”按钮，打开如下图“新建Web查询”窗口，在地址栏中输入含有表格的页面地址，点击“转到”按钮进行访问在上图中点击“导入”按钮后，Web中的相关表格数据将被导入到Excel中3文本数据导入文本数据导入（1）如需从文本文件导入数据可以选择“自文本”按钮，然后通过文本导入向导完成数据导入。（2）选择文本文件中数据使用的具体分隔符号，系统将根据选择的符号对源数据进行拆分（3）设置相关列的数据格式。在对话窗下方的数据预览中可以单击相应的数据列，在对话框上方对该列的数据格式进行简单的设定，一般采用默认值即可4导入导入MySQL数据库数据数据库数据如果需要导入MySQl数据库中的数据，可以通过ODBC连接完成。3.2.2 随机产生数据随机产生数据在Excel做数据分析和处理时经常需要用到大量随机数据，我们可以通过rand函数等按要求自动生成。1rand函数函数RAND函数没有参数，函数返回一个大于等于0且小于1的随机实数。每次计算工作表时都会返回一个新的随机实数，生成一个a,b中间的实数可以使用公式：=RAND()*(b-a)+a。2RANDBETWEEN函数函数RANDBETWEEN函数用于返回位于两个指定数之间的一个随机整数。如公式：=RANDBETWEEN(1,100)得到介于1到100之间的一个随机整数。3.NORM.INV 函数函数该函数返回指定平均值和标准偏差的正态累积分布函数的反函数值。其语法格式为：NORM.INV(probability,mean,standard_dev)4.随机数发生器随机数发生器Excel里面自带的数据分析工具可以完成专业统计软件有的数据分析工作，包括：描述统计、相关系数、傅利叶分析、指数平滑、回归、抽样等。在该工具中也包含了一个随机数发生器以及后面要用到的直方图工具。3.3 Excel可视化应用可视化应用Excel中提供的图表很多，包含10多种基础图表及其变化样式，也可以根据可视化展示需要自由组合图表。3.3.1 直方图直方图直方图又称频率分布图，是一种显示数据分布情况的柱形图，即不同数据出现的频率。通过这些高度不同的柱形，可以直观、快速地观察数据的分散程度和中心趋势，从而分析流程满足客户需求的程度。3.3.2 折线图折线图折线图一般是按时间进程或类别显示趋势，如图3-40所示。3.3.3 饼图饼图饼图通常用来显示部分占总体的比例。饼图是用扇形面积，也就是圆心角的度数来表示数量。3.3.4 散点图散点图散点图既能用来呈现数据点的分布，表现两个元素的相关性，如果变量之间不存在相互关系，那么在散点图上就会表现为随机分布的离散的点。3.3.5 漏斗图漏斗图漏斗图主要用来显示多个阶段的数据变化的逻辑过程。例如使用漏斗图来显示招员工聘中每个阶段的合格人数变化情况。3.3.6 其他图表其他图表1.雷达图雷达图雷达图又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。2、瀑布图、瀑布图瀑布图使数据呈现阶梯状效果形似瀑布，采用绝对值与相对值结合的方式，常用来反映数个特定数值之间的数量变化关系。3.4 Excel可视化综合实例可视化综合实例根据店铺好评率，制作完成店铺的星级评定，总数为5颗星。3.5 实训实训第4章 HTML5前端可视化4.1 HTML5可视化概述随着科学技术的不断发展，海量数据的出现加快了数据可视化技术的发展，很多平台提供了实现数据可视化的技术。对于基于Web的应用，包含了SVG和Canvas的HTML5提供了新的数据可视化技术。4.1.1 HTML5可视化相关技术简可视化相关技术简介介1HTML5HTML5是HTML的最新版本，它实际上是一个包含了HTML，CSS，Javascript在内的等多种技术的组合2CSSCSS（层叠样式表）主要用来展现HTML网页的文档样式，在制作HTML5网页时CSS样式表是不可缺少的。3JvascriptJavascript是一种高级编程语言，通过解释执行。它是一门动态类型，面向对象（基于原型）的直译语言4.1.2 HTML5介绍及使用介绍及使用与HTML4相比，HTML5强化了网页的表现功能，增加了许多新功能对网页中的音频，并对视频，动画等标签有了更多的支持。因此，使用HTML5可以更好地开发移动网页。1HTML5简介简介HTML5标记的书写和HTML之前的语法基本一致，只不过在书写中要注意以下几点：标签的书写大小写都可以。标签要正确地封闭。如果需要显示中文,须设置编码格式。属性的双引号可选。：页面标题区域，用于表示区域内的个体标题，可用在整个文档中，也可以在局部使用。：页面导航区域，专门放置网页中菜单导航和链接导航的区域。与：页面主内容区域，网页中的主要内容部分，用于放置网页的主要内容，也可以嵌套放置其它标记。：页面侧内容区域，与section相似，也用于放置网页内容。：页面页脚区域，网页最底部的区域，用于放置作者信息、用户导航、联系方式以及广告插入等内容。【例4-1】制作HTML5标签的网页。我的网页第一个标题第一个段落。第二个段落。4.1.3 CSS介绍及使用介绍及使用CSS（层叠样式表）主要用来展现HTML网页的文档样式，在制作HTML5网页时CSS样式表是不可缺少的。样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。2CSS的分类的分类样式表一般分为两种：外部样式表和内部样式表。【例4-3】在HTML5网页中增加CSS内部样式表。h1color:blue;text-align:center;采用了h1样式的效果4.1.4 Javascript介绍及使用介绍及使用Javascript是由Netscape公司开发的一种脚本语言（scriptinglanguage），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。【例4-4】在HTML5网页中增加JavaScript。javascriptJavaScript能够直接写入HTML输出流中：document.write(这是一个标题);document.write(这是一个段落。);向文档写入HTML表达式或JavaScript代码【例4-5】在HTML5网页中制作警告框。functionmyFunction()alert(你好，我是一个警告框！);4.2 HTML5绘图绘图在HTML5中引入了Canvas画布的概念，用户可以通过使用Canvas画布和SVG技术实现在网页中二维图形的绘制。4.2.1 Canvas绘图绘图Canvas（画布）是HTML5中的一大特色，它是一种全新的HTML元素。【例4-7】制作画布实例。您的浏览器不支持canvas，建议使用最新版的Chromevarc=document.getElementById(myCanvas);varctx=c.getContext(2d);/获取该canvas的2D绘图环境对象ctx.fillRect(10,10,50,50);/从画布上的(10,10)坐标点为起始点，绘制一个宽高均为50px的实心矩形ctx.strokeRect(10,70,50,50);/从画布上的(70,10)坐标点为起始点，绘制一个宽高均为50px的描边矩形2Canvas绘制线条绘制线条在canvas的图形绘制中也可以通过绘制直线的方式来完成。在Canvas上画线一般使用以下两种方法：（1）moveTomoveTo方法是把鼠标移动到指定坐标点，在绘制直线时以该点作为起点。常见语法如下：moveTo(x,y)定义线条开始坐标，x表示横坐标，y表示纵坐标。（2）lineTolineTo方法是在moveTo方法中指定的起点与参数中指定的终点之间绘制一条直线。常见语法如下：lineTo(x,y)定义线条结束坐标，x表示横坐标，y表示纵坐标。在完成直线的绘制后，光标会自动移动到lineTo方法指定的直线终点。【例4-9】在画布中绘制直线。画布您的浏览器不支持HTML5canvas标签。varc=document.getElementById(myCanvas);varctx=c.getContext(2d);ctx.moveTo(0,0);ctx.lineTo(100,100);ctx.stroke();3Canvas绘制圆绘制圆在HTML5中，使用Canvas绘制圆及圆弧常见语法如下：arc(x,y,radius,startRad,endRad,anticlockwise)，arc用于绘制一个以（x，y）为圆心，radius为半径，startRad为起始弧度，endRad为结束弧度的圆弧。在这里以anticlockwise来表示该圆弧是顺时针还是逆时针，如果为true表示为逆时针，false则表示为顺时针。【例4-10】在画布中绘制圆。您的浏览器不支持canvas，建议使用最新版的Chromevarc=document.getElementById(myCanvas);/找到画布varctx=c.getContext(2d);/获取该canvas的2D绘图环境对象ctx.beginPath();ctx.arc(100,75,50,0,2*Math.PI);ctx.stroke();使用Canvas绘制曲线的方法也可以同时绘制多个圆及圆弧。绘制圆弧常见方法如下：P*Math.PI，其中参数0P2，Math.PI表示常量。4.2.2 SVG绘图绘图1SVG简介简介在绘制图形中，SVG严格遵循XML语法，用文本格式的方式来描述图像信息，作为一个开放的标准，SVG在互联网中有着极大的市场潜力。SVG绘制图形语法如下：2SVG绘图实例绘图实例（1）SVG绘制线条。在SVG中线条是最简单的绘图形状。创建线条常用语法如下：linex1y1x2y24.3 HTML5绘图综合实例绘图综合实例【例4-15】在HTML5实现数据可视化。4.4 实训实训第第5章章 Tableau数据可视数据可视化化5.1 Tableau安装与使用安装与使用Tableau是一个数据可视化工具，Tableau具有许多优秀的和独特的功能，是强大的数据发现和探索应用程序。Tableau为商业收费软件，目前TableauDesktop最新版本为2020年7月发布的2020.2.4版本（为从2020年2月第一次更新开始的第四次更新版本）。Tableau系列的软件可以14天免费使用，符合相关条件也可以申请免费的教学版或学生版。2Tableau软件产品（1）TableauPublic（2）TableauDesktop（3）TableauServer（4）TableauPrep（5）TableauOnline（6）TableauMobile5.1.3 Tableau使用界面使用界面1、数据源编辑界面（2）数据源编辑界面左侧为工作表清单区域2、工作表界面、工作表界面工作表（worksheet）：又称视图，是可视化分析的基本单元。一个工作表包含单个视图以及其侧栏中的功能区、卡、图例以及“数据”和“分析”窗格。3、仪表板（、仪表板（dashboard）仪表板是若干视图的集合，可以同时比较各种数据。仪表板是多个工作表和一些对象（如：图像、文本、网页和空白等）的组合4、故事（、故事（story）故事是一系列共同作用以传达信息的虚拟化项，是按顺序排列的工作表或仪表板的集合，可以创建故事以讲述数据5.1.4 Tableau文件管理文件管理可以使用多种不同的Tableau文件类型，如工作簿、打包工作簿、数据提取、数据源和书签等,来保存和共享工作成果和数据源。5.2 Tableau可视化实例可视化实例与各类数据源建立连接关系，是使用Tableau进行数据分析的第一步。可以定位数据并使用适当类型的连接来读取数据。数据源是数据与Tableau之间的链接。它本质上是数据、连接信息、包含数据的表或工作表的名称，以及自定义项的总称。Tableau数据源可能包含与不同数据库或文件的多个数据连接。5.2.1 Tableau数据导入数据导入Tableau可以连接到广泛使用的所有常用数据源，其中包括本地数据文件、服务器数据和已保存的数据源。【例5.1】Tableau使用Excel工作簿文件。【例5.2】Tableau连接使用MySQL数据源。5.2.2 Tableau绘制图形绘制图形在工作表窗格中可以完成数据图表的绘制，双击或拖动维度或度量数据将其从“数据”窗格添加到右侧视图中即可，可以根据需要向视图的不同区域添加任意数量的字段。每个视图由放在“行”和“列”功能区以及标记卡中不同属性上的维度和度量字段组成。一般维度是描述性数据，度量是数值数据，维度和度量在需要的时候也可以相互转换。在超市示例数据源中维度选择地区和发货日期，度量选择销售额。将字段拖放至右侧视图中，选择图表类型，结果显示不同地区在不同日期的销售额。如图5-25所示的突出显示表。【例5.3】使用示例-超市数据源显示不同省市销售额对比条形图。【例5.4】使用示例-超市数据源利用地图显示各省市自治区销售情况。【例5.5】制作各地销售额的词云图。【例5.6】根据超市销售情况制作产品热力图。5.2.3 Tableau仪表板仪表板Tableau仪表板是若干视图的集合能同时比较多组数据。仪表板可以合并显示许多工作表和相关信息。不同的数据视图一次显示，可以同时比较和监视各种数据。5.3 Tableau可视化综合实例可视化综合实例1使用“示例-超市”数据源完成不同产品销售额瀑布图制作。5.4 实训实训第第6章章 Echarts数据可视化数据可视化6.1 Echarts概述概述ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，并能够兼容当前绝大部分浏览器。在功能上，ECharts可以提供直观、交互丰富，可高度个性化定制的数据可视化图表。2使用使用ECharts下载到本地的ECharts文件是个名为echarts.min的Script文件，在编写网页文档时将该文件放入HTML页面中即可制作各种ECharts开源图表6.1.2 ECharts实例实例ECharts是基于HTML页面的可视化图表，在使用ECharts前首先要了解HTML的网页制作与实现方式。2ECharts实现实现使用ECharts制作图表步骤如下：新建HTML页面，一般为HTML5页面。在HTML页面头部中导入js文件，之间。在HTML页面正文中用JavaScript代码实现图表显示，之间。（1）引入ECharts：ECharts（2）准备容器：（3）初始化实例：varmyChart=echarts.init(document.getElementById(main);（4）指定图表的配置项和数据varoption=title:text:EChars实例,/提示框组件tooltip:/坐标轴触发，主要用于柱状图，折线图等trigger:axis,/图例legend:data:销量,/横轴xAxis:data:衬衫,短袖,短裤,大衣,高跟鞋,帽子,/纵轴yAxis:,/系列列表，每个系列通过type决定不同的图表类型series:name:销量,/折线图type:line,data:5,20,40,10,10,30;（5）显示图表myChart.setOption(option);值得注意的是：在显示图表的时候，可以使用语句myChart.setOption(option)来实现；也可以这样书写：myChart.setOption（）（1）标题居中/left的值为left,center,righttitle:left:center（2）主副标题间的间距title:/默认为10itemGap:20（3）标题文本样式title:text:标题文本,textStyle:/文字颜色color:#ccc,/字体风格,normal,italic,obliquefontStyle:normal,/字体粗细normal,bold,bolder,lighter,100|200|300|400.fontWeight:bold,/字体系列fontFamily:sans-serif/字体大小fontSize:18（4）副标题title:subtext:副标题,/副标题文本样式subtextStyle:6.2 Echarts图表介绍图表介绍6.2.1 ECharts绘制各种图表绘制各种图表1柱状图柱状图EChartsvarmyChart=echarts.init(document.getElementById(main);varoption=title:text:ECharts柱状图实例,tooltip:,legend:data:考试分数,xAxis:data:计算