摸索、嘗試，視覺化政治獻金資料
首先，感謝團隊花時間把這份政治獻金資料從監察院帶出來，而且還花了不少手工處理成程式可以讀取的格式，以及中研院李宗榮老師對於營利事業捐贈資料處理上的許多建議，在製作查找政商關係工具時能夠有更多的想像。
發想與討論
政治獻金中的營利事業捐贈明細資料，是以每一位立委為單位，條列出以營利事業名義捐贈給該立委的公司，其中包含該公司的統一編號、公司名稱、捐贈金額等等。在拿到這份資料的時候，我最初的想法已是用類似「連連看」的方式去想像每一位立委受捐贈的情形，所以在一開始實驗不同視覺化的時候有用 D3.js 嘗試 Sankey Diagram、Chord Diagram 以及最後定案的 Force-Directed Graph 來呈現。
會採用 Force 來做關係視覺化除了它本身已是一個公認的方法外，跟 Sankey 和 Chord 互相比較之後，我認為節點（在我們的工具中就是立委候選人、集團、公司）的擺放位置可以在 Force 中的任何地方，所以相對自由，而且在節點間連線的呈現上 Sankey 跟 Chord 也比較錯綜複雜，在易讀性上的效果沒有很好，另外 Sankey 跟 Chord 的隱喻較多，讀者可能需要時間消化，表現上沒有 Force 直接，所以放棄了這兩種呈現方式，還好在工具發布出去之後有得到一些覺得「好玩」、「有趣」的回饋， 我想 Force 可以拖拉甩動的物理性質還是在視覺化本身上增添了一點無傷大雅的趣味性質，一開始接觸 D3.js 的時候我也是對 Force 印象最深刻。
後來對於視覺化呈現的發想上就比較收斂到在 Force 上做思考跟討論，包括顏色、公司的 icon、立委照片怎麼放、還有互動等等，專題的製作上我們有記者、設計師以及工程師分工合作，但在討論上並不是像單方向的流水線，而是不斷的互相交流與溝通，開會時也有來自團隊成員的想法。
值得一提的是在視覺化的互動上大概是我們討論最多次的議題之一，由於在查找工具製作的初期記者就很明確定位它是一個需要操作的探索式工具，通常我會盡量想避免將資訊藏在與視覺化的互動中，但在工具上能夠有適量的互動則可以接受，所以在 mouseover 於節點、邊線時有 tooltip，click 節點可以連結到不同的立委候選人、公司。
視覺化的呈現討論了差不多的時候，就是整體介面的設計，我們希望工具是以每一位候選人、集團、公司出發來開始探索，所以使用了 lightbox 的方式來做，並且搭配一些以候選人、集團、公司為出發點的輔助資訊，這些輔助資訊一樣有做互動，mouseover 時視覺化有對應的回饋，click 一樣有連結的效果。
一開始在發想的時候，還沒有想像到一家公司很有可能會同時捐給好幾個立委的，甚至是之後能將公司整合成集團，能夠呈現有趣的拓樸。在集團資料開始連結進來之後，儘管查找工具整體的架構沒有太大的變化，但「連連看」的效果其實提升不少，透過 Force 的呈現能看到熟悉的台灣集團如何透過一些子公司捐獻政治獻金給立委，哪些立委又同時收受一些大集團的捐贈，不再是一位立委好像是都受到看似互相沒有關係的公司而來的捐贈。
使用到的技術
資料視覺化之前，處理資料是必然的過程，由於我一直以來已習慣使用 OpenRefine，我在 data cleaning 的部分就直接使用 OpenRefine 來清理，它能夠像 Excel 做簡單的篩選及運算，也可以透過 GREL 寫一點 script 來批次處理資料，而且執行的順暢度我認為比 Excel 快，在資料處理的過程中蠻常和記者一起使用 OpenRefine 來討論資料的細節。
資料清乾淨後，會想要從很多方向來看這份資料，譬如說我們的工具是以每一位立委候選人、集團、公司的立場來看這份資料，這個部分的資料轉換我直接交給強大的 d3.nest 來做，它的語法很直覺，告訴它你想把資料怎麼切即可。
資料視覺化的部分當然也是直接使用 D3.js 來做，對於 Force-Directed Graph，D3 有一整個 d3-force 的 module 來幫你處理好所有跟 layout 有關數學運算，你只須負責將資料結構定義好在倒進去即可產生一個基本的視覺化，這不代表 D3.js 是一個套版功能的圖表產生器，因為你還是需要花時間將基本的視覺化雕琢出理想中的呈現，不過 D3.js 的作者有架了一個 bl.ocks.org，裡面廣納了許多用 D3.js 製作的視覺化作品，在卡關的時候能夠幫上不少忙。
而整個專題的架構我是用 Vue.js 的 vue-cli 來產生並撰寫的（因為目前也比較熟 Vue 而已），有 opensource 到 github 上，由於我們這次是製作探索式工具的關係，使用者想要透過各種操作來探索多位立委的可能性是很大的，這時候有個強大的 JavaScript framework 來幫我處理繁雜的 data-bindings 就蠻重要的，使專題得以依使用者的操作流暢地切換不同立委候選人、集團、公司，然後處理好資料並呈現；剛好 D3 4.0 版本開始改用 ES6 modules 的方式來撰寫，在 vue-cli project 中直接 import 來使用是沒有什麼問題的；加上這次的政治獻金專題除了工具外，還有記者寫的獻金解析文章，Vue.js 能夠讓我直接引用 vue-router 來做 single page application，讓讀者除了使用工具探索資料外，也能快速地切換到文章區。
小結
接觸政治獻金資料之前，我也對政治獻金的了解非常粗淺，這次針對營利事業捐贈製作的政商關係查找工具可能沒有太多資料分析成分在裡面，但我認為至少能夠初步將這份不易取得的資料從監察院拿出來後，在上面用視覺化的方式潤飾，希望可以吸引到原本對政治獻金營利事業捐贈這部分沒有想像的人，至少是吸引自己本身來了解一位候選人在選舉期間的花費背後其實需要的是這麼多企業及公司來投入。
隨著這份專題產出後，也算驗證在視覺化開始動工之前，有更多的時間必然會花在討論如何有效且忠實的呈現出資料的樣貌，以及資料的處理，而要動手做出一個好的資料視覺化我相信一定不是很會寫程式這麼簡單而已，而是要大量的臨摹以及嘗試，並永遠探索更好的呈現方式。
