数据可视化一直是一个很有趣的领域。许多普通人直观上难以感受的数据，如漏洞分布、实时流量分析等，通过数据可视化的手法，可以清晰地看出数据的结构特点和每一个部分之间的内在联系。
数据可视化除了常用的图表之类，与地理位置信息系统（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 。不过编码风格比较差，跨脚本的全局变量共享给二次开发造成了巨大的难度，学习一下就好了。
真正把 3D 技术做到登峰造极的是逆天的俄罗斯人。卡巴斯基制作的这个实时网络威胁地图，支持的展示有定向攻击路径，地点；切换平面图和3D球体时有变换动画；每一个国家区域都是矢量图，无限放大也不会影响清晰度；交互性和实用性上简直丧心病狂；渲染3D的代码中没有依赖任何第三方库（包括THREE.js）。
不仅在视觉上非常炫目，性能优化也做到了极致。数据传输使用了二进制数组，编码成base64之后打包成JSON的办法，压缩率非常理想。在以上介绍的几个网页 3D 程序中，这是资源占用最少， *** 作最流畅的一个。
唯一有些坑爹的是“real-time”有些名不副实，其实这个程序只会每隔一段时间去请求服务器后端静态的 json 数据文件。不过已经非常逆天了。这个东西不开源，压缩过的脚本读起来也比较吃力，应用在自己的项目中有些困难。
看完上面几个演示估计都目瞪口呆了吧。WEBGL 目前还没有大规模地在网页开发中应用，许多项目都只是实验性质。前端开发者最要命也是最痛恨的是用户浏览器的兼容问题，尤其是大量过时的 IE 浏览器。
所以在全球分布图的方案上，除了 3D，我们还提供了备选的平面图版本。
ZoomEye 使用的 2D 分布图和 HoneyMap 都用了 jVectorMap 开源库。这个开源库使用矢量图渲染地图，可以无限缩放。支持两种类型：散点分布（HoneyMap 的实时地点）和地区统计（ZoomEye的漏洞分布图）。还可以根据需要选择地图，常用的有全球国家/地区，中国省份地图，美国各州地图等。支持IE6。
做平面图还可以直接使用 Google Maps API ，而且浏览器兼容性也不错。Google Maps 上的附着物可以放路标、折线、多边形、自定义绘图、热力图等。可能唯一的缺点就是会遇上我朝特有的偶发性打不开网页的情况了。
当然，百度什么的也是不错的。
JS图形、图标库推荐：1. JS Charts
JS Charts 是个基于JavaScript的图表生成器，不需要任何编码。JS Charts 非常容易使用，只要用户使用客户端脚本（比如，在 web 浏览器中执行）。它不需要多余的插件和服务器模块，只需要下载 JS Charts 的脚本，准备好 XML，JSON 或者 JavaScript 数组数据。
2. Canvasjs
CanvasJS 是个易用的 HTML5 &JavaScript 图表库，基于 Canvas 元素。Graphs 可以通过设备渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允许用户创建适用于所有设备，不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级，漂亮和响应式的仪表图。
3. Chart.js
Chart.js 是个简单的，面向对象的客户端图形库，用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的，完全自定义，而且看起来非常好看，即使在 retina 显示。它使用 HTML5 canvas 元素，支持所有现代浏览器，并且支持 IE7/8。
4. Aristochart
Aristochart 是个高度自定义，灵活的折线 Canvas 图表库，允许用户集中精力在图表的审美方面，后台工作做得非常好。Aristochart 有个持续进步的社区，提供许多不断增长的主题给用户选择。
5. xCharts
xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。
6. BonsaiJS
BonsaiJS 是个轻量级的 JavaScript图形库，提供直观的图形 API 和 SVG 渲染器。主要特性包括：架构分离的运行器和渲染器；iFrame，Worker 和 Node 运行上下文；形状，路径，Assets（音频，图像，字体，subMovies），Keyframe 和常规动画，等等。支持现代化浏览器： Safari, Chrome 和 Firefox。
7. Sigma.js
Sigma.js 是个免费开源的 JavaScript图形库，使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。
8. Morris.js
Morris.js 是个轻量级的 JavaScript库，使用 jQuery 和 Rapha&enuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有： IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一个函数： Morris.Line(选项)，包括了许多配置选项。
9. Paper.js
Paper.js 是一个开源的向量图形脚本框架，基于 HTML5Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。
10. AmCharts
AmCharts 是个高级图表库，适用于所有数据的可视化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。
11. Smoothie Charts
Smoothie Charts是个极小的图表库，专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket推动的实时的流数据。虽然很多图表库允许用户动态更新数据，但是没有一个是可以优化源源不断的流数据。
12. Dygraphs
Dygraphs 是个快速，灵活，开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表；可以修改数值或者点击条目来调整平均周期。
13. Grafico
Grafico 是 Grafico 是一个基于 Raphaël 和 Prototype.js 构建的 JavaScript 图表库，提供了各种图表类型。这些漂亮的图表，有利于传递他们的信息。
14. Highchart JS
Highcharts JS 是一个制作图表的纯 Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等；对个人用户完全免 费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用。
15. Flotr
Flotr 是一个基于 Prototype 开发的 JavaScript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。
16. Flot
Flot 是受 Plotr 和 PlotKit 的 启发，Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库，专注于简单的使用方式，迷人的外观和交互式特性。支持的浏览器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
17. jFreeChart
JFreeChart 主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久，而且有大量的开发者在维护。
18. Plotkit
PlotKit 是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档，方便用户使用。
19. Planetary.js
Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构，甚至默认自身就是个插件！这使得 Planetary.js 非常灵活，而且它是允许用户完全自定义，包括颜色，大小，rotation 等等。更重要的是，用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”；它还支持鼠标拖动和缩放，100% 免费和开源。
20. Ember Charts
Ember Charts 是个图表库，使用 Ember.js 和 d3.js 框架构建的。它包括时间线，条形图，饼图和散点图，非常容易扩展和修改。这些图表组件都是开箱即用的，在图表交互和演示方面应用的很好。
21. Sparky
Sparky 是个免费的 JavaScript 波形图库，依赖于 Raphaël ，非常容易使用。支持多个图表类型（折线，条形，area），折线和区域图可以有多个颜色选择。
22. Envision.js
Envision.js 是个 JavaScript 库，用来简化，快速创建交互式的 HTML5 可视化图表。它包括两个图表类型：时序图和 Finance ，提供 API 给开发者，用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关，依赖于几个小的 JavaScript 库。
23. Dc.js
dc.js 是个 JavaScript 图表库，有着原生的 crossfilter， 支持和允许高效展示大型多维数据集（基于 crossfilter 的示例）；图表使用 dc.js 渲染，是使用原生数据驱动，所以能得到用户的实时反馈；dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库，能进行数据可视化和分析；不仅支持桌面浏览器还支持移动端。
24. ElyCharts
Elycharts 是一个易于使用的，可定制的 JavaScript图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括：line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括：鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域，Tooltip，HTML锚点等。可以动 态修改数据，并以漂亮的动画效果展示图表中的变化。图表利用SVG/VML技术生成，基于jQuery + Raphaël开发。
25. AwesomeChartJS
AwesomeChartJS Awesome Chart JS 是一个 JavaScript生成图表的类库，它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量，使用它只需书写几行代码便能生成漂亮的图表。
26. Arbor.js
Arbor.js 是一个利用 Web Works 和 jQuery创建的可视化图形库，它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。
27. CanvasXpress
canvasXpress 是一个基于HTML5 canvas标签实现的 JavaScript图表类库，它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强，鼠标放 上去时会动态显示值。除此之外，它也具有相当高的可定制性，可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是，虽然它使用了 HTML5，但是依然支持IE6浏览器。
28. JSXGraph
JSXGraph 是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。
29. Rickshaw
Rickshaw 是一个用于绘制时序图的简单 jS 库，基于 Mike Bostock’s delightful D3 库构建。
30. rGraph
RGraph 是基于HTML5 canvas标签的HTML5 canvas图形库，支持 20 种不同的可视化类型。使用 canvas 标签，RGraph 创建“HTML5 图表”，意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小，低能耗和更快的浏览速度。
31. Fusion Chart
FusionCharts Suite XT 是个专业的 JavaScript图表库，能创建任何类型的图表。它创建的图表都是可以进行完全自定义的，标签，字体，边界等等，都可以进行修改。它有很强的交互功能，有许多信息提示，可 点击的 legend 关键字，还有 dril-down，缩放/滚动 和单击打印图表功能。
32. Graph Dracula
Dracula 是用一系列的工具来显示和布局互动图表，包括各种相关的算法。它只是纯 JavaScript 和 SVG ，并无 Flash，Java，其他插件。它非常容易使用，用户可以很简单的自定义任意的元素。
33. Bluff
Bluff 是个 JavaScript 的 Ruby 的 Gruff graphing library端口。它支持所有 Gruff 的特性，但是有着最小的依赖。用户只需要运行一个第三方脚本： JS.Class 副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本，用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。
34. Pizza Pie Chart
Pizza Pie Charts 是个响应式饼图图表，基于 Adobe Snap SVG 框架，通过 HTML 标记和 CSS 来替代 JavaScript 对象，更容易集成各种先进的技术。
35. jGraph
HTML5 图表组件，完全支持l IE 6-8 和触屏设备。 JGraph 自2001年来就一直提供最先进的图表软件组件，是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发 mxGraph。
谷歌地球是谷歌推出一款查看全世界的全景的网站。你可以用它来浏览世界任何一个角落（理论上）。它以 3D 的效果呈现出来，不管你是穿梭于亚马逊森林，还是在纽约上空，这些都是可以实现的，它就像一个地球仪，你可以随意拨动，点击就进入一个城市，开启一段新的旅程吧。这样坐在家里就可以把全世界的名声古迹看遍，真的不费吹灰之力呀。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）