专栏首页木东居士的专栏《七天数据可视化之旅》第六天:提升可视化效果的Tips

《七天数据可视化之旅》第六天:提升可视化效果的Tips

《七天数据可视化之旅》第六天:提升可视化效果的Tips

Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。

0x00 前言

在之前的文章中,已经分享过如何根据数据可视化的目的、数据关系和特征,去选择合适的图表类型。当确定了要使用哪些图表进行数据可视化后,就开始进入可视化作品的设计阶段。从大的方向上来说,影响数据可视化最终效果的因素,分为两个层面:

  • 一是非数据层面。
    • 不受数据影响可视化效果的情况包括: 比如说整个页面的布局; 图表的辅助元素,如图表背景、网格线、外边框; 交互方式的设计等。 →不受数据影响的情况,是我们在可视化设计阶段就可以把控的,比如说页面的整体布局、图表的设计(包含网格线、背景、颜色的选取等)、交互的设计等。
  • 二是数据层面。
    • 受数据影响可视化效果的情况一般包括: 数据分布不均匀,存在极端值; 某一维度下的属性值过多,信息繁杂不够聚焦; 不同层级的,数据量级差异较大; 数据条目较多等。 →以上这些情况的存在,通过可视化映射之后,反映到图表上就体现为,比如说某个柱形条的长度过长,饼图扇区的个数过多等,从而使可视化的最终效果不如人意。

因此,今天这篇文章,主要从以上两个层面,来总结提升可视化效果的一些经验,从而使数据信息的传达更聚焦、有效,可视化作品的视觉呈现更加美观。

0x01 非数据层面

1.布局要强调最重要的数据信息,将用户注意力集中在可视化结果的最重要区域

在进行某一主题的可视化作品设计时,我们需要根据用户关注的重点数据,对可视化结果的重要性和优先级进行排序。通过对可视化空间的合理布局设计,将用户的注意力集中到可视化结果中最重要的一个或几个区域上。

通常情况下,用户的视觉中心,是位于整个页面的上方和中心区域。如果只有一个重点,放在最显眼的位置,如果有几个重点,尽量集中放置,吸引视觉焦点。除了通过重要信息的位置摆放来吸引用户视觉焦点,还可以通过突出的颜色编码来抓住用户的注意力。

下图为一个汽车经销商的客服监控大屏,对于他们而言,黄色框选的区域是他们关注的重点(1)呼叫量(含在线咨询和呼入咨询)。(2)不同客服沟通方式的满意率。(3)在线咨询和呼入咨询人群各自的地域分布。因此,把这三部分集中放在可视化空间的中心区域,可以让客服人员一眼就关注到重要的信息。

2.图表设计要隐藏不必要元素,弱化辅助元素

在我们进行图表绘制时,需要去掉无意义的背景色填充和颜色区分,弱化网格线,突出真正重要的数据信息。虽然,网格线或者颜色映射可以辅助我们理解可视化图表中的信息,但是如果过于凸显,视觉上会显得杂乱、没有主次,干扰到你真正想展示的信息。对于这类元素,应该尽量隐藏和弱化。

3.交互操作要具有直观性、易理解性

一方面,图表中柱形条或趋势点等都代表实际的数据,但是为了可视化作品的简洁和美观,通常情况下,这些数据标签都会被隐藏;另一方面,由于人们查看数据的习惯是,先看总体和趋势,再看局部和细节。这两个方面的原因,要求可视化产品,需要提供给用户一系列的交互手段,来让用户按照自己的意图和关注点去探索数据。

常见的交互方式有:

1)移动和缩放:当前空间只能显示有限的数据时,或者需要关注局部数据时,可以使用移动和缩放。

一般情况下,移动和缩放是同时使用的两个交互动作。对于移动而言,如果当前显示空间没有把数据展示全,需要把后一数据条露出一部分,指引用户可以进行移动操作;对于缩放而言,其目的一般是为了在更大的空间去查看局部的细节数据,一般也需要移动图表来配合。

2)悬停或点击

悬停的的目的,是为了查看某个对象的详细信息,通常会以弹窗或者「图例+数据」的形式展现。

点击的目的,通常是为了进行数据下钻,在这种情况下,需要通过设计传达给用户可以进行交互的信息,如鼠标悬停变手型、对象的颜色变化或者以文字指引等。

3)图表联动

多图表联动,是可视化中比较常见的一种交互方式,图表联动的前提条件是,多个图表的指标含有共同的维度属性,所以当聚焦于某个图表的某一维度下的属性值时,其他图表会联动变化。

其数据格式通常如下:按维度1中的属性值聚合,可以得到左侧的柱状图对应的数据;按维度2中的属性值聚合,可以得到右侧的饼图对应的数据。

维度1

维度2

度量值

AL

low

a

AL

mid

b

AL

high

c

KS

low

d

KS

mid

e

KS

High

f

0x02 数据层面

1.当数据项较多时,需要精简数据项,突出重点

  • 比例型分类数据,分类项建议保持在5~7个 比例型分类数据的可视化方式有:饼图、圆环图、百分比堆叠柱状图、百分比堆叠面积图等,其目的是为了展示个体分类项和总体之间的比例关系。 当需要按照某一个维度进行分组时,若该维度的属性值数目较多,那么就需要对属性值进行重新的归类和分组,通常的做法是,保留占比或实际值TOP5的分类项,剩余分类归为【其他】。
  • 柱状图数据条过多时,保留头部和尾部 当需要用柱状图来对数据进行排行时,若数据条目较多,此时建议保留头部和尾部,中间的可以以省略号带过或者折叠起来,放大时再展开。头部和尾部的具体数目,可以依据具体需要来定,比如前5名和后5名、前10名和后3名等。

2.对于趋势图,若趋势不明显时,坐标轴数值可以不从0开始

当数据差异较小,导致折线的波动范围比较小,走势起伏不明显,此时如果为了更清楚的看到数据的波动情况,坐标轴起始数值可以不从0开始,但是此时需要在页面提示用户,否则用户会误以为波动很大。

虽然,趋势图的主要目的,是查看数据的态势和波动规律,设置坐标轴不从0开始,可以更清晰的看到数据的起伏波动。但是,同时会给用户带来理解的成本,也有夸大差异的嫌疑,因此,不建议频繁使用。

注意:柱状图的坐标轴起点,必须从0开始,否则柱形条的高度就不能代表数据间的差异。

3.当排行数据的类别名称较长时,可以用条形图替换柱状图

当类别名称太长时,虽然斜放可以避免重叠,但歪着头查看内容,和用户阅读的视觉习惯不符,此时可以考虑把柱条横向放置,把类别的名称置于柱条空隙之间或者柱形条左侧。

4.坐标轴需要做对应的单位转化

图表坐标轴的数值,受数据的大小影响,当数据较大时,一方面将坐标轴数值单位转化为我们熟知的K、W、M、亿需要一定的反应时间,另一方面较大的数值也会占用有限的可视化空间。因此,建议,在一个数据可视化平台内部,需要建立一套公共的单位转化规则,保证图表坐标轴单位转化规则的一致性。具体做法如下:

数值级别(X代表数据集中的数值)

单位

示例

X∈[0,1000)

不做单位转化

800

X∈[1000,10000)

以K(千)为单位

2K,8K

X∈[10000,1000000)

以W(万)为单位

20W

X∈[1000000,100000000)

以M(百万)为单位

2M,50M

X∈[100000000,+∞)

以亿为单位

20亿

注意:一个图表中,坐标轴的数值单位需保持一致,一般是以最大数值的单位作为整个坐标轴的统一单位。

0xFF 总结

回顾上文的内容,提升可视化效果的Tips总结如下:

  • 非数据层面:
    • 布局需要凸显和强调可视化中最重要的信息;
    • 弱化或隐藏图表设计中的辅助元素;
    • 通过交互来给予用户探索数据的权利;
  • 数据层面:
    • 精简数据项,突出重点;
    • 趋势图坐标轴可以不从0开始,但是要慎用;
    • 系列名称较长时,需用条形图,横向摆放系列名称;
    • 确立统一规则,对图表坐标轴数值进行单位转化;

如若大家对提升数据可视化效果这方面,有一些自己的总结,欢迎评论区补充和交流~

声明:以上图表数据纯属虚构。

本文分享自微信公众号 - 木东居士(Data_Engineering),作者:Destiny

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据可视化之旅

    以上这张图片比较普遍现象的数据链路,如果你是厨师,最重要的肯定是做菜环节,也就分析环节。数据可视化只是最后的摆盘环节。

    木东居士
  • 《七天数据可视化之旅》第一天 数据可视化过程

    Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。

    木东居士
  • 《七天数据可视化之旅》第七天:可视化设计实战-数据大屏

    Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。

    木东居士
  • 独家 | AutoVis大数据可视化设计框架:让大数据可视化容易点

    本文从大数据应用出发,讨论数据可视化在大数据时代所面临的一系列挑战,并重点介绍AutoVis针对这些挑战所做尝试及其体系架构、关键技术和功能特点。

    数据派THU
  • 21款酷炫的数据可视化工具,拿走不谢!

    文 | Piotr Kuzniewicz 译 | 高雨滴 校 | 郭瑽 辛辛苦苦分析一堆大数据,竟然没人看!如果你正着手于从数据中洞察出有用信息,那你所需要的...

    CDA数据分析师
  • 掌握了这12点,你才有可能称为一名称职的数据可视化思考者

    怎样才能称得上一名称职的数据可视化思考者?《Data at Work》的作者Jorge Camoes所总结的12点,或许能在新的一年里给大家一些新的思考和启发。

    数据森麟
  • 【干货】21个数据可视化利器

    大数据文摘
  • 盘点:2018年25个最佳数据可视化作品都在这了!

    导读:过去几年,对数据以及数据分析的关注可谓达到了一个新的高度。如今,数据和信息已经成为一种可以带来绝妙视觉观感的工具。曾经简单的图表和散点图,现在已经成了数据...

    华章科技
  • 美如画丨2018年度最佳数据可视化作品

    过去几年,对数据以及数据分析的关注可谓达到了一个新的高度。如今,数据和信息已经成为一种可以带来绝妙视觉观感的工具。曾经简单的图表和散点图,现在已经成了数据艺术中...

    钱塘数据
  • 盘点 | 2018年度最佳数据可视化作品都在这了!

    过去几年,对数据以及数据分析的关注可谓达到了一个新的高度。如今,数据和信息已经成为一种可以带来绝妙视觉观感的工具。曾经简单的图表和散点图,现在已经成了数据艺术中...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券