在网站的一张图表上显示三段数据的更好方法

平面设计 数据可视化
2022-02-16 01:57:15

请注意,最旧的答案是在最后一次编辑之前参考我的图表。这是一个很好的答案,请不要因为我的编辑而打折扣。

我想显示我完成了多少学习,以及我整个星期完成了多少页,按天细分,我这样做如下所示: 在此处输入图像描述

有人告诉我他们无法理解这些图表,但我不知道我还能如何显示它们。

我怎样才能更清楚地显示这些?

4个回答

首先,诊断它令人困惑的原因:

  • 您的不同信息正在相互竞争。首先,观众注意到第 1 周比第 2 周更有成效——这是最引人注目的信息。然后他们意识到这不是很有意义,因为第 1 周的天数比第 2 周的多。
  • 然后他们查看个别日子,排序变得混乱。大多数“随着时间的推移”数据图形都有均匀间隔且有序的天数。在这里,您需要先查看键上的几种颜色,然后才能发现日期大多是从上到下,然后令人困惑的是第 2 周似乎不同(星期六、星期日、星期五?为什么这些周从不同的日子开始?)
  • 然后是键和图表之间的大量眼球弹跳,以检查任何特定的一天。

因此,在理想的解决方案中,可能是:

  • 随着时间的推移,轻松直观地跟踪进度,
  • 容易发现富有成效的日子和不那么富有成效的日子
  • 很容易看出大部分工作是在几星期内完成的,而不会因为尚未发生的日子或由于某种原因没有工作的日子而过于扭曲

对于具有大量相当简单数据的小型集的案例,一个非常好的技术是所有相同比例的小图表网格。这有时被称为“小倍数”。每一个都独立工作,您可以轻松浏览整个集合以查看模式和总体趋势。

这是一个非常简单的快速示例(需要标题),您可以在其中快速查看:

  • 他们在项目的最后两周提高了工作效率,
  • 他们在大多数星期的开始都很好,然后在周五努力赶上之前失去了注意力
  • 他们在第 4 周的大部分时间都离开了,但在周末努力赶上

在此处输入图像描述

我更喜欢填充区域而不是线条,这样您就可以轻松、直观地掌握每周完成的音量。

列也可以 - 稍微更清晰,更容易查找特定日期,但对体积和方向的直观感觉略差,乍一看看起来更忙。

在此处输入图像描述

好吧,我用 Illustrator 尝试了一下,我是手工完成的,不知道如何自动化这个过程。我只是每天和每周查看页面,然后得出了这张图表:

每周每天的页数

基本上是一个迷你图表,显示一周中每一天的进度,覆盖在指示一周总页数的条形顶部。

我开始以类似的方式可视化小时数,使用一个完整的圆圈进行 1 小时的学习,使用半圆圈进行半小时的学习。

可能将每天的学习时间放在页面栏的上方,保持相同的颜色编码。你必须玩它,看看什么看起来最好。每个条形顶部还有放置小数字的空间。

我将把我的答案分成几个部分。

一、阅读器类型

有 3 种类型的人使用图表:

a)可以阅读任何图表的人。

b)那些几乎看不懂图表的人。

c)那些正在寻找非常具体的信息的人。

我不会关心第一种。任何丑陋的图表都可以。

对于类型b,您需要大量的努力、交互式图表、显示不同方法的几个图表(按天、按周、按所有时间、按天、按周)移动图表、卡通...

但大多数情况下的方法应该是认为用户需要查看非常具体的数据。

我假设您知道您的读者正在寻找什么样的数据

在您的图表中,最重要的是一周内的总学习时间,以及您在不同周内的表现。如果这是您需要的,那么这种类型的图表就可以了。

其余数据在您的图表中并不重要。

二、视觉信息

好的,所以我假设您选择了正确的图表类型和方法,并且因为这是图形设计网站,所以我将分析您的图表。

图像分析

显示的数据

1)地球上没有人用那么多小数点来读取小时数。“我学了4.1582小时……!!” 将小数减少到只有 1。

通过在您的 Excel 表中删除它们来消除所有没有意义的 0。

2)如果在条形图中,天数上升(星期一在底部,星期日在顶部)在彩色日表上阅读时,读者的大脑必须在相互矛盾的维度之间跳跃:从左到右在现实中是从下到上. 将您的彩色日表放在与条形相同的垂直尺寸中。

3)不要重复相同的信息。此标题与图表标题相同。

4)不要重复周,周,周,周,周......

风格

3-4)使这些标题更易于阅读,使用更好的字体大小。图表的目的是让所有信息一目了然。

5)图表的整体比例和间距(列之间)给人一种数据太多的感觉。让它更愉快。

6)您可以提供一些视觉辅助工具,例如连接星期一和星期一等的细线。

7)使整体视觉风格更令人愉悦。信息可以相同,但如果以更有趣的方式呈现,观察者将尝试深入查看信息。

其他提示:

我找不到将总小时数数据放在列顶部的方法。大概有用吧。

我没有找到增加天数旁边颜色方块大小的方法。那会更容易阅读。

我认为最好在 Stacked Horizantal 栏中显示,例如使用livegap Charts在此处输入图像描述 进行编辑