开篇词 | 不写网页的前端工程师,还能干什么?预习 | Web前端与可视化到底有什么区别?
01 | 浏览器中实现可视化的四种方式02 | 指令式绘图系统:如何用Canvas绘制层次关系图?03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
05 | 如何用向量和坐标系描述点和线段?06 | 可视化中你必须要掌握的向量乘法知识07 | 如何用向量和参数方程描述曲线?08 | 如何利用三角剖分和向量操作描述并处理多边形?09 | 如何用仿射变换对几何图形进行坐标变换?
10 | 图形系统如何表示颜色?11|图案生成:如何生成重复图案、分形图案以及随机效果?12 | 如何使用滤镜函数实现美颜效果?13 | 如何给简单的图案添加纹理和复杂滤镜?14 | 如何使用片元着色器进行几何造型?15 | 如何用极坐标系绘制有趣图案?16 | 如何使用噪声生成复杂的纹理?17 | 如何使用后期处理通道增强图像效果?
18 | 如何生成简单动画让图形动起来?19 | 如何用着色器实现像素动画?20 | 如何用WebGL绘制3D物体?21 | 如何添加相机,用透视原理对物体进行投影?22 | 如何用仿射变换来移动和旋转3D物体?23 | 如何模拟光照让3D场景更逼真?(上)24 | 如何模拟光照让3D场景更逼真?(下)25 | 如何用法线贴图模拟真实物体表面26 | 如何绘制带宽度的曲线?27 | 案例:如何实现简单的3D可视化图表?
28 | Canvas、SVG与WebGL在性能上的优势与劣势29 | 怎么给Canvas绘制加速?30|怎么给WebGL绘制加速?
31 | 针对海量数据,如何优化性能?32 | 数据之美:如何选择合适的方法对数据进行可视化处理?33 | 数据处理(一):可视化数据处理的一般方法是什么?34 | 数据处理(二):如何处理多元变量?35| 设计(一):如何让可视化设计更加清晰?36 | 设计(二):如何理解可视化设计原则?37 | 实战(一):如何使用图表库绘制常用数据图表?38 | 实战(二):如何使用数据驱动框架绘制常用数据图表?39 | 实战(三):如何实现地理信息的可视化?40| 实战(四):如何实现3D地球可视化(上)?41 | 实战(五):如何实现3D地球可视化(下)?42 | 如何整理出我们自己的可视化工具集?
国庆策划 | 假期别闲着,一起来挑战“手势密码”国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件
加餐1 | 作为一名程序员,数学到底要多好?加餐2 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?用户故事 | 非前端开发,我为什么要学可视化?加餐3 | 轻松一刻:我想和你聊聊前端的未来加餐4 | 一篇文章,带你快速理解函数式编程加餐5|周爱民:我想和你分享些学习的道理
结束语 | 可视化工程师的未来之路有奖征集倒计时4天!你填写毕业问卷了吗?