數(shù)據(jù)可視化可以將海量數(shù)據(jù)通過(guò)圖形、表格等形式直觀反映給大眾。降低數(shù)據(jù)讀取門(mén)檻，可以讓企業(yè)通過(guò)形象化方式對(duì)自身產(chǎn)品進(jìn)行營(yíng)銷(xiāo)。

一、數(shù)據(jù)可視化原理

數(shù)據(jù)化可視原理是綜合運(yùn)用計(jì)算機(jī)圖形學(xué)、圖像、人機(jī)交互等技術(shù)，將采集或模擬的數(shù)據(jù)映射為可識(shí)別的圖形、圖像、視頻或者動(dòng)畫(huà)，并允許用戶(hù)對(duì)數(shù)據(jù)進(jìn)行交互分析的理論方法和技術(shù)。

數(shù)據(jù)可視化可以將不可見(jiàn)的現(xiàn)象轉(zhuǎn)換為可見(jiàn)的圖形符號(hào)，并從中發(fā)現(xiàn)規(guī)律從而獲取知識(shí)。在實(shí)際應(yīng)用中，它可以針對(duì)復(fù)雜和大規(guī)模的數(shù)據(jù)，還原增強(qiáng)數(shù)據(jù)中的全局結(jié)構(gòu)和具體細(xì)節(jié)。

二、 可視化方法

1. 數(shù)據(jù)采集：數(shù)據(jù)是可視化對(duì)象，可以通過(guò)儀器采樣，調(diào)查記錄、模擬計(jì)算等方式采集。在可視化解決方案中，了解數(shù)據(jù)來(lái)源采集方法和數(shù)據(jù)屬性，才能有的放矢解決問(wèn)題。

2. 數(shù)據(jù)處理和變換：原始數(shù)據(jù)含有噪音和誤差同時(shí)數(shù)據(jù)模式和特征往往被隱藏。通過(guò)去噪、數(shù)據(jù)清洗、提取特征等變換為用戶(hù)可理解模式。

3. 可視化映射（核心）：將數(shù)據(jù)的數(shù)值、空間坐標(biāo)、不同位置數(shù)據(jù)間的聯(lián)系等映射為可視化視覺(jué)通道的不同元素如標(biāo)記、位置、形狀、大小和顏色等。最終讓用戶(hù)通過(guò)可視化洞察數(shù)據(jù)和數(shù)據(jù)背后隱含的現(xiàn)象和規(guī)律。

4. 用戶(hù)感知：用戶(hù)感知從數(shù)據(jù)可視化結(jié)果中提取信息、知識(shí)和靈感。數(shù)據(jù)可視化可用于從數(shù)據(jù)中探索新的假設(shè)，也可嚴(yán)重相關(guān)假設(shè)與數(shù)據(jù)是否吻合，還可幫助專(zhuān)家向公眾展示數(shù)據(jù)中的信息。

用戶(hù)感知可以在任何時(shí)期反作用于數(shù)據(jù)的采集、處理變換以及映射過(guò)程中，如下圖所示：

三、具體操作

1. 將指標(biāo)值圖形化

一個(gè)指標(biāo)值就是一個(gè)數(shù)據(jù)，將數(shù)據(jù)的大小以圖形的方式表現(xiàn)。比如用柱形圖的長(zhǎng)度或高度表現(xiàn)數(shù)據(jù)大小，這也是最常用的可視化形式。

傳統(tǒng)的柱形圖、餅圖有可能會(huì)帶來(lái)審美疲勞，可嘗試從圖形的視覺(jué)樣式上進(jìn)行一些創(chuàng)新，常用的方法就是將圖形與指標(biāo)的含義關(guān)聯(lián)起來(lái)。

比如 Google Zeitgeist 在展現(xiàn) top10 的搜索詞時(shí)，展示的就是“搜索”形狀的柱形，圖形與指標(biāo)的含義相吻合，同時(shí)也做了立體的視覺(jué)變化：

2. 將指標(biāo)圖形化

一般用在與指標(biāo)含義相近的 icon 來(lái)表現(xiàn)，使用場(chǎng)景也比較多，如下：

3. 將指標(biāo)關(guān)系圖形化

當(dāng)存在多個(gè)指標(biāo)時(shí)，為了挖掘指標(biāo)之間的關(guān)系并將其進(jìn)行圖形化表達(dá)，可提升圖表的可視化深度。常見(jiàn)有以下兩種方式：

借助已有的場(chǎng)景來(lái)表現(xiàn)

聯(lián)想自然或社會(huì)中有無(wú)場(chǎng)景與指標(biāo)關(guān)系類(lèi)似，然后借助此場(chǎng)景來(lái)表現(xiàn)。

比如百度統(tǒng)計(jì)流量研究院操作系統(tǒng)的分布（上圖），首先分為 windows、mac 還有其他操作系統(tǒng)， windows 又包含 xp、2003、7等多種子系統(tǒng)。

宇宙星系中也有類(lèi)似的關(guān)系： 宇宙中有很多星系，我們最為熟悉的是太陽(yáng)系，太陽(yáng)系中又包括各個(gè)行星。根據(jù)這種關(guān)系聯(lián)想，圖表整體借用宇宙星系的場(chǎng)景，將熟知的Windows比喻成太陽(yáng)系，將XP、Window7等系統(tǒng)比喻成太陽(yáng)系中的行星，將Mac和其他系統(tǒng)比喻成其他星系。

構(gòu)建場(chǎng)景來(lái)表現(xiàn)

指標(biāo)之間往往具有一些關(guān)聯(lián)特征，如從簡(jiǎn)單到復(fù)雜、從低級(jí)到高級(jí)、從前到后等等。如無(wú)法找到已存在的對(duì)應(yīng)場(chǎng)景，也可構(gòu)建場(chǎng)景。

比如百度統(tǒng)計(jì)流量研究院中的學(xué)歷分布：指標(biāo)分別是小學(xué)、初中、高中、本科等等。

各個(gè)類(lèi)目之間是一種階梯式的關(guān)系，因此，平臺(tái)就設(shè)計(jì)了一個(gè)階梯式的圖直觀的反映出了數(shù)據(jù)呈階梯式遞進(jìn)的趨勢(shì)。

再比如：支付寶年初出的個(gè)人年度賬單中，在描述付款最多的三項(xiàng)時(shí)設(shè)計(jì)了一個(gè)類(lèi)似頒獎(jiǎng)臺(tái)的樣式也很出彩：（然而并沒(méi)有覺(jué)得我在哪個(gè)類(lèi)目買(mǎi)買(mǎi)買(mǎi)付款最多有什么驕傲的）

下方圖示為供參考的線(xiàn)性化過(guò)程，實(shí)際可視化思考中，將哪類(lèi)元素進(jìn)行圖形化或者圖形化前后的順序可能均有不同，需根據(jù)具體情況處理。

4. 將時(shí)間和空間可視化

時(shí)間

通過(guò)時(shí)間的維度來(lái)查看指標(biāo)值的變化情況，一般通過(guò)增加時(shí)間軸的形式，也就是常見(jiàn)的趨勢(shì)圖。

空間

當(dāng)圖表存在地域信息并且需要突出表現(xiàn)的時(shí)候，可用地圖將空間可視化，地圖作為主背景呈現(xiàn)所有信息點(diǎn)。

Google Zeitgeist 在 2010 和 2012 年的年度熱門(mén)回顧中，都是以地圖為主要載體（同時(shí)也結(jié)合了時(shí)間），來(lái)呈現(xiàn)熱門(mén)事件：

5. 將數(shù)據(jù)進(jìn)行概念轉(zhuǎn)換

先看下生活中的概念轉(zhuǎn)換，當(dāng)我們需要喝水時(shí)，通常會(huì)說(shuō)給我來(lái)杯水而不是給我來(lái)500ml 的水。要注意來(lái)（一）杯水，是具象的，并不是用量化的數(shù)據(jù)來(lái)形容。在這里，500ml就是一個(gè)具體的數(shù)據(jù)，但是它難以被感知，所以用（一）杯的概念來(lái)轉(zhuǎn)換。
同樣在數(shù)據(jù)可視化，有時(shí)需要對(duì)數(shù)據(jù)進(jìn)行概念轉(zhuǎn)換。這是為了加深用戶(hù)對(duì)數(shù)據(jù)的感知，常用方法有對(duì)比和比喻。感知就是一個(gè)將數(shù)據(jù)由抽象轉(zhuǎn)化為具象的過(guò)程。

對(duì)比

比如下圖就是一個(gè)介紹中國(guó)煙民數(shù)量的圖表。如果只看左半部分中國(guó)煙民的數(shù)量：32000000（個(gè)十百千萬(wàn)十萬(wàn)百萬(wàn)千萬(wàn)億…）好吧數(shù)據(jù)量級(jí)很大，不論是數(shù)零還是數(shù)逗號(hào)都很容易數(shù)錯(cuò)，而且具體這個(gè)數(shù)字有多大仍然很難感知。讓我們目光向右移動(dòng)，來(lái)看右半部分：中國(guó)煙民數(shù)量超過(guò)了美國(guó)人口總和，太恐怖了。這樣一對(duì)比，對(duì)數(shù)據(jù)的感知就加深了。

比喻

下圖是一個(gè)介紹雅虎郵箱處理數(shù)據(jù)量大小的圖表，大概就是說(shuō)它每小時(shí)處理的電子郵件有近1.2TB，相當(dāng)于644245094 張打印的紙。

上面這個(gè)翻譯很無(wú)聊是不是，但這并不是問(wèn)題的重點(diǎn)，這個(gè)數(shù)它到底有多大呢？ 文案中用了一個(gè)比喻的手法：大意就是將這些郵件打印出來(lái)首尾相連可以繞地球4圈。嗯，比香飄飄奶瓶還多3圈。到這里，我相信大家肯定能初步感受到雅虎郵箱每天處理的數(shù)據(jù)量有多大了吧，而且還沒(méi)有被打印出來(lái)，為地球節(jié)省了很多紙（假裝環(huán)保）。

6.讓圖表“動(dòng)”起來(lái)

數(shù)據(jù)圖形化完成后，可結(jié)合實(shí)際情況，將其變?yōu)閯?dòng)態(tài)化和可操控性的圖表，用戶(hù)在操控過(guò)程中能更好地感知數(shù)據(jù)的變化過(guò)程，提升體驗(yàn)。

實(shí)現(xiàn)動(dòng)態(tài)化通常以下兩種方式： 交互和動(dòng)畫(huà)。

交互

交互包括鼠標(biāo)浮動(dòng)、點(diǎn)擊、多圖表時(shí)的聯(lián)動(dòng)響應(yīng)等等。下面是百度統(tǒng)計(jì)流量研究院的時(shí)間分布圖，該分布圖采用左圖右表的聯(lián)動(dòng)形式，左圖中鼠標(biāo)浮動(dòng)則顯示對(duì)應(yīng)數(shù)據(jù)，點(diǎn)擊則可以切換選擇：

動(dòng)畫(huà)

動(dòng)畫(huà)包括入場(chǎng)動(dòng)畫(huà)、交互過(guò)程的動(dòng)畫(huà)和播放動(dòng)畫(huà)等等。

• 入場(chǎng)動(dòng)畫(huà)：即在頁(yè)面載入后，給圖表一個(gè)“生長(zhǎng)”的過(guò)程，取代“數(shù)據(jù)載入中”這樣的提示文字。
• 交互動(dòng)畫(huà)：用戶(hù)發(fā)生交互行為后，通過(guò)動(dòng)畫(huà)形式給以及時(shí)反饋。
• 播放動(dòng)畫(huà)：通俗的來(lái)說(shuō)就是提供播放功能，讓用戶(hù)能夠完整看到數(shù)據(jù)隨時(shí)間變化的過(guò)程。下圖是 Gapminder 在描述多維數(shù)據(jù)時(shí)，提供隨時(shí)間播放的功能，可以直觀感受到所有數(shù)據(jù)的變化。

四、案例分析

案例：360“騙子地圖”

簡(jiǎn)介：

360依托12億終端設(shè)備作為支撐，利用海量的數(shù)據(jù)分析能力，推出了基于互聯(lián)網(wǎng)安全的產(chǎn)品“騙子地圖”。用戶(hù)只要點(diǎn)擊進(jìn)入“騙子地圖”的鏈接或按鈕，即可直觀的在上面看到全國(guó)各地的被攔截電話(huà)以及騷擾電話(huà)的分布以及地區(qū)排行榜。同時(shí)右側(cè)還有由用戶(hù)上傳的“騙術(shù)揭秘”，不僅能看到實(shí)實(shí)在在的數(shù)據(jù)，還能學(xué)到更多的防騙技巧。

案例流程：

數(shù)據(jù)采集：

360借助其5億PC端用戶(hù)和7億移動(dòng)端用戶(hù)的海量裝機(jī)量，結(jié)合360網(wǎng)盾對(duì)釣魚(yú)網(wǎng)站的實(shí)時(shí)監(jiān)控?cái)r截?cái)?shù)據(jù)和手機(jī)衛(wèi)士攔截的詐騙電話(huà)等數(shù)據(jù)結(jié)合，將枯燥的數(shù)據(jù)進(jìn)行翻譯、梳理并展現(xiàn)為用戶(hù)可以感知的數(shù)據(jù)。

數(shù)據(jù)處理和變換：

實(shí)時(shí)性：

攔截?cái)?shù)量實(shí)時(shí)變換，直觀反映各地的攔截情況

圖形化：

將數(shù)據(jù)可視化為“釣魚(yú)“形象的圖標(biāo)，背景用中國(guó)地圖，通過(guò)圖標(biāo)的閃爍反映各省市自治區(qū)、直轄市的釣魚(yú)網(wǎng)站攔截情況。直觀，便捷。通過(guò)不同顏色標(biāo)注詐騙類(lèi)型:金融；網(wǎng)購(gòu)；虛假信息等。

個(gè)性化：

針對(duì)用戶(hù)在不同時(shí)期的關(guān)注點(diǎn)不同，“騙子地圖”也推出了不同的策略方針。如在春節(jié)期間，由于人流量擴(kuò)大，用戶(hù)的出行需求增加，相應(yīng)的假機(jī)票、車(chē)票的釣魚(yú)網(wǎng)站量增加明顯，針對(duì)這種情況，在這段時(shí)間內(nèi)，360 加大了對(duì)假機(jī)票、車(chē)票網(wǎng)站的攔截及處理，保證用戶(hù)的出行安全。

可視化映射：

①通過(guò)閃爍的圖標(biāo)表示數(shù)量和頻率，閃爍頻率高，亮度大的地區(qū)發(fā)生詐騙的概率大。

②右側(cè)配合排行榜，列出數(shù)據(jù)和地區(qū)，直觀反映排名靠前的省份以及其詐騙頻率，彌補(bǔ)了圖標(biāo)無(wú)法顯示數(shù)據(jù)的缺點(diǎn)。

用戶(hù)感知：

“騙子地圖”的核心理念是為了增強(qiáng)用戶(hù)對(duì)網(wǎng)絡(luò)安全的意識(shí)，提升用戶(hù)的防騙意識(shí)，讓用戶(hù)在網(wǎng)絡(luò)虛擬世界中用最現(xiàn)實(shí)的資料和例子了解到安全的重要性。實(shí)時(shí)為用戶(hù)呈現(xiàn)各種基于大數(shù)據(jù)的可視化數(shù)據(jù)圖，更有相關(guān)的“防騙技巧”幫助用戶(hù)了解安全的重要性。

小結(jié)

360“騙子地圖”的可視化的一些經(jīng)驗(yàn)：

①海量用戶(hù)數(shù)據(jù)：由于多年提供免費(fèi)殺毒服務(wù)的經(jīng)驗(yàn)使得 360 擁有可觀的用戶(hù)數(shù)量這為其數(shù)據(jù)的準(zhǔn)確性提供了不錯(cuò)的支持

②技術(shù)先進(jìn)性： 其自身研發(fā)的 360 網(wǎng)盾能夠很好的對(duì)詐騙行為進(jìn)行識(shí)別，對(duì)于詐騙數(shù)據(jù)的準(zhǔn)確性篩選提供了保障。

個(gè)人的一些想法：

雖然不清楚360這個(gè)公司靠什么盈利，但這個(gè)項(xiàng)目就短期來(lái)看應(yīng)該不會(huì)被撤銷(xiāo)。所以，在“騙子地圖”目前的基礎(chǔ)上，挖掘用戶(hù)“為何被騙”的痛點(diǎn)。例如可以對(duì)用戶(hù)進(jìn)行詐騙提醒，進(jìn)而可以推廣自己的產(chǎn)品和服務(wù)。我認(rèn)為這個(gè)才是360這個(gè)項(xiàng)目未來(lái)的發(fā)展方向。 另外在形象化圖標(biāo)和界面上應(yīng)該再做改進(jìn)；圖標(biāo)+數(shù)據(jù)排行的模式很不錯(cuò)，更加方便用戶(hù)在數(shù)量上有清楚的認(rèn)識(shí)。

五、總結(jié)

數(shù)據(jù)可視化可以將海量數(shù)據(jù)通過(guò)圖形、表格等形式直觀反映給大眾。降低數(shù)據(jù)讀取門(mén)檻，可以讓企業(yè)通過(guò)形象化方式對(duì)自身產(chǎn)品進(jìn)行營(yíng)銷(xiāo)。同時(shí)，目前有很多專(zhuān)門(mén)進(jìn)行數(shù)據(jù)可視化包裝服務(wù)的企業(yè)，如 IBM 等企業(yè)。

數(shù)據(jù)可視化具備比較廣闊的前景，對(duì)企業(yè)內(nèi)部的管理也有其獨(dú)有的貢獻(xiàn)。通過(guò)本次學(xué)習(xí)，以及網(wǎng)上資料查詢(xún)，對(duì)于數(shù)據(jù)可視化有了一些粗略的認(rèn)識(shí)，其中有很多認(rèn)識(shí)的不足，希望可以慢慢學(xué)習(xí)改進(jìn)。

作者：楊彥碩，微博“高見(jiàn)黑科技”作者，暫無(wú)工作，希望找到一份運(yùn)營(yíng)編輯類(lèi)的工作。微信：yys940116，歡迎各位同好學(xué)習(xí)交流。

本文由 @楊彥碩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。