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)出來?；A(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)