《終端數(shù)據(jù)可視化》課件-5 數(shù)據(jù)可視化設計基礎

單元5數(shù)據(jù)可視化設計基礎大數(shù)據(jù)可視化應用開發(fā)項目式教程單元描述1.技術要求：（1）利用ECharts制作圖表;（2）利用D3制作圖表。2.能力要求：（1）能合理分析和選用采集的數(shù)據(jù)；（2）能根據(jù)需求選擇合適的圖表；（3）能根據(jù)Web頁面匹配圖表風格；（4）能根據(jù)需求優(yōu)化圖表。3.素養(yǎng)要求：（1）具有良好的與人溝通的能力和分析力；（2）具有一定的美感和藝術設計素質；（3）具有精益求精的工匠精神。數(shù)據(jù)可視化旨在借助于圖形化手段，清晰有效地傳達與溝通信息。為了有效地傳達思想概念，需要將外觀與功能齊頭并進，直觀地傳達關鍵的方面與特征，從而實現(xiàn)對于相對稀疏而又復雜的數(shù)據(jù)集的深入洞察。那么怎么把數(shù)據(jù)可視化做得美觀、直觀、有價值呢？這離不開數(shù)據(jù)可視化設計。本項目旨在掌握基礎的ECharts和D3制作圖表的方法，能制作出“研發(fā)與維修”模塊中實時監(jiān)測頁面和統(tǒng)計分析頁面中各種類型的圖表，使圖表呈現(xiàn)的內容便于使用者識讀，呈現(xiàn)的效果與整體頁面風格一致。1任務名稱任務目標安排課時任務5.1認識數(shù)據(jù)可視化掌握數(shù)據(jù)可視化的設計流程2任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化掌握用ECharts實現(xiàn)常用圖表的方法6任務5.3使用D3完成車輛實時監(jiān)控可視化掌握用D3.js實現(xiàn)常用圖表的方法4總計12任務分解2知識要點有效可視化創(chuàng)建步驟及常用工具ECharts基礎D3基礎1.有效可視化創(chuàng)建步驟及常用工具要在海量的數(shù)據(jù)中抓取出有用的信息越來越困難，而通過可視化可以對信息進行總結，把信息組織起來，幫助用戶識別所分析的數(shù)據(jù)中的一種模式或趨勢，把注意力集中于關鍵點。通常可以按明確問題、選取數(shù)據(jù)、匹配圖表、確定風格、優(yōu)化圖表、檢查測試6個關鍵步驟來創(chuàng)建有效的信息可視化，如圖5-2所示。（1）創(chuàng)建有效可視化的步驟明確問題選取數(shù)據(jù)匹配圖表確定風格優(yōu)化圖表檢查測試圖5-2創(chuàng)建有效可視化步驟明確問題是要明確通過這個圖表可以幫助用戶獲取到哪些幫助。清晰的問題可以避免把不相干的事物一起放在圖表中進行比較，從而引人困惑。為創(chuàng)建可視化而提出的問題應盡可能以數(shù)據(jù)為中心?？梢砸浴霸谀睦铩?、“什么時間”、“有多少”、“有多頻繁”等來進行開頭，它們使用戶專注于在特定的參數(shù)集合內查找數(shù)據(jù)，因此更有可能找到適用于可視化的數(shù)據(jù)。以車輛監(jiān)控為例，可以提出如某車在某個時間段的車速信息、某車在某個時間段的電流/電壓變化趨勢、某車實時的轉速/車速/總里程數(shù)等需求。（2）明確問題1.有效可視化創(chuàng)建步驟及常用工具明確要用圖表回答哪些問題后，就需要選取合適的數(shù)據(jù)。而想要清楚地展現(xiàn)數(shù)據(jù)，就要充分了解數(shù)據(jù)庫以及每個變量的含義。在車輛監(jiān)控中，需要展示車輛的相關信息，包括總電流/電壓、荷電狀態(tài)、車輛速度、加速踏板、自動踏板、檔位等相關信息，查看的視角主要用宏觀和關聯(lián)。如要查看某車在某個時間段的車速信息，可以選取車架號、車速和采集時間3個字段。（3）選取數(shù)據(jù)1.有效可視化創(chuàng)建步驟及常用工具確定可視化項目的目標和數(shù)據(jù)后，下一步是建立一個基本的圖形。它可能是餅圖、線圖、流程圖、散點圖、雷達圖、地圖、網(wǎng)絡圖等等，取決于手頭的數(shù)據(jù)是什么樣子。人們接觸的數(shù)據(jù)，通常包含5種相關關系：構成、比較、趨勢、分布及聯(lián)系。不同類型的數(shù)據(jù)各自有其最適合的圖表類型，如圖5-3所示。（4）匹配圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-3圖表建議-思維指南（4）匹配圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-4新增故障比例統(tǒng)計圖5-6車輛速度圖5-7加速踏板圖5-9全國銷售情況圖5-10電池單體代號圖5-11儀表圖其他趨勢聯(lián)系分布比較構成這里的風格是指圖表的整體風格要與網(wǎng)站一致，包括配色、字體、交互性、等因素。網(wǎng)頁設計中的色彩都是經(jīng)過精心選擇的，即使是簡單的黑白效果也有著諸多講究，色彩的運用將會對于用戶的視覺體驗產(chǎn)生不可忽視的影響。每一種色彩都有其對應的心理聯(lián)系。而且色彩本身也有其自己的吸引力層次。色彩可以增強用戶的視覺體驗，通過不同色彩之間的對比可以來制造反差。將兩種對比強烈的色彩組合在一起能夠比互補型色彩組合更惹人注目。因此掌握一些最基本的色彩搭配方法，然后靈活運用，并多多學習和借鑒就可以搭配出色彩豐富的圖表效果了。（5）確定風格1.有效可視化創(chuàng)建步驟及常用工具優(yōu)化圖表包括調整圖表各維度的值、添加或修改圖表中的解釋信息，比如圖例、數(shù)據(jù)標簽等，使圖表更“可視”。（6）優(yōu)化圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-12餅圖表現(xiàn)方式比較圖5-13面積圖表現(xiàn)方式比較圖5-14散點圖表現(xiàn)方式比較優(yōu)化圖表包括調整圖表各維度的值、添加或修改圖表中的解釋信息，比如圖例、數(shù)據(jù)標簽等，使圖表更“可視”。（6）優(yōu)化圖表1.有效可視化創(chuàng)建步驟及常用工具圖5-15柱狀表現(xiàn)方式比較圖5-16同類數(shù)據(jù)歸類效果圖5-17誤導用戶的圖表ECharts簡介ECharts，一個使用JavaScript實現(xiàn)的開源可視化庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的矢量圖形庫ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。D3簡介D3的全稱是（Data-DrivenDocuments），顧名思義是一個被數(shù)據(jù)驅動的文檔，即一個JavaScript的函數(shù)庫，使用它主要是用來做數(shù)據(jù)可視化的。D3可以將任意數(shù)據(jù)綁定至文檔對象模型（DOM），然后基于數(shù)據(jù)驅動原理操作文檔的生成。HighCharts簡介Highcharts是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在Web網(wǎng)站或是Web應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網(wǎng)站和非商業(yè)用途使用。（7）常用可視化工具1.有效可視化創(chuàng)建步驟及常用工具2.ECharts基礎①從官網(wǎng)下載界面（/download.html）；②在ECharts的GitHub（/apache/incubator-echarts）上下載最新release版本；③通過npm獲取Echarts，npminstallecharts–save；④CDN引入，在cdnjs（/libraries/echarts）、npmcdn（/echarts@latest/dist/）或者國內的bootcdn（/echarts/）上找到ECharts的最新版本。（1）獲取ECharts要制作一個ECharts的圖表的基本步驟包括：獲取ECharts庫→引入ECharts庫→準備一個具備高度的DOM容器→通過echarts.init方法初始化一個ECharts實例→通過setOption方法生成圖表，具體如圖5-20所示。（2）如何實現(xiàn)Echarts圖表2.ECharts基礎獲取Echarts庫（官網(wǎng)）引入Echarts庫（網(wǎng)頁）準備一個具備高度的DOM容器通過echarts.init方法初始化一個echarts實例通過setOption方法生成圖表圖5-20實現(xiàn)ECharts圖表步驟示意圖在ECharts官網(wǎng)中有詳細教程以及API，因為ECharts圖表有自己的一套屬性，因此需要什么效果就得去遵守它的屬性，只有識別圖表的各個部分的專業(yè)名稱，才能從它API中獲取相應屬性從而實現(xiàn)想要的效果。（2）如何實現(xiàn)Echarts圖表2.ECharts基礎圖5-21圖表中的專有名詞圖5-22配置項手冊HTML5提供兩種強有力的“畫布”：SVG和Canvas。（1）SVG畫布3.D3基礎SVG的特點：SVG繪制的是矢量圖，因此對圖像進行放大不會失真?；赬ML，可以為每個元素添加JavaScript事件處理器。每個圖形均視為對象，更改對象的屬性，圖形也會改變。不適合游戲應用。Canvas的特點：

繪制的是位圖，圖像放大后會失真。不支持事件處理器。能夠以.png或.jpg格式保存圖像。適合游戲應用。利用比例尺的目的主要是將某一區(qū)域的值映射到另一區(qū)域，其大小關系不變，也就是說，讓圖形自適應畫布的大小。在數(shù)學中，x的范圍被稱為定義域，y的范圍被稱為值域。D3中的比例尺，也有定義域和值域，分別被稱為domain和range。只要指定domain和range的范圍，就可得到一個計算關系。（2）比例尺3.D3基礎線性比例尺d3.scale.linear()d3.scale.linear()返回一個線性比例尺。domain()和range()分別設定比例尺的定義域和值域。序數(shù)比例尺d3.scale.ordinal()

d3.scale.ordinal()返回一個線性比例尺。domain()和range()分別設定比例尺的定義域和值域。vardataset=[1.2,2.3,0.9,1.5,3.3];varmin=d3.min(dataset);varmax=d3.max(dataset);varlinear=d3.scale.linear().domain([min,max]).range([0,300]);linear(0.9);//返回0linear(2.3);//返回175linear(3.3);//返回300varindex=[0,1,2,3,4];varcolor=["red","blue","green","yellow","black"];varordinal=d3.scale.ordinal().domain(index).range(color);ordinal(0);//返回redordinal(2);//返回greenordinal(4);//返回blackD3中用于定義坐標軸的組件=d3.svg.axis()（3）坐標軸3.D3基礎vardataset=[2.5,2.1,1.7,1.3,0.9];varlinear=d3.scale.linear()

.domain([0,d3.max(dataset)]).range([0,250]);

varaxis=d3.svg.axis().scale(linear)

.orient("bottom")

.ticks(7);//追加到畫布上svg.append("g").attr("class","axis").attr("transform","translate(20,130)").call(axis);在總電壓的數(shù)據(jù)中有用到時間，然后如何直接用這個數(shù)據(jù)會發(fā)生錯誤，因此需要用到format方法來對其進行處理。（4）時間格式轉換（TimeFormatting）3.D3基礎d3.time.format：創(chuàng)建基于某種時間格式的本地時間格式轉換器?！駀ormat：將一個date對象轉換成特定時間格式的字符串?！駀ormat.parse：將特定時間格式的字符串轉換成date對象?！馾3.time.format.utc：創(chuàng)建基于某種時間格式的世界標準時間（UTC）格式轉換器。●d3.time.format.iso：創(chuàng)建基于某種時間格式的ISO世界標準時間（ISO8601UTC）格式轉換器?！駎ickFormat(d3.time.format("%H:%M"))：表示刻度格式化，也就是輸出時間格式為13：15的刻度。任務5.1認識數(shù)據(jù)可視化分析新能源汽車大數(shù)據(jù)分析系統(tǒng)中“研發(fā)與維修”模塊中的單車實時監(jiān)控頁面，明確其需要呈現(xiàn)的車輛數(shù)據(jù)，并選擇合適的圖表進行呈現(xiàn)。1.任務描述本系統(tǒng)以單車實時監(jiān)控為例，按照可視化設計的主要流程明確問題、選取數(shù)據(jù)、匹配圖表、確定風格、優(yōu)化圖表、檢查測試，為單車監(jiān)控頁面創(chuàng)建有效的信息可視化。2.任務分析任務5.1認識數(shù)據(jù)可視化（1）明確問題新能源汽車大數(shù)據(jù)分析系統(tǒng)在對單車進行實時監(jiān)控時，需要實時查看的信息包括整車信息、機電信息、電池信息、發(fā)電機信息和極值信息。整車信息中需要實時顯示單車的總電流/電壓、荷電狀態(tài)、車輛速度、加速踏板、自動踏板、檔位等相關信息。機電信息中需要實時顯示溫度、轉速/扭矩、機電電流/電壓等信息。電池信息中需要實時顯示燃料電池電流/電壓、燃料耗費率、濃度/壓力等信息。發(fā)電機信息中需要實時顯示曲率轉速、燃料消耗率等相關信息。極值信息中需要實時顯示電壓、溫度、電池單體代號、探針序號等相關信息。3.任務實施任務5.1認識數(shù)據(jù)可視化（2）選取數(shù)據(jù)在本系統(tǒng)的數(shù)據(jù)庫中，與車輛數(shù)據(jù)相關的表有整車數(shù)據(jù)表、驅動電機表、燃料電池表、引擎表、定位表、極值表和警告表。根據(jù)前面分析的單車實時監(jiān)控的需求，需要選取對應的表和合適的字段。以整車信息選取數(shù)據(jù)為例，其數(shù)據(jù)可以從整車數(shù)據(jù)表中進行選取。整車數(shù)據(jù)表中包括車架號、數(shù)據(jù)采集時間、車輛狀態(tài)、充電狀態(tài)、運行模式、車輛速度、累計里程、總電壓、總電流、荷電狀態(tài)、檔位、絕緣電阻、加速踏板行程值、制動踏板狀態(tài)等字段。3.任務實施圖表信息需要字段總電流/電壓車架號、數(shù)據(jù)采集時間、總電壓、總電流荷電狀態(tài)車架號、荷電狀態(tài)車輛速度車架號、數(shù)據(jù)采集時間、車輛速度加速踏板車架號、數(shù)據(jù)采集時間、加速踏板行程值制動踏板車架號、數(shù)據(jù)采集時間、制動踏板狀態(tài)檔位車架號、數(shù)據(jù)采集時間、檔位車速/加速踏板/檔位車架號、數(shù)據(jù)采集時間、車輛速度、加速踏板行程值、檔位任務5.1認識數(shù)據(jù)可視化（3）匹配圖表要如何去選擇圖表呢？以整車信息為例，總電流/電壓，需要反映出在某個時間段中單車的總電流和總電壓的變化情況，可以用折線圖、柱形圖或面積圖來表示，在本系統(tǒng)中選用的是面積圖；荷電狀態(tài)，需要反映蓄電池使用一段時間或長期擱置不用后的剩余容量與其完全充電狀態(tài)的容量的比值，可以用餅圖來表示，在本系統(tǒng)中選用的是餅圖中的圓環(huán)圖類型。此外車輛速度、加速踏板、制動踏板、檔位這幾項也都是需要反映出某個時間段的變化情況，因此也都也選用折線圖、柱形圖或面積圖來實現(xiàn)，具體的選用對比見表5-4。3.任務實施圖表信息可以用的圖表本系統(tǒng)選用的圖表總電流/電壓折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖堆疊面積圖荷電狀態(tài)餅圖、環(huán)形圖、堆疊面積圖、堆疊柱狀圖環(huán)形圖車輛速度折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖條形圖加速踏板折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖折線圖制動踏板折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖面積圖檔位折線圖、柱形圖、條形圖、面積圖、直方圖、K線圖、矩形樹圖柱形圖車速/加速踏板/檔位折線圖、柱形圖、條形圖等的組合圖折線與柱形圖的組合圖任務5.1認識數(shù)據(jù)可視化（4）確定風格圖表的風格應與網(wǎng)站整體風格一致。本系統(tǒng)平臺整體的視覺風格為目前主流的扁平化風，在色彩上采用明度偏暗的藍色（

#0d2458）為標準色，代表科技與創(chuàng)新；再配以藍色系的其他顏色如

#6aace9、

#1d48a6、#427dff，以及

#19e1e1、#39c39f、#01de99、#ec6e6f、#e84e68等顏色為輔助色，圖表中要呈現(xiàn)的趨勢變化等就是用這些明亮色系的顏色來突顯出來的，如車速/加速踏板/檔位表的設計效果如圖5-26所示。3.任務實施圖5-26車速/加速踏板/檔位表任務5.1認識數(shù)據(jù)可視化（5）優(yōu)化圖表確定選用的圖表和其風格后，還需要繼續(xù)優(yōu)化圖表，使其最終的呈現(xiàn)效果更易理解。比如調整X軸和Y的刻度單位直到合理、調整刻度之間的間隔值、給排名數(shù)據(jù)先進行排序、加上交互導航，使圖形更“可視”等。3.任務實施任務5.1認識數(shù)據(jù)可視化（6）檢查測試最后一個環(huán)節(jié)是檢查測試，應從頭到尾過一遍是否滿足需求；在不同的瀏覽器中預覽效果以確定用戶是否方便閱讀以及兼容性、動效能否達到預期、色差是否能接受等。3.任務實施任務5.1認識數(shù)據(jù)可視化任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化研發(fā)維修板塊中，單車監(jiān)控欄目需要提供與車輛速度、總電流、總電壓等圖表，統(tǒng)計分析中需要提供新增故障比例、新增故障數(shù)量、車輛城市分布Top10等圖表，從而為相關人員的工作提供參考數(shù)據(jù)。本次任務中采用ECharts實現(xiàn)其中車輛城市分布Top10、新增故障比例、總電流的圖表。1.任務描述單車監(jiān)控和統(tǒng)計分析欄目中的車輛城市分布Top10、新增故障比例、總電流這3張圖表，根據(jù)對其所要反饋的情況，分別用柱狀圖、餅圖、面積圖來表示。通過獲取ECharts、引入ECharts、制作圖表、完善圖表4個步驟最終完成所需的圖表。2.任務分析任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化（1）獲取ECharts在瀏覽器中輸入網(wǎng)址/dist/echarts.js，下載ECharts的源代碼版本，右擊另存為保存到站點文件夾中，如圖5-27所示。3.任務實施任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化圖5-27下載ECharts源代碼（2）引入ECharts從ECharts3開始引入方式更為，只需要像普通的JavaScript庫一樣用script標簽引入即可，具體代碼如下：3.任務實施任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<!--引入ECharts文件-->

<scriptsrc="echarts.min.js"></script>

</head>

</html>（3）制作圖表3.任務實施圖5-28車輛城市分布Top柱狀圖初始效果圖圖5-29新增故障比例餅圖初始效果圖圖5-30新增故障比例餅圖初始效果圖任務5.2使用ECharts實現(xiàn)車輛數(shù)據(jù)可視化采用D3實現(xiàn)研發(fā)維修板塊中，單車監(jiān)控欄目的圖表。1.任務描述任務5.3使用D3完成車輛實時監(jiān)控可視化圖5-31D3實現(xiàn)的車速折線圖效果單車時間監(jiān)控中的總電壓采用折線圖呈現(xiàn)，其效果如圖5-31所示，通過添加SVG畫布、準備數(shù)據(jù)、定義坐標軸、繪制折線、繪制數(shù)據(jù)點來實現(xiàn)。2.任務分析任務5.3使用D3完成車輛實時監(jiān)控可視化（1）下載并加載D3文件（2）添加SVG畫布（3）準備數(shù)據(jù)（4）定義坐標軸（5）繪制折線3.任務實施任務5.3使用D3完成車輛實時監(jiān)控可視化一、選擇題1．下列哪個圖表不能很好地表達比較的關系（）。A．柱形圖B．餅圖C．雷達圖D．曲線圖2．在ECharts中用于說明是柱形圖的是哪個單詞（）。A．lineB．