前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

上一章我们学习了如何用 Sparrow 和 AntV S2 去绘制表格,简单了解了一下我们分析任务中的数据。这一章我们将完成其中一个任务:揭露中世纪是一个压抑的时代,也就是去看看压抑的中世纪到底发生了什么?

本章我们先简单回顾一下之前学习的视觉编码理论,并且进行一些比较深入了解。这之后我们会用 Sparrow 基于提到的理论去完成相应的可视化,最后给大家介绍如何用信息图展示我们的结果。

image.png

# 视觉编码理论基础

  • visual encodings 视觉编码是可视化设计的核心环节之一。
  • 如何视觉编码?即让 mark 标记和控制其外观的 channel 视觉通道进行正交组合。

《Visualization Analysis & Design》中,作者专门使用一章节介绍 mark 和 channel :mark 标记是描述项目或链接的「基本几何元素」,channel 通道控制 mark 的「外观」。下面我们就以这本书的内容作为理论指导,介绍如何设计更有效、更友好的可视化。

简单回顾一下 mark 标记的类型:点、线、面。channel 通道类型:位置、颜色、形状、角度、尺寸。

image.png

channel 通道的有效性取决于它的类型:在感知上「magnitude 程度」通道与「ordered 有序」数据很匹配,而「identity 特征」通道与「categorical 分类」数据很匹配。下图总结了 channel 的有效性排行情况。我们可以看到左列排名前几为:同比例尺的位置通道、不同比例尺的位置通道、长度、角度、面积等等,右列则是空间区域、色相、运动、形状。

image.png

上述 channel 的有效性排行还包括了5个维度的考虑:准确性、可辨别性、可分离性、凸显性和分组能力。我们进一步了解可视化设计还应该注意的维度:

  • 准确性:Cleveland 和 McGill 提供了每种通道类型的感知准确性的排名(针对 magnitude 程度通道):这个排名是和上面图的左列排名相对应。同为:同比例尺的位置通道、不同比例尺的位置通道、长度、角度、面积。Heer 和 Bostock 后来的工作发现长度和角度的准确性大致相等。
  • 可辨别性:通道的程度差异是否是可感知的?如果程度差异很小,视觉上是很难区分差异的。因此应该确保该通道的每个 bin 是有区分度的分段。例如线的宽度:图下中用三个程度(500、250、100)来展示线宽度的分段范围。

image.png

  • 可分离的:如下图所示,**左1图是一对完全可分离的通道:位置和色相。**我们可以很容易地看到点的位置分布及其颜色。左2图是大小和色相的组合。我们很容易根据圆的大小对其分类,但是色相在大小映射的混淆下不那么容易被区分。宽度和高度的组合衍生出了大小这个视觉通道,也变得更难被区分了。红色与绿色的组合则更甚。

image.png

  • 凸显性:许多通道具备凸显性,包括(a)倾斜,(b)大小,(c)形状,(d)接近,和(e)阴影方向。(f) 平行线的效果没有前者们佳。

image.png

  • 分组能力:如何设计才能展示分组的效果呢?
    • 方式一:**使用链接型的 mark 标记。**containment 包含区的分组性高于 connection 连接线。

image.png

  • 方式二:使用 identity 特征型通道。 identity 通道的感知分组不像使用 connection 或 containment 标记那样效果强烈,但好处是不会增加额外的杂乱。
  • 方式三:使用“亲近性”原则进行分组。 即同组元素放置同一个区域里。

通过上述的知识,我们了解到了如何更有效地利用 channel 来展示可视化。但光是了解 mark 和 channel 还是不够的,设计还要从最根本的数据类型出发。

# 针对表格型数据的视觉编码理论

表格型数据无处不在,《苏菲的世界》的数据当然也包括了它。

那么我们如何对「表格型数据」进行可视化设计呢?包括两个方面:「arrange 排布」数据以及「map 映射」数据。

  • 「arrange 排布」表格型数据:下图显示了四种设计选择。一是直接表达值。二是三种位置排布方式:对区域的分散、排序和对齐。三是轴的方向:矩形的、平行的或径向的。四是布局密度:密集的、空间填充型的。我们可以看到,他们都与空间通道(位置)相关。

image.png

  • 「 map映射 」数据:颜色以及其他通道也是视觉编码的重要组成部分。这些与第一部分的 channel 介绍是差不多的,我们会在下面的分析问题中,将这些理论应用到可视化设计中去。

image.png

# 问题分析

还记得小册子第二章的分析任务吗?我们可以用 Sparrow 来解决下面前两个问题:

  • 揭露中世纪是一个压抑的时代。(Present)
  • 哲学家们的年龄分布如何?有多少哲学家的寿命超过了 40 岁?(Discover)
  • 进一步探索:研究哲学的国家随时间发生了变化吗?最小寿命的哲学家是谁?感兴趣的哲学家都发表了什么样的观点?(Discover)

上面两个问题可以换个思路提问:时代和哲学家寿命之间的关系是怎样的?这个问题可以侧面反映出哲学家在时代中的分布情况,同时又展现了哲学家的寿命情况(异常值)。

# 可视分析

第一步:准备数据,认识数据

根据想要了解的内容,我们从《苏菲的世界》

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏