By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful.

通過可視化信息，我們可以繪制出一道眼睛可以看到的藍(lán)圖,，一種信息地圖,。當(dāng)你迷失在信息中時(shí)，信息地圖就有作用了,。

——大衛(wèi)· 麥克坎德萊斯

https://www./talks/david_mccandless_the_beauty_of_data_visualization

戴維·麥坎德利斯在TED 演講中給我們講述了數(shù)據(jù)可視化的意義和美麗之處,，大在數(shù)據(jù)迅速發(fā)展的時(shí)代，研究數(shù)據(jù)可視化的價(jià)值顯而易見本篇文章主要對(duì)數(shù)據(jù)可視化中的基本元素- 基礎(chǔ)圖表進(jìn)行相關(guān)探索,。

數(shù)據(jù)的視覺表達(dá)方式

人們感知信息中約83％是通過眼睛獲得,，視覺化信息成為最重要的信息之一，也是最容易被處理并記住的數(shù)據(jù)可視化是關(guān)于數(shù)據(jù)的視覺表現(xiàn)形式的研究;其中,，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為一種以某種概要形式抽提出來的信息,，包括相應(yīng)信息單位的各種屬性和變量[ 1 ]。簡(jiǎn)言之,，數(shù)據(jù)可視化的目的是讓數(shù)據(jù)說話,，讓復(fù)雜抽象的數(shù)據(jù)以視覺的形式更準(zhǔn)確快速的傳達(dá)。

【1 】注釋：Michael Friendly（2008 ）,。“主題制圖歷史上的里程碑,，統(tǒng)計(jì)圖形和數(shù)據(jù)可視化”。

例圖一

如上圖,，可視化展示讓數(shù)據(jù)更清晰直觀的呈現(xiàn)出來,。基礎(chǔ)圖表是數(shù)據(jù)可視化的一個(gè)基本,，重要的視覺化表達(dá)方式,。圖表之所以重要,，在于它對(duì)數(shù)據(jù)信息的有效提煉，梳理,，傳達(dá)的功能價(jià)值,。圖表能對(duì)枯燥，復(fù)雜的數(shù)據(jù),，根據(jù)傳達(dá)目的,，提煉成更簡(jiǎn)潔，直觀的視覺信息,。

圖表發(fā)展史

早在幾個(gè)世紀(jì)前就已出現(xiàn)數(shù)據(jù)可視化的表現(xiàn)方式,，其中公元前550 年希臘哲學(xué)家阿那克西曼德創(chuàng)造了第一個(gè)出版的世界地圖在。

https://geekydementia./2014/11/26/who-published-the-first-map/

第一個(gè)圖表則始于公元950 年的歐洲,，被認(rèn)為是最早的基于時(shí)間變化的折線圖,，展示太陽，月亮等行星的位置變化趨勢(shì),。

http://www.fi./wiskrant/artikelen/hist_grafieken/begin/images/planeten.gif

公元1350 年法國(guó)人尼科爾· 奧雷斯米（妮科爾·奧斯梅）在出版物 “ 形式的緯度”中發(fā)明了第一個(gè)柱狀圖,，展示加速對(duì)象與時(shí)間速度的關(guān)系，使用圖表直觀的展示變量之間的關(guān)系,。

https://en./wiki/Howard_G._Funkhouser#/media/File:Oresmes_diagrams.gif

威廉· 普萊菲爾（William Playfair ）被稱為圖表設(shè)計(jì)之父,，條形圖，餅圖,，折線圖等都是他發(fā)明的,，在1786 年出版的“商業(yè)與政治圖解”中的條形圖也被看成圖表中的里程碑，在許多數(shù)據(jù)可視化研究中都有用到這幅條形圖,。

https://en./wiki/File:Playfair_Barchart.gif

隨著時(shí)間的流逝，圖表發(fā)展到現(xiàn)在,，在“華爾街日?qǐng)?bào)”,，“紐約時(shí)報(bào)”，“商業(yè)周刊”等商業(yè)雜志應(yīng)用最為優(yōu)秀,。我們也對(duì)圖表類型有一定的認(rèn)知度,，像展示百分比的圓餅圖，體現(xiàn)趨勢(shì)變化的折線圖,，對(duì)比數(shù)據(jù)的柱狀圖等,。不管在商業(yè)中，還是日常工作匯報(bào)中,，圖表都體現(xiàn)了它的價(jià)值,。好的圖表能用簡(jiǎn)單的視覺元素，清晰快速的傳達(dá)復(fù)雜的數(shù)據(jù)信息,。

更多數(shù)據(jù)可視化發(fā)展史：http://www./milestones/

圖表設(shè)計(jì)過程

圖表設(shè)計(jì)的目的是通過圖表的視覺表現(xiàn)形式,，直觀,，清晰，準(zhǔn)確的展示已知多數(shù)據(jù)或單數(shù)據(jù)的聯(lián)系,。首先要獲得已知數(shù)據(jù),，對(duì)其進(jìn)行整理分析篩選，找到想要了解的內(nèi)容,，確定該數(shù)據(jù)之間的關(guān)系,，選擇視覺表現(xiàn)形式，最后輸出想要的圖表,。

可以看到圖表設(shè)計(jì)過程可分為數(shù)據(jù)處理層面和視覺展示層面,。數(shù)據(jù)處理：獲取數(shù)據(jù)，整理數(shù)據(jù),，清洗分析數(shù)據(jù),。數(shù)據(jù)源有Excel中中，CSV ,，接取,，SQL 數(shù)據(jù)庫，Hadoop的的,，HDFS ,，星火，API 等,，數(shù)據(jù)處理層面騰訊云都有大數(shù)據(jù)相關(guān)工具,。視覺展示：。確定數(shù)據(jù)關(guān)系,，選擇圖表形式,，輸出圖表展示確定數(shù)據(jù)之間的關(guān)系，關(guān)系有對(duì)比,，構(gòu)成,，分布，關(guān)聯(lián),，比如（例圖一）可知道三個(gè)產(chǎn)品的銷量變化是對(duì)比關(guān)系,，最后選用折線圖的展示方式。

圖表分類和選擇

圖表的主要分類有柱狀圖,，條形圖,，折線圖，餅圖,，圓環(huán)圖,，面積圖，散點(diǎn)圖,，氣泡圖,，雷達(dá)圖,，曲面圖等。下圖為數(shù)據(jù)可視化專家阿貝拉發(fā)布的圖表建議導(dǎo)圖圖表選擇方式通過數(shù)據(jù)關(guān)系的四個(gè)方面來區(qū)分：對(duì)比,，構(gòu)成,，分布，關(guān)聯(lián),，再根據(jù)變量，類別,，時(shí)間關(guān)系來選擇圖表,。

http://extremepresentation./.a/6a00d8341bfd2e53ef01b7c736487a970b-pi

對(duì)比

對(duì)比型的圖表可以展示多個(gè)數(shù)據(jù)之間的相同和不同之處，也可以展示單個(gè)數(shù)據(jù)在時(shí)間上的變化趨勢(shì),，是基于時(shí)間或分類的維度來進(jìn)行對(duì)比,，通過圖形的顏色,，長(zhǎng)度,，寬度,，位置，角度,，面積等視覺變量來對(duì)比數(shù)據(jù)。典型的對(duì)比類圖表有柱狀圖,，條形圖,，折線圖，雷達(dá)圖,。

下圖為“華爾街日?qǐng)?bào)” 15 年全球股市前十排行。各國(guó)間的股市市值是一種對(duì)比關(guān)系,，選擇條形圖的方式讓數(shù)字信息展示的更為清晰直觀。

http://graphics./gallery/china-market-explainer

構(gòu)成

構(gòu)成顧名思義在同一維度的結(jié)構(gòu),，組成,，占比關(guān)系，可以是靜態(tài)的,，也可以是隨時(shí)間變化的,。最典型的構(gòu)成型圖表就是餅圖，環(huán)狀圖,，還有百分比堆積柱狀圖,，條形圖，面積圖,。

下圖為2016年公司ComScore統(tǒng)計(jì)的流行電視設(shè)備銷量占比。構(gòu)成關(guān)系的數(shù)據(jù)通常會(huì)采用圓形圖,，通過圓弧長(zhǎng)度面積大小來區(qū)分?jǐn)?shù)據(jù)之間的構(gòu)成情況。

http://www./2016/07/28/wsj-apple-media-tactics-alienates-cable-providers/

分布

分布型圖表通常用于展示連續(xù)數(shù)據(jù)的分布情況,，通過圖形的顏色,，大小，位置,，長(zhǎng)度的連續(xù)變化來展示數(shù)據(jù)的關(guān)系,。散點(diǎn)圖，直方圖,，正態(tài)分布圖,，曲面圖表現(xiàn)方式都能體現(xiàn)數(shù)據(jù)的分布關(guān)系。

例圖是一個(gè)正態(tài)分布圖,，被稱為“IQ Scale Bell-Curve”,，它顯示IQ從小于60到大于140的范圍人數(shù)的分布情況。在智商規(guī)模從60到100的情況下,，人數(shù)呈現(xiàn)遞增分布,，最高人數(shù)達(dá)到100后，隨著IQ遞增人數(shù)開始下降,，很小一部分達(dá)到了超過140的智商,。可知世界目前的平均智商是100,，標(biāo)準(zhǔn)偏差為15 ,。

https://commons./wiki/File:IQ_curve.svg

關(guān)聯(lián)

關(guān)聯(lián)型圖表用于展示數(shù)據(jù)之間存在的關(guān)系,。散點(diǎn)圖，氣泡圖主要通過圖形的顏色,，位置,，大小的變化關(guān)系來展示數(shù)據(jù)的關(guān)聯(lián)性。

“紐約時(shí)報(bào)”的文章推廣與瀏覽量關(guān)系的可視化展示,，采用氣泡圖的表現(xiàn)方式,，直觀的展示了文章放在首頁與否的瀏覽情況。氣泡圖中數(shù)據(jù)以圓泡的形式展示在X軸,， ?軸構(gòu)成的直角坐標(biāo)系上,，使用氣泡的大小，密度來代表強(qiáng)度,，顏色來區(qū)分分類,，通過這些視覺方式清晰的呈現(xiàn)了數(shù)據(jù)間的影響程度。從而快速的找到最合適的推廣方式,。

https://source./articles/promotion-pageviews/

圖表視覺元素

圖表基本構(gòu)成元素如圖：標(biāo)題（副標(biāo)題）,，圖例，網(wǎng)格線,，數(shù)據(jù)列,，數(shù)據(jù)標(biāo)簽，坐標(biāo)軸（X ,，Y ），X 軸標(biāo)簽,，Y 軸標(biāo)簽,，輔助信息。根據(jù)結(jié)構(gòu)的不同會(huì)相對(duì)增加或減少一些元素,，餅圖只需要標(biāo)題,，數(shù)據(jù)列，數(shù)據(jù)標(biāo)簽就能把數(shù)據(jù)呈現(xiàn)的清楚,。點(diǎn),，線，面是數(shù)據(jù)列基本視覺元素,。

圖表層次：文字信息,，圖表視覺圖形，坐標(biāo)系網(wǎng)格,。

小結(jié)

本文主要對(duì)數(shù)據(jù)可視化的基本元素圖表進(jìn)行了基礎(chǔ)研究，主要闡述了圖表基礎(chǔ)介紹,，圖表發(fā)展史,，圖表設(shè)計(jì)過程,，圖表的分類，圖表選擇方法以及圖表的視覺元素和層次,。

那怎樣的視覺元素結(jié)合能產(chǎn)出好的圖表,？好的圖表應(yīng)該具備哪些條件？圖表的設(shè)計(jì)原則,，設(shè)計(jì)誤區(qū)又是什么,？圖表設(shè)計(jì)（二）將進(jìn)行詳細(xì)闡述。

感謝你的閱讀,，本文由 騰訊ISUX 版權(quán)所有,，轉(zhuǎn)載時(shí)請(qǐng)注明出處，違者必究,，謝謝你的合作,。

注明出處格式：騰訊ISUX (https://isux.tencent.com/card-design-thinking.html)