用最科学的方法展示最形象的图表——前段数据可视化选型实践
前言
也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题。
需求
那么,在我们的项目中是如何实现数据可视化的呢?下面以这样一个需求开始我们的讲解:我们需要向用户展示目前用户产品的风险情况,有没有风险产生、产生于何地、是否被拦截等信息。
最终效果图:
技术选型
说到数据可视化,可谓是百花齐放,一时之间前端界出现了琳琅满目的第三方库: Highcharts , Echarts , Chart.js , D3.js 等。但是,万变不离其宗。
总的来说,所有的第三方库都是基于这两种浏览器图形渲染技术实现的: Canvas 和 SVG 。
通过各种比较之后,我们最终选择基于 D3.js 进行开发。
“
*为什么不选用更加丰富的图形库,比如 Echarts ?
——数据可视化看似简单,但其中蕴含的科学可谓博大精深。*
”
Echarts 提供的图表的确可以满足大部分的需求,遵循了数据可视化的一些经典范式。然而,每个不同的行业对于数据可视化都会有一些定制化的需求,希望能以一些带有行业特征的图表向使用者展示数据背后隐藏的秘密。
因此,我们希望可以使用一个比较基础的图形库,这个库对一些基础算法进行了封装。然后在此基础之上,我们可以进行二次开发,定制适合的图表向用户展示更有针对性的数据。
“
*为什么不选用基于 Canvas 的库?
——我们的应用存在大量的用户交互场景。*
”
在 Canvas 中,如果要为细粒度的元素添加事件处理器,必须涉及到边缘检测算法,无疑为开发带来了一定的难度,同时,采用这种方法并不一定精确。相比之下,SVG 是基于 DOM 操作的,支持更精确的用户交互,无疑更适合我们这样一个小规模的团队。
所谓成也萧何败萧何。这里的萧何源于 SVG 是基于 DOM 操作的。
众所周知,频繁的 DOM 操作十分消耗性能。对于用户体验的影响便是可能出现闪烁、卡顿等现象。幸好,伟大的前端界对于这个问题已经有了解决方案: Virtual DOM 技术。
所以我们要做的,就是选择一个支持 Virtual Dom 技术的框架与 D3.js 结合使用。同时,我们的最终目标是将这些图标封装成可复用的组件。
因此,最终我们选择了 facebook 出品的 React 。这是一个相对轻量、简单、专注于 View 的库。
实际问题
细心的读者一定会提出这样一个问题:既然是一个实时数据展示图表,如何做到如此频繁且流畅地渲染大量数据?其实很简单,关键在于把握以下两个阶段:
数据的获取。
在这里,我们主要还是采用了客户端主动轮询拉取的方式。只要选定了采样频率,剩下的就是每隔一段时间从服务器拉取数据了。
当然,这种方式的缺点也显而易见:由于延时造成的数据滞后,并且随着时间的推移,这种滞后会越来越严重。
为了解决这一问题,我们会在一段时间之后进行数据实时性的校正。
数据的渲染。
需求中,攻击情况需要依据时间顺序进行展示,表现为一条从攻击源到攻击目标的运动轨迹。如果一段时间内产生了大量的攻击,那么页面中的 DOM 元素会迅速增加,渲染速度变慢,出现卡顿现象。
为了解决这一问题,当每一条运动轨迹展示完毕的时候,相应的 DOM 元素会被及时销毁。当更大量的攻击产生时,我们会控制展示的数量,同时发出警告,因为这明显已经属于一种攻击非常极端的情况了。
未来展望
事实上,对于实时数据的处理,前文所述的方法并不是最佳实践,只能说是一种降级方案。我们的长远目标是要做到真正的实时数据展示,因此下一步我们会实时数据推送技术,敬请期待。
大数据时代,前端也迎来了新的挑战。数据可视化已然成为了新的风向标。数据团队的前端要做的就是:用最科学的方法向用户展示最形象的图表,而这,也是我们前行的目标。
反爬虫
文章来源:http://bigsec.com/
作者简介
张静 岂安科技前端架构师
三年互联网前端开发经验,曾参与多个大型应用的前端开发,负责岂安科技产品的前端架构设计与开发。
用最科学的方法展示最形象的图表——前段数据可视化选型实践相关推荐
- 用最科学的方法展示最形象的图表——前端数据可视化实践
前言 也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题. 需求 那么,在我们的项目 ...
- 怎么用ai做出适量插画_怎么用最简单的方法,做出最炫酷的数据可视化图表?...
如果要问数据怎样做才能显得最装逼,那么答案一定只有一个: "数据可视化"! 看上去也很炫酷对不对,其实上面的可视化图表其实并不复杂,很多人推荐的Python.R语言.Tableau ...
- 大数据可视化的方法、挑战及进展
大数据可视化的方法.挑战及进展 摘要:在简化数据量和降低大数据应用的复杂性中,大数据分析发挥着关键的作用.可视化是其中一个重要的途径,它能够帮助大数据获得完整的数据视图并挖掘数据的价值.大数据分析和可 ...
- 大数据可视化的应用方法
随着互联网的不断发展,大数据技术在各个行业中都有不同的表现作用,作为助力企业经营决策的大数据可视化应用,对于的企业发展起着至关重要的作用,但是如何利用大数据可视化,如何做好大数据可视化?而今天我们就一 ...
- 4种快速易用的Python数据可视化方法
热力图.二维密度图.蜘蛛网图和树状图,这些可视化方法你都用过吗? 数据可视化是数据科学或机器学习项目中十分重要的一环.通常,你需要在项目初期进行探索性的数据分析(EDA),从而对数据有一定的了解,而且 ...
- ironpython 可视化_4种更快更简单实现Python数据可视化的方法
热力图.二维密度图.蜘蛛网图和树状图,这些可视化方法你都用过吗? 数据可视化是数据科学或机器学习项目中十分重要的一环.通常,你需要在项目初期进行探索性的数据分析(EDA),从而对数据有一定的了解,而且 ...
- 4种更快更简单实现 Python 数据可视化的方法
点击上方"Python高校",关注 文末干货立马到手 机器之心报道 参与:一鸣.李泽南 热力图.二维密度图.蜘蛛网图和树状图,这些可视化方法你都用过吗? 数据可视化是数据科学或机器 ...
- 数据可视化(全彩)(大数据丛书,首次全面细致地梳理了可视化理论,方法、工具与应用案例。马匡六教授、石教英教授鼎力推荐,十二五国家重点图书出版规划项目)...
大数据丛书 数据可视化(全彩)(大数据丛书,首次全面细致地梳理了可视化理论,方法.工具与应用案例.马匡六教授.石教英教授鼎力推荐,十二五国家重点图书出版规划项目) 陈为 沈则潜等编著 ISBN 97 ...
- 计算机数据表格展示,利用工具,一分钟完成数据可视化,快速输出美观的数据图表...
天天跟表格打交道的办公室的表哥表妹,为了能让老板看的更一目了然,可以说是费时费力. 今天小姐姐给大家分享一下如何利用工具,一分钟完成数据可视化,快速输出美观的数据图表. [新手们必须收藏转发呀] 为什 ...
最新文章
- python装饰器改变命运
- 构建之法 第6~7章读后感和对Scrum的理解
- Linux终端管理软件
- using(){},Close(),Dispose()的区别
- python-演练-通过描述符来控制另一个类的实例化参数
- 英特尔回应杨笠代言争议;天弘基金称已处理在支付宝上「无故扣款」问题;Eclipse 4.19 发布 | 极客头条...
- 【Dart学习】--Dart之正则表达式相关方法总结
- C#与Javascript变量、函数之间的相互调用
- Atitit js nodejs 图像处理压缩缩放算法 attilax总结
- 通达信版弘历软件指标_通达信精选指标——弘历趋势
- python词云图绘制
- HS系列USB数据采集卡,及高速多通道数据分析软件详解
- Android DeepLink使用
- Hello, World——从零到实盘0
- Javascript-基础-学习笔记
- 联想电脑去掉开机广告 关闭开机广告 ideapad 去掉开机广告
- 第二次作业:支付宝案例分析1
- [Luogu P3960] [UOJ 334] [NOIP 2017 tg]列队
- 计算机网络毕业设计,计算机网络毕业设计
- tasklist命令