研究上千張數據圖表后 我學到12條可視化的秘密準則(附資源)
一幅不錯的數據 可視化 圖形應具備哪些因素?每當我寫關于數據的文章(鏈接:https://venngage.com/blog/hashtags-are-worthless/)時都會捫心自問。
十一月初的一場Priceonomics數據專家們的討論,讓我學到了不少東西。會后我研究了成百上千個Priceonomics圖形和圖表,從對信貸詐騙犯的可視化、到美國瑜伽之都的可視化文章。進行深度挖掘后,我找到了12條它們的數據可視化方式優于其它的原因。
我知道,我不能私自占有所有的信息,所以我將有效數據可視化的準則進行分解,如下所示。
1. 不要堆砌過多的圖表
當撰寫以數據為話題的文章時,你的工作應該是利用可視化幫助讀者理解你的觀點。但是以大量數據開篇的文章,往往很難決定將哪些最重要的數據變成可視化圖形。很多人(也包括我)會使用過多的圖形(鏈接:https://venngage.com/beam/)。
不要讓讀者淹沒在各種可視化效果中。
既不需要可視化所有數據來敘述一個引人入勝的故事,也不需要從你的數據中獲取每一個觀點。
在撰寫數據文章時,“簡單”和“專注”應該作為撰寫原則。當我讀Priceonomics時,這是我注意到的第一件事:他們不僅讓可視化圖形簡單,并且可以保證讀者可以容易地跟著整篇文章的思路。即使粗讀文章,他們也能夠挖掘一些有趣的事實和圖表。
Priceonomics控制它們的可視化圖形數量,并且只可視化那些可以加入故事的數據點。事實上,Priceonomics每篇文章只應用了三個圖形或圖表,在前25名最受歡迎的文章中,有20篇文章包含3個及以下的可視化圖形。
并且,最受歡迎的文章總共擁有1到4個圖表、表格或者圖形。在四個可視化圖形之后,平均閱讀量急劇下滑,直至最底端。
例如,“被禁播的最受歡迎的電視節目排名”(鏈接:https://priceonomics.com/ranking-the-most-beloved-tv-shows-that-got/)文章中只包含三個可視化圖形,它獲得了330000的閱讀量。在每個可視化圖形中,它們簡單并且只包含可以為文章增加亮點的內容。
在這個例子中,可視化圖形顯示:“螢火蟲”節目風靡一時,它不應該被禁播。當這三個圖表相互結合,它們組成了一個沒有過多信息的連貫故事。
并且,這些文章中有一大批只有一個可視化圖形。這展示了Priceonomics團隊很好地抓住了數據可視化圖像的故事主線。
瀏覽數據也就是模板。
(鏈接:https://infograph.venngage.com/templates?utm_source=blog&utm_campaign=priceonomics_viz&utm_medium=cta&utm_term=dataviz&utm_content=templates)
2. 可視化處理應當簡潔明了
但在這里“簡潔”到底意味著什么呢?
在看完成百上千個Priceonomics圖形和圖表后,我發現最成功的可視化圖形往往能在幾秒鐘內傳遞所要表達的思想。這些信息會融入在圖像和圖表中,為整個故事增磚添瓦。
這意味著當你繪制自己的圖表和圖形時,需要仔細考慮應該或不應該包含哪些內容在其中。這些決定最容易受到文字內容的影響。
例如,在這個關于TIDAL如何隕落的圖表(鏈接:https://priceonomics.com/kanye-wests-tidal-flop/)中,他們用簡單的線形圖展示了TIDAL幾乎沒有在市場中取得份額。
這是一個非常簡單的數據可視化,但是它能使人在很短的時間獲取信息。那應該是所有的可視化的目標。
或者,從這個簡單但是有說服力的例子中得到啟發——特朗普參加競選后,其酒店預定量有所下滑(鏈接:https://priceonomics.com/bookings-at-trump-hotels-plummet/)。
和我們一樣,Priceonomicas作者囊括了所有數據信息,但是他們決定只專注于兩點。這讓讀者更容易地吸收文章要表達的信息。
3. 圖片可作為帖子縮略圖
Priceonomics的人們經常這么做,并且我認為這是一個非常好的思路。這是一件很簡單的事情,而且它能夠吸引對數據可視化好奇的讀者。
下圖是美國難民分布(鏈接:https://priceonomics.com/the-united-state-of-refugees/)的數據可視化。
這篇文章闡述了內布拉斯加州是美國難民的中心,但它還展示了一些州并不像我們認為的那樣有很多難民定居,比如德克薩斯州和紐約州。他們實際上更喜歡在中西部的州定居,并且諸如這種有趣的事實會獲得更多的分享和觀看。而且這些信息全部只來自于一幅帖子縮略圖。
將圖表作為帖子縮略圖,使這篇文章更容易在社交媒體中傳播。根據HubSpot(鏈接:https://blog.hubspot.com/marketing/visual-content-marketing-strategy#sm.000093d60k15ctcu3wqrblv4bvj3w)數據顯示,帶有圖像的推文比不帶圖像的推文轉發率高150%,并且這在圖表和圖形等有意思的可視化中尤為明顯。
這也同樣適用于以地圖作為特定圖像的文章,因為大家都喜歡看自己所在州或者城市的排名。他們極有可能分享給同一地區的朋友!
4. 圖表標題雙保險
有些人會認為圖像或者圖表除了一個簡單的標題和說明不應該有任何文字。但是如果你看看目前為止我所展示的圖形示例,Priceonomics并不是這樣的。
事實上,Priceonomics的大部分可視化圖形都用到標題和副標題。這可以更清晰地解釋圖表。
例如,下圖來自于一篇關于世界各國身高的文章(鏈接:https://priceonomics.com/where-are-the-tallest-people-in-the-world/),他們運用副標題交代了背景信息。
副標題清晰地闡述了只有超過5英尺2英寸的人計入圖表中,而不是僅僅假設1900年時所有國家的人初始身高都是5英尺2英寸。因此,他們通過副標題清晰準確地描述了數據集,而非讓讀者誤讀信息。
如果你要表述全部數據集中有趣的樣本時,我建議添加多層標題。例如,在一篇關于每所學校進入NBA的籃球運動員的文章中,你可以運用副標題在可視化圖形中明確,數據僅限于在大學滿一年的學生?;@球迷都知道,通常優秀籃球運動員都是在一年之后逐漸變得專業起來,這是一個很有意思的數據。
現在,看一下下列圖表中展示的最具素食者親和力的城市(鏈接:https://priceonomics.com/ranking-the-most-and-least-vegetarian-friendly/)。
運用副標題的另一個原因,是人們能夠不依賴背景信息理解圖形。適當添加標簽,每個可視化圖形就不需要解釋或者介紹了。明確地理解這個圖表的表達內容,這使它在社交媒體中更容易被分享。
為什么我們不能運用文字去幫助讀者理解我們在可視化圖形中試圖闡述的呢?它并不像數據點和文字那樣,不能共存在同一圖表上。
5. 囊括文章中的所有數據
研究期間,我注意到Priceonomics的作者在圖表或圖形中排列數據的時候,做了一件十分有意思的事情。他們用所有的數據得出最終結論,而不是只用最上面或者最底端的數據塊。
這增加了每篇文章的說服力,意味著增加了希望分享它的人數,因為他們在數據中發現了某些自己認同的東西,那可以是他們的大學,他們的車或者他們居住的城市。
無論它是什么,你能囊括的數據越有意思,就會越好。并且,它能在宣傳階段即刻增多記者或者媒體曝光的數量。
以下舉例是美國汽車在81個城市駕駛的文章(鏈接:https://priceonomics.com/you-are-what-you-drive-the-most-popular-cars-in/),這會比只給出前十名使人們更有分享的沖動和熱情。
或者這篇關于多樣性排名前100名的大學的文章(鏈接:https://priceonomics.com/ranking-the-most-and-least-diverse-colleges-in/),它用了大量的條形圖表達觀點。這也是我在會議中見到的改變了我整個數據可視化研究方法的圖形。
它不僅增加了列表中大學的曝光率,而且讓人們產生了尋找自己大學是否在表中的欲望。
囊括所有數據可能聽起來有些夸張,但它描繪了一幅完整的畫面。在這個研究中,人們可以了解到頂級大學較其它大學的優勢所在。
開始創作一個完美的可視化圖像吧!
6. 慎用地圖
有時,最好的地圖就是沒有地圖。
我猜想,許多人會自然而然地運用地圖去可視化他們的位置數據。我以為,除非你的數據包含大量位置信息,比如說從美國50個州收集而來,那么使用地圖是有意義的。
但真的如此嗎?
在我看完整整上百篇文章后,我能給出的答案是…或許真是如此。比如那篇介紹難民分布的文章,用地圖體現數據就非常清晰,但是其他情況下如鼠疫的案例,則應竭力避免。
用地圖的好處在于能令讀者輕松捕獲作者的觀點,如果達不到這樣的效果,則不妨使用圖片或者表格的形式來表達。
例如,在那篇講述難民重新安置的文章中,Priceonomics想要從地理位置上突出內華達是主要的難民安置州。與此同時,也表達了預測到這點的人并不多。
這些數據的值相差比較大,能夠被劃分為不同的區間,再經組合就能夠用不同的顏色加以區分,使之一目了然。
但是當數據相近,這種方式就不容易區分了。例如下面這組數據,顯示的是美國不同州的瑜伽指數(鏈接:https://priceonomics.com/where-is-yoga-most-popular-in-the-united-states/)。由于數字非常接近,因此很難用地圖對數據進行可視化顯示。
在這篇文章中也運用了一張地圖,卻不如數據表格來得清楚,并且能夠把每個州的很多有價值的信息囊括其中。老實說,在地圖上我唯一能讀出的信息就是“蒙大拿州熱愛瑜伽!”。
最后看一下這個例子,講的是哪些國家有最好的程序員(鏈接:https://priceonomics.com/which-country-would-win-in-the-programming/)。Priceonomics作者僅使用了簡單數據表來進行說明,而不是用地圖。
這個圖表列出了前50個國家,如果用地圖表示就很不好看。如果你決定使用地理方法,那需要一張大地圖,如果只選取50個國家,填色都很困難。并且,它很難用顏色來進行有效的可視化區分和表達,因為有一些值的差距只有0.01%。
7. 圖表應突出重點
如我一再強調,可視化是為了讓數據更為一目了然。眾所周知,Priceonomics團隊在這方面做得很出色。我認為,他們對細節的處理特別講究,所以他們做出來的可視化效果就更優秀。
有一點值得注意,他們會直接在可視化圖片中注明,什么是讀者需要關注的。
下圖是從一篇關于美國監禁率的文章中摘出來的,這里就有直接的標注,指出了監禁率(鏈接:https://priceonomics.com/is-mass-incarceration-in-america-actually-on-the/)增加的25個州和降低的25個州的數據變化情況。
如果沒有這兩個提示,讀者很可能在那里盯著圖片數數,找里面到底有幾個州,又或者是和我一樣,根本無法理解作者用意。
下面再看個圖,調查顯示了A/B測試的有效性。
如果你是營銷人員,就會了解A/B測試是用來比較兩個不同版本網頁的表現好壞的。
這個圖就非常有用,直接指出了改版前后的網頁瀏覽次數增加比例。作者特別提醒了讀者,從這個圖中應該獲得哪些信息。
一般我們看這個圖,會很容易注意到兩列數據的差異,明白右邊列的比左邊列好。不過,應該不會有人去特地計算一下好多少,所以在圖中標識出來尤為重要。否則的話,讀者就接著往下看,可視化的意義就減弱了。
此外,給關鍵數據加上標記也能使可視化數據具有獨立性,不必依賴于文字描述。所以,做好這些方方面面,可視化數據就能被輕松理解,受到讀者青睞。
8. 節省空間顯示法:橫向放置條形數據
不知道大家是不是和我一樣,有過一些惱人的經歷,比如說用條形數據圖的時候,特別占地兒,又很難看。
Priceonomics團隊的解決之道很簡單,將數據條橫向顯示就可以了。
看一下這個橫向顯示圖,是關于獲得STEM(Science, Technology, Engineering, Mathematics)學位的女性比例(鏈接:https://priceonomics.com/where-do-women-study-stem/)。
可視化做成這樣,就顯得賞心悅目且通俗易懂,更重要的是,節省了屏幕空間,使頁面看上去更簡潔明了。
如果圖片以縱向顯示,那么屏幕上就會留有大片空白,必須用到瀏覽器的滾屏,很浪費屏幕空間。
另外一個不用縱向顯示的原因是兩個數據相差很大,一個數據只有另一個數據的一半,這也造成了整個圖片比較占地方。
這里還有另外一個案例,作者用橫向顯示來表達哪個政黨更傾向于太陽能的使用(鏈接:https://priceonomics.com/are-republicans-or-democrats-more-likely-to-go/)。
從中可以明顯看到,由于兩個政黨的意見差別很大,所以橫向顯示就很合適。下面,你可以比較兩種顯示方法。
用縱向顯示所占用的屏幕空間,是橫向顯示的兩倍。現在你應該能夠理解如何有效運用橫向顯示了吧。
9. 每個圖片上都要包含數據標簽和圖例
千萬不要省略這個重要的步驟,因為可視化圖片很可能會被單獨截取和分享。
Priceonomics作者都是做數據標簽和圖例的大師,我研究過,他們做出來的每個圖片都能夠被獨立摘取應用,絲毫不依賴于文章的其他文字部分,能夠被自由分享至Instagram, 或者被其他文章直接引用。
在下圖關于旅行者的調查文案里(https://priceonomics.com/which-country-has-the-meanest-tourists/),他們對所有的數據都進行了標注。作者用了圖例,為讀者進行了數據計算,強調了文章所包含的最重要的信息。這張圖完全能夠單獨貼在推特上,或者其他的博客里,無需任何多余的文字解釋。
我們來詳細研究一下這張圖的優點吧。
首先,在圖片的頂端有各種顏色標簽說明。然后,每個維度的標簽信息都非常明確,這點很容易被遺漏。特別之處在于作者還添加了“凈歡樂(Net Happiness)”分數,這也解釋了排名的依據。
這樣的話,如果你在其他地方看到這張圖,也能夠輕而易舉得理解其含義,無需任何其他文字說明。
所以,我建議每個可視化圖片里面,都應該給出圖例,都應該可以拿出來獨立存在,把故事講清楚。應該竭力避免只在文章的第一幅圖中含有圖例的問題。
雖然這只是小細節,但很重要,當其分享至Twitter或Facebook時,它能使你在成千上萬個可視化作品中脫穎而出。
觀察下面這個圖,作者認真地添加了圖例,盡管在文章前面的圖中已經標示過了。
10. 在你的圖表上,打上品牌標記
我想,你應該是希望自己的可視化作品能夠在網上被轉載分享的吧?那么,讀者怎么才能知道這些作品出自于何人之手?當你的作品成了媒體網紅,你如何證明自己是原創作者呢?
Priceonomics在把作品交付給客戶前,會為之打上品牌標記,從而避免這類問題的產生。他們會為贊助品牌編制文案,幫助其他品牌打造精彩內容,而使用內部數據的時候是有品牌訪問權限的。只有給這些可視化數據打上品牌標簽后,才能公布在網上。
例如下面這個地圖,顯示了做一次伴娘在不同地區的開銷(鏈接:https://priceonomics.com/how-much-does-it-cost-to-be-a-bridesmaid/),Weddington Way的品牌標記很突出。
這些可視化作品會在網上被大量轉載,人們也會清楚地知道其數據來源。所以說,就這么一個小小水印,就能大大改善品牌知名度,何樂而不為呢!
同時,我還建議在圖片的右下方加上一個小logo,如同下圖的Priceonomics一樣。此外,如果想增強品牌關聯性,也可以在圖片中添加Twitter網站之類的相關信息。
創造一個美麗的數據可視化圖像
11. 用對比色來區分不同數據組
當一片文章引用的數據包含了不同層次和地點信息,有時候會令人誤解的。例如,如果你要對一個主題在州級和市級這兩個不同層面上進行比較,做可視化處理,那是很容易讓人摸不著頭腦的。
對于這個問題,Priceonomics利用不同顏色來區分兩組不同數據。
比如下面的例子,Priceonomics利用不同顏色來區分城市和州。
這個處理看上去微不足道,但足以讓人清晰理解數據的含義和全文的觀點。如此精心的小細節,令人稱道。
這篇文章用不同顏色來表示哪些城市人們容易受騙,以及詐騙者經常在哪里作案。這兩個標題很相似,作者采用對比色進行處理,意圖就很明確,不會混淆了。
12. 使用交替色表格
想象一下,當你把一張很大的Excel數據表縮小后呈現在整塊顯示屏上,要看清一行數據是有多么不容易啊。
所以,請用交替色表格吧,比如說白色和淺灰色隔行顯示,那會使你的表格看起來清楚多了。
Priceonomics的所有圖表都做到了。向上滾動屏幕,你可以看到上一節的四個例子的表格均是如此。
例如下圖,顯示了通勤路途所花銷的時間和工作時間比例(鏈接:https://priceonomics.com/which-professions-have-the-longest-commutes/)。
這樣的交替色表格看起來非常舒服,清楚地顯示了24種不同職業的通勤路途花銷時間。
下面這個表格,羅列了100個數據項,記錄了哪些學校的STEM課程擁有最多的女性學生(鏈接:https://priceonomics.com/where-do-women-study-stem/),用交替色表格表達也不讓人覺得數據眼花繚亂。
就算我嘗試閱讀所有的100個大學的內容,我真的也不會感到頭痛。
想象一下,如果用單色表格會是什么樣子?你會不會看暈掉?
你是如何可視化數據的呢?
以上都是數據專家組Priceonomics上做的可視化經典案例。下面是做好可視化數據的一些要點,讓我們再回顧一下吧:
恰當地可視化數據:
1. 不要堆砌過多的圖表
2. 可視化處理應當簡潔明了
3. 圖片可作為帖子縮略圖
4. 圖表標題雙保險
5. 囊括文章中的所有數據
6. 慎用地圖
7. 圖表應突出重點
8. 節省空間顯示法:橫向放置條形數據
9. 每個圖片上都要包含數據標簽和圖例
10. 在你的圖表上,打上品牌標記
11. 用對比色來區分不同數據組
12. 使用交替色表格
如果你能做到這些,我保證你的可視化作品就能變得不同凡響。如果還不夠,那我建議看看下面這些鏈接:
The Top 9 Infographic Template Types
(鏈接:https://venngage.com/blog/9-types-of-infographic-template/)
How did we Increase Revenue and Traffic by 400%?
(鏈接:https://venngage.com/blog/increase-revenue-infographics/)
7 Essential Rules to Create Infographics
(鏈接:https://venngage.com/blog/7-essential-rules-create-infographics/)
來源: https://venngage.com/blog/data-visualization/
責任編輯:湯德正