《終端數(shù)據(jù)可視化》課件-1 Web數(shù)據(jù)可視化概述

單元1Web數(shù)據(jù)可視化概述大數(shù)據(jù)可視化應(yīng)用開發(fā)項(xiàng)目式教程單元描述1.技術(shù)要求：（1）Web數(shù)據(jù)可視化的認(rèn)知；（2）Web數(shù)據(jù)可視化特點(diǎn)與典型應(yīng)用場景。2.能力要求：（1）在Web前端開發(fā)基礎(chǔ)上進(jìn)行深入持續(xù)學(xué)習(xí)的能力；（2）基于教材內(nèi)容自主、拓展學(xué)習(xí)能力。3.素養(yǎng)要求：（1）科學(xué)思維方式審視專業(yè)問題的能力。當(dāng)前，數(shù)字化技術(shù)滲透到企業(yè)生產(chǎn)鏈的各個(gè)環(huán)節(jié)時(shí)。實(shí)時(shí)采集生產(chǎn)過程中產(chǎn)生的數(shù)據(jù)，并對這些收集到的監(jiān)測數(shù)據(jù)進(jìn)行處理、分析，借助豐富的Web數(shù)據(jù)可視化技術(shù)呈現(xiàn)手段，將有利于生產(chǎn)決策者做出更加智慧的決策。1任務(wù)名稱任務(wù)目標(biāo)安排課時(shí)任務(wù)1.1Web數(shù)據(jù)可視化認(rèn)識(shí)Web數(shù)據(jù)可視化1任務(wù)1.2Web前端開發(fā)認(rèn)識(shí)Web前端開發(fā)現(xiàn)狀、痛點(diǎn)0.5任務(wù)1.3Web數(shù)據(jù)可視化應(yīng)用案例Web數(shù)據(jù)可視化典型應(yīng)用舉例0.5總計(jì)26任務(wù)分解2知識(shí)要點(diǎn)數(shù)據(jù)可視化Web數(shù)據(jù)可視化及方法Web數(shù)據(jù)可視化相關(guān)技術(shù)1.數(shù)據(jù)可視化一般而言，數(shù)據(jù)可視化技術(shù)是指綜合運(yùn)用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式通過終端展示出來，并進(jìn)行交互處理的理論、方法和技術(shù)。數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用，其本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是抽象數(shù)據(jù)的具象表達(dá)。在當(dāng)前大數(shù)據(jù)分析、顯示技術(shù)等軟硬件支持下，數(shù)據(jù)可視化特點(diǎn)包括：（1）交互性，用戶可以方便地以交互的方式呈現(xiàn)和管理數(shù)據(jù)。（2）多維性，用戶可以看到表示對象或事件的數(shù)據(jù)的多個(gè)屬性或變量，而數(shù)據(jù)可以按其每一維的值，將其分類、排序、組合和顯示。（3）可視性，數(shù)據(jù)可以用圖像、曲線、二維圖形、三維圖形和動(dòng)畫來顯示，并可對其模式和相互關(guān)系進(jìn)行可視化分析和呈現(xiàn)。2.Web數(shù)據(jù)可視化及方法Canvas是HTML5的一種組件，提供了一塊畫布，可以通過JavaScript代碼來進(jìn)行像素級(jí)操作，繪制出各種類型的圖表和動(dòng)畫。如下代碼所示，使用<canvas>標(biāo)簽定義了一個(gè)400*300大小的矩形框，在這個(gè)矩形框內(nèi)可以繪制相應(yīng)的圖表和動(dòng)畫：（1）Canvas<canvasid="canvas"width="400"height="300"></canvas>2.Web數(shù)據(jù)可視化及方法Canvas對不同的瀏覽器具有良好的兼容性支持，甚至有人嘗試在移動(dòng)瀏覽器上使用<canvas>來代替DOM展現(xiàn)元素。其中，DOM是文檔對象模型（DocumentObjectModel）的簡稱，它定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法，如圖1-2給出了HTMLDOM樹結(jié)構(gòu)。圖1-2HTMLDOM樹2.Web數(shù)據(jù)可視化及方法SVG是縮放矢量圖像（ScalableVectorGraphics）的簡稱，主要通過相關(guān)的各種標(biāo)簽來實(shí)現(xiàn)圖形的繪制。相當(dāng)于是用一種XML（eXtensibleMarkupLanguage）把圖形描述出來，它和Canvas的關(guān)系就像是圖形和圖像、幾何和美術(shù)、Illustrator和Photoshop的關(guān)系。SVG的優(yōu)點(diǎn)包括矢量，縮放后不會(huì)失真，能實(shí)現(xiàn)復(fù)雜的動(dòng)畫，支持事件，支持CSS包含DOM，比較直觀，方便調(diào)試等。典型產(chǎn)品包括D3.js（/）。（2）SVG2.Web數(shù)據(jù)可視化及方法WebGL（WebGraphicsLibrary）是一項(xiàng)在瀏覽器中實(shí)現(xiàn)3D畫面的技術(shù)。WebGL是一種3D繪圖協(xié)議，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGLES結(jié)合在一起，通過增加OpenGLES的一個(gè)JavaScript綁定，WebGL可以為HTML5Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器中更流暢地展示3D場景和模型，并且能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。（3）WebGL3.Web數(shù)據(jù)可視化相關(guān)技術(shù)ECharts是百度公司的一款免費(fèi)開源的數(shù)據(jù)可視化產(chǎn)品，向用戶提供直觀、生動(dòng)、可交互和可個(gè)性化定制的數(shù)據(jù)可視化圖表，能夠快速構(gòu)建基于Web的數(shù)據(jù)可視化任務(wù)。ECharts具備上手簡單、功能強(qiáng)大等典型優(yōu)點(diǎn)。（1）ECharts.js（2）Vue.js（3）D3.jsVue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，為目前國內(nèi)最火熱的前端框架之一，其簡單快捷、漸進(jìn)式的設(shè)計(jì)，對于新手特別友好。與其它典型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。D3是目前Web端評價(jià)非常高的JavaScript可視化工具庫。D3實(shí)例豐富，易于實(shí)現(xiàn)調(diào)試數(shù)據(jù)，同時(shí)能夠通過擴(kuò)展實(shí)現(xiàn)任何想到的數(shù)據(jù)可視化效果?？梢酝ㄟ^HTML、SVG和CSS展示數(shù)據(jù)，與jQuery類似，D3直接對DOM進(jìn)行操作。任務(wù)1.1認(rèn)識(shí)Web前端開發(fā)隨著IT企業(yè)滿足客戶對用戶體驗(yàn)的追求，Web前端人員的需求量越來越大，且對效率的要求越來越高。“用戶體驗(yàn)”典型地體現(xiàn)為系統(tǒng)的交互性、數(shù)據(jù)呈現(xiàn)方式、可視化效果等具體要求。值得說明的是，前端開發(fā)的學(xué)習(xí)并不僅僅強(qiáng)調(diào)知識(shí)點(diǎn)的掌握、技術(shù)的實(shí)現(xiàn)，更在于審美能力的積累和提升、細(xì)節(jié)的把握、以及尋找方案的更優(yōu)解。即使是最簡單的頁面布局，也存在層出不窮的優(yōu)秀解決方案。學(xué)生在解決實(shí)際問題的過程中除了借助便捷的工具，選擇高效的Web開發(fā)模式，以實(shí)現(xiàn)基本的要求為目標(biāo)，更應(yīng)該樹立工匠精神，力爭精益求精，追求極致的頁面效果。1.Web前端開發(fā)任務(wù)1.1認(rèn)識(shí)Web前端開發(fā)當(dāng)前，企業(yè)在前端開發(fā)框架的選擇上開始傾向采用MVVM（Model-View-ViewModel）模式，該模式可以拆分成：View--ViewModel--Model三部分，如圖1-2所示。2.本書做法圖1-3MVVM模式任務(wù)1.1認(rèn)識(shí)Web前端開發(fā)那么，怎么理解MVVM呢？圖1-3中，左側(cè)的View相當(dāng)于DOM內(nèi)容，對應(yīng)用戶所看到的頁面視圖。右側(cè)的Model相當(dāng)于數(shù)據(jù)對象，比如一個(gè)年齡為23歲，姓名為張三的對象信息可以表示為：而中間的監(jiān)控者就負(fù)責(zé)監(jiān)控兩側(cè)的數(shù)據(jù)，一側(cè)發(fā)生變化則會(huì)相對應(yīng)地通知另一側(cè)進(jìn)行修改。比如：在Model層中修改了name的值為：“李四”，那么View視圖層顯示的“張三”也會(huì)自動(dòng)變成了“李四”，而這個(gè)過程就是由ViewModel來操作的。{name:"張三",age:21,}任務(wù)1.1認(rèn)識(shí)Web前端開發(fā)相對于數(shù)據(jù)和文字，可視化圖表最能直觀表達(dá)數(shù)據(jù)的變化規(guī)律。例如，用戶展示特定幾款電動(dòng)汽車的銷售量，那么可以使用折線圖或者柱狀圖；展示銷售人員的服務(wù)水平，可以使用雷達(dá)圖來展示多個(gè)服務(wù)指標(biāo)的對比深度，諸如此類。數(shù)據(jù)可視化相關(guān)的理論的實(shí)踐操作，教材將會(huì)在第5單元給出。當(dāng)前互聯(lián)網(wǎng)開發(fā)者和企業(yè)開源了很多免費(fèi)而又優(yōu)秀成熟的可視化庫，包括百度的ECharts、螞蟻金服的AntV（/zh-cn/index.html）、以及來自國外的Chart.js（/）等。本教材選擇使用主流開源的數(shù)據(jù)可視化工具，完成基于Web的數(shù)據(jù)可視化呈現(xiàn)。本書的第6單元講解基于前端框架和可視化開源工具完成前端任務(wù)的制作。任務(wù)1.2Web數(shù)據(jù)可視化應(yīng)用案例制造業(yè)每天會(huì)產(chǎn)生大量的工業(yè)設(shè)備運(yùn)行數(shù)據(jù)，相關(guān)工業(yè)物聯(lián)網(wǎng)平臺(tái)已積累了企業(yè)用戶的基礎(chǔ)信息與設(shè)備運(yùn)行等數(shù)據(jù)?！肮I(yè)設(shè)備大數(shù)據(jù)分析與可視化平臺(tái)”對企業(yè)上云設(shè)備數(shù)據(jù)進(jìn)行挖掘，通過構(gòu)建和運(yùn)行相關(guān)指數(shù)模型，進(jìn)行指數(shù)預(yù)測分析，并將數(shù)據(jù)進(jìn)行可視化展示，如圖1-4所示。1.工業(yè)數(shù)據(jù)可視化圖1-4工業(yè)設(shè)備大數(shù)據(jù)分析與可視化平臺(tái)任務(wù)1.2Web數(shù)據(jù)可視化應(yīng)用案例“航空數(shù)據(jù)可視化平臺(tái)”實(shí)現(xiàn)從公開數(shù)據(jù)源上采集航班數(shù)據(jù)信息，從城市、機(jī)場、航線、航班、執(zhí)飛機(jī)型、準(zhǔn)點(diǎn)率等多種維度對航班數(shù)據(jù)進(jìn)行可視化展現(xiàn)。如圖1-5所示給出了平臺(tái)首頁，首頁通過3D動(dòng)畫動(dòng)態(tài)全景展現(xiàn)了全球部分國家的航線圖，科技感突出。2.航班數(shù)據(jù)可視化圖1-5航班數(shù)據(jù)可視化平臺(tái)首頁任務(wù)1.2Web數(shù)據(jù)可視化應(yīng)用案例如圖1-6、圖1-7所示分別展示了航班數(shù)據(jù)概覽、航線查詢統(tǒng)計(jì)主要頁面。圖1-6航班數(shù)據(jù)概覽頁面圖1-7航線查詢與統(tǒng)計(jì)頁面任務(wù)1.2Web數(shù)據(jù)可視化應(yīng)用案例如圖1-8所示的新能源汽車大數(shù)據(jù)可視化監(jiān)測平臺(tái)，該平臺(tái)實(shí)現(xiàn)了聯(lián)網(wǎng)車輛的運(yùn)營管理、故障診斷、統(tǒng)計(jì)分析等典型功能。本書后續(xù)案例將結(jié)合該應(yīng)用場景進(jìn)行展開。3.車輛監(jiān)控圖1-8新能源汽車大數(shù)據(jù)可視化監(jiān)測平臺(tái)一、簡答題1.簡述數(shù)據(jù)可視化與Web數(shù)據(jù)可視化的關(guān)系。2.簡述Web數(shù)據(jù)可視化在技術(shù)類別上的表現(xiàn)形式有哪些？3.簡述Web開發(fā)中的MVVM模型的工作原理是什么？4.簡述行業(yè)中使用數(shù)據(jù)大屏有什么典型效益？二、操作題課后練習(xí)3本單元簡要介紹了Web數(shù)據(jù)可視化、Web前端開發(fā)模式等相關(guān)知識(shí)，并給出了其在工業(yè)生產(chǎn)、智慧交通等不同領(lǐng)域的典型應(yīng)用案例。教材假定讀者已經(jīng)初步具備了HTML+CSS+JavaScript等Web前端開發(fā)的基礎(chǔ)知識(shí)，如果讀者尚存在欠缺，請查詢相關(guān)學(xué)習(xí)資料，進(jìn)行簡要補(bǔ)充即可。本章小節(jié)4PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerp