• 这是我参与第五届青训营伴学笔记创作活动的第18天
• 了解前端可视化原则 常见的可视化错误 格式塔理论以及优秀的常见的前端可视化工具

可视化原则

• 能正确地表达数据中地信息而不产生偏差与歧义
• 最短时间 最少空间 最少笔墨 为观众提供更多的信息内涵

常见错误可视化错误

• 透视失真
  • 如果数字是由视觉元素表示的，那么它们应该与视觉元素的感知程度成正比。
  • 使用清晰、详细和彻底的标签，以避免图形失真和含糊不清。
  • 

• 图形设计 & 数据尺度
• 图形地每一部分都会产生对其地视觉预期
  • 这些预期往往决定眼睛实际看到的东西
  • 错误的数据洞察，产生于图形的某个地方发生的不正确的视觉预期推断
  • eg：轴刻度 我们期望他从始至终能够保持连贯一致

• 数据上下文

格式塔理论

• 就近原则
  • 视觉元素在空间上相距较近时，倾向于将他们归为一组
  • 将数据元素靠近突出他们的关联性
• 相似原则
  • 形状 大小 颜色 强度等属性方面比较形似时，这些物体就容易被看作一个整体
• 连续性原则
  • 人们自然的将不连续的事务堪称连续的
• 闭合原则
  • 有些图形可能本身是不完整或者不闭合的，但主体有一种使其闭合的倾向，人们就会很容易地感知整个物体而忽略未闭合的特征。
  • 
• 共势原则
  • 相同走势的个体更容易被看成整体
• 对称原则
  • 堆成的元素被视为一个整体
• 图形与背景关系原则

前端可视化工具

D3

• D3.js适用于数据可视化的开源JS函数库，被认为是最好的JS可视化框架之一
• 上手难度较高
• D3.js - Data-Driven Documents (d3js.org)

Vega

• 一种可视化语法，声明式语言可以用JSON格式描述可视化的视觉外观和交互行为，并使用Canvas或SVG生成视图
• Vega

G2

• G2 是一个简洁的渐进式语法，主要用于制作基于网页的可视化。它提供了一套函数风格式、声明形式的 API 和组件化的编程范式，希望能帮助用户能快速完成报表搭建、数据探索、可视化叙事等多样化的需求。
• G2，可视化语法 | AntV (antgroup.com)

Echarts

• 一个基于 JavaScript 的开源可视化图表库
• 快速上手 - Handbook - Apache ECharts