數(shù)據(jù)可視化設計理論與技術實現(xiàn)

1、數(shù)據(jù)可視化設計理論與技術實現(xiàn)可視化編碼基礎數(shù)據(jù)開發(fā)語言WEB開發(fā)語言可視化前端工具可視化方法和演練點、線、面數(shù)據(jù)的可視化可視化開發(fā)演練04可視化概述什么是數(shù)據(jù)可視化為什么要做數(shù)據(jù)可視化可視化案例展示01可視化設計方法可視化設計原則可視化設計流程合理的可視化0203目 錄數(shù)據(jù)可視化概述一夜跑遍全球，圣誕老人的馴鹿要多快？如果圣誕老人希望用一晚時間跑遍全球每家每戶的話，馴鹿的奔跑速度必須達到 1046 千米/秒全世界工作最高效率的人是誰？圣誕老人和他的馴鹿到底是多快？如果你對這個速度沒什么概念，我們可以比較一下，人類步行速度 1米/秒數(shù)據(jù)可視化概述數(shù)據(jù)可視化概述數(shù)據(jù)可視化的目的就是直觀地展現(xiàn)數(shù)據(jù)數(shù)

2、據(jù)可視化是為了更好的分析和理解信息數(shù)據(jù)可視化能幫助傳播和驗證觀點，交互探索未知的信息數(shù)據(jù)可視化案例數(shù)據(jù)可視化案例展示數(shù)據(jù)可視化案例展示數(shù)據(jù)可視化案例人機交互理論視錯覺、視覺疲勞 文字閱讀、人的關注可視化設計原則減輕用戶獲取信息的成本數(shù)據(jù)可視化設計方法眼見不為實人們感覺到的視覺中心會比實際的中心稍微偏上一些。眼見不為實物體的組合方式將影響觀察者的感知方式萊亞錯覺：人們總會夸大水平線而縮短垂直線。人們怎么閱讀文字1、頁面上文字形狀被人眼感知2、文字被編碼成相關的內(nèi)部語言3、語言在人腦中被解釋醒目人類閱讀文字時經(jīng)歷三個階段：如何選擇配色如果你負責粉刷一間嬰兒室，你會選擇大紅色么？為什么核武器的警告標

3、志是黃底黑紋？溫 暖告 警熱 情錯 誤平 靜 沒有食欲我們離不開的電子設備使用標題讓重點突出可視化設計方法一杯咖啡可提高工作效率分類顯示的信息幫助捕捉到所需的信息可視化設計方法合理設計布局在做可視化設計時，整體布局非常重要。可以通過豐富的圖表、酷炫的動效、顏色的對比、鮮明的層次來創(chuàng)造出整體富有科技感、空間感、緊張感的視覺感受。圍繞式區(qū)塊式疊加式合理設計布局區(qū)塊式：多用于同一主題下不同子主題的展現(xiàn)，子主題之間沒有主次之分式。合理設計布局圍繞式：主要針對主題下某一維度的的重點展現(xiàn)，其余部分都是對其的補充說明。合理設計布局疊加式：主要對于業(yè)務場景的還原，往往通過GIS地圖或者室內(nèi)平面圖進行表達。合理

4、選擇圖表圖表類型適用數(shù)據(jù)柱狀圖適用二維數(shù)據(jù)，中小規(guī)模的數(shù)據(jù)集?？梢杂糜诒憩F(xiàn)數(shù)據(jù)之間的差異，辨識效果非常好。 分類數(shù)據(jù)也可以設置顏色增強分類的區(qū)分度，建議不超過 12 條數(shù)據(jù)。餅圖適合二維數(shù)據(jù)，特別是需要展示某個部分占整體比重的時候，應該用餅圖。折線圖適用于較大的二維數(shù)據(jù)集，尤其是那些趨勢比單個數(shù)據(jù)點更重要的數(shù)據(jù)集。散點圖適用于較大數(shù)據(jù)量的二維或三維數(shù)據(jù)集，可用于反映數(shù)據(jù)集之間的關聯(lián)關系。 對每個點加上顏色或文字標記來區(qū)分，可以擴展展示數(shù)據(jù)的第三維。氣泡圖適用于三維及三維以上數(shù)據(jù)集。氣泡圖是散點圖的一種變體，通過每個點的面積大小，反映 第三維。如果為氣泡加上不同顏色（或文字標簽），氣泡圖就可用來

5、表達四維數(shù)據(jù)。雷達圖適用于多維數(shù)據(jù)（四維以上），且每個維度可以排序，但適合數(shù)據(jù)量不多的情況， 建議最多展現(xiàn)6個數(shù)據(jù)點。合理選擇圖表圖表類型適用數(shù)據(jù)漏斗圖適用于業(yè)務流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析，通過漏斗各環(huán)節(jié)業(yè)務數(shù)據(jù)的 比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié)，進而做出決策。漏斗圖用梯形面積表示某個環(huán) 節(jié)業(yè)務量與上一個環(huán)節(jié)之間的差異。儀表盤適合區(qū)間類數(shù)據(jù)，通常用于表示數(shù)據(jù)在某一個分類（時間點）上的最大值和最小值，能以直 觀的表現(xiàn)出某個指標的進度或?qū)嶋H情況。矩形樹圖矩形樹圖適合展現(xiàn)具有層級關系的數(shù)據(jù)，能夠直觀體現(xiàn)同級之間的比較。一個Tree狀結(jié)構(gòu)轉(zhuǎn) 化為平面空間矩形的狀態(tài)，就像一張地

6、圖，指引我們發(fā)現(xiàn)探索數(shù)據(jù)背后的故事。地圖顯示地理區(qū)域上的數(shù)據(jù)。 使用地圖作為背景，通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置， 通 常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。地圖組合其他圖表可以將上述圖表與地圖進行組合。地圖常作為底圖，與熱力圖，流向圖等組合表現(xiàn)更多維度 的數(shù)據(jù)，是比較常用于大屏展示的圖表類型。分析目標：出發(fā)點和目標數(shù)據(jù)：數(shù)據(jù)類型數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)維度行業(yè)領域行業(yè)特點側(cè)重點0102處理數(shù)據(jù)清洗和規(guī)范去除臟數(shù)據(jù)敏感信息統(tǒng)一數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)分析數(shù)據(jù)統(tǒng)計數(shù)據(jù)挖掘展示設計選定適合的圖表類型整體的設計方案03生成根據(jù)之前的分析和處理， 通過編碼和開發(fā)，生成需 要展示的結(jié)果?？梢暬O計方法R語言R 經(jīng)常被稱為

7、是“統(tǒng)計人員為統(tǒng)計人員開發(fā)的一種語言”。如果你需要深奧的統(tǒng)計模型用于計算，都 可以用的到它。數(shù)據(jù)開發(fā)語言Python語言Python在學術界當中一直很流行，尤其是在自然語言處理（NLP）等領域。JAVA語言Java 是大數(shù)據(jù)項目中的“一等公民”，有廣泛的程序員群眾基礎。開發(fā)語言Web應用被分類歸為分布式應用，一般是客戶端服務器結(jié)構(gòu)，所以我們有一部分的代碼運行在客戶 端，另一部分代碼運行在服務器。那些在客戶端上的應用就是前端，通常指的就是我們的瀏覽器。最常用于前端開發(fā)的技術是HTML+CSS+JavaScript，前端開發(fā)人員通常使用這些技術的組合開發(fā)應用的前端。后端開發(fā)語言有更多的選擇：PHP

8、、JAVA、JavaScript、Ruby、PythonWEB開發(fā)語言開發(fā)框架框架可以幫助你簡化開發(fā)的工作，有很多現(xiàn)成的代碼庫，它提供給你Web應用的結(jié)構(gòu)，讓你的編程工 作更簡單更快捷。如果你要成為職業(yè)的Web開發(fā)者，你就必須要精通至少一個框架，加速你的Web開發(fā)?？蚣苡泻芏喾N類，有通用型的解決方案，也有針對具體問題的方案?？梢暬岸丝蚣蹺Charts/一款免費開源的數(shù)據(jù)可視化產(chǎn)品，給用戶提供直觀、生動、可交互和可個性化定制的數(shù)據(jù)可視化圖 表。Echarts 上手簡單。其具有的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，幫助用 戶在對數(shù)據(jù)挖掘、整合時大幅提高效率。同時，Echart

9、s 提供了豐富的圖表類型，除了常見的折柱餅，還 支持地圖、力導向圖、treemap、熱力圖、樹圖等等。它還支持任意維度的堆積和多圖表混合展現(xiàn)?？梢暬岸丝蚣蹹3/目前 Web 端評價最高的 Javascript 可視化工具庫。D3 能夠向用戶提供大量線性圖和條形圖之外的 復雜圖表樣式，例如樹形圖、圓形集群和單詞云等等。它的優(yōu)點是實例豐富，易于實現(xiàn)調(diào)試數(shù)據(jù)同時能夠 通過擴展實現(xiàn)任何想到的數(shù)據(jù)可視化效果，缺點是學習門檻比較高。與 jQuery 類似，D3 直接對 DOM 進行操作，這是它與其它可視化工具的主要區(qū)別所在：它會設置 單獨的對象以及功能集，并通過標準 API 進行 DOM 調(diào)用?？梢暬岸丝蚣蹾ighCharts/能夠很便捷地在 Web 網(wǎng)站或是 Web 應用程序中添加可交互圖表，并可免費用于個人學習、個人網(wǎng)站 和其他非商業(yè)用途，商業(yè)使用需要授權(quán)。Leaflet/能可以同時