我如何製作人生中的第一篇數位敘事-罷韓指南針
罷韓投票這個 6/6 限定的公開副本,如果不去攻略看看的話實在是太對不起自己了。而在此時,當兵期間「想做什麼卻無法做」的空虛內心也很需要被彌補,因此有了罷韓指南針這項資料小專題的產生。
這篇心得會著重分享我在製作時的設計思考過程,包括問題發想、資料視覺化以及內心的各種糾結。
摸黑走路
做投票這類資料專題比較特殊且麻煩的地方在於-你無法預測結果為何,這邊所說的結果不只是「通過」及「不通過」,也包含在資料中需要用的各種資料變數結果,像是各區的「投票率」、「贊成率」、「反對率」等等。
這也意味著你無法對完整的資料進行探索、進而決定說故事的資料視覺化手法。因此我只能用先前兩次的投票結果(市長選舉、總統大選)來思考該給讀者看些什麼有趣的點、來決定我故事的方向。就算有了這樣的準備,但充其量就只是準備而已!意料之外的結果出來之後還是有機會踩到坑的(後面會講到 XD)
「那等結果出來再做就好啦!」,嗯 … 是這樣沒錯啦,但這個專題從發想到發布我大約花了半個月的時間,如果等結果出來再製作,半個月之後選舉這類議題就沒有什麼討論熱度了,所以在製作之前我給自己的死線就是 6/7!
起點問題
我認為比起罷韓投票的結果,我更想讓讀者知道三次投票間高雄市民對韓的民意變化。因為自己在探索前兩次選舉資料的過程中,我認為最有趣的是「小型區域對韓狂熱程度下降,大型區對韓開始反感」這個現象,所以我期待著罷韓投票各區或許有更多好玩的變化出現(事與願違阿~)。
因此,我在一開始時設定了一些簡單的起點問題:
- 罷韓投票投票率有降低嗎?(韓國瑜呼籲支持者不要出來投票)
- 與上一次選舉相比,支持率多/少了多少?哪個區生/掉最多?
這些問題幫助我在設計圖表及說故事的過程中不斷地自我反思-「我目前的這個決定是否對於回答這些問題是有幫助的?」這我覺得非常重要,可以防止自己路走歪或是突然地放飛自我(?)。
一些小堅持
- 使用 scrollytelling 作為敘事手法
- 在移動裝置及桌機上都能良好觀看
- 使用藍色/綠色以外的顏色
前面是為了讓使用者體驗變得更加良好,也是自己私心從以前開始就想試試看手法,就算它們會需要讓我花更多時間去研究 QQ,我會在技術的部份去介紹我使用了哪些工具及方法。當然,這些堅持也會為圖表的選用增添了一些限制。
關於在不同裝置呈現的方式,我很推薦可以去看看 Nadieh Bremer 在去年寫的 Techniques for Data Visualization on both Mobile & Desktop,裡面介紹了很多種方法,可以根據自己的時間及技術去做取捨。
選擇遊戲
Data Visualization: A Game of Decisions
這一大節主要會分享圖表的設計過程,但我認為以 Andy Kirk 一場線上長講的題目來當作這一大節的標題實在是再貼切不過了!資料視覺化就是一段不停選擇的過程,做有效率的選擇、做符合目標的選擇。
不使用傳統 Choropleth Map
近年來只要一談到選舉資料視覺化,Choropleth Map 絕對是不可或缺的視覺化手法之一。不管在電視台或是網路媒體多少都能見到它身影,天下雜誌在 2018 年所刊載的「九合一選舉互動地圖」更是結合了良好的互動性成功博得大家的目光,這讓台灣不少媒體也在日後的選舉推出類似的互動地圖。
「我這次的罷韓小專題適合使用 Choropleth Map 嗎?」我這樣思索著,會有這樣的疑慮是因為我認為 Choropleth Map 有兩個缺點:
- 各地區的面積落差影響變化的觀看感
- 一次只能呈現一種資料變數
第一點借天下這次罷韓開票地圖來示意一下,可以發現到右上角藍色區塊的面積快要佔了整個地圖的二分之一,但實際上這幾個區域人口數都非常少,這也許會讓不了解高雄人口分布的讀書產生誤會。(怕被誤會所以說明一下這邊只是示意,我認為天下依據自己想表達的情況去這樣做是沒有問題的,建議有興趣的讀者可以去天下完整的罷韓專題看看!)
當然也因為 Choropleth Map 有這項缺點,所以出現了一些解法,最直接的就是加上 tool tip 用文字說明,又或是使用另外一種地圖圖表-Cartogram!Cartogram 可以依據你的變數去調整地圖上各個區塊的大小(下圖),但相對地也犧牲了地理位置的準確性,而罷韓指南針嚴格來說也是 Cartogram 的一種,想了解更多可以點選圖片下方連結去看 Datawrapper 對 Cartogram 的介紹。
而關於第二個缺點,一樣也可以以 tool tip 來彌補說明性的不足,又或是以其他圖表來呈現其他變數。
雖然 Choropleth Map 的缺點都有相應對的調整方式,但我還是有個貪心的疑問「難道我不能只在一張畫布上簡單表達我想說的事嗎?」,因為如此,在初期我就捨棄了 Choropleth Map。
一線生機
就在有點不知道該怎麼辦的時候,有兩個剛好都是 ProPublica 的視覺化專題讓我看到了一線生機(是有那麼誇張XD?),有興趣的話一樣可以點下方連結觀看。
Workers’ Compensation Reforms by State 是之前在 The Truthful Art 就看過的專題,對於這種類似 Cartogram 的佈局方法,讓在每一區的區塊中增加了呈現一種變數以上的可能性!以近期的專題來說,NYT 美國各州新冠肺炎確診數的地圖就是一個非常棒的例子!
但最關鍵的還是 States Are Reopening: See How Coronavirus Cases Rise or Fall 這篇,當中以箭頭來表示篩檢情況的方式十分有趣,讓我找到了該在每個區的畫布中以什麼元素來表示支持率,也成了罷韓指南針的最後一塊拼圖 XD!
於是當下就用 D3 試畫看看,效果與我想像的差距不大,如果有興趣知道怎麼畫的,可以參考圖片下方 observable 的連結 ~
平衡取捨
有了方向、靈感後,我一開始都比較習慣用紙筆來畫畫看整個故事的感覺,想想哪些元素需要調整、需要捨棄,可能每個人的方式不同,但我還是不免俗的附上醜醜的手繪稿給大家笑一笑。
我自己覺得在設計資料視覺化、真正要開始動手前的最後階段(隨時也要注意)是確認自己做出來的東西有沒有保持平衡,這邊所說的平衡牽涉到很多層面,圖表有沒有辦法回答起點問題?圖表有沒有辦法讓讀者體會到我想說的故事?整個版面的資訊量對讀者來說會不會太複雜、太龐大?
雖然以上說得這有點憑感覺(WTF?),但就視覺元素的挑選上(其實比較常稱作 visual encode),我覺得 William Cleveland 和 Robert McGill 在他們 1985 年的實驗中所提到的視覺元素感知階層(perceptual hierarchy of visual cues)是一個很好的參考依據,只要有對資料視覺化深入了解一點點的人一定都會看過這張圖!
簡單來說越上方的視覺元素可以讓讀者較好判斷資料間的準確性,而越下方的視覺元素可以讓讀者比較好判斷資料間的相似性/變化。對此有興趣的話一樣也可以點下方連結,當中對資料視覺化基礎做非常好的介紹。
那回到罷韓指南針,我用了哪些視覺元素呢?
基本上只簡單用了三種,Area、Color intensity 以及 Angle,大家可以發現我最後選擇了偏中間的元素,簡單來說就是上下的兩種屬性我都要 XD!當然世界上沒有這麼好的事,我犧牲了一點上下兩種屬性,好讓我的視覺元素三個塞在區域的畫布中不會太擁擠、太複雜,這就是我想表達的平衡,這種平衡也可以讓我很好地去描述上面所說-故事的變化。
補強準確性
要描述變化,有個很重要的變數就是時間,在一開始的時候,我把時間交給沒有在畫布上的動畫效果去做刻劃,讓讀者可以先看一個大範圍變化趨勢,進入故事的情境。
但其實不難發現,如果要這樣去特別比較單一區域,其實是相當費神的(來回滾動),所以我在後面又加上 slope chart 去讓讀者可以較準確地去比較單一區域三段期間支持率的變化,也可以把故事帶往向下一層去說。
但事情並沒有那麼順利,原本這邊的劇本是,有部分區域反對率上升、有部分反對率下降(與前次相比),好讓我可以說這些情況的故事,但答案揭曉、資料帶進去,看到這結果老實說讓我有點手足無措,雖然每個區下降幅度都很大很有趣,但這感覺在指南針就可以知道結果了 XD
所以最後就簡單提一下下降最多的區域,最後再讓讀者探索自己感興趣的區域。後來我有看到其他媒體探討投票率的變化,我覺得也挺有趣的,如果用投票率去觀察結果應該不會那麼單調。
答案揭曉
前面有提到,凡事不會那麼順利,總是有意想不到的情況發生,除了上面說到 slope chart 故事過於單調外,最讓我感到棘手的是色階!如果眼尖的讀者可能會發現我色階的單位並不是線性的,而是用五分位數去做區別。
它原本是線性的 … 會這樣調整是因為少數幾個區域的投票率低得嚇人,讓數據分布非常不平均!導致線性色階的 range 變很大,所以各區在前兩次投票投票率的顏色變化並不明顯(顏色都很深),所以我才臨時改為分位書來區分,好讓故事可以說下去。
遺憾清單
- 互動性不足:原本是想讓使用者有更多探索數據的可能,例如在指南針上增加 tool tip、最下面可以自行變換圖表探索 … 等。但最後真的沒有時間做這些了 QQ
- 故事深度不足:我的故事只有簡單得說明數據趨勢而已,我後來看到關鍵有出一篇很有趣的分析,結合在地民情分析投票率高低背後可能的原因,這也是我認為罷韓指南針頂多是在做 App,不算是在做資料新聞的原因。
後記
大四決定走這條路開始,就一直以自己能夠做出一個互動專題為目標來訓練自己,也因為這樣學了一堆雜七雜八的東西。罷韓指南針就某種意義上讓這個目標勉強及格,所以自己心裡還算是挺欣慰的 QQ 但離「理想」還是有段差距,只能繼續努力R …
最後謝謝大家看到這,因為我希望大家也可以從文章中帶點干貨回去,所以提了很多其他的作品、介紹一點基本的概念,所以文章看起來有點冗長。
如果喜歡歡迎幫我拍拍手 ~