作者：小天

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

置信从事前端开发人员还是对于 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 举例进行探讨:

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

1. 绘制圆形元素
2. 绘制连线元素

在开始绘制之前

绘制圆形

绘制曲线

以上就是所须要提供的绘制层 API , 后续须要联合算法层比方通过 layout (布局算法)计算节点散布坐标计算、通过节点出入度和业务规定计算节点大小等进行绘制渲染, 就能够实现下面好看的可视化。

最初

是不是很有意思呢?
如果想理解学习更多能够看我最新录制的课程

课程链接：https://ke.sifou.com/course/1…

课程纲要介绍：

为什么要学这门课？

• 前端新机遇：大数据可视化
• 前端开发中的图形学

根底篇：像素级操作巨匠 Canvas

• 重新认识 Canvas
• Canvas 的劣势及个性详解
• Canvas 形态绘制：文本 & 款式 & 图片
• Canvas 动效设计与实现
• Canvas 用户交互设计与实现

进阶篇：从零研发关系可视化组件

• 可视化组件架构设计
• 编写关系类绘制组件
• 编写关系类算法(FR)

实战篇：热门可视化库实战

• d3 入门
• d3 实战：tree 层级图
• d3 实战：bar 图表
• echarts 入门
• echarts 实战：sankey 图

实战篇：研发关系可视化剖析平台

• 架构设计阐明
• 数据采集荡涤
• 音讯机制学习
• 事件交互学习
• 我的项目代码实现