有關網路攻擊的世界地圖是怎麼開發的？比如 ZoomEye 經常有一些這樣很酷的地圖~
阿新 • • 發佈：2019-02-16
Echarts 團隊出大殺器了——基於 WebGL 的地球儀元件，有類似需求的同學趕緊直奔 echarts-x：
Examples - Powered by ECharts-X
-----
資料視覺化一直是一個很有趣的領域。許多普通人直觀上難以感受的資料，如漏洞分佈、實時流量分析等，通過資料視覺化的手法，可以清晰地看出資料的結構特點和每一個部分之間的內在聯絡。
<img src="https://pic3.zhimg.com/db5f73cdf4b18fea1c17ea9344aa944a_b.jpg" data-rawwidth="893" data-rawheight="738" class="origin_image zh-lightbox-thumb" width="893" data-original="https://pic3.zhimg.com/db5f73cdf4b18fea1c17ea9344aa944a_r.jpg">
D3.js 視覺化群關係，來自利用d3.js對大資料資料進行視覺化分析
資料視覺化除了常用的圖表之類，與地理位置資訊系統（GIS）的結合也是其中一個有趣的應用。
首先是資料的準備，要做全球的分佈圖，得有全網掃描的實力才行哦。HeartBleed 風波的當天晚上，ZoomEye 就給全球的公網機器做了一次大體檢，第一時間統計了受影響 443 埠伺服器的資料，包括地區分佈數量、經緯度等資訊。第二天我們就公佈了這個3D版的全球影響分佈。在接下來的幾天內，我們又針對同樣受波及的465,993,995等埠進行了持續監測，得到了第一手資料。
IP到經緯度的轉換使用了著名的 MaxMind - GeoIP2
<img src="https://pic1.zhimg.com/1195b17959f1c69ef0f2ed71b494ca1c_b.jpg" data-rawwidth="875" data-rawheight="567" class="origin_image zh-lightbox-thumb" width="875" data-original="https://pic1.zhimg.com/1195b17959f1c69ef0f2ed71b494ca1c_r.jpg">
這個3D地球儀是從 Chrome 的實驗專案 WEBGL-Globe 修改而來。WEBGL-Globe 基於 THREE.js，是利用 WEBGL 技術在網頁上建立 3D 互動內容的一個演示，可以直直觀地在地球儀上展示資料的地理位置和數量。關於這個工具，在官網上可以看到更多例子。
基於 WEBGL-globe 開發的應用還有這個實時的比特幣交易展示 Realtime Bitcoin Globe 。在每一筆交易發生的時候，在地圖上會根據數額顯示對應大小的圖形，並自動跳轉到對應經緯度。資料實時傳輸使用了 WebSocket 技術，同樣也是 HTML5 的新特性。這個演示本身不開源，但是在 GitHub 上有一個類似的工程 diox/bitcoin-websockets-globe 可做參考。
<img src="https://pic1.zhimg.com/9ea996d80d5ce07956df70ef97796cec_b.jpg" data-rawwidth="1058" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="1058" data-original="https://pic1.zhimg.com/9ea996d80d5ce07956df70ef97796cec_r.jpg">
Google 在 3D 地球的應用上還有另一個很有代表性的例子 Small Arms Imports / Exports 。這個演示是 Google Ideas 在 2012 年根據和平研究所Oslo提供的軍火進出口資料描繪的互動視覺化工具。比 WEBGL-Globe 多了一個非常重大的突破是，他的國家地區是可以點選的，單擊之後可以出現對應國家的資料，還提供了一個時間軸以切換不同年份。
視覺效果讓人印象極其深刻，不過在這幾個演示裡面是最消耗系統資源的。
<img src="https://pic2.zhimg.com/83cb645fc52b421939137705d5b1f3a5_b.jpg" data-rawwidth="1366" data-rawheight="643" class="origin_image zh-lightbox-thumb" width="1366" data-original="https://pic2.zhimg.com/83cb645fc52b421939137705d5b1f3a5_r.jpg">
這個演示的原始碼在 dataarts/armsglobe · GitHub 。不過編碼風格比較差，跨指令碼的全域性變數共享給二次開發造成了巨大的難度，學習一下就好了。對這個專案的開發過程和具體原理有興趣的同學可以參考這篇文章 Ghost Hack - Arms Trade Visualization 。
真正把 3D 技術做到登峰造極的是逆天的俄羅斯人。卡巴斯基製作的這個實時網路威脅地圖，支援的展示有定向攻擊路徑，地點；切換平面圖和3D球體時有變換動畫；每一個國家區域都是向量圖，無限放大也不會影響清晰度；互動性和實用性上簡直喪心病狂；渲染3D的程式碼中沒有依賴任何第三方庫（包括THREE.js）。
不僅在視覺上非常炫目，效能優化也做到了極致。資料傳輸使用了二進位制陣列，編碼成base64之後打包成JSON的辦法，壓縮率非常理想。在以上介紹的幾個網頁 3D 程式中，這是資源佔用最少，操作最流暢的一個。
<img src="https://pic1.zhimg.com/2e5ec28b023dda52936ed9270e39d20c_b.jpg" data-rawwidth="884" data-rawheight="651" class="origin_image zh-lightbox-thumb" width="884" data-original="https://pic1.zhimg.com/2e5ec28b023dda52936ed9270e39d20c_r.jpg">
唯一有些坑爹的是“real-time”有些名不副實，其實這個程式只會每隔一段時間去請求伺服器後端靜態的 json 資料檔案。不過已經非常逆天了。這個東西不開源，壓縮過的指令碼讀起來也比較吃力，應用在自己的專案中有些困難。
速來膜拜：Find out where you are on the Cyberthreat map / Узнай, где сейчас кипит кибервойна
看完上面幾個演示估計都目瞪口呆了吧。WEBGL 目前還沒有大規模地在網頁開發中應用，許多專案都只是實驗性質。前端開發者最要命也是最痛恨的是使用者瀏覽器的相容問題，尤其是大量過時的 IE 瀏覽器。所以在全球分佈圖的方案上，除了 3D，我們還提供了備選的平面圖版本。
<img src="https://pic1.zhimg.com/c560d01991d08db4864081f67c40d3ec_b.jpg" data-rawwidth="1236" data-rawheight="567" class="origin_image zh-lightbox-thumb" width="1236" data-original="https://pic1.zhimg.com/c560d01991d08db4864081f67c40d3ec_r.jpg">
OpenSSL
HeartBleed 漏洞影響分佈
ZoomEye 使用的 2D 分佈圖和 HoneyMap 都用了 jVectorMap 開源庫。這個開源庫使用向量圖渲染地圖，可以無限縮放。支援兩種型別：散點分佈（HoneyMap 的實時地點）和地區統計（ZoomEye的漏洞分佈圖）。還可以根據需要選擇地圖，常用的有全球國家/地區，中國省份地圖，美國各州地圖等。支援IE6。
用了 jVectorMap 的例子：
Sicherheitstacho.eu
做平面圖還可以直接使用 Google Maps API ，而且瀏覽器相容性也不錯。Google Maps 上的附著物可以放路標、折線、多邊形、自定義繪圖、熱力圖等。可能唯一的缺點就是會遇上我朝特有的偶發性打不開網頁的情況了。
例子：
ModSecurity status map
<img src="https://pic3.zhimg.com/a19a4d7c671f1ad27afe967bd3846f52_b.jpg" data-rawwidth="932" data-rawheight="219" class="origin_image zh-lightbox-thumb" width="932" data-original="https://pic3.zhimg.com/a19a4d7c671f1ad27afe967bd3846f52_r.jpg">
說到熱力圖，不得不說 heatmap.js。熱力圖是一種在二維平面上同時展示資料的位置和數量分佈的圖表，展示上沒有散點圖這般精確，也能直觀地反映出資料疏密分佈特點。由於 heatmmap.js 使用了canvas進行渲染，官方不支援低版本的 IE 瀏覽器，至於是否可以使用 explorercanvas - HTML5 Canvas for Internet Explorer 相容，我沒有試過。
heatmap.js 與 Google 地圖結合的例子：
heatmap.js | Examples: Google Maps Heatmap Layer
20140507補充：
基於D3.js的：
視覺化DDoS攻擊地圖
基於Flash的：
Real-time Web Monitor
Internet threats statistics
Examples - Powered by ECharts-X
-----
資料視覺化一直是一個很有趣的領域。許多普通人直觀上難以感受的資料，如漏洞分佈、實時流量分析等，通過資料視覺化的手法，可以清晰地看出資料的結構特點和每一個部分之間的內在聯絡。
<img src="https://pic3.zhimg.com/db5f73cdf4b18fea1c17ea9344aa944a_b.jpg" data-rawwidth="893" data-rawheight="738" class="origin_image zh-lightbox-thumb" width="893" data-original="https://pic3.zhimg.com/db5f73cdf4b18fea1c17ea9344aa944a_r.jpg">
D3.js 視覺化群關係，來自利用d3.js對大資料資料進行視覺化分析
資料視覺化除了常用的圖表之類，與地理位置資訊系統（GIS）的結合也是其中一個有趣的應用。
首先是資料的準備，要做全球的分佈圖，得有全網掃描的實力才行哦。HeartBleed 風波的當天晚上，ZoomEye 就給全球的公網機器做了一次大體檢，第一時間統計了受影響 443 埠伺服器的資料，包括地區分佈數量、經緯度等資訊。第二天我們就公佈了這個3D版的全球影響分佈。在接下來的幾天內，我們又針對同樣受波及的465,993,995等埠進行了持續監測，得到了第一手資料。
IP到經緯度的轉換使用了著名的 MaxMind - GeoIP2
<img src="https://pic1.zhimg.com/1195b17959f1c69ef0f2ed71b494ca1c_b.jpg" data-rawwidth="875" data-rawheight="567" class="origin_image zh-lightbox-thumb" width="875" data-original="https://pic1.zhimg.com/1195b17959f1c69ef0f2ed71b494ca1c_r.jpg">
這個3D地球儀是從 Chrome 的實驗專案 WEBGL-Globe 修改而來。WEBGL-Globe 基於 THREE.js，是利用 WEBGL 技術在網頁上建立 3D 互動內容的一個演示，可以直直觀地在地球儀上展示資料的地理位置和數量。關於這個工具，在官網上可以看到更多例子。
基於 WEBGL-globe 開發的應用還有這個實時的比特幣交易展示 Realtime Bitcoin Globe 。在每一筆交易發生的時候，在地圖上會根據數額顯示對應大小的圖形，並自動跳轉到對應經緯度。資料實時傳輸使用了 WebSocket 技術，同樣也是 HTML5 的新特性。這個演示本身不開源，但是在 GitHub 上有一個類似的工程 diox/bitcoin-websockets-globe 可做參考。
<img src="https://pic1.zhimg.com/9ea996d80d5ce07956df70ef97796cec_b.jpg" data-rawwidth="1058" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="1058" data-original="https://pic1.zhimg.com/9ea996d80d5ce07956df70ef97796cec_r.jpg">
Google 在 3D 地球的應用上還有另一個很有代表性的例子 Small Arms Imports / Exports 。這個演示是 Google Ideas 在 2012 年根據和平研究所Oslo提供的軍火進出口資料描繪的互動視覺化工具。比 WEBGL-Globe 多了一個非常重大的突破是，他的國家地區是可以點選的，單擊之後可以出現對應國家的資料，還提供了一個時間軸以切換不同年份。
視覺效果讓人印象極其深刻，不過在這幾個演示裡面是最消耗系統資源的。
<img src="https://pic2.zhimg.com/83cb645fc52b421939137705d5b1f3a5_b.jpg" data-rawwidth="1366" data-rawheight="643" class="origin_image zh-lightbox-thumb" width="1366" data-original="https://pic2.zhimg.com/83cb645fc52b421939137705d5b1f3a5_r.jpg">
這個演示的原始碼在 dataarts/armsglobe · GitHub 。不過編碼風格比較差，跨指令碼的全域性變數共享給二次開發造成了巨大的難度，學習一下就好了。對這個專案的開發過程和具體原理有興趣的同學可以參考這篇文章 Ghost Hack - Arms Trade Visualization 。
真正把 3D 技術做到登峰造極的是逆天的俄羅斯人。卡巴斯基製作的這個實時網路威脅地圖，支援的展示有定向攻擊路徑，地點；切換平面圖和3D球體時有變換動畫；每一個國家區域都是向量圖，無限放大也不會影響清晰度；互動性和實用性上簡直喪心病狂；渲染3D的程式碼中沒有依賴任何第三方庫（包括THREE.js）。
不僅在視覺上非常炫目，效能優化也做到了極致。資料傳輸使用了二進位制陣列，編碼成base64之後打包成JSON的辦法，壓縮率非常理想。在以上介紹的幾個網頁 3D 程式中，這是資源佔用最少，操作最流暢的一個。
<img src="https://pic1.zhimg.com/2e5ec28b023dda52936ed9270e39d20c_b.jpg" data-rawwidth="884" data-rawheight="651" class="origin_image zh-lightbox-thumb" width="884" data-original="https://pic1.zhimg.com/2e5ec28b023dda52936ed9270e39d20c_r.jpg">
唯一有些坑爹的是“real-time”有些名不副實，其實這個程式只會每隔一段時間去請求伺服器後端靜態的 json 資料檔案。不過已經非常逆天了。這個東西不開源，壓縮過的指令碼讀起來也比較吃力，應用在自己的專案中有些困難。
速來膜拜：Find out where you are on the Cyberthreat map / Узнай, где сейчас кипит кибервойна
看完上面幾個演示估計都目瞪口呆了吧。WEBGL 目前還沒有大規模地在網頁開發中應用，許多專案都只是實驗性質。前端開發者最要命也是最痛恨的是使用者瀏覽器的相容問題，尤其是大量過時的 IE 瀏覽器。所以在全球分佈圖的方案上，除了 3D，我們還提供了備選的平面圖版本。
<img src="https://pic1.zhimg.com/c560d01991d08db4864081f67c40d3ec_b.jpg" data-rawwidth="1236" data-rawheight="567" class="origin_image zh-lightbox-thumb" width="1236" data-original="https://pic1.zhimg.com/c560d01991d08db4864081f67c40d3ec_r.jpg">
OpenSSL
HeartBleed 漏洞影響分佈ZoomEye 使用的 2D 分佈圖和 HoneyMap 都用了 jVectorMap 開源庫。這個開源庫使用向量圖渲染地圖，可以無限縮放。支援兩種型別：散點分佈（HoneyMap 的實時地點）和地區統計（ZoomEye的漏洞分佈圖）。還可以根據需要選擇地圖，常用的有全球國家/地區，中國省份地圖，美國各州地圖等。支援IE6。
用了 jVectorMap 的例子：
Sicherheitstacho.eu
做平面圖還可以直接使用 Google Maps API ，而且瀏覽器相容性也不錯。Google Maps 上的附著物可以放路標、折線、多邊形、自定義繪圖、熱力圖等。可能唯一的缺點就是會遇上我朝特有的偶發性打不開網頁的情況了。
例子：
ModSecurity status map
<img src="https://pic3.zhimg.com/a19a4d7c671f1ad27afe967bd3846f52_b.jpg" data-rawwidth="932" data-rawheight="219" class="origin_image zh-lightbox-thumb" width="932" data-original="https://pic3.zhimg.com/a19a4d7c671f1ad27afe967bd3846f52_r.jpg">
說到熱力圖，不得不說 heatmap.js。熱力圖是一種在二維平面上同時展示資料的位置和數量分佈的圖表，展示上沒有散點圖這般精確，也能直觀地反映出資料疏密分佈特點。由於 heatmmap.js 使用了canvas進行渲染，官方不支援低版本的 IE 瀏覽器，至於是否可以使用 explorercanvas - HTML5 Canvas for Internet Explorer 相容，我沒有試過。
heatmap.js 與 Google 地圖結合的例子：
heatmap.js | Examples: Google Maps Heatmap Layer
20140507補充：
基於D3.js的：
視覺化DDoS攻擊地圖
基於Flash的：
Real-time Web Monitor
Internet threats statistics