A. web端數據可視化（大屏）設計
目前流行數據可視化大屏設計，為了方便大家，我把各個行業的數據大屏進行了整合設計。
作品包括兩部分：數據可視化模板和圖表組件
數據可視化模板：醫防融合數據大屏、慢病患者數據大屏、公衛體檢數據大屏、公衛隨訪數據大屏、家醫簽約數據大屏、醫院數據大屏、醫院運營數據大屏、互聯網醫院數據大屏、電商數據分析大屏、葯店銷售數據大屏、餐飲數據分析大屏、在線教育數據大屏、網站流量訪問數據分析大屏、酒店數據大屏、店鋪交易數據統計、運動健康數據分析、個人健康後台數據分析、創作中心數據分析、電商後台數據分析
圖表組件：數據卡片，折線圖、柱狀圖、餅圖及其他全圖表
支持軟體版本：Axure8.1（兼容Axure9、Axure10）
點擊此處預覽完整設計
部分設計展示：
B. 3d可視化webgl的應用
使用webgl，可以不使用插件的情況下，做一些炫酷的3D作品。
下面列舉一些簡單的應用：
帶有炫酷的粒子效果，動態可交互的3D展示，產品全方位展示，信息簡介等。
樓盤戶型展示，帶有音樂效果，文字介紹，可3D交互操作，點擊玻璃門會打開或者關閉，可以更換牆的色彩和更換地板的素材，實時預覽裝修的效果。
帶有可操作的VR全景展示，360°實景展示而且具有交互性，點擊場景中的燈光會亮或者關，可以定製更多交互性功能。
帶有企業卡通logo的3D展示，可交互操作動畫，點擊會做相應的動作和對話，增加人機對話的樂趣。
各個樓盤3D可視化儀表讀數，可以讀取水電，燃氣等數據，還可以查看數據詳情，能夠放大、旋轉，具有實時可操作性，更加感官方便快捷。
webgl的3D可視化，被廣泛應用在各個行業，包括旅遊展示、博物館文物展示、企業產品宣傳推廣、企業品牌形象塑造、樓盤場景應用、大數據分析等等，3D可視化結合AR、VR、3D動畫交互能產生更多炫酷的應用。
我們提供定製開發，有這方面興趣的都可以咨詢（1565181011）。
C. docker的web可視化管理工具
1、編輯該文件 vim /lib/systemd/system/docker.service
2、刪除配置文件中內容ExecStart=/usr/bin/dockerd xxx(刪除這部分內容)
3、在daemon.json文件中添加如下內容:所有伺服器都可以訪問"hosts":["tcp://0.0.0.0:2375","unix:///var/run/docker.sock"]
4、重啟docker
systemctl daemon‐reload
systemctl restart docker
優點
缺點
1.docker UI(local)
2.cloud
D. 有什麼可視化設計web界面的工具
1、dreamweaver——集WEB端網頁設計和網站管理於一身的所見即所得網頁編輯器
2、Axure——原型設計工具，主要設計WEB原型
3、墨客——原型設計工具，對PC端和WEB端都很友好
以上這幾款使用率都比較高，最近幾年用Axure原型設計的較多。DW工具比較早。
E. 4行代碼就可以完成一個Web版的3D地球可視化展示——Gio.js
Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。
Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。
這個庫的開發是受到Google 2012 Info大會上的某項目可視化的啟發，該項目開發者是Google員工Michael Chang。使用Gio.js就可以快速構建這種炫酷的3D模型，並以此為基礎進行深入地開發。
在HTML的<head>中引入Three.js和Gio.js依賴， 以下展示了如何使用<script>標簽引入依賴:
在引入Three.js和Gio.js在頁面之後，已經可以創建3D Gio地球了。在此我們將先展示如何創建基礎樣式的Gio地球。
創建一個<p>，Gio地球將會被渲染在這個區域中：
添加一下4行Javascript代碼在你的HTML中， 用以創建並渲染：
在Gio.js 1.0發布之後，開發者們提出了很多很酷的、很有建設性的建議，比如微信應用開發者希望Gio.js支持微信小程序，有經驗的Three.js開發者希望Gio.js提供Three.js編程介面等。在經過仔細研究、綜合設計之後，Gio.js 2.0實現了大部分功能，並且添加了有關文檔說明。以下列出了主要的2.0新增特性：
Gio.js僅依賴於Three.js。
經過測試，Gio.js在Three.js R90版本下可以很好地運行和使用。
Gio.js可以運行在以下的瀏覽器環境中:
更多詳細的介紹就不在本文中介紹了，官方文檔非常詳細，感興趣的小夥伴可以直接移步文檔：
Gio.js可以說是Three.js中實踐的非常不錯的了，官方還提供了非常多的實例，通過一些簡單的API配置即可實現非常炫酷的Web3D可視化地球，而且文檔非常詳細，更多實用和有趣的地方等待你的 探索 ！
F. Spark和Hadoop集群的web可視化界面使用
日誌聚合的界面jobhistory，可以看到每個job的分配情況，maptask的分配到哪個節點，及完成情況需要在hadoop的sbin下執行如下命令
mr-jobhistory-daemon.sh start historyserver
Hadoop的web頁面
yarn
spark的web頁面
埠4040
spark-job監控埠
G. CAD/DWG圖Web可視化一站式解決方案-唯傑地圖-vjmap
DWG 圖是 AutoCAD 是 私有 格式，只能在CAD軟體上編輯查看，如何發布至Web上做數據展示，GIS分析應用開發，一直是業內頭疼的事情。
傳統的辦法採用的解析AutoCAD圖形繪制，並封裝成 AcitveX 控制項，在Web顯示。但這需要Web端安裝插件，並且只支持windows平台，而更重要的 Chrome 已不再支持ActiveX技術。
隨著新技術的發展，html5技術已非常成熟，在渲染方面技術非常成熟，越來越多的方案採用html5渲染方式。但CAD與GIS在數據結構上存在較大的差異，CAD數據類型較為豐富，支持簡單點、線、面、多義線、橢圓、塊、文字等多種數據類型，而轉換到GIS中，只轉換為點、線、面、注記等類型。所以會導致存在著和真實CAD圖形繪制差異的問題。
唯傑地圖 https://vjmap.com 採用後端解析CAD的圖形直接渲染成GIS瓦片數據；前端採用最新的WebGL技術，載入渲染出的柵格和矢量數據，完美解決上述問題；
唯傑地圖 為用戶自定義地圖格式WebGIS可視化顯示開發提供的一站式解決方案， 完全兼容dwg格式 、 23d效果完美切換 、 高性能webgl渲染 、 個性化地圖定製 、 矢量柵格瓦片全支持 、 跨平台私有化部署 。支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用WebGL矢量圖塊和自定義樣式呈現互動式地圖, 提供了全新的大數據可視化、實時流數據可視化功能，通過本產品可快速實現瀏覽器和移動端上美觀、流暢的地圖呈現與空間分析，可幫助您在網站中構建功能豐富、交互性強、可定製的地圖應用。
通過 Service 對象的 openMap 方法可打開伺服器上面已存在的地圖，或者通過 fileid 傳入 http 網路路徑或伺服器本地路徑打開一幅 DWG 格式的 CAD圖形 .
獲取上面打開地圖返回的 地理范圍 建立 坐標系 ，然後創建 地圖對象
當滑鼠在地圖的某個實體上面時，需要高亮顯示或者點擊查看，在 矢量瓦片 模式下可調用 ；在 柵格瓦片 下，可調用 enableLayerClickHighlight
地圖提供了在地圖之上繪制覆蓋物的能力，比如點標記、純文本標記、折線、圓、多邊形、矩形等圖形，在繪制中可以對點標記進行標題、圖標等進行設置，對折線可以進行顏色、寬度等屬性進行設置，對於面（圓、多邊形、矩形）同樣可以進行填充色、邊框色、寬度等很多自定義屬性進行設置。
增加一個marker覆蓋物
創建很多正方形拉伸圖層
效果如下:
demo地址 可訪問 https://vjmap.com/demo/#/demo/map/overlay/fillextrusion/fillextrusion
H. 數據可視化的web前端開發採用什麼樣的架構比較合適
所謂數據可視化的web的前端其實從一個廣義角度講，跟傳統網頁開發沒有什麼區別。都是數據 + 模板，組件化模塊化也都是類似。前後端分離什麼的，也是跟傳統網頁開發沒有兩樣。現在node作為中間層來做分離方案是比較多(天貓的wormhole, 淘寶的midway), 數據處理交給java或者其他更適合的，node用來做密集IO和模板展現。（但是對於體量不大的應用，其實不需要考慮這么多）
要不要做成單頁面應用提高體驗取決於你的應用還得看場景，還有開發復雜度等因素（其實一開始不建議做成單應用，除非一開始就有完整的規劃）。如果類似Google Analytics的程序，也不是整站都直接單應用，還是取決於場景。因為往往在網頁中單應用的形式，往往復雜度都會高很多，處理的問題也會疊加，圖表的性能問題，內存問題，持久性問題，過場的問題等等，都是需要考慮的。
對於構建組件庫，無論是Polymer、react都可以，react這么火，但是還是選自己比較熟悉的更好。
前端框架上最好還是mvvm的框架，vue, angular, react都很不錯，用過vue，現在更傾向於使用react。圖表展示，是更重數據交互的，所以肯定是開發以數據驅動的方式來。圖表庫來說，echarts是比較牛逼的了，底層是canvas，網路開源的。highcharts是svg的，老牌牛逼圖表庫，商業使用需要授權。之前我們用的是kcharts(阿里自己開發)。現在更傾向於網路Echarts，從圖表展現和用例豐富上，可以減少很多自己開發的工作量
I. Web漏洞掃描：場景可視化重現技術
隨著公眾對Web安全的聚焦，越來越多的行業領域如運營商、政府電子政務互動平台、企事業門戶網站及教育醫療機構等都已經開始頻繁使用掃描器去評估其風險性，以便提前發現潛在的安全隱患，及時安全加固以保障網站業務的正常持續運轉。反觀掃描器使用群體的變化，已由專業安全人士更多地轉向網站安全運維人員，這就給掃描器自身的可用性和易用性提出高要求。而掃描器的核心能力，如何幫助用戶快速發現漏洞、識別漏洞並定位漏洞，以及什麼樣的驗證場景可以確定漏洞真實存在就成為亟待解1. 現狀
由於Web安全技術功底的薄弱，在網站安全運維人員眼裡，現有的掃描器依然顯得過於專業。一份掃描報告中，大量顯示漏洞存在的URL、弱點參數以及掃描器自身所構造的各種請求等晦澀難懂的內容，常常讓安全運維人員不知所雲，甚至不得不專請專業人員進行二次解讀。而且這種易讀性差的掃描報告不能讓運維人員第一時間識別出漏洞風險分布並制定相應漏洞的修補計劃，從而無法真正貫徹防微杜漸的安全思路，保障網站業務安全可靠地運行。
由於受限於目標網站環境的復雜性、漏洞種類的多樣性，掃描器或多或少存在誤報。為保證漏洞發現的權威性，增強報告內容的可信度，掃描器本身必須能清晰地給出：漏洞是如何被發現的，哪些頁面及參數有問題，風險詳情如何，有無重現該漏洞發現的場景分析文件，向導式的二次驗證等。而如何對發現的漏洞進行權威驗證這一點，一直是業界關注的焦點話題。
2.可視化漏洞分析
基於現狀，綠盟科技提出了一種可視化的 Web漏洞 分析方法。該方法依據漏洞種類的不同，從掃描器判斷漏洞存在的角度：首先從邏輯層面給出相關標准，作為判斷此漏洞是否存在的條件依據;其次從漏洞觸發層面列出該漏洞發現時的具體交互方式，如通過哪些檢測手段，構造哪些URL參數;再從數據支撐層面列出漏洞檢測過程中所交互的所有數據信息，如掃描器發送的網路請求與站點響應報文以及對應的具體頁面源碼文件等;最後，整個漏洞分析過程統一打包成離線場景文件。此方法可讓評估者輕松還原漏洞發現場景，重現漏洞發現的每一步直至全過程，真正實現漏洞分析過程的簡單可視、通俗易懂，進而為下一步可能進行的漏洞誤報確認提供可視化驗證場景，達到准確識別的權威效果。
1、 判斷標准
Web漏洞的形成有很多因素，不同漏洞的表現形式和產生原因差異很大，掃描器在確認漏洞的同時，需要給出針對該漏洞的判斷標准和參考依據。
2、 執行詳情
知道漏洞的產生原因和表現形式外，還需要構造可以產生這個漏洞的充分必要條件，明確哪些具體的操作和方法能夠觸發這個漏洞，使其通過可理解的直觀現象展示出來，並最終與判斷標准相符合。
3、 過程報文
漏洞的探索和發現不是一蹴而就的，是一個有強烈依賴關系的發包探測、規則匹配的邏輯過程。過程報文還原了整個探測過程中的收發包情況，探測方對被探測Web站點都發送了哪些請求，對方伺服器是如何應答的，過程報文都一一記錄，為分析漏洞和網站實時響應提供有利數據。
以下給出了幾種常見的漏洞類型，利用本文所介紹的可視化分析方法分別進行具體闡述。
2.1 XSS漏洞
基於特徵值匹配來進行檢測的XSS漏洞類型，其常見的檢測邏輯如圖 3 所示，是一個反復探測和驗證的過程。
掃描器通過爬蟲爬取Web站點的有效鏈接後，傳遞給相關插件進行探測掃描。插件在獲取鏈接後，需要判斷此鏈接是否有存在該漏洞的條件，抽取所有可能存在漏洞的位置點，構造請求URL和參數值去探測和發包，根據該漏洞的表現形式來判斷返回的頁面是否存在漏洞。
對應的特徵值匹配檢測邏輯條件滿足後，漏洞發現條件也同步形成。此時，掃描器會把如下內容一一羅列出來：嘗試探測的URL鏈接，具體的請求方式，在哪個參數欄位上構造的特徵值，相關的判斷標准，最終構造的請求變數和URL語句函數，執行結果與預期結果的差異，頁面請求和響應報文結果等漏洞確認的詳情。
這樣，就為此類XSS漏洞的發現提供了一個完整的檢測可視化過程，讓評估者清晰知曉XSS漏洞存在的相關判斷依據、具體位置及如何驗證和結果對比等。
2.2 SQL盲注
對於像SQL盲注這樣的檢測是不能通過特徵值匹配來檢測的，需要構造多次相似請求，根據返回頁面的不同來判斷，如圖 6。
插件在獲取到被檢測URL後，抽取可能存在漏洞的注入點，會嘗試發送三次請求獲取充分條件。第一次采樣，原始請求，將原始頁面內容作為采樣標准A;第二次采樣，偽真頁面B;第三次采樣，false頁面C。SQL盲注的檢測，需要計算B/A和 C/A 之間的相似度，在某個確定的范圍內就可以判定是否存在注入。
此基於相似度對比的檢測過程對於評估者來說完全是黑盒的，根本無法獲知真假頁面之間的區別和差異，直觀感受更無從談起。而若採用本文介紹的可視化漏洞分析方法，如圖7-1所示，掃描器通過提供可視化的漏洞檢測過程，在判斷標准中給出了插件的檢測過程和漏洞表現形式，判斷詳情中給出了發送的偽真、錯誤請求URL，以及原始URL的請求和對應響應報文。
根據如上兩組數據的頁面相似度對比結果可以清楚看出兩者之間的差異，當這個差異落在特定范圍內時，就判斷SQL盲注存在。從探測到展示，給評估者提供了重現該漏洞的完整場景。
2.3 弱口令猜測
在檢測表單登錄是否存在弱口令時，掃描器會根據預配置的弱口令列表或者自定義弱口令字典，通過枚舉用戶名和口令嘗試登錄，進行掃描確認。如圖8所示，在獲取到登錄頁面後，掃描器會根據配置的弱口令進行登錄探測。
在檢測出弱口令漏洞後，會給出具體的用戶名、密碼。評估者可以直接用給出的弱口令嘗試登錄漏洞URL。如圖9的判斷詳情中，給出了具體的登錄頁面，檢測出來的弱口令為admin，admin，看到請求響應，發現頁面跳轉到了主頁面，登錄成功，表示存在漏洞，從而重現這一探測過程。
3 結束語
通過上述簡單介紹的可視化漏洞分析方法，評估者在看到掃描報告時，通過漏洞的判斷標准、執行詳情、過程報文，再也無須因不了解漏洞成因而困惑為什麼Web環境會存在這樣的漏洞，或者質疑是否存在誤報，相關漏洞到底是如何被發現和確認的。此外，通過從掃描器給出的離線版漏洞場景文件，可以重現漏洞發現及確認全過程，從而進一步獲取漏洞詳情，為下一步的漏洞驗證、漏洞修復提供更有效的參考數據。
J. 「百度圖說」 基於Web的可視化數據分享平台
引自： https://tushuo..com/wave/index#/manufacture/dta9nrgas8cvows8c/999
在網上閑逛，發現一個關於Echarts在線應用的平台「網路圖說」，挺有意思的一個數據可視化分析創意，相對Echarts本身，向用戶應用又走進了一步。
用戶個人曾經創作過的所有列表清單。
用戶可向頁面上添加三種元素，圖表統計圖、文字、圖片；
統計圖，Echarts統計圖，類似於統計圖表模板；
文字，支持標題、圖表標題、正文以及引用；
圖片，支持圖片上傳顯示。
設置界面主題樣式和頁邊距。
創作好的成果，分享其它人使用。
頁面布局，僅支持上下調整。
數據編輯，支持在線修改；同時支持Excel數據導入。
參數調整，支持非常詳細的界面設置功能。
整體上，可理解為一個在線Excel圖表編輯工具。實際應用價值不一定有多高？