選舉視覺化:紀錄票數之外,資訊圖表如何呈現公投結果亮點?

Ting-Ni Wu
DD Story Hub
Published in
Dec 20, 2021

本文希望討論公投結果視覺化方法與圖表呈現細節

圖/作者截圖製作

2021年公投又是一次媒體圖表大戰,幾乎各大網路媒體都蹲守即時開票戰場,陣仗堪比地方與中央民意代表選舉。在這次公投開票中,可以觀察到一些媒體開始找到定位,以自己的內容經營策略展現出獨特的開票風格。

此外,媒體所呈現的資訊圖表相較以往差異化程度更大,不僅用基本款圖表說明選舉結果,有些媒體結合更多資料與資訊設計呈現選情亮點,讓一張選票跳脫通過與不通過的票面意義。

他們做了哪些細節設計?有哪些技巧可以學習與思考?DD沒有錯過這次觀察選舉視覺化的機會,一起來看看各家有趣的資訊圖表吧!

(這篇同樣也會出現大量圖表,可以先拍手收藏,身心愉快再繼續閱讀😉)

開票方式觀察》即時更新、手刻圖表、套用模板

規劃選舉開票專題時,媒體通常會介接中選會的開票API,再轉資料並接到自己的網頁上,以文字或資訊圖表呈現即時選情。在這些過程中,每一個步驟都因為資料分析的細緻度、圖表設計需求與前端網頁處理的分工,而出現不同的人力安排。

如果是大型選舉,可以看到媒體出動許多人來維護網頁;而若是媒體想簡單處理視覺化任務,就會簡化網頁呈現的設計與人力安排,將更多人手分配到報導或是社群操作工作之中。

前者可以READr、天下雜誌、公視新聞網(P#)、關鍵評論網與中央社等媒體為例,他們使用自製即時更新圖表來呈顯選情。我們認為這麼做的好處是讓圖表風格更融入網站整體視覺,圖表設計也有更多彈性空間,此外,媒體也能掌控網頁資料呈現的效率,不用擔心太多不可控因素。

圖/作者截圖製作

而聯合新聞網與yahoo奇摩新聞則是利用線上資料視覺化服務來處理即時圖表,如此一來,就不用花太多人力成本在事前設計與網頁維護工作,同時也能獲得可用的視覺化圖表。

但使用線上服務常要載入跑圖表所需的JS套件,對網頁loading來說是不小負擔,而且使用者網路速度不一,使用者瀏覽網頁時可能就要等待一些時間才會看到圖表(此時有些使用者可能就會想離開網頁,俗稱跳出);再加上線上服務仰賴服務開發者提供的模板,能夠客製化的空間不大,無法輕易達到維護視覺設計細節或整體風格的目的。

不過我們觀察到,也許是為了避免受限於線上服務的缺點,聯合新聞網在開票結束後,就將原本用線上服務呈現的圖表替換成靜態圖檔。

圖/作者截圖製作

這樣的做法除了避開線上服務載入慢問題,換成靜態圖檔後,日後管理網頁只要確保自己的資料就好,不用擔心線上服務或資料介接出狀況,大大降低維護的成本與風險。

在圖表設計方面,我們則歸納出三個觀察重點 — — 分析角度、用色與分析指標,各家媒體通常因報導策略不同,而選擇側重不同重點,我們便能夠從這幾個面向來觀察媒體想要凸顯的選情亮點。

視覺化設計1|戰場劃定:只是一場公投,還是大選指標事件?

這一次公投各政黨紛紛表態,地方基本盤表現也成為焦點。不過每個媒體議題界定方式不同,這一點可以從圖表分析角度與用色看到端倪。

例如天下雜誌將公投結果看作2022地方選舉前哨戰,把公投結果、2020總統大選與2018年地方選舉放在一起比較。

圖/作者截圖製作

READr與聯合報也在圖表用色上,直接用藍綠表示同意率與不同意率的意義,表達比較藍綠地方勢力的意味。

左圖/取自READr網站、右圖/取自聯合新聞網網站

有些媒體則選擇不直接將藍綠配色用在公投結果中,例如中央社的配色為紅黃色調,將報導重點聚焦在公投結果的比較之上。(關鍵評論網也做了類似處理)

圖/皆取自中央社網站

這一點相當有趣,我們也反思是否能夠直接將公投結果標上藍綠。《轉角國際》評論文章曾討論美國選舉中,媒體或政黨都藉由操作特定符號來加強認同與集體共識的現象,例如紅大象代表共和黨、藍驢子則是民主黨。該文作者指出,即便顏色與動物等符號的政治印象強烈,尚沒有直接證據能作證顏色會影響選民投票意向。

不過,資訊圖表畢竟是簡化且主觀的資訊表達方法,不論是圖表製作者或觀察者,都可以仔細思考圖表用色背後所帶有的符號意義,以及顏色如何牽動讀者的情緒或想法。

視覺化設計2|選擇指標:怎麼比較選舉結果?得票率、催票率哪個比較好?

值得注意的是,這次媒體不只端出基本款同意率與不同意率的比較,也用「催票率」差距來討論選情,以貼近實際政治勢力消長狀況。

葉高華老師在《菜市場政治學》的文章中提到,「催票率」的分母為選舉人總數(公投稱投票權人數),比起以有效票作為分母的同意率與不同意率,更能反映出某政黨獲得選票的能力,因此用「催票率」作為選情分析比較標的,能進一步討論選舉結果的政治意義。(更多解釋與討論可見原始文章

以催票率比較各地選情的圖表可見關鍵評論網與中央社的報導:

左圖/取自關鍵評論網網站、右圖/取自中央社網站

內華達大學拉斯維加斯分校政治系助理教授王宏恩也在端傳媒比較這次公投與2020總統大選的催票率,除了圖表內容有趣之外,也從不同指標比較其關聯性,清楚說明選舉表現與政黨勢力變化的關係。

圖/皆取自端傳媒網站(作者瀏覽時端傳媒在此篇未加上付費閱讀牆,若日後改為付費閱讀將移除付費範圍內容)

DD例行公事——看完圖表後開始反思——以下是我們感到好奇或有討論空間的問題:

討論1|如果要呈現公投通過門檻,有哪些呈現方式?不同呈現方法有什麼優勢/劣勢?

在這次開票視覺化結果中,我認為最有趣的是每一家所端出的基本選情比較。

根據《公民投票法》,公投案通過需同時達到有效同意票達投票權人數1/4(此次為495萬6367票),且有效同意票多於不同意票兩個門檻;而圖表呈現的所要考量的重點就是如何並陳同意票比率、同意與不同意票數量比較兩個指標。

大部分的媒體用長條圖來分析,並以輔助文字提供更多資訊。例如天下雜誌的做法是將同意率與不同意率相疊比較,比文字呈現同意票比率,讓圖表版面更簡潔乾淨。

圖/截自天下雜誌網站

而中央社、關鍵評論網與公視選擇用輔助線來表示同意票比率門檻,以虛線提供讀者閱讀線索,引導閱讀動線。

左圖/取自中央社網站、中圖/取自關鍵評論網站、右圖/取自公視新聞網網站

聯合新聞網則是直接以數字呈現結果,並加上圓餅圖分析比較。

前面所列都是常見票數比較的方式,如果以版面利用效率來說,考慮這次投票率不高,如果以單一長條圖進行視覺化,圖右方有許多空白區域,以堆疊長條圖直接比同意率與不同意率的做法,相對而言節省許多版面空間。

我認為如果考量到手機版讀者的需求,設計排版時需要提高版面利用效率,因此愈能節省空間的圖表可能就愈適合作為視覺化方法。

討論2|大蕃薯再度洗版,地圖是表現選情結果的好方法嗎?

此處大蕃薯指的是以縣市層級為分析單位的面量圖視覺化

在疫情篇我們已經討論過,地圖與面量圖事實上並非視覺化的好工具,因為讀者可能無法輕易從圖表中獲得所需資訊。(若對這部分的討論有興趣,可以參考先前的文章;tips:直接搜尋「疫情地圖」就能快速找到相關段落喔!)

天下負責前端設計的史蒂芬談到他們不用大蕃薯的原因:

台灣天生就不適合用填色地瓜(面量地圖)做資料視覺化,因為地形與人口分布的差異,視覺上色塊的面積很容易讓讀者造成誤讀。

因此這次天下呈現區域公投結果時,以散佈圖呈現各區選情,取代「大蕃薯」比較。

不過,也有媒體更細緻進行鄉鎮市區村里的分析層次,例如READr與臉書「統計der日常」作者JIASIN YU製作了鄉鎮市層級的圖表:

左圖/取自READr網站、右圖/取自作者JIASIN YU臉書

我認為這樣的圖表涵蓋許多細節,可以提供讀者不同的觀察視角。而若要討論這樣的圖表設計是否符合讀者需求,就需要回頭思考不同的報導脈絡與圖表設計目的,無法一概而論。

以上就是我們對公投視覺化圖表的觀察,謝謝你閱讀到這邊!

你有什麼不同的想法嗎?有任何建議都歡迎告訴我們,也請拍拍手 👏 鼓勵我們寫更多文章👩🏻‍💼

謝謝子軒、Steven、Helene、Kerwin 一起討論公投視覺化方法與提供編輯意見,也大方分享從媒體實務工作來分享看法☺️

--

--

Ting-Ni Wu
DD Story Hub

各種練習紀錄|Project Management, Python, Data, Storytelling|Contact: hihidia2175@gmail.com