|
今年双11，表哥和往年一样，最早推出了双11数据可视化。今年，表哥做这组图更费脑了，因为今年的数据90%都是排名数据。对，没有错，都是排名，而且都是没有数值的排名数据，只有名称和排名。大家肯定会说就是一个排名，那做起来不是更简单。错，越是简单的数据其实做起来越难。难就难在表现形式上。因为按照一般来说，在同一篇文章中，我们会尽量保证每张数据图的可视化表现形式不一样。如果都是同样的形式，那阅读体验就会比较差，读者会感觉枯燥。为了优化大家的阅读体验，表哥就要基于这些形式上非常相似的排名数据，在可视化的表现形式上做花样，这就让人非常头秃。好在基于日常的积累，最后稿件中的5张排名图表哥也做了不一样的可视化表现。 
基于双11做的这些排名榜单，表哥这篇的分享内容也就有了：有什么方法可以把最简单的排名做得多样又好看？ 
一 基于数字本身去做变化 最简单的方法，我们可以从排名的数字本身去做优化，比如将排名数字1、2、3....去做内容的填充丰富，改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...
还可以基于数字本身所处的环境去做优化，比如在其底部加入填充形状垫底，让数字排名更突显出来（如正方形、矩形等等）。 
通过这两种形式，可以让单调的排名数字有了更多的细节，内容更丰富，展示更好看。
 ↑ 基于数字本身去做优化的案例
二 基于整体，通过形状元素去做变化 在数字本身变化的基础上我们还可以加入对文字的变化，比如在文字的底部垫上形状（如圆圈、条形图等等）。这样通过对数字和文字本身的设计强调，就从整体上得到了优化。↑在文字底部垫上圆圈，在整体上突出设计感 虽然排名没有具体的数值，无法生成条形图，但是依旧可以通过等比缩放的矩形来强调文字，比如倒立金字塔和横向柱状图。
↑通过矩形形成倒立金字塔和条形图，在整体来突出设计感 如果排名数据内容所传达的主题是品类、物品、或者城市，那么就可以借助icon来丰富可视化。 2.借助定制插画，来做变化 排名的数据如果涉及的是品类中的细分物品，比如生活中常见到的吃的、穿的，用的，那么就可以使用定制插画来丰富排名可视化。 
3.借助头像、品牌LOGO、产品实景图，来做变化 当我们的排名数据中涉及到了人物、品牌、产品之间的排名时，我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。 
如果排名数据讲的是省份之间的排名对比，那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图，一定要注意使用中国标准的地图，当然基于设计的风格，你也可以使用简约风格，去掉地图元素，只保留可视化的部分。 排名数据也可以借助视觉背景模板来做变化，比如在涉及某个主题排名榜单时（如淘榜单、星数榜单等）就可以通过背景视觉元素来突出排名。其实这种背景视觉模板，对可视化的要求并不高，你只需将排名通过单一表格的形式展示出来，但需要一个很强的视觉背景版来做衬托，这样，做好一个模板，其余的榜单都可以进行复制使用了。 
如果数值单一，那么可以通过常规的可视化表现形式进行展示（如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等）。结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观，特别适合单一排名数据之间的对比展示。
如果排名数据中数值所传达的是占比，那么便可使用饼图或圆圈大小的形式对排名数据进行展示。 3.直角三角形柱状图（柱状图变种）展示 通常我们会使用常规的竖向柱状图来表现数值的大小，但其实还可以对其进行一点点变形，比如将柱子的右侧直角边去掉，那么就变身成为了直角三角形柱状图。 这时如果排名的文字比较多，我们还可以将排名和文字置于柱子的上方进行展示，一方面节省了空间，另一方面在视觉上也起到了美观度。 柱状图的变种，表哥在《如何做出比别人好看的柱状图？》系列文章中有讲到，大家对如何实现这种形式感兴趣的可以看下表哥之前的文章，同样的排名数据也可以基于180°的变种柱状图来进行展示。 二 将主题元素和基础可视化排名图进行结合 除了基础的可视化展示和排名数据结合外，如果排名数据所涉及的是一些主题元素（如生活中吃的、穿的、用的等等）。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。
三 使用桑基图来体现排名
当排名的数据中，还多了一列数据涉及到分类， 那么就可以使用桑基图来进行可视化的展示（如国家属于什么地区、公司属于什么行业、城市属于什么省份等等）。对如何实现桑基图感兴趣的可以看看表哥之前发的桑基图教程。 四 排名连线图展示 如果我们的排名数据中，还涉及到了年份的排名变化，比如省份之前的年度排名，那么就可以使用排名连线图，通过线段的上下连线走向来看省份之间排名的上升或下降，同时这种数据还非常的适合做成动态柱状、折线图（表哥在后面会讲到）。
五 地图展示 和第一节讲到的地图一样，如果排名数据中涉及到了地理位置数据，那么可以结合地图进行排名数据的展示。通常情况下，完成地图可视化后，可将具体的排名信息以表格的形式罗列在地图的空白区域内，这样结合地图和具体的详细排名数据，就会更加的直观和丰富。
六 组合图展示 如果我们的排名数据维度非常的丰富，数据所包含的信息点在3个以上，那么就可以通过将多种可视化的表现来进行结合，通过组合式的可视化来进行展示。
七 动态柱状图、动态折线图展示排名 排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化，那么可以通过柱子从上到下一个一个地出现来进行展示（如下图左),如果涉及到年份的变化， 那么就可以通过柱子随着年份的上升或下降来进行动态的展示（如下图右）。
动态柱状图的实现方法也很多，表哥在想做出漂亮的图表，这12个网站不能错过！中有讲过，可以通过flourish网站（https://udio/）来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图，也可以使用B站UP主见齐的开源可视化项目（http:///JdYy）进行实现。 同样的我们还可以通过动态折线图的形式进行展示，这种表现形式主要看的是排名的趋势变化，同样的，借助flourish网站（https://udio/）就可以实现这种动态折线图的展示效果。
如果大家对动态柱状图、折线图感兴趣，可以留言告诉表哥，如果反馈留言很多，表哥会考虑做一期关于动态柱状、折线图的教程。
当然，我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示，比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等，去年表哥也在DT财经的抖音账号DT编辑部，做过一段时间3D可视化表现形式的尝试。 将基础的柱状图，通过3D立体柱状图的形式进行展示，排名的结果并不是啪的一下直接公布，而是随着镜头慢慢地公开，对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉！
2.3D内容场景展示 如果我们的数据，所要传达的信息非常富有主题场景感，那么就可以通过3D场景渲染的形式进行展示，比如下图GIF中，在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生，置于一个教室中，再通过镜头的移动位移来进行展示。 这种展示形式，实际投入成本还是很大的，从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式，要不然就会出现”虽然视频本身展示酷炫，但是由于选题不好，最终播放量不高“的尴尬情况。
一 时间紧急时，一切从简 比如说，当我们在时间非常紧急的时候，排名数据如果是和地理数据相关的，那么我们会尽量避免使用地图元素来丰富可视化，因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示，虽然会丢失掉一些美观度，但是正确性会有更高的保障。
二 强调重点数据 基于文章内容，需要在图中重点强调某些数据时，可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调。
排名数据看似简单，但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时，表哥的这篇文章能够对你有所帮助！以上就是本周表哥分享的内容，如果大家还想要更多干货，就让热情来得更猛烈些吧！欢迎【转发】、【点赞】、【在看】和【留言】，你们的捧场，就是表哥继续创作的动力。阅读量越高，表哥笔速就越快！
|
