如何将很长难以阅读的表格数据,做的好看!
![](https://img.zcool.cn/community/0159075ff28dde11013fdcc7c68e4c.jpg?x-oss-process=image/resize,m_fill,w_160,h_160,limit_0/auto-orient,1/sharpen,100/quality,q_100/format,webp)
![](https://img.zcool.cn/community/0159075ff28dde11013fdcc7c68e4c.jpg?x-oss-process=image/resize,m_fill,w_160,h_160,limit_0/auto-orient,1/sharpen,100/quality,q_100/format,webp)
本篇文章将工作中经常用到的17种组合数据表现形式做了总结和汇总,希望能够帮助到大家!
好久不见,这一期想讲讲组合数据
什么是组合数据?
这是给那些数据维度丰富、不能用单个图表来呈现的数据的统称。常见的组合数据用表格来表现,横轴和纵轴分别代表不同的数据趋势。
组合数据是我们经常会遇到的一种形式,通常在调研数据、地理数据、统计数据等中看到各种组合数据的身影,比如DT财经制作的《全国各省各个时间段的确诊人数对比》、《不同城市各个区域的房价对比》、《不同明星历年参演电影评分对比》等等。
组合数据通常有两个共同的特点:
一是重复,重复相同的可视化表现形式;
二是数据维度丰富,通常横纵向数据维度在3个以上;
那当我们遇到组合数据时,应该如何做得直观又好看呢?
一做组合数据时你一下子想不到的17种表现形式
1.柱状排列组合图
柱状排列组合图是经常使用的一种组合数据表现形式,通过柱子的高低就可以很直观地看到各个数据维度之间的差异对比。通常数据维度和对比种类越多,柱子的数量和所呈现的高低对比变化也会更加地明显。(💡当横向数据类别控制在5个以内的时候,选择这种表现形式,会在排版布局上更美观。)
实用指数:☆☆☆☆☆5 难度指数:☆☆☆3 创新指数:☆☆☆☆ 4
2.条形排列组合图
条形排列组合图和柱状排列组合图类似, 只是柱子的方向发生了变化,通过柱子的长短就可以很直观地看到各个数据维度之前的差异对比。通常纵向数据越多,所呈现的差异对比就会更加地明显。(💡建议横向数据类别尽量控制在4-6个,过多的类别可能会造成柱子的长短差异变化过大;同时纵向种类的文字字数也会影响柱子的长度,建议缩减文字。)
实用指数:☆☆☆☆☆ 5 难度指数:☆☆☆ 3 创新指数:☆☆☆☆4
3.填充颜色组合图
如果我们的数据,并不想过多地去展示具体的数值,而是希望整张图可以很直观地看到分布变化规律时,就可以采用填充渐变色的方法。基于数值大小映射颜色深浅,对形状(矩形、圆形等)进行填充颜色。通过形状的颜色深浅变化,就可以很直观地看到数据的规律。(💡填充颜色组合图更适合数值差异变化明显的数据,如果数值差异不明显,建议更改可视化呈现形式。)
实用指数:☆☆☆☆4 难度指数:☆☆☆☆4 创新指数:☆☆☆☆ 4
4.方块大小组合图
如果数据中所包含的是品类中的细分数据,比如所涉及的细分类别非常多,那么就可以使用方块大小组合图的形式来进行展示。方块大小组合图常应用于各个类别的品牌分布,比如下图中的《各种美容仪的品牌对比》,《各种户外类型的品牌分布对比》等等。(💡1.因为方块的数量和大小不同,所以建议只标注重点展示的数据信息;2.这种表现形式,可以通过Excel图表类型中的【树状图】来快速实现。)
实用指数:☆☆☆3 难度指数:☆☆ 2 创新指数:☆☆☆ 3
5.榜单指数排列组合图
当我们的数据所表现的是一个榜单,并且榜单排名中的各个类别的可视化是基于一套指标所生成的,我们就可以基于指标来制定可视化表现形式,然后再基于表现形式,进行榜单的排列。比如DT财经在地铁一公里系列中基于组合雷达图所做的《地铁站辐射圈综合实力排行榜单》,以及在中国青年理想城报告中基于组合条形图所做的《百城青和力排行榜一览》(💡建议先基于一个城市定好可视化形式,然后再通过D3.JS或代码进行批量的生成。)
实用指数:☆☆2 难度指数:☆☆☆☆☆5 创新指数:☆☆☆☆☆5
6.折线组合图
通过折线的波动走势来看数据的波动变化,通常应用在时间趋势的变化。在新冠疫情期间,DT财经就基于《全国疫情的每日新增确诊人数变化》的数据进行了折线组合图的可视化呈现。通过折线组合表现形式,可以很容易得看出数据的波动变化。(💡建议压缩每一个折线的纵向空间,这样可以防止图片过长。)
实用指数:☆☆☆3 难度指数:☆☆☆☆ 4 创新指数:☆☆☆☆ 4
7.时间事件组合图
如果数据中所包含的信息是时间事件,那么就可以使用时间事件组合图的形式来进行展示。通过时间节点将事件进行纵向的串联组合,同时也可将不同类型的事件通过颜色、位置来进行区分。(💡时间事件图需从整体上考虑排版布局,文字大小和段落折行应在实时调整的过程中定下来,以防排版完成后发现图片过长,造成返工。)
实用指数:☆☆☆3 难度指数:☆☆☆☆☆5 创新指数:☆☆☆☆4
8.地图组合图
如果所涉及的是地理/地图方向的组合数据,那么就可以将各个城市的可视化组合在一起,做成一张完整的组合地图。(💡1.通常建议城市的数量是偶数,这样在排版布局上就会更整齐更好看;2.组合地图建议不要做成gif,比如城市一个个地闪现。)
实用指数:☆☆☆☆4 难度指数:☆☆☆☆4 创新指数:☆☆☆ 3
9.地图变形组合图
当地图数据涉及城市下钻数据时(比如具体到区),因为各个区的大小不一样,数据无法完整地呈现在地图上。这时便可使用变形地图的形式进行展示,将相对应的区域在相对应的位置进行展现。这样就重点展示了数据,同时也保留了相对位置性。(💡在做地图变形组合图时,应考虑可视化面积的大小,以防图表区域放不下,造成可视化的返工。)
实用指数:☆☆☆ 3 难度指数:☆☆☆☆☆ 5 创新指数:☆☆☆☆☆ 5
10.日历颜色填充组合图
如果想看某数据在各个时间点的情况变化(比如空气质量、日期活动安排、电影排期)等等,那么就可以使用日历颜色填充的形式来进行展示。通过在相对应的时间或者日期进行填充,便可很直观地看到数据在时间上的分布。(💡日历组合图,应注意方块的大小,可提前计算好每个方块的大小然后再进行排版。)
实用指数:☆☆ 2 难度指数:☆☆☆ 3 创新指数:☆☆☆ 3
11.词云排列组合图
如果数据所包含的是不同品类的词云数据,那么便可使用组合词云的形式进行展示。组合词云的重点是比较各品类的词频差异,所以可在配色、形状上基于主题来进行区分。
实用指数:☆☆☆☆☆5 难度指数:☆☆2 创新指数:☆☆ 2
12.饼图组合图
如果数据中所涉及的是不同类别的数据占比,那么就可使用饼图组合图的形式进行展示。(💡如果所表现的类别是具象的事物,则可加入icon来进行装饰。)
实用指数:☆☆☆☆☆ 5 难度指数:☆☆ 2 创新指数:☆☆ 2
13.商品组合图
如果组合数据是关于商品信息的,那么便可将商品实景图置于画面中来丰富画面。这样一方面丰富了画面,另一方面图片信息要比文字信息更能直观快速地传达到用户。(💡商品实景图的比例缩放应尽量保持一致,图片分辨率应适中。)
实用指数: ☆☆☆3 难度指数:☆☆☆☆4 创新指数:☆☆ 2
14.插画组合图
当图片比较难表现品类时,也可借助手绘风格来进行组合展示。插画组合图会比实景商品图显得更干净、统一,同时所画的插画还可进行复用。
实用指数:☆☆ 2 难度指数:☆☆☆☆☆ 5 创新指数:☆☆☆☆ 4
15.表格组合图
当数据内容大部分为文字信息时,那么就可以使用表格罗列的组合形式进行展示。(💡简单的表格罗列会比较普通,也可加入一些细节元素,比如图片的辅助、表头的设计、文字对齐方式、表格网格线的设计等等。)
实用指数:☆☆☆☆☆5 难度指数: ☆☆☆☆ 4 创新指数:☆☆ 2
16.分类混合组合图
如果数据中所包含的是各个种类下的细分数据,那么可以通过分类混合组合图的形式来进行展示。通常分类混合组合图中会出现多种可视化的表现形式,但从整体上看又是统一的。(💡分类混合组合图因为数据种类比较多,可根据不同的种类选择相对应的可视化表现形式来进行区分,通过不同可视化形式的节奏变化来丰富图表。)
实用指数:☆☆☆3 难度指数:☆☆☆☆☆5 创新指数:☆☆☆ 3
17.散点组合图
如果数据中包含了各个品类的数值,并且想强调各个品类基于数值在分布上的一个差异变化,那么就可以使用散点组合图的形式进行展示。(💡1. 散点组合图,应控制横向坐标的品类数量,控制在6个以内最好,品类与品类之前可通过圆圈的颜色来进行区分;2. 同时还可将想重点突出的数据,通过图片或者文字来重点展示出来。)
实用指数:☆☆☆3 难度指数:☆☆☆3 创新指数: ☆☆☆ 3
二 做组合数据的一些小窍门
1.先搭建整体,再局部优化
当我们在做组合数据时,因为数据维度众多,一定要先从整体上去分析考虑(排版布局、间距等),然后再进行局部细节的可视化。通过草图画出图表的排版布局大框架,框架填充完成后再基于细分区域的面积进行设计。如果反其道而行,不考虑整体版面,很容易造成排列拥挤、放不下等情况,甚至造成返工,影响工作效率。
2.做减法
学会对画面内容做减法。如果都标记数值,会造成画面的凌乱,所以可选择标记重点要突出的数据,或通过图例传达,而不标注具体数据。同时因为在手机端阅读,应避免图片过长造成滑动时的阅读断续,最好将图片长度控制在一屏以内。
三 总结
以上就是组合数据的全部内容了。当然组合数据的表现形式还有很多,这里精选了其中最常使用到17种形式,并基于实用、难度、创新这三个角度进行了打分。希望这17种表现形式,能对你有所启发和帮助。
如果大家觉得这篇文章让你有收获,还想要更多干货
欢迎【点赞】【评论】【分享和转发】!
我们下期见!
![](https://static.zcool.cn/git_z/z/images/new/page-loading.gif)