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

一只想飞的_小白
179 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

俗语有云：耳听为虚，眼见为实；仔细听一百个数据，不如一张表来的实在，可见数据可视化的重要性。

本文是针对青训营《数据可视化》这节课所学的课后总结，通过何老师深入浅出的介绍，让我了解了数据可视化的重要性及在前端方面的应用。

本节课的主要目标：

  1. 了解数据可视化的概念及基本原则。
  2. 能够识别出错误的可视化呈现。
  3. 了解一些面向前端的数据可视化工具。

数据可视化概念

Anything that converts data into a visual representation(like charts,graphs,maps,sometimes even just tables)

将数据转变为可视化的形式（如图表，曲线图等）

数据可视化分类：

  • 科学可视化: 实验数据可视化
  • 信息可视化: 抽象数据可视化
  • 可视化分析: 数据分析结果可视化

数据可视化意义：

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

可视化设计原则和方法

典型错误：

1.透视失真

image.png 3D图像要尽量避免近大远小的视觉感知误导。

2.图形设计和数据尺度

image.png 人们对图像的每一部分都会产生视觉预期，像此图中从60-100的轴刻度改变会对使人们数据的走向产生误导。

3.数据上下文

image.png 数据可视化要补全数据上下文

可视化设计原则：

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

这里有个概念：数据墨水占比 可视化图形由墨水和空白区域构成，其中不可擦除，构成核心部分的墨水称为数据墨水，而数据墨水占所有墨水的比值称为数据墨水占比。

image.png 因此可视化的要求就是最大化数据墨水占比

视觉感知

概念：客观事物通过人的视觉在人脑中形成的直接反应。

认知：包含注意力、记忆、产生和理解语言、解决问题，以及进行决策的心理过程的组合。

image.png 从这张图片可以看出视觉感知可以一定程度影响认知能力。

格式塔理论

格式塔理论：整体决定部分的性质，部分依从于整体。

image.png

  • 就近原则（Proximity） 人们倾向于将距离上相近的元素归为一组
  • 相似原则（Similarity） 人们倾向于将形状大小颜色等相似的元素看作是一个整体
  • 连续性原则（Continuation） 人们倾向于按照事物的边界将不连续的对象补充为连续对象
  • 闭合原则（Closure） 人们倾向于关注不完整/不闭合的图形中有闭合倾向的主体
  • 共势原则（Common movement） 人们强项于关注一个对象中有共同运动方向的一部分
  • 对称性原则（Symmetry） 对称的元素通常会被视作一部分
  • 图形与背景关系原则（Figure-ground） 人们倾向于将小的, 凸面元素认为为图形, 将大的, 凹面的元素认为是背景

视觉编码

概念：将数据信息(Key-Value)映射成可视化元素(可视化元素(点线面)+视觉通道(大小, 灰度, 颜色, 形状… ))的技术。

可视化符号：

  • 表示元素: 点线面
  • 表示关系: 闭包, 连线

视觉通道：

根据数据不同的属性可视化为不同的表示样式

  • 数量通道：位置, 长度, 角度, 面积, 深度, 色温, 饱和度, 曲率, 体积（用于显示数据的数值属性）
  • 标识通道: 空间区域, 色向, 动向, 形状（用于显示数据的分类属性）

image.png 何老师课上通过以下实例深入浅出的表达出了人们更趋于接受长度表达形式。

image.png

image.png

基础统计图表

  • 柱状图（Bar）
  • 饼图(Pie)
  • 散点图（Scatter）
  • 折线图

此项大家工作中涉及的比较多，就不再赘述。

面向前端的可视化工具

以下为课上老师推荐的几个可视化工具，如果深入了解可点击链接进一步学习。

D3：D3.js是用于数据可视化的开源的JavaScript函数库，被认为是最好的JavaScript可视化框架之一。

[简单示例](Bar Chart Remix / D3 / Observable (observablehq.com))

ECharts:一个使用JS实现的开源可视化库，底层依赖矢量图形库ZRender,语法简单。

[简单示例](Examples - Apache ECharts)

还有两种以数据驱动的可视化语法： Vega:一种图形语法, 通过JSON声明式的描述可视化 例如，画一个柱状图：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.8"></script>
  </head>
  <body>
    <div id="vis" />
    <script>
      const spec = {
        $schema: "https://vega.github.io/schema/vega/v5.json",
        description:
          "A basic bar chart example, with value labels shown upon mouse hover.",
        width: 400,
        height: 200,
        padding: 5,
        data: [
          {
            name: "table",
            values: [
              { category: "小明", amount: 89 },
              { category: "小红", amount: 90 },
              { category: "小王", amount: 88 },
              { category: "小张", amount: 90 },
              { category: "小李", amount: 85 },
            ],
          },
        ],

        scales: [
          {
            name: "xscale",
            type: "band",
            domain: { data: "table", field: "category" },
            range: "width",
            padding: 0.05,
            round: true,
          },
          {
            name: "yscale",
            domain: { data: "table", field: "amount" },
            nice: true,
            range: "height",
          },
        ],
        axes: [
          { orient: "bottom", scale: "xscale" },
          { orient: "left", scale: "yscale" },
        ],
        marks: [
          {
            type: "rect",
            from: { data: "table" },
            encode: {
              enter: {
                x: { scale: "xscale", field: "category" },
                width: { scale: "xscale", band: 1 },
                y: { scale: "yscale", field: "amount" },
                y2: { scale: "yscale", value: 0 },
              },
              update: { fill: { value: "steelblue" } },
              hover: { fill: { value: "red" } },
            },
          },
        ],
        config: {},
      };
      vegaEmbed("#vis", spec, { mode: "vega" })
        .then(console.log)
        .catch(console.warn);
    </script>
  </body>
</html>

G2：也是一种以数据驱动的高交互可视化语法，其逻辑更为简洁。 同样，编辑一个柱状图：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>图表元素 active</title>
  </head>
  <body>
    <div id="container" />
    <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.6/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js"></script>
    <script>
      const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
      ];
      const chart = new G2.Chart({
        container: "container",
        autoFit: true,
        height: 500,
      });

      chart.data(data);

      chart.interval().position("year*value");

      chart.render();
    </script>
  </body>
</html>

总结

通过此课程，让我对数据可视化的认识更进了一步，同时也让我了解了数据可视化的方法，同时也通过一些错误的可视化案例警示我以后对于可视化的要规避的要素，最后通过简单的上手了一些可视化工具，了解可视化在前端邻域的应用。

avatar
文章
阅读
粉丝