数据可视化 | 青训营笔记

胡壹峰
124 阅读5分钟

这是我参与 [第五届青训营] 伴学笔记创作活动的第14天

生活中数据可视化处处可见，将数据转化为可视化的形式，可以让用户能够从数据中直观地获取信息，记录信息，并根据视图分析推理、证实假设——可视化可以加强用户对数据之间的关系、以及数据自身特征的理解

可视化设计原则和方法

  1. 视图配色及纹理需合适，不能让用户感到不舒适
  2. 表现数据不能过多，否则难以在图表中获取到有用的信息，特征信息不突出
  3. 要 正确地表达数据，而不产生偏差与歧义

错误

  1. 透视失真：在三维可视化中由于比例、视角等产生透视失真造成误导 1.jpg

    要将视觉感知程度与数据成正比，并且数据标签要清晰有区分

  2. 数据尺度问题：不连贯统一的尺度设计，会导致用户产生错误的预期，产生错误的数据读取

    2.jpg

  3. 数据上下文不全：通过可视化呈现结论时，要补齐数据上下文，否则图表会信息不全或存在误导性

优秀的设计

优秀的可视化设计需要：

  • 准确展示数据
  • 节省笔墨
  • 节省空间
  • 消除“无价值”图形
  • 最短时间传达最多内容

视觉感知

为达成尽量向用户传达内容，设计者需要使可视化抓取用户的视觉感知

视觉感知是指客观事物通过人的视觉感知器官在人脑形成的直接反映，可视化设计需要注意：

  • 视觉系统观察的是变化，且容易被边界吸引
  • 设计者要考虑人的感知系统，以免出现阻碍或舞蹈用户的可视化元素

格式塔理论

格式塔理论核心是 整体决定部分的性质，部分依从于整体。运用格式塔理论可以做出更贴合人体视觉感知的可视化设计

3.jpg

  • 就近原则：视觉元素空间上距离近时，通常会被归为一组

    4.jpg

  • 相似原则

    形状、大小、颜色、强度等属性相似时，会被认为是一个整体

    5.jpg

  • 连续性原则

    通常会将沿着物体边界的不连续物体视为连续的整体

    6.jpg

  • 闭合原则

    主体有闭合倾向，就会忽略未闭合的空白而感知整个主体

    7.jpg

  • 共势原则

    一个对象的一部分都向共同的方向运动，则会被感知为一个整体

    8.jpg

  • 对称性原则

    对称元素常被视为同一组

    9.jpg

  • 图形——背景关系

    大脑通常认为构图中较小的物体是图像，更大的物体是背景——且凸面元素更被认为是图形

12.jpg

前端可视化工具

D3.js

被认为是最好的JS可视化框架之一，通过API的链式调用完成

Vega

是一种可视化语法，通过一种声明式JSON（spack）来描述可视化视觉外观和交互行为，最终通过canvas或Svg生成效果

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 500,
  "height": 200,
  "padding": 5,
​
  "data": [ /*数据部分，图表的数据呈现*/
    {
      "name": "table", /*表名*/
      "values": [ //类别及对应值
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
      ]
    }
  ],
​
  "scales": [ //转换方法，定义X、Y轴的映射规则
    {
      "name": "xscale", //定义X轴
      "type": "band", //
      "domain": {"data": "table", "field": "category"}, //数据输入来源于 “table”data中的“category”部分，
      "range": "width", //视觉通道上的映射输出为宽度
      "padding": 0.05, //柱间距离
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],
​
  "axes": [ //定义轴
    { "orient": "bottom", "scale": "xscale" }, //下轴，xscale
    { "orient": "left", "scale": "yscale" } //左轴，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"} //鼠标悬浮为红色
        }
      }
    },
 
  ]
}

15.jpg

G2可视化引擎

面向常规的统计图表，与Vega都是一种图形语法库，其数据驱动、高可交互，用Canvas或SVG构建统计图表

import { Chart } from '@antv/g2';
​
const chart = new Chart({ //new一个Chart对象，初始化为'container'且自动填充
  container: 'container',
  autoFit: true,
});
​
//设置chart的图源（类似Vega的图源，比如rect）的数据
chart
  .interval()
  .data({
    type: 'fetch', //类型为fetch请求数据
    value: //数据来源
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .encode('x', 'letter') //图形编码：x对应“letter”属性
  .encode('y', 'frequency') //图形编码：y对应“frequency”属性
  .axis('y', { labelFormatter: '.0%' });
​
chart.render();

16.jpg

ECharts

一个使用JS实现的开源可视化库，底层依赖矢量图形库ZRender，展示只管。交互丰富、可高度个性化定制，与Vega类似使用JSON定义图形，但更简单

option = {
  xAxis: { //x轴
    type: 'category', //x轴的type为 'category'——目录
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //目录值
  },
  yAxis: { //y轴
    type: 'value' //y轴类别为 'value'——值
  },
  series: [ //系列和对应值
    {
      data: [120, 200, 150, 80, 70, 110, 130], //数据
      type: 'bar' //系列类型为 'bar'
    }
  ]
};

17.jpg

总结

数据可视化是一种很好的呈现数据信息、特征和表达数据关系的方式。在前端开发中被时常使用。设计可视化要做到让用户观看舒适，正确表达信息不让用户产生误解。更优秀的设计需要结合人的视觉感官，做出出科学直观的设计

目前前端可视化工具已较为强大，有D3.js、Vega、G2、ECharts等等，其中ECharts最易于上手，较为简洁

avatar
文章
阅读
粉丝