正文 

当前位置： 首页 > IT > java教程

跟月影学可视化学习笔记41篇（完结）

凯小默 凯小默     2023-03-28     750

关键词：

说明

【跟月影学可视化】专栏学习笔记。

个人学习笔记源码：https://github.com/kaimo313/visual-learning-demo

一共做了 162 个学习示例以及 41 篇博客学习笔记，要深入学习该课程请支持正版，个人笔记仅供参考。

笔记目录

可视化常用工具集

基本图形

基础图表

  • 图表库：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... 查看详情