这是我参与⌈第四届青训营⌋笔记创作活动的第19天
一、数据可视化
什么是数据可视化：
任何一种将数据转换成一种可视化呈现的东西叫数据可视化，包括统计图表，关系图，地图，体温计，类型丰富。数据可视化有诸多展现方法，不一样的数据种类要挑选合适的展现方式。像Smartbi数据可视化工具就内嵌了丰富多彩的数据图表，除开常见的的柱形图、条状图、条形图、面积图、饼状图、点图、车内仪表盘、走势图表外，也有和弦图、圈饼状图、金字塔式、漏斗图、K线图、关系网、网络图、玫瑰图、帕累托图、公式图、预测分析趋势图、正态分布图、迷你图、行政部门地图、GIS地图等各种各样展现方式。
数据可视化的作用
数据可视化的实际意义是协助人更强的剖析数据，信息的品质非常大水平上取决于其表达形式。对数据列举所构成的数据中所包括的实际意义开展剖析，使剖析結果数据可视化。实际上数据可视化的实质便是视觉效果会话。数据可视化将技术性与造型艺术极致融合，依靠图形界面的方式，清楚合理地传递与沟通交流信息。一方面，数据授予数据可视化以使用价值；另一方面，数据可视化提升数据的灵气，二者紧密联系，协助公司从信息中获取专业知识、从专业知识中获得使用价值。精心策划的图型不但能够形象生动的展示信息，还能够根据强劲的展现方法提高信息的知名度，吸引住大家的专注力并使其维持兴趣爱好，它是报表或excel表没法实现的。
数据可视化分类
- 科学可视化
- 信息可视化
- 可视分析
安斯库姆四重奏
数据：
可视化呈现：
二、可视化设计原则和方法
设计原则
能够正确地表达数据中的信息而不产生偏差和歧义。
- 准确地展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多信息
- 最大化数据墨水占比
Data-ink
Data-ink ratio案例
- 绝大多数都是数据墨水
- 用于绘制散点和对应标签
- 10%-20%的墨水是非数据墨水
- 用于绘制坐标轴和刻度线
- 并非所有的非数据墨水都没有用
可视化设计的方法
- 最重要的是展示数据
- 合理范围内、最大化数据墨水占比
- 擦除非数据墨水
- 擦除冗余的数据墨水
三、视觉感知
什么是视觉感知
感知：是指客观事物通过人的感觉器官在人脑中形成的直接反映。 感觉器官：眼耳鼻、神经末梢 那么视觉感知：就是客观事物通过人的视觉在人脑中形成的直接反映。
认知过程
认知心理学将认知过程看成由信息的获取、分析、归纳、解码、储存、概念形成、提取和使用等一系列阶段组成的按一定程序进行的信息加工系统。科学领域中，认知是包含注意力、记忆、产生和理解语言、解决问题，以及进行决策的心理过程的组合。
相对判断和视觉假象
结论
- 人类视觉系统观察的是变化，而不是绝对值，并且容易被边界吸引。
- 在可视化设计中，设计者需要充分考虑到人类感知系统的这些现象，以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。
四、视觉编码
视觉编码是一种将数据信息映射成可视化元素的技术。
可视化符号（Mark）
视觉通道
基于数据属性，控制可视化的符号展现样式，例如，点根据其所代表的数据属性的不同可有不同的形状与颜色。
视觉通道有两种类型
- 数量通道 用于显示数据的数值属性（定量/定序），包括：位置、长度、角度、面积、深度、色温、饱和度、曲率、体积。
- 标识通道 用于显示数据的分类属性（是什么/在哪里）包括：空间区域、色向、动向、形状。
五、面向前端可视化工具介绍
D3
D3.js是用于数据可视化的开源JavaScript函数库，被认为是最好的JavaScript可视化框架之一。 简单柱状图示例：observablehq.com/@d3/bar-cha…
Vega
Vega是一种可视化语法，通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图。
G2
一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或SVG构建出各种各样的可交互的统计图表。
