有關網絡攻擊的世界地圖是怎么開發的？
數據可視化一直是一個很有趣的領域。許多普通人直觀上難以感受的數據，如漏洞分布、實時流量分析等，通過數據可視化的手法，可以清晰地看出數據的結構特點和每一個部分之間的內在聯系。
著名數據可視化庫 D3.js 的部分應用
D3.js 可視化群關系，來自利用 d3.js 對大數據資料進行可視化分析
數據可視化除了常用的圖表之類，與地理位置信息系統（GIS）的結合也是其中一個有趣的應用。
首先是數據的準備，要做全球的分布圖，得有全網掃描的實力才行哦。HeartBleed 風波的當天晚上，ZoomEye 就給全球的公網機器做了一次大體檢，第一時間統計了受影響 443 端口服務器的數據，包括地區分布數量、經緯度等信息。第二天我們就公布了這個 3D 版的全球影響分布。在接下來的幾天內，我們又針對同樣受波及的 465,993,995 等端口進行了持續監測，得到了第一手數據。
IP 到經緯度的轉換使用了著名的 MaxMind - GeoIP2 ，一個 IP 地址的地理位置數據庫，可以根據 IP 獲取國家、地區、經緯度等信息。這里插播一個花絮，很多人都注意到 HeartBleed 漏洞分布在南極點上也有一個紅點。我檢查了數據發現的確是有這樣一臺存在漏洞的服務器，IP 地址在 MaxMind 的數據庫查詢結果也真是南極點。南極要是真有服務器，能省下很多機房散熱的成本呢，不過保持網絡連接就很困難了。這可能只是 MaxMind 里的一個彩蛋而已？
這個 3D 地球儀是從 Chrome 的實驗項目 WEBGL-Globe 修改而來。WEBGL-Globe 基于 THREE.js，是利用 WEBGL 技術在網頁上創建 3D 交互內容的一個演示，可以直直觀地在地球儀上展示數據的地理位置和數量。關于這個工具，在官網上可以看到更多例子。
基于 WEBGL-globe 開發的應用還有這個實時的比特幣交易展示 Realtime Bitcoin Globe 。在每一筆交易發生的時候，在地圖上會根據數額顯示對應大小的圖形，并自動跳轉到對應經緯度。數據實時傳輸使用了 WebSocket 技術，同樣也是 HTML5 的新特性。這個演示本身不開源，但是在 GitHub 上有一個類似的工程 diox/bitcoin-websockets-globe 可做參考。
Google 在 3D 地球的應用上還有另一個很有代表性的例子 Small Arms Imports / Exports 。這個演示是 Google Ideas 在 2012 年根據和平研究所 Oslo 提供的軍火進出口數據描繪的交互可視化工具。比 WEBGL-Globe 多了一個非常重大的突破是，他的國家地區是可以點擊的，單擊之后可以出現對應國家的數據，還提供了一個時間軸以切換不同年份。
視覺效果讓人印象極其深刻，不過在這幾個演示里面是最消耗系統資源的。
這個演示的源代碼在 dataarts/armsglobe · GitHub 。不過編碼風格比較差，跨腳本的全局變量共享給二次開發造成了巨大的難度，學習一下就好了。對這個項目的開發過程和具體原理有興趣的同學可以參考這篇文章 Ghost Hack - Arms Trade Visualization 。
真正把 3D 技術做到登峰造極的是逆天的俄羅斯人。卡巴斯基制作的這個實時網絡威脅地圖，支持的展示有定向攻擊路徑，地點；切換平面圖和 3D 球體時有變換動畫；每一個國家區域都是矢量圖，無限放大也不會影響清晰度；交互性和實用性上簡直喪心病狂；渲染 3D 的代碼中沒有依賴任何第三方庫（包括 THREE.js）。
不僅在視覺上非常炫目，性能優化也做到了極致。數據傳輸使用了二進制數組，編碼成 base64 之后打包成 JSON 的辦法，壓縮率非常理想。在以上介紹的幾個網頁 3D 程序中，這是資源占用最少，操作最流暢的一個。
唯一有些坑爹的是“real-time”有些名不副實，其實這個程序只會每隔一段時間去請求服務器后端靜態的 json 數據文件。不過已經非常逆天了。這個東西不開源，壓縮過的腳本讀起來也比較吃力，應用在自己的項目中有些困難。
速來膜拜：Find out where you are on the Cyberthreat map / Узнай， где сейчас кипит кибервойна
看完上面幾個演示估計都目瞪口呆了吧。WEBGL 目前還沒有大規模地在網頁開發中應用，許多項目都只是實驗性質。前端開發者最要命也是最痛恨的是用戶瀏覽器的兼容問題，尤其是大量過時的 IE 瀏覽器。
所以在全球分布圖的方案上，除了 3D，我們還提供了備選的平面圖版本。
OpenSSL HeartBleed 漏洞影響分布
ZoomEye 使用的 2D 分布圖和 HoneyMap 都用了 jVectorMap 開源庫。這個開源庫使用矢量圖渲染地圖，可以無限縮放。支持兩種類型：散點分布（HoneyMap 的實時地點）和地區統計（ZoomEye 的漏洞分布圖）。還可以根據需要選擇地圖，常用的有全球國家/地區，中國省份地圖，美國各州地圖等。支持 IE6。
做平面圖還可以直接使用 Google Maps API ，而且瀏覽器兼容性也不錯。Google Maps 上的附著物可以放路標、折線、多邊形、自定義繪圖、熱力圖等。可能唯一的缺點就是會遇上我朝特有的偶發性打不開網頁的情況了。
當然，百度什么的也是不錯的。
說到熱力圖，不得不說 heatmap.js。熱力圖是一種在二維平面上同時展示數據的位置和數量分布的圖表，展示上沒有散點圖這般精確，也能直觀地反映出數據疏密分布特點。由于 heatmmap.js 使用了 canvas 進行渲染，官方不支持低版本的 IE 瀏覽器，至于是否可以使用 explorercanvas - HTML5 Canvas for Internet Explorer 兼容，我沒有試過。
heatmap.js 與 Google 地圖結合的例子可以參考這個：heatmap.js Examples: Google Maps Heatmap Layer
在 HeartBleed 風波后，ZoomEye 團隊意識到數據可視化在信息安全中的應用將會越來越多。我正在嘗試開發一個更具通用性的開源 3D 地理位置展示組件，希望能給有類似需求的同學予以幫助。半成品地址：ChiChou/tellurian - GitHub
<span id="shareA4" class="fl"> </span>
</div>