惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

GeekPlux

一代人的博客,一代人的青春注脚 那些年我打过的日结工 来美国的两年后 2023 一蓑烟雨 在美国拥有一辆 Tesla 的成本 我的 Workspaces 十年进化史 How to Sync Logseq Plugins, Themes and Settings Across Multiple Devices Setting Up Umami as Your Google Analytics Alternative: A Step-by-Step Guide 迁移豆瓣读书记录到 goodreads Enhance Your Internet Privacy in 2023 Refactor your blog comments system with Webmention.io 来美国之后,如何快速安顿下来 Three Levels of Information Perception 疫情三年 与人聊天的美好 我获取信息的方法 2022 版 我是如何学会编程的 Legacy code best practice: how to take over an existing project smoothly 2020 恍如隔世 接外包的一些坑和小技巧 论交友 往返香港隔离指南 即将失明,还能继续做程序员吗 小谈我对新技术的态度 How to use tailwindcss with AMP in a Next.js project 远程工作如何提高效率 复式记账、财报、量化与图论 我为什么从阿里巴巴离职 2019 柳暗花明 YouTube 观看历史数据分析 投资被动型指数基金正在造成下一次金融泡沫? 三种主流的网赚套利,躺着赚钱? 色盲的世界 我是如何管理 21 张信用卡的 薅羊毛的最大意义:保持对规则的敏感度 来香港的两个月 数据可视化技术实现的关键点 不需要扫描仪,数字化归档自己的文件 如何找到时薪 80 美元的远程工作(二) 如何找到时薪 80 美元的远程工作(一) 如何打造真正的简历 浅思图数据可视化 舍本逐末的学习方式 给想转行作程序员的人泼一盆冷水 算法优化人生之 —— 调度算法 杭州最适合闲来溜达的几条路线 2018 平淡无奇 突闻金庸先生逝世有感 十年博客折腾历史 数据可视化之 Sankey 桑基图的实现 研究生生涯总结 如何在不规则多边形内均匀撒点的算法 Web 前端中的增强现实(AR)开发技术 参加 Google Summer of Code 的体验 netjsongraph.js – Google Summer of Code (GSoC) 2017 summary 如何在 GitHub 上获得数百 stars Markvis - 在 markdown 中生成可视化图表 D3 force layout and WebGL integration 文本数据可视化(下)——一图胜千言 文本数据可视化(上)——从 Wordle 谈起 我获取信息的渠道 数据可视化基础——数据模型 数据可视化基础——可视化流程 为什么要用 Emacs Vega-Lite: A Grammar of Interactive Graphics 如何搭建一个私人网盘 如何阅读一篇学术论文 超过十个人的微信群根本没有价值 毕业后的两年 建立索引式的学习方法 为什么我喜欢写代码 写文章的小技巧 为什么文章写得好的人都很厉害 人总要有点盲目的自信 如何管理好自己的密码 Backbone View 之间通信的三种方式 Vim - 适合自己的,才是最好的 轻松玩转 Ukulele 告别社交网络有多难 双拼学习记 CoffeeScript 编码风格指南(译) CoffeeScript 笔记 CSS 最核心的几个概念 响应式设计简易指南(译) 初识 TDD Collapsing margins——合并的外边距 菜鸟级 Mac 配置(二) 菜鸟级 Mac 配置(一) CSS 编写原则 Goodbye,我的大学 如何新建一个 Cocos2d-x 项目 Windows8.1 下 Cocos2d-x 环境搭建 Android 开发如何入门 如何绑定独立域名 写博客就用 FarBox 尝试改变微信公众账号消息的推送方式 情似流水 操作系统总结——存储器管理 操作系统总结——处理机管理 操作系统总结——引论
数据可视化基础——视觉编码
GeekPlux · 2017-01-03 · via GeekPlux

本系列「数据可视化基础」文章共三篇,介绍可视化中最基础、最重要的一些概念、理论。这篇为第三篇,主要介绍视觉编码,另两篇则主讲可视化流程数据模型,建议从可视化流程看起。 原文地址:http://geekplux.com/2017/01/03/basics-of-data-visualization-visual-encoding-principles

终于来到了最后一篇,前两篇的铺垫可能有点长,但是不种苗浇水怎能开枝散叶。可视化编码是可视化中的核心内容,本文会对其进行详细的讲解,尤其是视觉编码视觉通道两个概念,如果其中遇到晦涩之处,不要心急,可囫囵吞枣直接往下看。

什么是视觉编码(visual encoding)

很多人可能看到题目的时候就有这个疑问,到底什么是视觉编码。其实视觉编码很简单,用一句话就能概括:

视觉编码描述的是将数据映射到最终可视化结果上的过程。

这里的可视化结果可能是图片,也可能是一张网页等等。

编码二字,如果说是指设计、映射的过程,那么码呢?其实指的是一些图形符号。

图形能告诉我们什么

在介绍各类图形符号之前,我们先谈谈:图形能告诉我们什么。

仔细观察上方这个简单的图片,你能得得到什么信息?

  1. A B C 是不同的
  2. B 在 A 和 C 的中间
  3. BC 的长度是 AB 的大概两倍

得益于我们视觉系统的强大,这些信息不假思索就能得出。如果把上图想象成一个二维坐标系,则我们可能得出更多的结论。

"Resemblance, order and proportion are the three signfields in graphics.” - Bertin [1]

图形符号和信息间的映射关系使我们能迅速获取信息。所以我们可以把图片看成一组图形符号的组合,这些图形符号中携带了一些信息,我们称作它编码了一些信息。而当人们从这些符号中读取信息时,我们称作我们解码了一些信息。

我们人类解码信息靠的是我们的眼睛、我们的视觉系统。如果说图形符号是编码信息的工具或通道、那么我们的视觉就是解码信息的通道。因此,我们通常把这种图形符号 < —— > 信息 < —— > 视觉系统的对应称作视觉通道

至此算是把视觉通道视觉编码这两个概念讲清楚了。如果一个人说他想用四个通道来编码四个维度的数据,即可以翻译成他想用四种图形符号来对应这份数据表的四个列的信息。

这里举个例子(例子来自于 [2] 陈为 沈则潜 陶煜波. 数据可视化[M]. 电子工业出版社, 2013.):

例子来自于陈为 沈则潜 陶煜波《数据可视化》

  • 上图中图 A 表示了三个不同班级的数学平均分,用柱状图表示,柱状图的高度作为一个视觉通道,编码了数学平均分的;柱状,这个形状作为一个视觉通道编码了数学平均分这一属性
  • 图 B 中,我们想在 A 的基础上多展示语文平均分这一项数据(即增加了一个数据维度),则选用点这个形状通道编码这两个属性;点的横坐标编码语文平均分的;点的纵坐标编码数学平均分的
  • 这时候发现图 B 中我们把班级这个数据维度给丢掉了,于是我们可以用颜色这一视觉通道来编码班级这个属性信息,如图 C。
  • 如果我们还想展示班级人数这一信息,则可以用尺寸这一视觉通道来编码,如图 D。

视觉编码中常用的视觉通道

1967 年,Jacques Bertin 初版的《Semiology of Graphics》一书提出了图形符号与信息的对应关系(就是本文上一节的内容),奠定了可视化编码的理论基础。

Bertin J. Semiology of graphics: diagrams[C]// Conference on Computer Networks. 1983.

如上图所示,书中把图形符号分为两种:

  • 位置变量:一般指二维坐标
  • 视网膜变量尺寸数值纹理颜色方向形状

以上基本的图形符号共有 7 种。将其映射到点、线、面之后,就相当于有 21 种编码可用的视觉通道。后来人们还又补充了几种其他的视觉通道:长度面积体积透明度模糊/聚焦动画等,所以可用的视觉通道其实太多了。

而一般一份可视化作品可用到的视觉通道要尽可能得少,因为太多了反而会造成我们视觉系统的混乱,使我们获取信息更难。于是这就涉及到了视觉通道的设计原则。

视觉编码设计原则

这一节其实可以单独再分一篇文章写,因为可视化编码设计实在是复杂:假设我们有 k 个视觉通道,有 n 个数据维度,则一共有 (n+1)^k 种编码方案……从中选出一种最佳方案难度可见一斑。

不过既然本文是讲解视觉编码相关,所以这个章节是逃不掉的,在此提纲挈领讲一下。如果想深入了解,可以阅读参考文献中提到的书籍。

视觉通道的三个性质

上一篇数据模型讲解了可视化中数据分为三类:类别型有序型数值型

  1. 定性性质(或叫分类性质)。适用于类别型数据。比如形状或颜色,这两个视觉通道,非常容易被人眼识别。从一堆正方形中识别出一个三角形,或看万绿丛中一点红,都是我们眼睛拿手好戏。
  2. 定量性质或定序性质。适用于有序型和数值型数据。比如长度、大小特别适合于编码数值/量的大小。
  3. 分组性质。具有相同视觉通道的数据,人眼也能很快识别出来,将其归为一组。

总结一下视觉通道与数据类型的对应关系,如下图所示:

视觉通道与数据类型的对应

视觉编码设计的两大原则

Mackinlay[4] 和 Tversky[5] 分别提出了两套可视化设计的原则,Mackinlay 强调表达性和有效性,Tversky 强调一致性和理解性。两者可以糅合起来:

  1. 表达性、一致性:可视化的结果应该充分表达了数据想要表达的信息,且没有多余。
  2. 有效性、理解性:可视化之后比前一种数据表达方案更加有效,更加容易让人理解。

下面这张图总结了视觉编码面对不同数据类型的优先级:

视觉编码面对不同数据类型的优先级

如果要具体展开每项视觉通道来说,未免有点太繁琐,而且设计可视化编码除了视觉通道还需要考虑:

  • 色彩搭配
  • 交互
  • 美学因素
  • 信息的密度
  • 直观映射、隐喻

以上每一项都很重要,之后有机会再写吧。这个可视化基础系列总算是完结了,文字虽然不多,但是搜索资料、读论文、总结等还是挺累的,希望你能有所收获。欢迎各位在我博客文末留言讨论(如果看不到评论框可能是因为你没有科学上网)。

参考文献