文档章节

奇虎360-数据可视化

gdxz110
 gdxz110
发布于 2014/07/19 23:57
字数 1166
阅读 565
收藏 1

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

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

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

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

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

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

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

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

    

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

        下一边就是绘制她啦~

        这张图表设计比较简单,基本用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"},。。。。。。];

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

        最终绘制结果为:

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

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

 


© 著作权归作者所有

gdxz110
粉丝 7
博文 80
码字总数 31663
作品 0
广州
程序员
私信 提问
傅盛回应奇虎起诉:从未获得股权股票账户

新浪科技讯 9月30日上午消息,针对奇虎360在香港高院起诉前高管傅盛一事,傅盛刚刚通过微博做出回应,他表示从未获得过奇虎股权、股票账户,并表示奇虎称其盗取360技术“纯属蓄意抹黑”。 “...

小编辑
2011/10/01
450
6
360 搅局市场:搜索引擎开打“3B”大战

南方都市报 作者:高凌云 谢睿 从8月21日起,360自主搜索引擎替换谷歌,成为360网址导航的默认搜索引擎。 8月16日,奇虎360低调推出综合搜 索,引起行业震动。8月22日,360董事长周鸿祎在第二...

oschina
2012/08/23
5K
99
奇虎 360 已经确认和 Google 达成合作

之前我们曾经报道过,受到奇虎 360 和 Google 合作消息的影响,在新年伊始奇虎 360 和百度遭遇资本市场的差别对待。分析师们纷纷看好奇虎 360,普遍上调 2013 财年的业绩预期,而百度则遭遇目...

oschina
2013/01/05
8.5K
91
招聘:奇虎360-技术职位

1、奇虎360-云盘架构师 2、奇虎360-android高级软件工程师 3、奇虎360-无线应用CTO 4、奇虎360-无线安全CTO 以上职位,年薪30万-50万 可以QQ与我联系:2529771245...

招聘控
2013/09/22
6.1K
23
360 告赢金山网络傅盛 判赔偿并道歉

战罢腾讯,奇虎360和其他宿敌们的诉讼大战仍在继续。昨天,法院对奇虎360诉傅盛名誉权纠纷一案作出一审判决,判定金山网络CEO傅盛的微博言论对奇虎360造成侵权,要求其赔偿并道歉。法院判决书...

oschina
2012/09/26
3.7K
60

没有更多内容

加载失败,请刷新页面

加载更多

防止流量劫持有效途径-安装SSL证书

  在互联网的世界里,流量就等于金钱。而流量劫持是指,利用各种恶意软件、木马病毒,修改浏览器、锁定主页或不停弹出新窗口等方式,强制用户访问某些网站,从而造成用户流量损失的情形。 ...

安信SSL证书
9分钟前
2
0
关于工作流程数据模版的设置与使用.

关键字:ccbpm数据模版 解释说明:数据模版就是当前工作人员历史发起的历史流程里,把一些具有代表性的设置为模版,下次在启动流程的时候,选择模版里的数据在发起流程,避免重复数据录入的工...

ccflow周朋
23分钟前
4
0
第一个只出现一次的字符

处理字符串中重复或者次数出现等问题,最常用的就是哈希表,用字符串中的字符作为key,字符出现次数作为value,假定只有ASCII码范围内的字符,则可以开辟一个256大小的int数组,将每个字符(...

Garphy
24分钟前
4
0
通过构建区块链来学习区块链-1-Transaction|Block|POW

原文链接:https://medium.com/@vanflymen/learn-blockchains-by-building-one-117428612f46 交易Transaction 区块Block 工作量证明 你来这里是因为,和我一样,你对加密货币的崛起感到兴奋。...

Riverzhou
31分钟前
4
0
大数据最核心的关键技术——32个算法,记得收藏!

奥地利符号计算研究所的Christoph Koutschan博士在自己的页面上发布了一篇文章,提到他做了一个调查,参与者大多数是计算机科学家,他请这些科学家投票选出最重要的算法,以下是这次调查的结...

大数据金罗
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部