向经典致敬

数据可视化的鼻祖 William Playfair 在 1786 出版的 The Commercial and Political Atlas《商业与政治图解集》记录了1700-1780 年期间丹麦-挪威王国的进出口贸易额趋势,这是对当时通行表格的重大改进,我们尝试复刻此图以表示对经典的致敬。

设计稿

Demo 链接

问题

解读

设计指引

数据

year
exports
imports
1700
35
70
1710​
59
​81
下载源数据 ( .json 格式)
丹麦-挪威王国.json.zip(0.32 kB)Download
为了重现经典,我们提取原图数据信息,它包含三个字段信息,一组日期数据,一组出口相关的数值,一组进口相关数值。根据图表用法判定当前数据适合用折线图或者面积图来表示。具体可参见面积图的图表用法

给谁看

我们尝试还原一下 William Playfair 当时制作此图的背景,他的目标受众是广大的数据统计人员,当然也包括决策者。在当时,数据都是以统计表格的形式来呈现,而 William Playfair 相信图表比数据表更有表现力。

看什么

当 William Playfair 决定用线图来替代传统表格的时候,他还创造性地在线与线之间填上颜色,也就是现代面积图的雏形。William 相信,带有填色的线图更高效。200 多年后的今天,我们确实能从图上更快的发现当时的贸易趋势以及转折点。为了让现在的用户更好的理解图上的信息,我们加上数据标记,让受众一眼就能明白当年的贸易走势归因。

开始设计

标题

标题是用户读图的开始,也是你想要用户看到观点。我们遵循 William Playfair 的命名“丹麦-挪威王国 1700-1780 年的进出口贸易”,这里包含三个信息点,对象“丹麦-挪威王国”、时间“1700-1780”、事件“进出口贸易”,三个信息组合在一起直白的告诉用户这里能看到啥。

副标题

副标题作为说明性文本,可以从全局建立引导。当我们的受众第一次看到这个图表时,他可能很迷茫什么是“丹麦-挪威王国“。因此,我们补充上副标题“16 世纪 30 年代至 19 世纪初这一段时间是丹麦的“大国时代”,由于这段时间丹麦与挪威是联盟共主关系,并且是由丹麦主导,所以也叫丹麦-挪威王国。”
这段话有很好的承接指引作用,我们建议必要时加上副标题,让受众从一开始就可以打消疑虑,帮助用户“有效”“清晰”的获取信息。

Meta 描述信息

副标题建议不宜过长,如副标题如法承载时,建议将引用信息、名词解释、全局解读等移至左下角用以辅助说明图上的内容。
“副标题”与“Meta 描述信息”,区别在于:

标记

当用户看到图上的异常点时,如果可视化设计者已知道答案,那么不妨通过标记方式写出来,告诉用户这里发生了什么,以及为什么会发生。这些标记紧跟相应内容,不需要用户在图上寻找对应点,避免视线来回扫描。“有效”“清晰”的传达观点,我们在图上花更多时间制作更好的图表是帮助用户节省破译的时间。 在 William Playfair 的原图上,我们增加了一个数据标记点,也就是贸易由逆差转顺差的交叉点,指明原因为“”。 1755 年,丹麦-挪威王国在印度周边建立诸多殖民地与附属国,垄断出口贸易,导致出品总额激增。

颜色通道

200 多年前, William Playfair 创造性地在线与线之间填上颜色,用颜色语义进行表征,红色表示“贸易赤字”,黄色表示“贸易盈余”。这或者是当时财会行业的通用规则(虽然国际上通行规则为“红跌绿涨”,中国通行的是“红涨绿跌”)。面积填色的加入使得图的区块感更强,让用户更好的理解图上的信息。

图例

图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,可用于图表中数据的筛选。G2 提供十二方位的图例位置以及“图例跟随”功能。“图例跟随”使用场景:适合于图例顺序与折线顺序不能匹配时。“图例跟随”能“有效”解决看图例寻找相应数据的问题。在少量折线图时,“图例跟随”尤为好用。

求反馈

该文档对你有帮助吗?如果觉得不错请赏“稻谷”,如果有任何意见建议,欢迎留言探讨