关键词:
说明
【跟月影学可视化】专栏学习笔记。
个人学习笔记源码:https://github.com/kaimo313/visual-learning-demo
一共做了 162 个学习示例以及 41 篇博客学习笔记,要深入学习该课程请支持正版,个人笔记仅供参考。
笔记目录
- 【图形基础篇】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可视化图表:GitHub贡献图表的3D可视化?
- 【性能篇】28 # Canvas、SVG与WebGL在性能上的优势与劣势
- 【性能篇】29 # 怎么给Canvas绘制加速?
- 【性能篇】30 # 怎么给WebGL绘制加速?
- 【数据篇】31 # 如何对海量数据进行优化性能?
- 【数据篇】32 # 如何选择合适的方法对数据进行可视化处理?
- 【数据篇】33 # 可视化数据处理的一般方法是什么?
- 【数据篇】34 # 如何处理多元变量?
- 【设计篇】35 # 如何让可视化设计更加清晰?
- 【设计篇】36 # 如何理解可视化设计原则?
- 【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表?
- 【实战篇】38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表?
- 【实战篇】39 # 如何实现世界地图的新冠肺炎疫情可视化?
- 【实战篇】40 # 如何实现3D地球可视化?
- 【工具篇】41 # 常用可视化工具集整理(完结)
可视化常用工具集
基本图形
- Snap.svg:The JavaScript SVG library for the modern web
- 2D 渲染引擎:Fabric.js、Pixi.js
- 2D/3D 引擎:SpriteJS、P5.js
- 3D 引擎:ThreeJS、Babylon.js
基础图表
- 图表库:ECharts、Chart.js、Highcharts、AntV G2
- 使用 SpriteJS 作为底层图形库,可以使用:QCharts
- 移动端设备渲染图表:AntV F2
- 绘制更加灵活的图表,可以选择数据驱动框架:D3.js
- Vega:基于 JSON 规范的可视化语法,以声明式的方式来绘制各种图表。(可视化语法规范的思路有很大的借鉴意义)
关系图和流程图
- Mermaid.js:量级更轻
- Sigma.js、AntV G6:功能更丰富
- Dagre:绘制流程图的底层库,主要是用来计算图的元素布局,使用它再结合图形库,可以实现一个绘制流程图的图可视化库。
地理信息可视化
三维模型和数字孪生
思维导图
数学篇
视觉基础篇
视觉高级篇
可视化常用工具集
跟月影学可视化学习笔记41篇(完结)
说明【跟月影学可视化】专栏学习笔记。个人学习笔记源码:https://github.com/kaimo313/visual-learning-demo一共做了162个学习示例以及41篇博客学习笔记,要深入学习该课程请支持正版,个人笔记仅供参考。笔记目录【图形基... 查看详情
工具篇41#常用可视化工具集整理(完结)
说明【跟月影学可视化】学习笔记。可视化场景主体需求主体需求示例绘制基本图形根据数据绘制一些二维、三维的几何图形,它们不一定是完整的图表,通常是具有灵活性和视觉冲击力的小图形,例如粒子效果绘制... 查看详情
工具篇41#常用可视化工具集整理(完结)
说明【跟月影学可视化】学习笔记。可视化场景主体需求主体需求示例绘制基本图形根据数据绘制一些二维、三维的几何图形,它们不一定是完整的图表,通常是具有灵活性和视觉冲击力的小图形,例如粒子效果绘制... 查看详情
实战篇40#如何实现3d地球可视化?(代码片段)
说明【跟月影学可视化】学习笔记。如何实现一个3D地球学习笔记源码实现:https://github.com/kaimo313/visual-learning-demo整体实现效果如下:1、绘制一个3D球体<!DOCTYPEhtml><htmllang="en"><head><metacharset= 查看详情
重学前端专栏44篇学习笔记合集(完结)
说明这些文章只是笔者学习记录的笔记,仅供参考。请支持正版的专栏。目录前端发展史以及学习痛点前端学习路线与方法前端知识框架图div和span不是够用吗?如何运用语义类标签来呈现Wiki网页?JavaScript类型有哪些... 查看详情
设计篇35#如何让可视化设计更加清晰?(代码片段)
说明【跟月影学可视化】学习笔记。分清信息主次,建立视觉层次用醒目的颜色突出显示数据,把被淡化的其他视觉元素当作背景。比如:平均温度与露点的散点例子<!DOCTYPEhtml><htmllang="en"><head>&... 查看详情
设计篇35#如何让可视化设计更加清晰?(代码片段)
说明【跟月影学可视化】学习笔记。分清信息主次,建立视觉层次用醒目的颜色突出显示数据,把被淡化的其他视觉元素当作背景。比如:平均温度与露点的散点例子<!DOCTYPEhtml><htmllang="en"><head>&... 查看详情
数据篇34#如何处理多元变量?(代码片段)
说明【跟月影学可视化】学习笔记。从数据到图表展现2014年北京市的天气历史数据(csv格式)这里使用QCharts图表库折线图来展示平均气温<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><... 查看详情
数据篇34#如何处理多元变量?(代码片段)
说明【跟月影学可视化】学习笔记。从数据到图表展现2014年北京市的天气历史数据(csv格式)这里使用QCharts图表库折线图来展示平均气温<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><... 查看详情
视觉基础篇10#图形系统如何表示颜色?
说明【跟月影学可视化】学习笔记。RGB和RGBA颜色RGB和RGBA的颜色表示法#RRGGBB是RGB颜色的十六进制表示法,其中RR、GG、BB分别是两位十六进制数字,表示红、绿、蓝三色通道的色阶。色阶可以表示某个通道的强弱。每个通... 查看详情
视觉高级篇27#如何实现简单的3d可视化图表:github贡献图表的3d可视化?(代码片段)
说明【跟月影学可视化】学习笔记。第一步:准备要展现的数据可以使用这个生成数据:https://github.com/sallar/github-contributions-api这里直接使用月影大佬的github提交数据的数据即可结构大致如下:第二步:用SpriteJS渲... 查看详情
性能篇29#怎么给canvas绘制加速?(代码片段)
说明【跟月影学可视化】学习笔记。方法一:优化Canvas指令例子:实现一些位置随机的多边形,并且不断刷新这些图形的形状和位置<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><me... 查看详情
性能篇29#怎么给canvas绘制加速?(代码片段)
说明【跟月影学可视化】学习笔记。方法一:优化Canvas指令例子:实现一些位置随机的多边形,并且不断刷新这些图形的形状和位置<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><me... 查看详情
性能篇30#怎么给webgl绘制加速?(代码片段)
说明【跟月影学可视化】学习笔记。常规绘图方式的性能瓶颈例子:在一个画布上渲染3000个不同颜色的、位置随机的三角形,并且让每个三角形的旋转角度也随机。<!DOCTYPEhtml><htmllang="en"><head><meta... 查看详情
性能篇30#怎么给webgl绘制加速?(代码片段)
说明【跟月影学可视化】学习笔记。常规绘图方式的性能瓶颈例子:在一个画布上渲染3000个不同颜色的、位置随机的三角形,并且让每个三角形的旋转角度也随机。<!DOCTYPEhtml><htmllang="en"><head><meta... 查看详情
设计篇36#如何理解可视化设计原则?(代码片段)
说明【跟月影学可视化】学习笔记。可视化设计的四个基本原则基本原则一:简单清晰原则我们可以看下面一张图:国际茶叶委员会制作的全球茶叶消费排行榜图表,目的是想说明喝茶最多的不是中国人我们可以用更... 查看详情
设计篇36#如何理解可视化设计原则?(代码片段)
说明【跟月影学可视化】学习笔记。可视化设计的四个基本原则基本原则一:简单清晰原则我们可以看下面一张图:国际茶叶委员会制作的全球茶叶消费排行榜图表,目的是想说明喝茶最多的不是中国人我们可以用更... 查看详情
数据篇32#如何选择合适的方法对数据进行可视化处理?(代码片段)
说明【跟月影学可视化】学习笔记。从原始数据中过滤出有用的信息下面通过航拍公园人群分布例子,按照某些属性对数据进行过滤,再将符合条件的结果展现出来。数据来源:https://github.com/akira-cn/graphics/blob/master/da... 查看详情