数据可视化的基本原理——视觉通道

数据可视化为了达到增强人脑认知的目的,会利用不同的视觉通道对冰冷的数据进行视觉编码。

我们在数据可视化的时候,一方面,展现可视化对象本身的位置、特性,对应的视觉通道类型是定性或者分类,比如汽车在什么地方、汽车的种类;另一方面,展现对象的某一个属性值大小,对应的视觉通道类型是定量或者定序,汽车的油耗、汽车加油的排队顺序。

那么,有哪些具体的视觉通道呢?下面就跟大家介绍几种常见的视觉通道,文末有视觉通道的表现力排序图,心急的记住这个图就可以了。

用于分类的视觉通道

位置

平面位置在所有的视觉通道中比较特殊,一方面,平面上相互接近的对象会被分成一类,所以位置可以用来表示不同的分类;另一方面,平面使用坐标来标定对象的属性大小时,位置可以代表对象的属性值大小,即平面位置可以映射定序或者定量的数据,比如下面会讲到的「坐标轴位置」。

平面位置又可以被分为水平和垂直两个方向的位置,它们的差异性比较小,但是受到重力场的影响,人们更容易分辨出高度,而不是宽度,所以垂直方向的差异能被人们快意识到,这就解释了为什么计算机屏幕设计成 16:9、4:3,这样的设计可以使得两个方向的信息量达到平衡。

色调

我们认识色调只会从定性的角度,平常我们所说的「冷暖色调」,就是我们看一个东西、一幅图,它所表现出来的情感强烈程度,这没法从定量的角度去判别冷艳或是热烈的色调。

认识色调,我们要明白这三点:

  1. 纯色就是色调
  2. 向纯色(色调)增加黑色就构成了暗色
  3. 向纯色(色调)增加白色就构成了亮色

形状

形状所代表的含义很广,一般理解为对象的轮廓,或者对事物外形的抽象,用来定性描述一个东西,比如圆形、正方形,更复杂一点是几种图形的组合。

图案

图案也被称为纹理,大致可以被分为自然纹理、人工纹理。自然纹理是自然世界中存在的有规则模式的图案,比如树木的年轮;人工纹理是指人工实现的规则图案,比如中学课本上求阴影部分的面积示意图。

由于纹理可以看作是对象表面或者内部的装饰,所以可以将纹理映射到线、平面、曲面、三维体的表面中,以分类不同的事物。

用于定量/定序的视觉通道

坐标轴位置

坐标轴上的位置就是前面的位置中的定量功能,使用坐标轴对数据的大小关系进行定量或者排序操作。

长度

长度也可以被称之为一维尺寸,当尺寸比较小的时候,其他的视觉通道容易受到影响,比如一个很大的红色正方形比一个红色的点更容易让人区别,人们对很小的形状也无法区别。

根据史蒂文斯幂次法则,人们对一维的尺寸,即长度或宽度,有清晰的认识。随着维度的增加,人们的判断越来越不清楚,比如二维尺寸(面积)。因此,在可视化的过程成,我们往往将重要的数据用一维尺寸来编码。

角度

角度还有一个名字叫做「方向」,方向不仅仅可以用来分类,也可以用来排序,这得看我们可视化的时候选择什么样的象限。

在二维可视化的世界里,四个象限可以有三种用法:

  1. 在一个象限内表示数据的顺序
  2. 在两个象限内表现数据的发散性
  3. 在四个象限内可以对数据进行分类

面积

面积在前面的尺寸已经讲过了,就是二维的尺寸。

亮度/饱和度

亮度(luminance)是表示人眼对发光体或被照射物体表面的发光或反射光强度实际感受的物理量[3]。简而言之,当任两个物体表面在照相时被拍摄出的最终结果是一样亮、或被眼睛看起来两个表面一样亮,它们就是亮度相同。 在可视化方案中,尽量使用少于 6 个可辨识的亮度层次,两个亮度层次之间的边界也要明显

饱和度指得是色彩的纯度,也叫色度或彩度,是“色彩三属性”之一。如大红就比玫红更红,这就是说大红的色度要高。饱和度跟尺寸有很大的关系,区域大的适合用低饱和度的颜色填充,比如散点图的背景;区域小的使用更亮、颜色更加丰富、饱和度更高的颜色加以填充,便于用户识别,比如散点图的各个散点。小区域使用的饱和度通常只有 3 层,大区域的可以适当增加一些

图案密度

图案密度是表现力最弱的一个视觉通道,在实际应用中很少看到它的身影。可以把它当作成同一形状、尺寸、颜色的对象的集合,用来表示定量或定序的数据。

用于表示关系的

包含

包含是将相同属性的对象聚集在一起,并把他们囊括到一个区域,这个区域与其他区域具有明显的分界线,比如方框、圆形等等

连接

连接关系在表示网络关系型数据中使用,比如邮件收发关系中,收件人与发件人之间的关系,使用线段进行连接,表示他们之间具有一定的联系。

相似

相似经常和颜色进行搭配使用,属性类似的对象之间的关系使用相同色调,不同亮度的颜色进行表示。

接近

如果说相似借用颜色来聚类属性相似、相同的对象,那么接近就是利用距离来表示这些对象。这可以体现在设计原则中的亲密性原则,相同性质的事物应该放在一起。

最后说一点

视觉通道的分类不是唯一的,比如位置信息,既能区分不同的分类,又可以用来表示连续数据的差异,所以在数据可视化的过程中,我们应该根据需要做一定调整。

表现力排序表

参考文献

[1] 陈为, 张嵩, 鲁爱东. 数据可视化的基本原理与方法[M]. 科学出版社, 2013.

[2] RobinWilliams. 写给大家看的设计书[M]. 人民邮电出版社, 2016.

[3] https://zh.wikipedia.org/wiki/亮度


欢迎大家关注微信公众号:可视化技术( visteacher )

不仅有前端和可视化,还有算法、源码分析、书籍相送

个人网站:http://blog.kurryluo.com

各个分享平台的 KurryLuo 都是在下。

用心学习,认真生活,努力工作!


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366526.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux测试地址是否能访问_一个小测试能看出孩子注意力是否集中,提前弥补,上小学会很轻松...

文|秘籍君不少家长虽然重视孩子的教育,却总是习惯“临阵磨枪”,具体体现在:孩子在上幼儿园的前一两个月才开始着急,害怕孩子适应不了幼儿园;孩子上了大班才开始重视“幼小衔接”,却不知道,从孩子…

服务器怎么禁止iis静态文件,如何禁止IIS缓存静态文件

禁止IIS缓存静态文件(png、js、html等)背景:IIS为了提高性能,默认情况下会对静态文件js、html、gif、png等做内部缓存,这个缓存是在服务器iis进程的内存中的。IIS这么做在很大程度上可以提高静态文件的访问性能,在正常情况下只要静…

汇编实验五

一、 二、 三、 四、 第一个 反汇编后发现不行 第二个 发现也不行 第三个 发现代码正确 五、 编写代码如下 调试后查看内存,发现数据相加了 六、 编写代码如下 发现逆序存储成功 七、实验总结 对于代码段的使用有了更加深入的了解。 但是对于代码段内存这块还是不懂…

eclipse RTC下载的代码无android sdk

问题现象: 修复过程: 1.无ADT,安装ADT(FQ操作) https://dl-ssl.google.com/android/eclipse/ a图 b图 2.下载android sdk a.下载 3.应用到eclipse中去 转载于:https://www.cnblogs.com/liuyj-vv/p/9299913.html

亚马逊免费使用套餐:在EC2 Linux实例上安装Tomcat 7

Amazon Web Services提供了12个月的免费使用期限,使开发人员可以在云中运行任何他们想要的东西。 免费层包括14个服务,其中Web开发人员最关注EC2服务。 EC2是一项服务,通过停止和启动Windows和/或Linux的虚拟实例来提供可调整大小的虚拟计算。…

笔记:隐式转换规则

学习并背诵全文 原始值 类型UndefinedNullStringBooleanNumber值undefinednull所有字符串true false所有数字/NaN 引用类型 Object的成员叫对象,包括Array,Function,Math,Date,JSON,RegExp等除了原始值…

ble连接过程建立_九点之蓝牙连接

蓝牙连接蓝牙连接是如何进入到连接状态呢,首先必须经历前面提到的广播阶段,主端通过扫描到从端的广播来发现这个设备,之后让主端发出连接请求来要求与从端建立连接,便可以进入到连接状态。由于蓝牙连接牵涉的点比较多,…

华为服务器系统蓝屏,服务器主机蓝屏

服务器主机蓝屏 内容精选换一换云服务器创建后区域固定,不能将云服务器转移到另一个区域,也不能将云服务器转移到另一个帐号。您可以通过镜像迁移方式实现云服务器的跨帐号跨区域迁移。服务器迁移的常见场景与常用的迁移方式请参考常见的服务器迁移场景。…

多对一映射、一对多映射

Emp员工表 Dept部门表 多对一映射 在查询时,需要获取两张以上关联表的数据,通过关联映射,可以由一个对象获取关联对象的信息,例如:查询一个Emp员工对象,可以 通过关联映射获取员工所在的部门Dept对象信息 …

一道面试题目引发的思考

起因 多列布局是前端一个经典的反复被提及的面试题目,最典型的即两列,左列定宽菜单栏,右列变宽为内容区域。 通常得到的答案无外乎左列浮动定宽,然后右列或浮动,或设置外边距,或绝对定位等等。偶尔会有面试…

uniapp弹出框_uniApp上拉刷新,下拉加载,以及筛选功能

uniApp插件市场有很多友好的插件,今天举一个例子如上图所示,实现上拉刷新,下来加载,右上角点击弹出筛选框,只需要在插件市场搜索刷新选择你想要的效果(也可以下载后自己改动效果)点击导入插件,会自动打开项…

乐高无限的服务器怎么建,乐高无限悬空房子怎么建造 建造方法介绍

乐高无限悬空房子怎么建造?很多玩家对此还不是很清楚,下面给大家带来乐高无限悬空房子建造方法,还不知道怎么建造的朋友一起来看看吧!建造方法悬空房子非常容易搭建,如果我们想要将已经搭建的房子悬空,就只需要将建筑下方的土地挖…

Hibernate学习(一)

搭建环境 1、创建普通的Java工程 2、添加相应的jar包,下载链接:https://files.cnblogs.com/files/AmyZheng/required.rar 第一个实例 1、引用jar包 2、创建数据库和表 DROP TABLE IF EXISTS t_customer ;CREATE TABLE t_customer (id INT(5) PRIMARY KE…

使用Spring Webservices构建SOAP Webservices代理模块

前一段时间,我想看看使用Spring Web Services编写Web服务代理(wsproxy)有多么容易。 所以,我想我会在Github上分享结果。 可以随意使用它 (Apache v2许可证)或将其用作自己开发的基础。 本文的其余部分将解…

joc杂志影响因子2019_排名 ‖ 2019年中国体育学期刊影响因子

近日,由中国科学文献计量评价研究中心、清华大学图书馆研制,《中国学术期刊(光盘版)》电子杂志社有限公司出版的《中国学术期刊影响因子年报》(2019版)发布。该年报是中国科学文献计量评价研究中心自2002年…

Confluence 6 MySQL 3.x 字符集编码问题

MySQL 3.x is 已知在大写和小写转换的时候有些问题(non-ASCII)。 问题诊断 请按照 Troubleshooting Character Encodings 页面中的内容对问题进行诊断。如果大小写字符串编码诊断显示不同,那么有可能是你数据库导致的。一个错误的数据库大小写…

手型向下 点击一下 福昕_PPT多张缩略图点击放大展示

↑点击上方“菜鸟PPT”关注,教你玩转PPT!多张图片单击放大展示,以前做过一个比较复杂的,在同一页PPT里面做,加了很多个“进入”和“退出”的动画,维护起来比较麻烦。今天,菜鸟菌跟大家一起来学习…

6个经典的JavaScript报错分析

代码报错是经常发生的一件事,我们要确定是什么原因造成的,以及如何避免错误。 1. Uncaught TypeError: Cannot read property 该错误说明没有某个属性,一般是该属性前面的值是undefined或者是null的情况会出现。 2. TypeError: ‘undefined…

git显示服务器所有分支,git 查看所有远程分支以及同步

在多台电脑使用git管理开发分支的时候,会出现这样的情况。电脑A创建了分支1,并且push上了远程仓库。电脑B本地clone仓库默认只会clone下master分支,而其他电脑A推送的分支是不会默认同步下来的。那么如何同步呢?查看电脑B本地仓库…

json-schema 可视化编辑器发布了

json-schema 的用途越来越广泛,除了定义数据结构外,我们还可以使用 json-schema 验证数据格式和生成随机数据,但是编写复杂数据结构的 json-schema 是非常痛苦的事情。假设一个 100 字段的数据结构,如果用 json-schema 定义&#…