这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
了解数据可视化的概念和基本原则
数据可视化的概念数据可视化,就是将相对抽象的的数据通过可视的、交互的方式进行展示,从而形象而又直观地表达出数据蕴含的信息和规律。简单来说,就是把复杂无序的数据用直观的图像展示出来,这样可以一下就能清晰的发现数据中潜藏的规律。当然啦,数据可视化,不仅仅是统计图表。本质上,任何能够借助于图形的方式展示事物原理、规律、逻辑的方法都叫数据可视化。
数据可视化,主要是为了:
- 记录信息
- 分析推理
- 证实假设
- 交流思想
安斯库姆四重奏 Anscombe's Quartet
通过四组奇特的数据,强调了数据分析之前,描述数据的可视化图形的重要性。
可视化设计原则和方法
能够正确地表达数据中的信息而不产生偏差与歧义。
常见的错误可视化
- 透视失真
- 如果数字是由视觉元素表示的,那么它们应该与视觉元素的感知程度成正比。
- 使用清晰、详细和彻底的标签,以避免图形失真和含糊不清。
- 图形设计 & 数据尺度 图形的每一部分都会产生对其的视觉预期:
- 这些预期往往决定了眼睛实际看到的事物;
- 错误的数据洞察,产生于在图形的某个地方发生的不正确的视觉预期推断。
- 数据上下文
可视化设计原则
- 准确的展示数据
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
格式塔理论
- 就近原则
- 相似原则
- 连续性原则
- 闭合原则
- 共势原则
- 对称性原则
- 图形与背景相关原则
前端的数据可视化工具
- D3
D3.js是用于数据可视化的开源JavaScript函数库,被认为是最好的JavaScript可视化框架之一。
- Vega
Vega是一种可视化语法。通过其声明式语言,可以用JSON格式描述可视化的视觉外观和交互行为,并使用Canvan或SVG生成视图。
- G2
一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用Canvan或SVG构建出各种各样的可交互的统计图表。
- ECharts
ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。