这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
一、本堂课重点内容:
- 本堂课的知识要点有哪些?
- 数据可视化的基本概念
- 可视化设计的基本原则
- 面向前端的可视化工具
二、详细知识点介绍:
- 本堂课介绍了哪些知识点?
可视化
把数据转化为视觉形式,包括charts,graphs,maps,tables等
用于记录信息、分析推理、证实假设、交流思想。
可视化思想和方法
原则:正确地表达数据中的信息而不产生偏差与歧义。准确展示、节省笔墨、节省空间、用最少的时间交代最多的内容。
关于数据墨水:
常见错误:
透视失真:3D透视失真 ,绿色应该比紫色小
图形的每一部分都会产生对其的视觉预期,这些预期决定了眼睛看到的实际东西,例如轴刻度我们希望它能从始至终保持连贯且一致。
数据上下文要补全
视觉感知:感知是客观事物通过视觉在人脑中形成的反应,认知是包含注意力、记忆、产生和理解语言、解决问题,以及进行决策的心理过程的组合。设计时要考虑感知系统,不要误导可视化结果。
格式塔理论的几个原则:
就近原则:视觉相近的归为一组,可以放近一些可以突出关联性。
相似原则:大小、形状、颜色、强度相似时,容易被看作一类。
连续性原则:沿着边把不连续的物体看作连续的整体。
闭合原则:人们主体有把图形闭合的倾向,容易感知整个物体而忽略未闭合的特征。
共势原则:同向运动的物体易被感知为一个整体。
对称性原则:对称元素被视为同一部分。
图形与背景关系原则:大脑通常认为小物体是图形,大物体是背景;凸面元素比凹面与图形相关联更多。
视觉编码
数据信息(属性和值)映射成可视化元素(可视化符号和视觉通道)的技术。
可视化符号:点线面。视觉通道:数量通道(定量。位置通道、角度、长度、色温、饱和度等)、标识通道(是什么。空间区域、色向、形状等)
前端可视化工具
D3.js
Vega:一个可视化语法、json
G2:也是可视化图形语法
ECharts
三、实践练习例子:
- 有什么实践举例帮助理解知识点?
- 图表表达期末考试成绩
四、课后个人总结:
- 本章有什么知识点不容易掌握?
- 这节课像是心理学,和一些原则概念上的介绍
- 什么地方容易与其他内容混淆?
五、引用参考:
- 我参考了哪些外部博客/笔记/文章?
- 文章中有什么地方是我参考引用了外部博客/笔记/文章的?