整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          可視化設(shè)計(jì)的10個(gè)指導(dǎo)原則

          據(jù)可視化已迅速成為在網(wǎng)絡(luò)上傳播信息的標(biāo)準(zhǔn)。它用于各種行業(yè),從商業(yè)智能到新聞,幫助我們理解和傳達(dá)見解。

          我們的大腦善于處理可視化信息,這使我們更容易理解圖表或圖形中可視化的數(shù)據(jù),而不是表格和電子表格中列出的數(shù)據(jù)。一個(gè)偉大的數(shù)據(jù)可視化應(yīng)該利用人類視覺系統(tǒng)的優(yōu)勢(shì)來呈現(xiàn)數(shù)據(jù),以便數(shù)據(jù)被吸收和理解。它應(yīng)該考慮用戶對(duì)視覺處理的了解,提高并簡化用戶的數(shù)據(jù)體驗(yàn)。

          目前有很多工具和框架可用于構(gòu)建這些圖形,是時(shí)候回歸基礎(chǔ)了。是什么讓數(shù)據(jù)可視化有效?在設(shè)計(jì)數(shù)據(jù)時(shí)我們應(yīng)該遵循哪些指導(dǎo)原則?

          以下最佳實(shí)踐將幫助您設(shè)計(jì)豐富、有洞察力的數(shù)據(jù)體驗(yàn)。

          01 為特定受眾設(shè)計(jì)

          可視化是用于揭示模式的,提供上下文并描述數(shù)據(jù)中的關(guān)系。雖然設(shè)計(jì)師對(duì)給定的一組數(shù)據(jù)集中的模式和關(guān)系沒有任何影響,但她可以根據(jù)用戶的需求選擇顯示哪些數(shù)據(jù)以及提供怎樣的語境。畢竟,就像其他產(chǎn)品一樣,如果用戶無法使用它,那么可視化就毫無意義。

          為小白用戶設(shè)計(jì)的可視化應(yīng)該是結(jié)構(gòu)化的、明確的和有吸引力的。他們應(yīng)該用文字直接說明受眾應(yīng)該從數(shù)據(jù)中得到什么。

          轉(zhuǎn)換雙親的工作時(shí)間:媽媽VS爸爸 (來源:https://flowingdata.com/2016/04/20/parent-work-hours/)

          另一方面,面向?qū)<矣脩舻目梢暬梢燥@示更精細(xì)的數(shù)據(jù)視圖,以驅(qū)動(dòng)用戶探索和發(fā)現(xiàn)。細(xì)節(jié)和數(shù)據(jù)密度應(yīng)該簡單明了。

          工作來來往往:國民失業(yè)(來源:http://graphics.wsj.com/job-market-tracker/)

          02 使用(但不要依賴)交互促進(jìn)探索

          這是一個(gè)發(fā)人深省的數(shù)字:《紐約時(shí)報(bào)》網(wǎng)站上只有10-15%參與可視化交互的訪客實(shí)際點(diǎn)擊了按鈕。《紐約時(shí)報(bào)》的圖形團(tuán)隊(duì)制作了一些業(yè)內(nèi)最好的作品,但幾乎沒有人與他們互動(dòng)!

          這表明,關(guān)于交互可視化設(shè)計(jì),我們不能依賴交互來建立理解。關(guān)鍵數(shù)據(jù)不能隱藏在交互元素后面,而應(yīng)該在沒有交互的情況下可見。

          然而,什么樣的交互比較好呢?允許整合更多數(shù)據(jù)(否則可能被排除),以允許感興趣的讀者更深入地研究數(shù)據(jù)集。Nathan Yau 的流動(dòng)數(shù)據(jù)已經(jīng)壟斷了這種交互式可視化風(fēng)格市場(chǎng),正如他關(guān)于死亡原因和預(yù)期壽命的圖表中所展示的那樣。

          2005年至2014年的死亡率數(shù)據(jù):死因如何因性別和種族而異(來源:https://flowingdata.com/2016/01/05/causes-of-death/)

          或者,交互可以用作吸引點(diǎn),一個(gè)引發(fā)關(guān)注的點(diǎn),可以讓你的讀者在遠(yuǎn)遠(yuǎn)地瀏覽之前,親自參與該項(xiàng)目。看看 Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者簡單地繪制一個(gè)圓圈——在繼續(xù)文化形態(tài)的分析概述之前——畫出簡單而有效的可視化的特征。

          畫圓圈的方式說了很多關(guān)于你的故事(來源:https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/)

          同樣, The Pudding 最近發(fā)布了一個(gè)交互式可視化軟件,向讀者講述有關(guān)生日悖論的知識(shí)(生日悖論,指如果一個(gè)房間里有23個(gè)或23個(gè)以上的人,那么至少有兩個(gè)人的生日相同的 概率要大于50%。)。

          雖然大多數(shù)非統(tǒng)計(jì)學(xué)家可能會(huì)發(fā)現(xiàn)生日悖論,這是概率論中的一個(gè)標(biāo)準(zhǔn)問題,非常枯燥且不直觀,但這種可視化使得它看起來簡直令人著迷。創(chuàng)作者融入最近的用戶互動(dòng)的方式使得整個(gè)體驗(yàn)非常具有關(guān)聯(lián)性。

          生日悖論實(shí)驗(yàn)(來源:https://pudding.cool/2018/04/birthday-paradox/)

          這兩個(gè)交互式示例都起作用,因?yàn)樗鼈冊(cè)试S讀者參與數(shù)據(jù)且不需要通過交互來理解。

          03 利用視覺突出性聚焦并引導(dǎo)體驗(yàn)

          視覺突出性,使視覺元素從周圍環(huán)境凸顯的特性,是數(shù)據(jù)可視化的強(qiáng)大工具。它可以用于引導(dǎo)用戶注意可視化中最重要的信息,以幫助防止信息過載。通過使用視覺突出一些細(xì)節(jié)并壓制其他細(xì)節(jié),可以使我們的設(shè)計(jì)更清晰,更容易理解。

          一些視覺變量——顏色和大小——是我們創(chuàng)造和控制視覺顯著性的關(guān)鍵。

          色彩方案是優(yōu)秀的數(shù)據(jù)可視化的關(guān)鍵。眾所周知,色彩特別擅長打破偽裝。我們可以使用溫暖,高飽和度的顏色來突出關(guān)鍵數(shù)據(jù)點(diǎn),并應(yīng)用冷色調(diào),使用低飽和度的顏色將不太重要的信息放到背景中。

          2014:最熱的年份(來源:https://www.bloomberg.com/graphics/2014-hottest-year-on-record/)

          尺寸也很明顯。較大的元素比較小的元素更有吸引力,因此要擴(kuò)大您希望讀者首先閱讀的元素,并縮小不太相關(guān)的文本和元素。

          04 使用位置和長度表達(dá)定量信息并使用顏色表達(dá)分類信息

          Cleveland 和 McGill 在信息可視化方面的著名工作,研究了視覺編碼的有效性(即數(shù)據(jù)維度與視覺屬性的映射)。他們根據(jù)人們對(duì)視覺編碼的準(zhǔn)確感知程度,對(duì)不同類型的視覺編碼進(jìn)行了排序,給出了以下(簡化的)列表:

          1. 通過共同的規(guī)模定位
          2. 長度
          3. 角度
          4. 區(qū)域
          5. 顏色

          這對(duì)數(shù)據(jù)可視化設(shè)計(jì)的意義在于,我們顯示定量信息的首選應(yīng)該是按位置進(jìn)行編碼(如經(jīng)典散點(diǎn)圖和條形圖所示)。與基于角度(如餅圖)或基于區(qū)域(如氣泡圖)的編碼相反,基于位置的編碼有助于觀眾在更短的時(shí)間內(nèi)進(jìn)行更準(zhǔn)確的比較。

          然而,這并不是說所有可視化都必須是條形圖或散點(diǎn)圖。在研究可視化數(shù)據(jù)的新方法時(shí),牢記這些原則是個(gè)好主意。

          我真正想要強(qiáng)調(diào)的是,顏色不應(yīng)該用于編碼定量信息,而是應(yīng)該用來編碼分類信息。也就是說,我們可以使用顏色來表示屬于不同類別的數(shù)據(jù)。

          出生時(shí)的預(yù)期壽命(來源:http://www.vizwiz.com/2017/11/life-expectancy.html)

          05 使結(jié)構(gòu)元素像刻度線和軸一樣清晰但不顯眼

          無論你是否支持 Edward Tufte 在設(shè)計(jì)中極簡主義的極端方法,都要幫自己一個(gè)忙,從你的圖表中消除視覺上的混亂。通過在數(shù)據(jù)元素和非數(shù)據(jù)元素之間創(chuàng)建可視化對(duì)比,來讓您的數(shù)據(jù)大放異彩,就像 Nadieh Bremer 在他的獲獎(jiǎng)作品“美國出生時(shí)間”中所做的那樣。

          嬰兒潮:白天工作時(shí)間出生高峰期(來源:https://www.visualcinnamon.com/portfolio/baby-spike)

          刪除不起任何作用的結(jié)構(gòu)元素使數(shù)據(jù)清晰(如背景、線條和邊框),減弱必要的結(jié)構(gòu)元素(如軸、網(wǎng)格和刻度線),否則這些元素會(huì)與您的數(shù)據(jù)爭奪注意力。網(wǎng)格為淺灰色,最寬設(shè)為0.5 pt,軸為黑色或灰色,最寬設(shè)為1 pt。

          06 直接標(biāo)記數(shù)據(jù)點(diǎn)

          編碼數(shù)據(jù)的每個(gè)元素都需要進(jìn)行標(biāo)記,以便讀者理解它所代表的內(nèi)容。簡單吧?

          錯(cuò)。太多設(shè)計(jì)師依靠圖例來告訴讀者哪些符號(hào)或顏色代表圖表中的哪些數(shù)據(jù)系列。列舉圖例雖然對(duì)設(shè)計(jì)師來說很容易,但對(duì)讀者來說卻很難。它們迫使讀者在圖例和數(shù)據(jù)之間來回掃描,給讀者的記憶帶來不必要的壓力。

          更好的方法是直接在圖表上標(biāo)記數(shù)據(jù)系列。這往往更像是一個(gè)挑戰(zhàn),但是,嘿,你是設(shè)計(jì)師。你的工作就是做這項(xiàng)工作,以便于讀者不必這樣做。在下面的例子中,Nathan Yau 完成了避免使用圖例的工作,創(chuàng)建了一個(gè)帶有大量直接標(biāo)簽的小型交互式多重顯示。

          每人每日平均消費(fèi)量(來源:https://flowingdata.com/2016/05/17/the-changing-american-diet/)

          07 使用消息傳遞和視覺層級(jí)創(chuàng)建敘事流程

          最好的可視化講述著引人入勝的故事。這些故事來自數(shù)據(jù)中包含的趨勢(shì)、相關(guān)性或異常值,并且由于數(shù)據(jù)周圍的元素而加強(qiáng)。這些故事將原始數(shù)據(jù)轉(zhuǎn)化為有用的信息。

          從表面上看,似乎數(shù)據(jù)可視化完全與數(shù)字相關(guān),但一個(gè)偉大的數(shù)據(jù)故事是無法用語言來講述的。信息傳遞具有清晰的視覺層次,才能一步一步地引導(dǎo)讀者閱讀數(shù)據(jù)。

          例如,可視化的標(biāo)題,應(yīng)該明確闡明一個(gè)關(guān)鍵觀點(diǎn),使讀者領(lǐng)會(huì)。分散在數(shù)據(jù)中的微小注釋,可以通過異常值或趨勢(shì)引起讀者注意,從而為關(guān)鍵觀點(diǎn)提供支撐。

          來源:https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html

          我在這里要說的是:幫助讀者,確切地告訴他們?cè)跀?shù)據(jù)中尋找什么!

          08 將上下文信息直接疊加到圖表上

          正如我剛才提到的,我們可以在可視化中使用注釋來幫助創(chuàng)建數(shù)據(jù)故事的過程。有時(shí)我們可以添加圖形元素來使這些注釋更有意義,以便將這些信息更直接地關(guān)聯(lián)到我們的數(shù)據(jù)。

          以這張來自 Susie Lu 的圖片為例。“夏季大片”和“奧斯卡季”的數(shù)據(jù)重疊賦予了原本看似隨機(jī)的高峰和低谷以意義。它們幫助觀眾理解數(shù)據(jù)的重要性,比單獨(dú)使用字幕或注釋更直接。

          2015 – 2017.08 票房趨勢(shì):強(qiáng)大的開場(chǎng)和后期的爆發(fā)(來源:https://susielu.com/data-viz/box-office)

          09 為移動(dòng)體驗(yàn)而設(shè)計(jì)

          靜態(tài)可視化通常以 JPG 和 PNG 等位圖圖像格式發(fā)布,這對(duì)移動(dòng)端用戶來說是一個(gè)明顯的挑戰(zhàn)。許多數(shù)據(jù)可視化的美妙之處在于它們的視覺細(xì)節(jié)——微小的數(shù)據(jù)點(diǎn)和微妙的編碼——而這些細(xì)節(jié)許多在靜態(tài)格式的小屏幕上被丟失了。

          例如:Accurat 工作室在諾貝爾獎(jiǎng)上的精美復(fù)雜的作品,在印刷和高分辨率視網(wǎng)膜顯示器上看起來非常棒的全尺寸,卻在移動(dòng)設(shè)備上幾乎難以辨認(rèn)。

          視覺數(shù)據(jù)(來源:http://giorgialupi.com/lalettura/)

          為移動(dòng)體驗(yàn)設(shè)計(jì),或者使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構(gòu)建響應(yīng)式可視化,或者為印刷、桌面和移動(dòng)設(shè)備多種載體創(chuàng)建相同的靜態(tài)可視化設(shè)計(jì)。

          10 平衡復(fù)雜性與清晰度以促進(jìn)理解

          我今天談到的所有最佳實(shí)踐可以歸結(jié)為一件事:在復(fù)雜性和清晰度之間找到合適的平衡,以滿足受眾的需求。

          制作精美的、探索性的可視化細(xì)節(jié)總是誘人的,但這不一定是最合適的方法。在設(shè)計(jì)圖形時(shí)要考慮周到 ,讓讀者的知識(shí)和目標(biāo)決定應(yīng)該包含哪些數(shù)據(jù)以及包含多少數(shù)據(jù),并整理數(shù)據(jù)以講述您想要講述的故事。

          原文作者:MIDORI NEDIGER

          原文地址:https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

          編譯作者:桃花果,杭州設(shè)計(jì)師;編輯整理:TCC實(shí)驗(yàn)室 翻譯特工隊(duì)

          本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

          題圖來自Unsplash,基于CC0協(xié)議

          TML 實(shí)例

          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

          實(shí)例解析

          • DOCTYPE 聲明了文檔類型

          • 位于標(biāo)簽 <html> 與 </html> 描述了文檔類型

          • 位于標(biāo)簽 <body> 與 </body> 為可視化網(wǎng)頁內(nèi)容

          • 位于標(biāo)簽 <h1> 與 </h1> 作為一個(gè)標(biāo)題使用

          • 位于標(biāo)簽 <p> 與 </p> 作為一個(gè)段落顯示

          <!DOCTYPE html> 在HTML5中也是描述了文檔類型。

          什么是HTML?

          HTML 是用來描述網(wǎng)頁的一種語言。

          • HTML 指的是超文本標(biāo)記語言: HyperText Markup Language

          • HTML 不是一種編程語言,而是一種標(biāo)記語言

          • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

          • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

          • HTML 文檔包含了HTML 標(biāo)簽文本內(nèi)容

          • HTML文檔也叫做 web 頁面

          HTML 標(biāo)簽

          HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。

          • HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 <html>

          • HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如 <b> 和 </b>

          • 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽

          • 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

          <標(biāo)簽>內(nèi)容</標(biāo)簽>

          HTML 元素

          "HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.

          但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽,如下實(shí)例:

          HTML 元素:

          <p>這是一個(gè)段落。</p>

          Web 瀏覽器

          Web瀏覽器(如谷歌瀏覽器,Internet Explorer,F(xiàn)irefox,Safari)是用于讀取HTML文件,并將其作為網(wǎng)頁顯示。

          瀏覽器并不是直接顯示的HTML標(biāo)簽,但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶:

          HTML 網(wǎng)頁結(jié)構(gòu)

          下面是一個(gè)可視化的HTML頁面結(jié)構(gòu):

          <html>

          <head>

          <title>頁面標(biāo)題</title>

          </head>

          <body>

          <h1>這是一個(gè)標(biāo)題</h1>

          <p>這是一個(gè)段落。</p>

          <p>這是另外一個(gè)段落。</p>

          </body>

          </html>

          只有 <body> 區(qū)域 (白色部分) 才會(huì)在瀏覽器中顯示。

          HTML版本

          從初期的網(wǎng)絡(luò)誕生后,已經(jīng)出現(xiàn)了許多HTML版本:

          版本發(fā)布時(shí)間
          HTML1991
          HTML+1993
          HTML 2.01995
          HTML 3.21997
          HTML 4.011999
          XHTML 1.02000
          HTML52012
          XHTML52013

          <!DOCTYPE> 聲明

          <!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

          網(wǎng)絡(luò)上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

          doctype 聲明是不區(qū)分大小寫的,以下方式均可:

          <!DOCTYPE html>

          <!DOCTYPE HTML>

          <!doctype html>

          <!Doctype Html>

          通用聲明

          HTML5

          <!DOCTYPE html>

          HTML 4.01

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

          XHTML 1.0

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          查看完整網(wǎng)頁聲明類型 DOCTYPE 參考手冊(cè)。

          中文編碼

          目前在大部分瀏覽器中,直接輸出中文會(huì)出現(xiàn)中文亂碼的情況,這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。

          HTML 實(shí)例

          <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁面標(biāo)題</title></head><body><h1>我的第一個(gè)標(biāo)題</h1><p>我的第一個(gè)段落。</p></body></html>

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          近很多朋友跟我抱怨:為了公司數(shù)據(jù)好看,老板一個(gè)勁地想要數(shù)據(jù)可視化,以為可視化就是畫畫圖表這么簡單,可苦了自己天天加班做數(shù)據(jù),但其實(shí)老板根本不懂可視化!

          確實(shí),數(shù)據(jù)可視化無疑是當(dāng)今最火熱的詞,不管是做什么數(shù)據(jù),似乎都要拿來做一下可視化才行,但很多人都對(duì)數(shù)據(jù)可視化沒有一個(gè)具體的概念,也不知道該如何實(shí)現(xiàn)可視化。所以,話不多說,下面就帶大家由淺入深地學(xué)習(xí)數(shù)據(jù)可視化的定義、概念、實(shí)現(xiàn)過程和方法。

          一、什么是數(shù)據(jù)可視化

          科學(xué)可視化信息可視化可視分析學(xué)三個(gè)學(xué)科方向通常被看成可視化的三個(gè)主要分支。而將這三個(gè)分支整合在一起形成的新學(xué)科 “數(shù)據(jù)可視化”,這是可視化研究領(lǐng)域的新起點(diǎn)。

          廣義的數(shù)據(jù)可視化涉及信息技術(shù)、自然科學(xué)、統(tǒng)計(jì)分析、圖形學(xué)、交互、地理信息等多種學(xué)科。

          1、科學(xué)可視化

          科學(xué)可視化是科學(xué)之中的一個(gè)跨學(xué)科研究與應(yīng)用領(lǐng)域,主要關(guān)注三維現(xiàn)象的可視化,如建筑學(xué)、氣象學(xué)、醫(yī)學(xué)或生物學(xué)方面的各種系統(tǒng),重點(diǎn)在于對(duì)體、面以及光源等等的逼真渲染,目的是以圖形方式說明科學(xué)數(shù)據(jù),使科學(xué)家能夠從數(shù)據(jù)中了解、說明和收集規(guī)律。

          2、信息可視化

          信息可視化是研究抽象數(shù)據(jù)的交互式視覺表示以加強(qiáng)人類認(rèn)知。 抽象數(shù)據(jù)包括數(shù)字和非數(shù)字?jǐn)?shù)據(jù),如地理信息與文本。柱狀圖、趨勢(shì)圖、流程圖、樹狀圖等,都屬于信息可視化,這些圖形的設(shè)計(jì)都將抽象的概念轉(zhuǎn)化成為可視化信息。

          3、可視分析學(xué)

          可視分析學(xué)是隨著科學(xué)可視化和信息可視化發(fā)展而形成的新領(lǐng)域,重點(diǎn)是通過交互式視覺界面進(jìn)行分析推理。

          二、為什么需要數(shù)據(jù)可視化

          人類利用視覺獲取的信息量,遠(yuǎn)遠(yuǎn)超出其他器官,而數(shù)據(jù)可視化正是利用人類天生技能來增強(qiáng)數(shù)據(jù)處理和組織效率。

          可視化可以幫助我們處理更加復(fù)雜的信息并增強(qiáng)記憶。

          大多數(shù)人對(duì)統(tǒng)計(jì)數(shù)據(jù)了解甚少,基本統(tǒng)計(jì)方法(平均值、中位數(shù)、范圍等)并不符合人類的認(rèn)知天性。 最著名的一個(gè)例子是 Anscombe 的四重奏,根據(jù)統(tǒng)計(jì)方法看數(shù)據(jù)很難看出規(guī)律,但一可視化出來,規(guī)律就非常清楚。

          三、如何實(shí)現(xiàn)數(shù)據(jù)可視化

          在技術(shù)上,數(shù)據(jù)可視化最簡單的理解,就是數(shù)據(jù)空間到圖形空間的映射。

          一個(gè)經(jīng)典的可視化實(shí)現(xiàn)流程,是先對(duì)數(shù)據(jù)進(jìn)行加工過濾,轉(zhuǎn)變成視覺可表達(dá)的形式(Visual Form),然后再渲染成用戶可見的視圖(View)。

          可視化技術(shù)棧

          具備專業(yè)素養(yǎng)的數(shù)據(jù)可視化工程師一般來說需要掌握以下技術(shù)棧:

          • 基礎(chǔ)數(shù)學(xué):三角函數(shù)、線性代數(shù)、幾何算法
          • 圖形相關(guān):canvas、svg、webgl、計(jì)算圖形學(xué)、圖論
          • 工程算法:基礎(chǔ)算法、統(tǒng)計(jì)算法、常用的布局算法
          • 數(shù)據(jù)分析:數(shù)據(jù)清洗、統(tǒng)計(jì)學(xué)、數(shù)據(jù)建模
          • 設(shè)計(jì)美學(xué):設(shè)計(jì)原則、美學(xué)評(píng)判、顏色、交互、認(rèn)知
          • 可視化基礎(chǔ):可視化編碼、可視分析、圖形交互
          • 可視化解決方案:圖表的正確使用、常見的業(yè)務(wù)的可視化場(chǎng)景

          四、常用的數(shù)據(jù)可視化工具

          學(xué)術(shù)界用得比較多的是R語言、ggplot2、Python可視化庫等,普通用戶喜聞樂見的是 Excel,商業(yè)上的產(chǎn)品是Tableau、DOMO、 FineBI等等,是個(gè)精彩紛呈的世界。

          1、D3

          D3.js 是一個(gè)基于數(shù)據(jù)操作文檔的 JavaScript 庫。 D3 可以將強(qiáng)大的可視化組件和數(shù)據(jù)驅(qū)動(dòng)的 DOM 操作方法完美結(jié)合。

          評(píng)價(jià):強(qiáng)大的 SVG 操作能力,可以非常容易的將數(shù)據(jù)映射為 SVG 屬性,還集成了大量數(shù)據(jù)處理、布局算法和計(jì)算圖形的工具方法,有著強(qiáng)大的社區(qū)和豐富的 demo,但是API 太底層,復(fù)用性低,學(xué)習(xí)與使用成本高。

          2、HighCharts

          HighCharts 是一個(gè)用純 JavaScript 編寫的圖表庫, 能夠簡單便捷的在 Web 應(yīng)用上添加交互性圖表。這是在 Web 上使用最廣泛的圖表,企業(yè)使用需要購買商業(yè)授權(quán)。

          評(píng)價(jià):使用門檻極低,兼容性好,且使用廣泛,非常成熟,但是樣式比較陳舊、圖表難以擴(kuò)展,商業(yè)上使用需要購買版權(quán)

          3、ECharts

          企業(yè)級(jí)圖表,開源來自百度數(shù)據(jù)可視化團(tuán)隊(duì),是一個(gè)純 Javascript 的圖表庫,可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上,兼容當(dāng)前絕大部分瀏覽器。

          評(píng)價(jià):豐富的圖表類型,覆蓋主流常規(guī)的統(tǒng)計(jì)圖表,而且配置項(xiàng)驅(qū)動(dòng),三級(jí)個(gè)性化圖表樣式管理,但是靈活性上不如 Vega 等基于圖形語法的類庫,一些復(fù)雜關(guān)系型圖表比較難定制

          4、Leaflet

          Leaflet 是面向移動(dòng)設(shè)備的交互式地圖的 JavaScript 庫。 測(cè)量的 JS 只有大約 38 KB,它具有大多數(shù)開發(fā)人員需要的所有映射功能。

          評(píng)價(jià):專門針對(duì)地圖應(yīng)用,mobile 兼容性良好,API 簡潔、支持插件機(jī)制,但是功能比較簡單,需要具備二次開發(fā)能力

          5、Vega

          Vega 是一套交互圖形語法,定義了數(shù)據(jù)到圖形的映射規(guī)則、常見的交互語法和常見的圖形元素,用戶可以自由使用 Vega 語法進(jìn)行組合構(gòu)建出各種各樣的圖表。

          評(píng)價(jià):完全基于 JSON 語法,提供從數(shù)據(jù)到圖形的映射規(guī)則,支持常見的交互語法,但是其本身有著復(fù)雜的語法設(shè)計(jì),使用和學(xué)習(xí)成本很高

          6、deck.gl

          deck.gl 是 Uber 可視化團(tuán)隊(duì)基于 WebGL 開發(fā)的面向大數(shù)據(jù)分析的可視化類庫。

          評(píng)價(jià):主要以 3D 地圖可視化為主,內(nèi)置了地理信息可視化常見的場(chǎng)景,支持大規(guī)模數(shù)據(jù)的可視化,但是需要具備 WebGL 的知識(shí),層的擴(kuò)展比較復(fù)雜

          7、FineReport

          FineReport報(bào)表軟件是一款純Java編寫的、集數(shù)據(jù)展示(報(bào)表)和數(shù)據(jù)錄入(表單)功能于一身的企業(yè)級(jí)web報(bào)表工具,僅需簡單的拖拽操作便可以設(shè)計(jì)復(fù)雜的中國式報(bào)表,搭建數(shù)據(jù)決策分析系統(tǒng)。

          評(píng)價(jià):可以直連數(shù)據(jù)庫,方便快捷的定制各種復(fù)雜表樣,用來做出固定格式的周報(bào)、月報(bào)等。它的格式類似于excel界面,特色功能報(bào)表制作,報(bào)表權(quán)限分配,報(bào)表管理還有填報(bào),支持多種數(shù)據(jù)庫。

          8、Tableau

          Tableau是桌面系統(tǒng)中最簡單的商業(yè)智能工具軟件,沒有強(qiáng)迫用戶編寫自定義代碼,新的控制臺(tái)也可完全自定義配置。在控制臺(tái)上,不僅能夠監(jiān)測(cè)信息,而且還提供完整的分析能力。

          評(píng)價(jià):全球知名的BI工具,價(jià)格6000元/年/人左右,但是國外產(chǎn)品不花錢不會(huì)為你做任何定制化改動(dòng),售后很有問題。

          9、FineBI

          FineBI是商業(yè)智能BI工具,與Tableau類似,都主張可視化的探索性分析,有點(diǎn)像加強(qiáng)版的數(shù)據(jù)透視表。上手簡單,可視化庫豐富。可以充當(dāng)數(shù)據(jù)報(bào)表的門戶,也可以充當(dāng)各業(yè)務(wù)分析的平臺(tái)。

          評(píng)價(jià):FineBI做到了自助式分析,圖表類型豐富,數(shù)據(jù)分析功能較強(qiáng)大,鉆取,篩選,分組等功能都有。

          10、Power BI

          Power BI 是一套商業(yè)分析工具,用于在組織中提供見解。可連接數(shù)百個(gè)數(shù)據(jù)源、簡化數(shù)據(jù)準(zhǔn)備并提供即席分析。生成美觀的報(bào)表并進(jìn)行發(fā)布,供組織在 Web 和移動(dòng)設(shè)備上使用。

          評(píng)價(jià):類似于excel的桌面bi工具,功能比excel更加強(qiáng)大。支持多種數(shù)據(jù)源。價(jià)格便宜。但是只能作為單獨(dú)的bi工具使用,沒辦法和現(xiàn)有的系統(tǒng)結(jié)合到一起。

          總結(jié)

          數(shù)據(jù)可視化是個(gè)龐大的領(lǐng)域,涉及的學(xué)科非常多,但正是因?yàn)檫@種跨學(xué)科性,讓可視化領(lǐng)域充滿活力與機(jī)遇。

          更多關(guān)于數(shù)據(jù)分析的干貨,可以關(guān)注我的微信公眾號(hào)“數(shù)據(jù)分析不是個(gè)事兒”獲取更多!


          主站蜘蛛池模板: 午夜福利av无码一区二区| 中文字幕精品无码一区二区| 精品成人乱色一区二区| 亚洲一区在线视频观看| 日本精品视频一区二区| 亚洲av成人一区二区三区 | 极品尤物一区二区三区| 久夜色精品国产一区二区三区| 久热国产精品视频一区二区三区| 久久久无码一区二区三区| 日本在线不卡一区| 天码av无码一区二区三区四区| 国产午夜精品片一区二区三区| 无码av免费一区二区三区| 少妇人妻偷人精品一区二区| 国产精品一区在线观看你懂的| 在线免费视频一区| 精品国产一区二区三区久久影院| 亚洲一本一道一区二区三区| 伊人久久大香线蕉AV一区二区 | 日本一区二区三区精品中文字幕| 亚洲一区二区三区在线播放| 丰满岳乱妇一区二区三区| 一区二区国产在线观看| 一级毛片完整版免费播放一区| 成人在线一区二区| 中文字幕无码免费久久9一区9| 久久国产午夜精品一区二区三区| 精品乱子伦一区二区三区高清免费播放 | 精品一区二区三区四区电影| 免费观看日本污污ww网站一区 | 国产精品亚洲专一区二区三区| 国内精自品线一区91| 精品中文字幕一区在线| 精品福利一区二区三区精品国产第一国产综合精品 | 国产成人无码一区二区在线观看| 中文字幕VA一区二区三区| 性无码一区二区三区在线观看| 久久久久人妻精品一区| 成人H动漫精品一区二区 | 日韩精品无码一区二区三区不卡|