数据可视化理论学习

如果我们手中 只有解决具体问题的工具，没有统一的方法论，那我们也无法一劳永逸地解决问题的根本。

不管我 们用什么绘图系统绘制图形，一般的几何图形都是由点、线段和面构成。其中，点和线段 是基础的图元信息，因此，如何描述它们是绘图的关键。因此，我们要建立一套与各个图形系统无关联的、简单的基于向量和矩阵运算的数学体 系，用它来描述所有的几何图形信息。

如何用向量来描述点和线段? 一个向量包含有长度和方向信息

在可视化的许多应用场景中，我们都 要处理成百上千的图形。如果这个时候，我们在原始坐标下通过计算顶点来绘制图形，计 算量会非常大，很麻烦。那采用坐标变换的方式就是一个很好的优化思路，它能够简化计 算量，这不仅让代码更容易理解，也可以节省 CPU 运算的时间。

坐标系转换

Math.atan2() 返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的平面角度(弧度值)，也就是Math.atan2(y,x)。Math.atan2 的取值范围是 -π到π，负数表示在 x 轴下方，正数表示在 x 轴上方。

Math.atan2(90, 15) // 1.4056476493802699
Math.atan2(15, 90) // 0.16514867741462683

Math.atan2( ±0, -0 )               // ±PI.
Math.atan2( ±0, +0 )               // ±0.
Math.atan2( ±0, -x )               // ±PI for x > 0.
Math.atan2( ±0, x )                // ±0 for x > 0.
Math.atan2( -y, ±0 )               // -PI/2 for y > 0.
Math.atan2( y, ±0 )                // PI/2 for y > 0.
Math.atan2( ±y, -Infinity )        // ±PI for finite y > 0.
Math.atan2( ±y, +Infinity )        // ±0 for finite y > 0.
Math.atan2( ±Infinity, x )         // ±PI/2 for finite x.
Math.atan2( ±Infinity, -Infinity ) // ±3*PI/4.
Math.atan2( ±Infinity, +Infinity ) // ±PI/4.

Math.hypot() 函数返回所有参数的平方和的平方根。

余弦定理

向量点乘和叉乘概念及几何意义解读

点乘

点乘几何意义
点乘的几何意义是可以用来表征或计算两个向量之间的夹角，以及在b向量在a向量方向上的投影，有公式：

推导过程如下，首先看一下向量组成：

定义向量：

根据三角形余弦定理有：

根据关系c=a-b（a、b、c均为向量）有：

即：

向量a，b的长度都是可以计算的已知量，从而有a和b间的夹角θ：

注意：上面公式应该是反余弦函数，即arccos().
根据这个公式就可以计算向量a和向量b之间的夹角。从而就可以进一步判断这两个向量是否是同一方向，是否正交(也就是垂直)等方向关系，具体对应关系为：

• a·b>0 方向基本相同，夹角在0°到90°之间
• a·b=0 正交，相互垂直
• a·b<0 方向基本相反，夹角在90°到180°之间

叉乘公式

两个向量的叉乘的运算结果是一个向量而不是一个标量，并且两个向量的叉积与这两个向量组成的坐标平面垂直。

对于向量a和向量b：

a和b的叉乘公式为：

其中：

根据i、j、k间关系，有：

叉乘几何意义
叉乘的公式：

1. 在三维几何中，向量a和向量b的叉乘结果是一个向量，更为熟知的叫法是法向量，该向量垂直于a和b向量构成的平面。
   在3D图像学中，叉乘的概念非常有用，可以通过两个向量的叉乘，生成第三个垂直于a，b的法向量，从而构建X、Y、Z坐标系。如下图所示：
   
2. 在二维空间中，叉乘还有另外一个几何意义就是：aXb等于由向量a和向量b构成的平行四边形的面积。

参数方程

为什么要有参数方程和参数方程的定义

参数方程意义：
参数方程主要用来描述曲线轨迹，一般来讲，引入一个参数会较容易的表示出曲线每个坐标之间的关系，通常来讲，时间和角度用的比较多。总之，你引入一个中间量，会使得问题简化或更容易理解！比如摆线的描述，直接求解y和x的关系，相信你一头雾水，但是引入适当参数后，so easy！

参考：https://www.zhihu.com/question/29032945

---

可视化页面的构成元素

div+css

• 基础的UI展示，例如文字、图片、video、线条等
• 基础CSS动画实现
• 便于调试，快速定位问题

SVG

• 基于xml，支持事件处理
• 矢量，不失真
• 文本可被搜索

Canvas

• 命令式编程方式，可控性高
• 逐像素进行绘制，定制性高
• 适合动态渲染和大数据量绘制

webgl（3d）

• 基于OpenGL es 2.0底层API
• 现有的成熟开源库，three.js、Babylon

基础的线条是可以通过div+css来实现，但是如果是曲线，div+css可能就实现不了了，需要借助svg或canvas来实现。

可视化的使用经验和优化

• hsl颜色空间
  相较于rbga，能直观的表达颜色的色调、饱和度，能很好的进行颜色对比。
• 多图层渲染
  避免没必要的计算
• 离屏渲染
  先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。如果是比较大的渲染，可以开启一个work线程，提前预计算。