回顧整理之政府開放資料，進行資料之處理與規劃，就資料內容先進行判讀 與簡易分類，以利後續視覺化功能的設計。視覺化功能依照資料的類型與限制，
選擇較為適合的視覺化方法，與可能實作之JavaScript 函式進行處理規劃。
資料圖層
多數研究顯示，居住環境評估指標因評估對象不同而有差異，但在構面上可 以歸納出依循世界衛生組織對於居住環境品質的四大面向，從不同面向之評估因 子資訊進行整理，於臺北市政府開放資料平台進行合適之資料篩選。
臺北市開放資料下載格式多為 CSV，透過 API 介接的資料可選擇 XML、
JSON 與 CSV 格式，惟不支援跨域資料傳輸（特定資料才可藉由跨來源資源共享 的方式傳輸），因此前端頁面若需使用資料，需要下載後再行運用或是利用其他 跨域方法獲取。資料獲取方法也須考量到資料本身的大小、性質，如藉由跨域方 式獲取的資料，就不宜過大或太複雜，避免降低網頁載入及處理的速度；即時性 的資料更新，諸如交通流量監測、空氣盒子、微笑單車各站使用狀況等資料，較 無大量資訊，就較適合跨域使用。而如各地車禍之詳細分類資訊，資料筆數超過 萬筆，並且欄位眾多，就適合先處理過後再行使用。
資料上為臺北市政府各單位提供之表單資料，更新時間依照不同單位有所不 同，因此在規劃資料圖層時，需評估資料的適用特性。由於資料集格式與更新時 間差異，本研究將時間以2016 一年作為取樣基準，區間於 2015 至 2016 更新之 資料為主。主要以呈現長時間的平均狀態的資料為主要採集標的，以符合居住的 環境呈現。
表 8 列舉第二章所回顧之臺北市政府開放資料與其處理方式。首先，判斷 資料對於系統上是否容易直接介接，或是必須先行處理過後再匯入系統。判斷標 準依照其資料來源是否支援跨域呼叫以及資料內容作為基準，資料介接透過 JavaScript 處理後匯入，須處理的資料則依照檔案格式進行分類。在統一轉成 GeoJSON 格式前，依據內容的缺漏進行進一步的處理，缺乏空間資訊資料須做 地理編碼（geocoding）的動作，從地址資訊得知其座標資訊。已有空間資訊之資 料需檢查其座標系統是否符合，最後整理資料處理結束後所輸出之檔案名稱，便 於程式後續辨識之用途。
29
表 8 資料處理方式與檔案格式規劃
使用分類 資料名稱 是否網址介接 替代資料格式 後續處理方式 處理完檔案名稱
安全性
臺北市住宅竊盜點位資訊 X csv 需做geocoding Taipei_homeBurglary.JSON 臺北市汽車竊盜點位資訊 X csv 需做geocoding Taipei_carBurglary.JSON 臺北市事故點位座標 X csv 若需事故類別需join Taipei_accident.JSON
臺北市歷年積水紀錄圖 X kml 確認座標系統 Taipei_flooded.JSON
臺北市土壤液化潛勢圖 O GeoJSON 直接介接
健康性
公害陳情案件分佈位置圖 X shp 確認座標系統 Taipei_pollution.JSON
公害陳情警示區域範圍圖 X shp 確認座標系統 Taipei_pollution_region.JSON
醫院基本資料 X csv 需做geocoding，與診所合併 同下
診所基本資料 X csv 需做geocoding Taipei_hospital.JSON 臺北市加油站及加氣站分
布圖 X JSON 確認座標系統 Taipei_oil.JSON
寧適性
臺北市各級學校分布圖(含 國小.國中.高中職.特教學 校.市立大專院校)
X csv 確認座標系統 Taipei_school.JSON
臺北市公園 O(X JSON 點資料，改用WMS
30
村里戶數、單一年齡人口 X JSON 量龐大，分層為0~14，15~64，65up，Total Taipei_age.JSON
所得 X csv 需join 至 polygon Taipei_salary.JSON
便利性
臺北市公車站牌位置圖 X shp 確認座標系統 Taipei_busstop.JSON
臺北都會區大眾捷運系統
車站點位圖 X shp 確認座標系統 Taipei_MRTstation.JSON
臺北都會區大眾捷運系統
路網圖 X shp 確認座標系統 Taipei_MRTroute.JSON
Youbike 臺北市公共自行
車即時資訊 O JSON 改用PTX 資料
其他 內政部實價登錄資訊 X csv 需做geocoding Taipei_estate_Atype_lite.JSON 資料來源：本研究整理
31
視覺化功能
圖徵資訊的視覺化要考慮到資料本身以及要傳遞給讀者的資訊，從資料層面 出發，空間資料基本的型態可分為點、線、面；從傳遞資訊角度思考，空間是否 會相互影響、邊界影響問題等；從程式設計考量，是否有合適的函式庫，或是能 否實作出來。
本研究採用 Leaflet.js 作為地圖呈現之平台，Leaflet.js 有著輕量且支援 HTML5 的優點，其圖層繪製方式也支援 canvas 繪製技術。大部分傳統電子地圖 仍以 SVG 作為向量圖層的輸出方式，但本研究考量資料圖層於疊加時可能超過 數千筆圖徵，若以SVG 作為輸出，易因物件數量龐大造成延遲現象。canvas 輸 出為程式碼繪製完成後，再輸出至 canvas 物件中，其生成於頁面之物件數量少 於使用SVG 輸出方式，利用 canvas 輸出方式可以減少資料量過大的處理問題，
因此，本研究將利用 Leaflet 中 canvas 輸出之設定（預設為 false），進行地圖圖 面的輸出。在地理視覺化的函式庫選擇上，基於配合 Leaflet.js 圖台，以 Leaflet 相關討論社群與開源程式碼平台 Github 作為支援來源，選擇合適的開源函式庫 進行資料視覺化操作。
表 9 整理從研究所使用的開放資料，整理其資料形態，並可能的視覺化功 能。除了配合居住環境品質構面因子與指標，根據開放資料所公布之資料屬性欄 位，進行主要呈現欄位的篩選，結合欄位設計對應之視覺化功能，像是熱區圖
（heatmap）、面量圖（choropleth map）、點子圖（dot map）等。表 10 則列舉呈 現方法，與其實踐相關功能所對應之套件來源，從Github 中 Leaflet 相關開發專 案與開源分享資源回顧中，找出與研究相關之套件，以實踐不同視覺化的功能。
32
表 9 資料視覺化功能規劃
使用分類 資料名稱 使用圖層(簡化) 資料型態 呈現方法 資訊欄位
安全性
臺北市住宅竊盜點位資訊 住宅竊盜點位 point Heatmap 發生時段 臺北市汽車竊盜點位資訊 汽車竊盜點位 point Heatmap 發生時段 臺北市事故點位座標 交通事故點位 point Heatmap 發生時段 臺北市歷年積水紀錄圖 歷年積水紀錄 polygon choropleth+timeline 淹水深淺 臺北市土壤液化潛勢圖 土壤液化潛勢 polygon choropleth 潛勢高低
健康性
公害陳情案件分佈位置圖
公害案件分佈 point Category+dot
（symbol） 汙染細項 公害陳情警示區域範圍圖 polygon choropleth （未使用）
醫院基本資料
point Category+dot
（symbol） （未使用）
診所基本資料
醫療院所位置 point Category+dot
（symbol） 機構名稱 臺北市加油站及加氣站分布圖 加油加氣點位 point Icon+buffer 所在地址 寧適性 臺北市各級學校分布圖(含國小.
各級學校點位 point Category+dot
（symbol） 學校名稱
33
國中.高中職.特教學校.市立大專 院校)
臺北市公園 公園綠地範圍 WMS
村里戶數、單一年齡人口 村里人口總數 polygon choropleth 人口數量 所得 村里平均薪資 polygon choropleth 薪資所得
便利性
臺北市公車站牌位置圖 point heatmap 站牌名稱
臺北都會區大眾捷運系統車站
點位圖 台北捷運站點 point Icon+buffer 站體名稱 臺北都會區大眾捷運系統路網
圖 台北捷運路線 line Category 路線名稱
Youbike 臺北市公共自行車即時
資訊 微笑單車站點 point Icon 站點名稱
其他 內政部實價登錄資訊 實價登錄坪價 point cluster 每坪單價 資料來源：本研究整理
34
表 10 視覺化功能 JavaScript 套件整理
呈現方法 套件名稱 來源 授權
heatmap Leaflet.heat Github BSD 2-clause
"Simplified"
License
choropleth Leaflet-choropleth Github MIT-LICENSE timeline jQuery UI jQuery+自行開發 MIT-LICENSE category Leaflet.js Leaflet.js+自行開發 BSD 2-clause
"Simplified"
License
dot（symbol） Leaflet.js Leaflet.js+自行開發 BSD 2-clause
"Simplified"
License
icon Leaflet.js Leaflet.js+自行開發 BSD 2-clause
"Simplified"
License
buffer turf.js Github MIT-LICENSE cluster Leaflet.markercluster Github MIT-LICENSE
資料來源：本研究整理
35