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

111 阅读4分钟

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

一、本堂课重点内容:

  • 数据可视化的基本概念
  • 可视化设计的基本原则
  • 面向前端的可视化工具

二、详细知识点介绍:

什么是数据可视化

数据可视化是指通过图形、图表、图像等形式展示数据,使数据更直观、更容易理解的过程。数据可视化的主要目的是让人们更容易识别和理解数据。

分类

  • 科学可视化:科学领域(生物、医学、化学等)测量信息的直观展示
  • 信息可视化:抽象的,非结构化的(文本、地图、层次结构)的复杂系统的展示
  • 可视分析:结合可视化界面,对数据进行分析和推断(综合人机交互、数据挖掘)

为什么要数据可视化

  • 记录信息
  • 分析推理
  • 证实假设
  • 交流思想

可视化设计原则和方法

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

常见数据可视化出错误

  1. 透视失真
  • 数字由视觉元素表示时,应该与视觉元素感知度成正比
  • 使用清晰、详细和彻底的标签,以免图形失真和含糊不清
  1. 图形设计&数据尺度一致
  2. 数据上下文

可视化设计原则

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

视觉感知

视觉感知是客观事物通过人的视觉在人脑中形成的直接反映

格式塔理论

  • 格式塔学派的理论核心是整体决定部分的性质,部分依从于整体。结构比元素重要,视觉形象首先作为统一的整体被认知。感知的事物大于眼睛见到的事物。
  • 格式塔理论(Gestalt Laws)较为系统的对人类如何发现图形元素之间的相关性进行了全面总结被广泛的应用在了视觉设计当中

就近原则

  • 当视觉元素在空间距离上相距较近时,人们通常倾向于将他们归为一组
  • 将数据元素放在靠近的位置,可以突出他们之间的关联性

相似原则

  • 形状、大小、颜色、强度等属性方面比较相似时,这些物体就容易被看作一个整体

连续性原则

  • 人们在观察事物的时候会很自然地沿着物体的边界,将不连续的物体视为连续的整体

闭合原则

  • 有些图形可能本身是不完整或者不闭合的,但主体有一种使其闭合的倾向,人们就会很容易地感知整个物体而忽略未闭合的特征

共势原则

  • 如果一个对象中的一部分都向共同的方向去运动,那这些共同移动的部分就易被感知为一个整体

对称性原则

  • 对称元素被视为同一组的一部分

图形与背景关系原则

  • 大脑通常认为构图中最小的物体是图形,而更大的物体则是背景
  • 跟凹面元素相比,凸面元素与图形相关联更多些

视觉编码

image.png

可视化符号

用于在可视化当中表现数据元素或元素之间的关联

  • 当表示元素时Mark包括:点、线、面
  • 当表示关系时Mark包括:闭包、连线

视觉通道

基于数据属性,控制可视化的符号展现样式,例如,点根据其所代表的数据属性的不同可有不同的形状与颜色。

一些面向前端的数据可视化工具

面向前端的数据可视化工具有很多,其中常见的有:

  1. D3.js:是一个强大的 JavaScript 库,用于创建动态和交互式的数据可视化。

  2. Highcharts:是一个功能强大的前端图表库,支持多种图表类型和丰富的交互功能。

  3. ECharts:是一个由百度开发的前端数据可视化框架,支持多种图表类型和丰富的交互功能。

  4. Chart.js:是一个简单易用的前端图表库,支持多种图表类型。

  5. Plotly.js:是一个功能强大的前端数据可视化库,支持多种图表类型和丰富的交互功能。