数据可视化6步法

标签: 交互设计 | 发表时间:2013-01-30 15:13 | 作者:duanwei
出处:http://ued.baidu.com

 

在当前互联网,各种数据可视化图表层出不穷,本文尝试对数据可视化的方法进行归纳,整理成6步法。

 

一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值,我们暂且将其分别定义为指标和指标值。比如一个性别分布中,男性占比30%,女性占比70%,那么指标就是男性、女性,指标值对应为30%、70%。

 

  1 .  将指标值图形化

一个指标值就是一个数据,将数据的大小以图形的方式表现。比如用柱形图的长度或高度表现数据大小,这也是最常用的可视化形式。

传统的柱形图、饼图有可能会带来审美疲劳,可尝试从图形的视觉样式上进行一些创新,常用的方法就是将图形与指标的含义关联起来。

比如Google Zeitgeist在展现top10的搜索词时,展示的就是“搜索”形状的柱形,图形与指标的含义相吻合,同时也做了立体的视觉变化:

 

2. 将指标图形化

一般用与指标含义相近的icon来表现,使用场景也比较多,如下:

 

3. 将指标关系图形化

当存在多个指标时,挖掘指标之间的关系,并将其图形化表达,可提升图表的可视化深度。常见有以下两种方式:

 

借助已有的场景来表现

联想自然或社会中有无场景与指标关系类似,然后借助此场景来表现。

比如百度统计流量研究院操作系统的分布,首先分为windows、mac还有其他操作系统,windows又包含xp、2003等多种子系统。

根据这种关系联想,发现宇宙星系中也有类似的关系: 宇宙中有很多星系,我们最为熟悉的是太阳系,太阳系中又包括各个行星, 因此整体借用宇宙星系的场景,将熟知的windows比喻成太阳系,将xp、window7等比喻成太阳系中的行星,将mac和其他系统比喻成其他星系,表现如下:

 

构建场景来表现

指标之间往往具有一些关联特征,如从简单到复杂、从低级到高级、从前到后等等。如无法找到已存在的对应场景,也可构建场景。

比如百度统计流量研究院中的学历分布,指标分别是小学、初中、高中、本科等等,它们之间是一种越爬越高,从低等级到高等级的关系,那么,这种关系可以通过构建一个台阶去表现,如下:

 

支付宝新出的个人年度账单中,在描述付款最多的三项时,构建了一个领奖台的形式:

小结

根据之前3步,可将指标、指标值和指标关系分别进行图形化处理。

以最简单的性别分布为例,可以得到一个线性的可视化过程,如下:

以上图示为供参考的线性化过程,实际可视化思考中,将哪类元素进行图形化或者图形化前后的顺序可能均有不同,需根据具体情况处理。

4. 将时间和空间可视化

时间

通过时间的维度来查看指标值的变化情况,一般通过增加时间轴的形式,也就是常见的趋势图。

空间

当图表存在地域信息并且需要突出表现的时候,可用地图将空间可视化,地图作为主背景呈现所有信息点。

Google Zeitgeist在2010和2012年的年度热门回顾中,都是以地图为主要载体(同时也结合了时间),来呈现热门事件:

5. 将数据进行概念转换

 

先看下生活中的概念转换,当我们需要喝水时,通常会说:给我来一杯水;而不会说:给我来30ml的水。在这里,30ml是一个实际数据,但是难以感知,所以用一杯的概念来转换。

 同样在数据可视化,有时需要对数据进行概念转换,可加深用户对数据的感知。常用方法有对比和比喻:

  对比

下图是一个介绍中国烟民数量的图表:如果只看左半部分中国烟民的数量:32000000,知道数据量级很大,但具体有多大却很难感知;直到看到右半部分:中国烟民数量超过了美国人口总和,这样一对比,对数据的感知就加深了。

比喻

下图是一个介绍雅虎邮箱处理数据量的图表,大意是每小时处理的电子邮件大小有1.2TB,相当于644245094张打印的纸。

 这又是一个很大的数据,但到底有多大? 在这里用了一个比喻的手法:644245094张纸,如果把每一张纸首尾对接,可以绕地球4圈多。到这里,能较深刻感受到雅虎邮箱处理的数据量之大,为地球节省了很多纸张。

 更进一步地,还将这个比喻进行了图形化表现。

6. 让图表“动”起来

数据图形化完成后,可结合实际情况,将其变为动态化和可操控性的图表,用户在操控过程中能更好地感知数据的变化过程,提升体验。

 实现动态化通常以下两种方式: 交互和动画。

 

交互

交互包括鼠标浮动、点击、多图表时的联动响应等等,如下是百度统计流量研究院的时间分布图,采用左图右表的联动形式,左图中,鼠标浮动则显示对应数据,点击则切换选择:

动画

包括增加入场动画、交互过程的动画、播放动画等等。

入场动画:即在页面载入后,给图表一个“生长”的过程,取代“数据载入中”这样的提示文字。

交互动画:用户发生交互行为后,通过动画形式给以及时反馈。

播放动画:一般来是提供播放功能,像看视频一样,让用户能够完整看到数据随时间变化的过程。下图是Gapminder在描述多维数据时,提供随时间播放的功能,可以直观感受到所有数据的变化。

 

总结

数据可视化形式多样,思考过程也不尽相同。以上6步法,是基于“数据”层面(区别于信息可视化),梳理思考过程,总结设计方法,为后续可视化提供可借鉴的思路。

 

相关 [数据 可视化 步法] 推荐:

数据可视化6步法

- - 百度商业用户体验部
在当前互联网,各种数据可视化图表层出不穷,本文尝试对数据可视化的方法进行归纳,整理成6步法. 一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值,我们暂且将其分别定义为指标和指标值. 比如一个性别分布中,男性占比30%,女性占比70%,那么指标就是男性、女性,指标值对应为30%、70%.

数据可视化

- Sillywolf - ISD Webteam

大数据的可视化

- - CSDN博客云计算推荐文章
       现在数据管理面临的一个关键性问题是如何将这些海量的来自于四面八方的非结构化数据可视化. 不管你从事于什么行业或者正在从事于哪一方面的研究,正将是你经常会触及的问题. 最近,埃里克•奥彭肖和JR里根做客了商务博客的“金融时代”专栏,讨论的主题为“大数据可视化是‘大数据’的关键机会”,分析了今天大数据的使用者们面临的可视化问题,以及公司为应对这个挑战而付诸的一些创新的方法.

Visual.ly:可视化数据探索平台

- kaichun - TechWeb 新酷网站 RSS阅读
Visual.ly相关图片(图片来源:Techweb.com.cn).   【TechWeb报道】4月12日消息,新酷网站:可视化数据探索平台Visual.ly.   我们生活在数据收集和内容创作的时代. Visual.ly正是这个数据时代当产物,一个全新的可视化信息图形新平台. 信息图形将极大的刺激视觉表现,促进用户间相互学习、讨论.

大数据可视化小结

- - CSDN博客云计算推荐文章
苏州海数信息www.dataonv.com. 对数据可视化的需求正急剧增长. 一部分原因是更多的公司正在寻求通过对大数据分析来获得可视化的业务洞察力. 大数据的可视化个人认为还是以仪表盘为展现的最终载体,当然仪表盘会包含移动端、云端和企业端. 那么,仪表盘中的内容应该包含哪些. 大数据的最终分析结果,其中有一种是对关键指标的计算结果,如:市场模糊占有率,总体情感指数,用户粘度系数等等,其展现内容最简单来说就是一个数字或者百分比,展现形式可以是较为显眼的图片,突出数字的基础上,增加小部分的文字描述;.

Twitter数据挖掘及其可视化

- - 细语呢喃
前阵子有学弟学妹问我毕设做的啥,于是我决定记录一下去年毕设的内容. 主要是基于twitter的内容有:. Twitter数据挖掘平台的设计与实现. 毕设从16年3月开始做,做到5月初,开始写论文,当时写的论文一共有七章,写了一个礼拜,从早到晚- -| 共24834字. ,数据有的从15年11月左右开始抓的.

可视化的数据结构和算法

- greenar - 酷壳 - CoolShell.cn
还记得之前发布过的那个关于可视化排序的文章吗. 在网上又看到了一个旧金山大学David Galles做的各种可视化的数据结构和基本算法的主页,网址在这里,大家可以看看. 我把这个页面的目录列在下面并翻译了一下,大家可以直接点击了. 不知道国内的教育有没有相关的教学课件,至少在我大学的时候是没有的. Queues队列: 数组实现.

数据可视化之美——《纽约时报》的一天

- afanso - 《程序员》杂志官网
文 / Michael Young,Nick Bilton    译 / 祝洪凯,李妹芳. 你是否曾经想过《纽约时报》网站的读者会涵盖什么类型的人. 我们还在想他们倾向于在一天之中的什么时候来访问网站,使用什么工具访问以及他们都来自哪里. 从他们是谁到在什么时候、以什么方式以及为什么等,所有这些问题都在我们的思考范围之内.

可视化的数据结构和算法

- yan - 博客园新闻频道
  还记得之前发布过的那个关于可视化排序的文章吗. 在网上又看到了一个旧金山大学David Galles做的各种可视化的数据结构和基本算法的主页,网址在这里,大家可以看看. 我把这个页面的目录列在下面并翻译了一下,大家可以直接点击了.   不知道国内的教育有没有相关的教学课件,至少在我大学的时候是没有的.