奇虎360－数据可视化

摘要: 技术是一只笔，有笔的人不一定是画家

最近的工作是做数据可视化方面的。所以对数据可视化有一定了解跟认识。感觉这方面是非常热门而且实用性非常强的技术。做了个把个月，最大的感悟是，1、技术是只笔，有笔的人却不一定是画家。2、学知识死，学思维活。具体慢慢说来。

引用维基对"数据可视化"的解释：数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

简单的说就是采用数据图形化的形式对数据进行更直观地展示。传统数据展示显示表格然后是图表，这些都是数据可视化的范畴，但如果表格与图表都不能满足数据的展示需求时（尤其是现在动不动就是大数据），数据展示也就形成一门学科，研究各种合理的数据展示方式，让人们更容易接受以及分析枯燥的数据本身。

数据可视化的工具有很多，这里介绍web平台的数据可视化。但数据量庞大且属性复杂时，使用SVG也就十分的合理了，矢量、高效渲染以及动画效果，都很符合大数据的展示需求。

XML的展示方式并不利于开发者进行SVG编程。这里介绍使用d3.js来操作SVG进行数据可视化编程。d3有很多可视化的DEMO，极大方便用户进行图表编程。

这里简单介绍一个场景来简单说说web可视化编程过程。

场景：有一批数据，记录某IP在某时间点经过某端口再经过一段时间在某时间点到达某端口再到达某目的IP。简单的说就是某IP发送请求到目的IP的过程。这里采用数据可视化的方式让这些数据变得更直观易懂。

图表设计，时间点是循环的，那么使用一条纵坐标轴来表示，有起始IP跟目的IP，可以使用两个点来可视化，而数据传输使用曲线会更直观，如果是流量则可以用流性面来表示，抽离数据的特性，再
3ff0
去思考可视化的方式，故设计图纸最终设计为：



不得不说，设计图纸设计得有点挫，不过这不是重点，重点是有这个图表展示的设计。

下一边就是绘制她啦~

这张图表设计比较简单，基本用SVG的Path就可以画出来了，不过为了后面做交互效果，还是引入d3的库，因为它封装了很多交互的库，使用起来方便。自己实现也是可以的。看自己需求。

后面定义json数据格式即该图表的数据集合，json格式方便浏览器解析以及调用里面数据，也减轻网络传输的负担。核心数据这里定义为：

var dataSets=[
{srcTime:"2013-12-10 18:24:50",srcPort:1280,destPort:428,destTime:"2013-12-10 20:24:50",destIP:"127.100.100.110"},
{srcTime:"2013-12-10 18:24:50",srcPort:1280,destPort:428,destTime:"2013-12-10 20:24:50",destIP:"127.100.100.110"},。。。。。。]；

这里比较核心重要的应该是曲线算法，研究下贝赛尔曲线就差不多了，我这里加了个随机偏移量用来减少曲线的重叠在一起的概率。

最终绘制结果为：



看着这样的图表，很清晰就看出请求具体情况，可以从整体的形式来分析整体数据反馈回来的信息。

这里并没有给出特别多干货。主要是因为技术只是笔，画什么才是最重要的。整个工作最耗时间以及最有价值的也是图表的设计上，好的图表设计简单容易明白，复杂花哨的设计却可能适得其反。所以设计层面比技术实现会包含更多的价值~~