前端大数据可视化实战

课程收获

  • 掌握一项随处可见、日益增加的技术需求
  • 提升自身技术,拓宽前端视野
  • 加强硬实力,把握晋升机会
  • 基于计算机底层,向前端架构迈进

适用人群

  • 不满足现状的人,喜欢挑战的人,急切想进取的人
  • 想对于前端知识,浏览器渲染方面有更深入的了解
  • 计算机相关专业,想从事前端偏可视化方向的在校学生
  • 想从事知识图谱,人工智能,数据分析技术领域的学习者
  • 公司相关业务需求,需要短期速成,进行可视化方面的研发
  • 相对于前端岗位来说,可视化岗比前端岗位薪资要高,想要切实提薪的人

课程简介

大家好,我是小天,从事于一家金融类公司,负责前端架构与大数据可视化相关工作。本篇文章与大家简单聊一下前端与数据可视化。

相信从事前端开发人员还是对于html,css,javascript,Browser等等有一定认识了解的。但是了解的程度如何呢? 知道含义?简单/熟练使用?深入研究?

请大家试着回答我下面几个问题:

  1. 页面编写是否更多还停留在 div 套 div ?样式编写更多还是宽,高,定位?
  2. JavaScript 是否深入了解过? javascript 为什么是单线程呢?(设计初衷?受限原因?)
  3. JavaScript 在 Browser (浏览器)中如何运行的? 如何编译的?( 预编译?即时编译? )
  4. 在前端领域内自己是否有专注的一个方向?或者说是找工作的杀手锏?
试着解答过后或许结果并不是那么理想,结果如何没有太大关系,个人认为有问题不可怕,及时发现问题就是好的结果。对于每个人来说都不是万能的,是需要时刻学习,时刻进步的。

首先这边 1,2,3 点本篇不展开讲解,网上资料很多可以自行解决有相关具体疑惑地方的话可以留言, (主要前面都是铺垫- -,),咱们直接进入今天的重点,前端领域大家是否有选择一个方向进行深入研究(或者说是找工作的杀手锏)?

这道问题的答案个人觉得深度比广度更容易体现价值。如果因为某些意外大家还没有确定选择方向(那是最好的,哈哈我的机会来了)那么可以认真往下看,说不准本门课程会激发了你的斗志,继而选择了之后深耕的领域,成为领域专家,成为找工作的一个杀手锏。

什么是数据可视化

数据可视化是将数据转化成为交互的图形或图像等,以视觉感受的方式表达,增强人的认知能力,达到发现、解释、分析、探索、决策和学习。

数据可视化主要旨在借助于图形化⼿段,清晰有效地传达与沟通信息。

前端中数据可视化

首先日常开发中越来越多的可视化需求,例如静态类图表如:柱状图,折线图;交互式图表如:网络分析图,智慧社区等等。很多大厂进行了岗位划分,可视化工程师逐渐分离出来(越来越多的重视,导致很多公司投入专门团队研发可视化方向。。。所以前景是一片希望,光明。) 但是从实际出发更多的人研发是通过现成的可视化库去实现自己的需求,这边举几个例子:

  1. D3.js
  2. echarts.js
  3. three.js
  4. Chart.js
  5. cytoscape.js
  6. sigma.js
  7. AntV(G2 G6等)
  8. Go.js
  9. …其他

首先说明本人这边所举框架都是各有优势,例举无排名先后哈,有幸这些技术本人或多或少都有相关技术调研及使用。还是要从业务需求业务场景来考虑到底使用哪一种可视化库。比如D3.js有丰富的动画,交互式图表(事件),图算法;echarts.js 丰富的图表类型,绚丽的特效,支持多渲染引擎等等。

最后说一下本人的一点看法,市面上的可视化库架构设计出发角度更多是抽象化的功能,满足大众化的需求。个人认为好的可视化一定要有”灵魂”,它应该通过可视化完备交互,探索式分析的方式以及背后强大的算力能帮助用户更快更准提取有效价值;如何更好体现业务价值,从交互 算法底层是需要深入研究,自研往往是必经之路。(P:自研此处指并非完全从零实现一个可视化库,可以在现有库基础进行拓展加入业务定制化,比如业务型算法)

如何深入可视化

先来了解一下可视化基础技术架构,基础包含需要:
  1. 渲染层负责可视化图形图像生成相关 API 研发,比如:绘制圆,三角形等
  2. 算法层负责可视化图形图像生成相关算法,比如:布局算法 绘制元素坐标计算如何分布等
  3. 数据层负责数据相关操作,比如:数据增删改查以及数据与视图进行一致性保证等
  4. 其他层例如通信层 工具层等
其次大家都知道很多框架渲染引擎内部是canvas / svg / webgl 实现的,内部到底如何实现? 那么接下来对于渲染层拿canvas举例进行探讨:

图图1.png

比方说实现上方这个可视化图表效果,从canvas绘制层来说,需要提供俩个绘制 API :

  1. 绘制圆形元素
  2. 绘制连线元素
在开始绘制之前

图图2.png

绘制圆形

图图3.png

绘制曲线

图图4.png

以上就是所需要提供的绘制层 API ,后续需要结合算法层比如通过 layout (布局算法)计算节点分布坐标计算、通过节点出入度和业务规则计算节点大小等进行绘制渲染,就可以实现上面美观的可视化。

最后

是不是很有意思呢?
如果想了解学习更多请看后续。

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

5.0 暂无评价