这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
一、本堂课重点内容:
- 数据可视化的基本概念
- 可视化设计的基本原则
- 面向前端的可视化工具
二、详细知识点介绍:
什么是数据可视化
数据可视化是一种将数据通过图形化手段，清晰有效地传达与沟通信息的科学技术研究。 数据可视化可以使用统计图形、图表、信息图表和其他工具，来创建和研究数据的可视化表示。数据可视化的目的是让更多人读懂大数据，受惠数据驱动的决策方式。
可视化设计的基本原则
可视化设计的基本原则是指在创建和研究数据的可视化表示时，应该遵循的一些规范和方法，以达到清晰有效地传达与沟通信息的目的。可视化设计的基本原则可以分为以下几类：
- 美学原则：指的是视觉上的美感，包括构图美、布局美和色彩美等方面。视觉是获取信息最重要的通道，美学原则可以提高用户的视觉体验和认知效率。
- 信原则：指的是能正确地表达数据中的信息而不产生偏差和歧义。信原则要求控制谎言因子于合适范围，使用清晰、详细和彻底的标签，以及提供数据上下文等。
- 简原则：指的是能用最少的元素和最简单的形式来表达最多的信息。简原则要求去除多余的视觉元素，避免过度装饰，以及使用合适的图形类型等。
常见的错误可视化
- 透视失真
- 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
- 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
- 图形设计&数据尺度
图形的每一部分都会产生对其的视觉预期(visual expectation) :
- 这些预期往往决定了眼睛实际看到的东西;
- 错误的数据洞察，产生于在图形的某个地方发生的不正确的视觉预期推断。一个典型的例子:轴刻度，我们期望它从始至终能够保持连贯且一致。
- 数据上下文
面向前端的可视化工具
D3
D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。 observablehq.com/@d3/bar-cha…
Vega
Vega是一种可视化语法。通过其声明式语言，可以用JSON格式描述可视化的视觉外观和交互行为，并使用 Canvas或sVG生成视图。
G2
一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用Canvas或sVG构建出各种各样的可交互的统计图表。
ECharts
ECharts,一个使用JavaScript 实现的开源可视化库,可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11,Chrome，Firefox,Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
三、引用参考：
- 青训营ppt
