只会用Excel做排名表?你该看看这个硬核榜单可视化教学

一期一会,表哥又带着新鲜的干货来了!
今年双11,表哥和往年一样,最早推出了双11数据可视化。今年,表哥做这组图更费脑了,因为今年的数据90%都是排名数据。对,没有错,都是排名,而且都是没有数值的排名数据,只有名称和排名。
大家肯定会说就是一个排名,那做起来不是更简单。错,越是简单的数据其实做起来越难。难就难在表现形式上。因为按照一般来说,在同一篇文章中,我们会尽量保证每张数据图的可视化表现形式不一样。如果都是同样的形式,那阅读体验就会比较差,读者会感觉枯燥。
为了优化大家的阅读体验,表哥就要基于这些形式上非常相似的排名数据,在可视化的表现形式上做花样,这就让人非常头秃。
好在基于日常的积累,最后稿件中的5张排名图表哥也做了不一样的可视化表现。

基于双11做的这些排名榜单,表哥这篇的分享内容也就有了:有什么方法可以把最简单的排名做得多样又好看?

没有数值的排名数据,如何做得好看?

一 基于数字本身去做变化

最简单的方法,我们可以从排名的数字本身去做优化,比如将排名数字1、2、3....去做内容的填充丰富,改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

还可以基于数字本身所处的环境去做优化,比如在其底部加入填充形状垫底,让数字排名更突显出来(如正方形、矩形等等)。

通过这两种形式,可以让单调的排名数字有了更多的细节,内容更丰富,展示更好看。

↑ 基于数字本身去做优化的案例

二 基于整体,通过形状元素去做变化

在数字本身变化的基础上我们还可以加入对文字的变化,比如在文字的底部垫上形状(如圆圈、条形图等等)。这样通过对数字和文字本身的设计强调,就从整体上得到了优化。

↑在文字底部垫上圆圈,在整体上突出设计感

虽然排名没有具体的数值,无法生成条形图,但是依旧可以通过等比缩放的矩形来强调文字,比如倒立金字塔和横向柱状图。
↑通过矩形形成倒立金字塔和条形图,在整体来突出设计感
三  基于内容主题传达,来做变化
1.借助icon元素,来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市,那么就可以借助icon来丰富可视化。

2.借助定制插画,来做变化

排名的数据如果涉及的是品类中的细分物品,比如生活中常见到的吃的、穿的,用的,那么就可以使用定制插画来丰富排名可视化。

3.借助头像、品牌LOGO、产品实景图,来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时,我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。

4.借助地图,来做变化

如果排名数据讲的是省份之间的排名对比,那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图,一定要注意使用中国标准的地图,当然基于设计的风格,你也可以使用简约风格,去掉地图元素,只保留可视化的部分。

四 借助背景设计元素,去做变化
排名数据也可以借助视觉背景模板来做变化,比如在涉及某个主题排名榜单时(如淘榜单、星数榜单等)就可以通过背景视觉元素来突出排名。
其实这种背景视觉模板,对可视化的要求并不高,你只需将排名通过单一表格的形式展示出来,但需要一个很强的视觉背景版来做衬托,这样,做好一个模板,其余的榜单都可以进行复制使用了。
如果排名数据包含数值,如何做得好看?
一 基础可视化排名数据图
如果数值单一,那么可以通过常规的可视化表现形式进行展示(如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等)。
1.横向柱状图展示
结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观,特别适合单一排名数据之间的对比展示。
2.饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比,那么便可使用饼图或圆圈大小的形式对排名数据进行展示。

3.直角三角形柱状图(柱状图变种)展示

通常我们会使用常规的竖向柱状图来表现数值的大小,但其实还可以对其进行一点点变形,比如将柱子的右侧直角边去掉,那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多,我们还可以将排名和文字置于柱子的上方进行展示,一方面节省了空间,另一方面在视觉上也起到了美观度。

4.180°变种柱状图展示

柱状图的变种,表哥在《如何做出比别人好看的柱状图?》系列文章中有讲到,大家对如何实现这种形式感兴趣的可以看下表哥之前的文章,同样的排名数据也可以基于180°的变种柱状图来进行展示。

二 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外,如果排名数据所涉及的是一些主题元素(如生活中吃的、穿的、用的等等)。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。

三 使用桑基图来体现排名

当排名的数据中,还多了一列数据涉及到分类, 那么就可以使用桑基图来进行可视化的展示(如国家属于什么地区、公司属于什么行业、城市属于什么省份等等)。对如何实现桑基图感兴趣的可以看看表哥之前发的桑基图教程

四 排名连线图展示

如果我们的排名数据中,还涉及到了年份的排名变化,比如省份之前的年度排名,那么就可以使用排名连线图,通过线段的上下连线走向来看省份之间排名的上升或下降,同时这种数据还非常的适合做成动态柱状、折线图(表哥在后面会讲到)。


五 地图展示

和第一节讲到的地图一样,如果排名数据中涉及到了地理位置数据,那么可以结合地图进行排名数据的展示。通常情况下,完成地图可视化后,可将具体的排名信息以表格的形式罗列在地图的空白区域内,这样结合地图和具体的详细排名数据,就会更加的直观和丰富。

六 组合图展示

如果我们的排名数据维度非常的丰富,数据所包含的信息点在3个以上,那么就可以通过将多种可视化的表现来进行结合,通过组合式的可视化来进行展示。

七  动态柱状图、动态折线图展示排名

1.动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化,那么可以通过柱子从上到下一个一个地出现来进行展示(如下图左),如果涉及到年份的变化, 那么就可以通过柱子随着年份的上升或下降来进行动态的展示(如下图右)。

动态柱状图的实现方法也很多,表哥在想做出漂亮的图表,这12个网站不能错过!中有讲过,可以通过flourish网站(https://flourish.studio/)来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图,也可以使用B站UP主见齐的开源可视化项目(http://r6d.cn/JdYy)进行实现。

2.动态折线图
同样的我们还可以通过动态折线图的形式进行展示,这种表现形式主要看的是排名的趋势变化,同样的,借助flourish网站(https://flourish.studio/)就可以实现这种动态折线图的展示效果。
如果大家对动态柱状图、折线图感兴趣,可以留言告诉表哥,如果反馈留言很多,表哥会考虑做一期关于动态柱状、折线图的教程。
八  3D建模渲染可视化展示

当然,我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示,比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等,去年表哥也在DT财经的抖音账号DT编辑部,做过一段时间3D可视化表现形式的尝试。

1.3D柱状图展示

将基础的柱状图,通过3D立体柱状图的形式进行展示,排名的结果并不是啪的一下直接公布,而是随着镜头慢慢地公开,对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉!


2.3D内容场景展示

如果我们的数据,所要传达的信息非常富有主题场景感,那么就可以通过3D场景渲染的形式进行展示,比如下图GIF中,在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生,置于一个教室中,再通过镜头的移动位移来进行展示。

这种展示形式,实际投入成本还是很大的,从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式,要不然就会出现”虽然视频本身展示酷炫,但是由于选题不好,最终播放量不高“的尴尬情况。

做好排名数据的一些小事项

一 时间紧急时,一切从简

比如说,当我们在时间非常紧急的时候,排名数据如果是和地理数据相关的,那么我们会尽量避免使用地图元素来丰富可视化,因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示,虽然会丢失掉一些美观度,但是正确性会有更高的保障。

二 强调重点数据

基于文章内容,需要在图中重点强调某些数据时,可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调。
总结

排名数据看似简单,但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时,表哥的这篇文章能够对你有所帮助!
以上就是本周表哥分享的内容,如果大家还想要更多干货,就让热情来得更猛烈些吧!欢迎【转发】、【点赞】、【在看】和【留言】,你们的捧场,就是表哥继续创作的动力。阅读量越高,表哥笔速就越快!

(0)

相关推荐

  • 20个炫酷的数据可视化大屏

    导读:今天给大家推荐一篇关于数据可视化大屏的文章,内容由本文作者 小F 整理,希望大家喜欢. 随着大数据的发展,可视化大屏在各行各业得到越来越广泛的应用. 可视化大屏不再只是电影里奇幻的画面,而是被实 ...

  • 150年前,他对拿破仑做数据可视化

    拿破仑东征 十九世纪初,整个欧洲大陆几乎都在拿破仑的控制之下--除了隔着天然屏障的英国.于是,拿破仑下令对英国实施经济制裁.然而,俄国皇三代亚历山大却不买这个账,因此跟科西嘉暴发户结下了梁子. 经过数 ...

  • 数据可视化分享

    当当当!今天班班来和大家唠唠"数据可视化". 本次分享会讲第1和第2个步骤,大量可视化展示来袭! 大家回忆一下~在工作中,看到过这样超级酷炫的图表吗? 会不会对比自己的图表--一言 ...

  • 这个Excel查找不同的技巧,过于硬核!

    经常看到一类问题,就是关键词一样,如何找到后面对应信息不同的数据! 比如我们今天的案例,商品名称一样,但是对应的单价有的却不同,我们就是要把这些找出来了 比如下面的数据,其中有部分商品有多个单价,我们 ...

  • 办公必备的20个Excel应用技巧解读,绝对的硬核干货

    在办公中,离不开的是技巧,使用Excel也是一样,所以我们对一些常规的Excel技巧必须予以掌握! 一.设置工作表标签颜色. 目的:根据工作需要,对工作表标签添加不同的颜色. 方法: 在工作表名称处右 ...

  • 耗时6年,做一款“画面落伍”的硬核射击,拳头是怎么想的

    首次亮相的<Valorant>,的确没有给人太多惊喜.文/安德鲁拳头游戏(Riot Games)的FPS新作<Valorant>最近正式公布了.去年的十周年庆典上,这款代号为& ...

  • 只需七步,用Excel做一个抽奖小程序!

    话不多说,直接开始! 第一步:先把要设置的奖品打出来,如图所示,奖名称可别打错了哦! 第二步:全选"数据",选择"插入",选择"饼图",生成 ...

  • 只需七步, 用Excel做一个抽奖小程序!

    话不多说,直接开始! 第一步:先把要设置的奖品打出来,如图所示,奖名称可别打错了哦! 点击加载图片 第二步:全选"数据",选择"插入",选择"饼图&q ...

  • 只会用excel制作表格?它的隐藏功能可以get起来啦~

    前几天推送了个甜萌小包 (点击图片可直接查看教程) 不少织友已经开工啦! 还有织友苦于想要别的花样 但却不知道怎么自己画出图解 今天就来跟大家讲讲解决方法~ 其实最简单易行的方式 就是画好格子然后填色 ...

  • 我只想回到花果山做一只单纯的猴子

    本文8800余字,阅读约需15分钟 一 在五行山下被压了五百年后,我明白了许多事.所以,当我第一眼见到唐僧时,就知道,他是如来那厮派出的卧底.五百年前,如来就已经在西方混不下去了,被称为一个幽灵.这个 ...

  • 五五献礼:抱着一生只做一只股的心态做交易!

    一.会成功的人骨子里透着沉稳的气息       我见过很多企业管理.学者.炒房等很成功的人士,很不幸他们做股票失败了.是他们没能力吗?肯定不是.因为他们资产都很大,有的是大型集团的高管,有的自己企业资 ...

  • 新来的同事,用Excel做了一个自动筛选小程序,瞬间俘获老板的心!

    每天一点小技能 职场打怪不得怂 编按:众多Excel技巧中,宏常常是被忽略的存在,但是只要灵活的应用它,只需要轻轻一个点击,就能有意想不到的效果.今天,小E给大家带来的就是用Excel函数和宏制作自动 ...