数据可视化基础 | 青训营笔记

126 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

了解数据可视化的概念和基本原则

数据可视化的概念数据可视化,就是将相对抽象的的数据通过可视的、交互的方式进行展示,从而形象而又直观地表达出数据蕴含的信息和规律。简单来说,就是把复杂无序的数据用直观的图像展示出来,这样可以一下就能清晰的发现数据中潜藏的规律。当然啦,数据可视化,不仅仅是统计图表。本质上,任何能够借助于图形的方式展示事物原理、规律、逻辑的方法都叫数据可视化。

数据可视化,主要是为了:

  1. 记录信息
  2. 分析推理
  3. 证实假设
  4. 交流思想

安斯库姆四重奏 Anscombe's Quartet

通过四组奇特的数据,强调了数据分析之前,描述数据的可视化图形的重要性。

image.png

可视化设计原则和方法

能够正确地表达数据中的信息而不产生偏差与歧义

常见的错误可视化

  1. 透视失真
  • 如果数字是由视觉元素表示的,那么它们应该与视觉元素的感知程度成正比。
  • 使用清晰、详细和彻底的标签,以避免图形失真和含糊不清。
  1. 图形设计 & 数据尺度 图形的每一部分都会产生对其的视觉预期
  • 这些预期往往决定了眼睛实际看到的事物;
  • 错误的数据洞察,产生于在图形的某个地方发生的不正确的视觉预期推断。
  1. 数据上下文

可视化设计原则

  • 准确的展示数据
  • 节省笔墨
  • 节省空间
  • 消除不必要的“无价值”图形
  • 在最短时间内传达最多的信息

格式塔理论

image.png

  • 就近原则
  • 相似原则
  • 连续性原则
  • 闭合原则
  • 共势原则
  • 对称性原则
  • 图形与背景相关原则

前端的数据可视化工具

  • 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,提供直观,交互丰富,可高度个性化定制的数据可视化图表。