洪于雰的實習報告

工作環境介紹

工作內容

工作環境介紹

我目前所工作的地方為位於歷史語言研究所五樓的數位文化中心，在這裡的環境相當舒適，每個人都配有一台電腦，不用自己帶筆電到處跑。座位也相當寬敞舒適，一整天坐下來不會腰酸背痛。另外，中心有許多書籍可以閱讀，包括院內出版的歷史漫畫以及各種電腦程式相關書籍可以參考，要是有想要看的電腦類相關書籍，只要上網申請，院內就會添購想看的書籍，我覺得真的很棒!

錨點 1

此外，這裡的工作氣氛輕鬆，不管事主管或是學們都相當和善，在遇到困難的時候，他們都不吝伸出援手，也很有耐心地幫忙找到錯誤。也時常主動關心我的學習進度，給予許多意見及學習資源，讓我能夠更有效的學習及寫出程式。

在周邊設施方面，有十元咖啡可以喝以及冰箱，也有電鍋和微波爐可以使用，除此之外還有員工福利社及健身房，同時兼顧員工的健康及口腹之慾，可以說是相當完善。

工作詳述

工作詳述

一開始來到數位文化中心時，主管向我們介紹了目前正在研究發展的項目，有機器學習、文字探勘、文本標記及資料視覺化等。而我最後選擇作資料視覺化。實習期間，主管會交付一些工作或練習給我，我們也都會定期和主管開會和報告我們學習的進度及做出的成品，也可以看到其他實習同學在做甚麼。除了發表自己所學的東西之外，還可以了解到其他同學所做的東西是甚麼，我覺得還滿好的，除了可以了解到其他同學的作品概念，也可以多增加一點資訊知識。

實習期間完成進度

實習期間完成之進度

(1) 視覺化練習-leaflets

由於GIS是我主要學習的部份之一，所以我一開始先練習最基本的leaflets，首先要先建立放置地圖的容器，在使用Openstreetmap上的開放地圖建立最初始的地圖。

左圖為建立marker，圈出想要的區域及在所圈出的區域中建立popup。

左圖為自定義圖標記練習。

(2) 視覺化練習-canvas

HTML5裡面的Canvas標籤結合JavaScript和jQuery做出初步的視覺化圓餅圖。雖然就只是一個小小的圓餅圖，但在這之前也花了我許多時間研究。Canvas雖然只是HTML裡的一個標籤，但在繪製大量視覺化的圖層或是DOM元素的觸發，相比SVG，效率會快很多。

這是由於canvas依賴解析度且不支援事件處理器，所以適合高數據量、高繪製率的圖象繪製；而SVG是向量圖，獨立於解析度且支援事件處理器，所以適合低數據量、低繪製率的圖象繪製。左下圖為單純使用canvas畫布所只做的及滑鼠移至圓餅圖上方會出現提亮效果，如右下圖所示。

在繪製這張圓餅圖的時候遇到了許多難題，其中就是由於canvas不支援事件處理器，所以在觸發效果時，canvas會重畫一張圓餅圖疊加在原本一開始的圖上，造成兩張圖層重疊的狀況，在呈現效果上可以明顯地感覺到。而我最後找到一個叫做globalCompositeOperation的方法，將兩覆蓋重複的圖層刪減，只顯示出一層重複的圖層及沒有重疊的圖層，這樣在視覺上才不會有感覺到兩張重疊的圖層一同顯示。

(3) 結合leaflets與canvas

下圖為我所製作的台灣口密度圖，我是運用canvas讀取台灣地圖的json檔畫出台灣圖，並結合leaflets圖層將台灣地圖嵌入圖層中，讓台灣地圖結合地理位置，在運用上具有更多元的使用方法。

而我在地圖中也添加了popup，在滑鼠移至各縣市之上時會改變區域縣市的顏色及顯示出縣市名稱及密度資料。而為了提高圖層在放大縮小及在交互式時的效率，我特別使用網格化矢量數據將地圖圖層分割，這樣不論是在單獨點擊DOM時，圖層只會重新繪製部分的區塊；或是在放大縮小時，所重新繪製的圖層會在個別網格化圖層內重新繪製，在搭配canvas畫圖，因而提高整體網頁的效率。

(4) 交接

我在四月的時候開始交接翊弘學長的資料視覺化，其中一個是用anychart所建構的treemap，依照深淺度及大小來區分資料，以及在滑鼠點擊時還有資訊量表，並顯示出資料資訊。

另外一個為利用D3.js所畫出的tree，如下圖所示。功能包括在開始時展開所有節點或是關閉所有節點。以及過多的節點以’…’替代，以及在滑鼠點擊’…’之後所展開的節點依據網頁頁面大小來調整間距。由於每個節點以文字方塊取代，所以還需要考慮節點與節點之間的前後差距以及上下節點之間的距離。

(5) 使用者分析-Sankey Diagram 桑基圖

目前我所進行的工作是協助主管修改由D3.js所撰寫的Sankey Diagram。這個Sankey Diagram未來主要是用在使用者分析，藉由這個圖能夠清楚的顯示使用者在網站上的操作。我做了兩個版本，一個是從第一層開始，可以藉由設置的按鈕查看下一層級上一層的操作行；另一個是讓使用者自行選擇想觀看的階層，如下圖所示。