系统运维、技术分享、架构、方案

it运维技术文章分享

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

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

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

0x00 前言

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

  • 一是非数据层面。
    • 不受数据影响可视化效果的情况包括:比如说整个页面的布局;

      图表的辅助元素,如图表背景、网格线、外边框;

      交互方式的设计等。

      →不受数据影响的情况,是我们在可视化设计阶段就可以把控的,比如说页面的整体布局、图表的设计(包含网格线、背景、颜色的选取等)、交互的设计等。

  • 二是数据层面。
    • 受数据影响可视化效果的情况一般包括:数据分布不均匀,存在极端值;

      某一维度下的属性值过多,信息繁杂不够聚焦;

      不同层级的,数据量级差异较大;

      数据条目较多等。

      →以上这些情况的存在,通过可视化映射之后,反映到图表上就体现为,比如说某个柱形条的长度过长,饼图扇区的个数过多等,从而使可视化的最终效果不如人意。

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

0x01 非数据层面

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

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

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

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

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

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

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

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

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

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

常见的交互方式有:

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

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

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

2)悬停或点击

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

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

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

3)图表联动

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

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

维度1 维度2 度量值
AL low a
AL mid b
AL high c
KS low d
KS mid e
KS High f

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

0x02 数据层面

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

  • 比例型分类数据,分类项建议保持在5~7个

    比例型分类数据的可视化方式有:饼图、圆环图、百分比堆叠柱状图、百分比堆叠面积图等,其目的是为了展示个体分类项和总体之间的比例关系。

    当需要按照某一个维度进行分组时,若该维度的属性值数目较多,那么就需要对属性值进行重新的归类和分组,通常的做法是,保留占比或实际值TOP5的分类项,剩余分类归为【其他】。

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

  • 柱状图数据条过多时,保留头部和尾部

    当需要用柱状图来对数据进行排行时,若数据条目较多,此时建议保留头部和尾部,中间的可以以省略号带过或者折叠起来,放大时再展开。头部和尾部的具体数目,可以依据具体需要来定,比如前5名和后5名、前10名和后3名等。

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

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

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

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

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

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

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

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

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

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开始,但是要慎用;
    • 系列名称较长时,需用条形图,横向摆放系列名称;
    • 确立统一规则,对图表坐标轴数值进行单位转化;

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

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

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注