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图表编辑工具。实际应用价值不一定有多高？