B 端设计|分布类图表的设计和应用

上一篇《B端设计 | 工作中遇到的常用图表的设计和应用》基础的比较类图表设计在上一篇已经说完了,这一篇就针对分布类图表,展开说明了。

B 端设计|分布类图表的设计和应用

01、分布图表中的柱状图形应用

在分布中,有一部分图表是由柱状图进行呈现的,包含直方图、堆叠图、箱型图、K线图,它们用来表示不同的数据分布信息和部分对比的情况。

1.1 直方图

直方图是一个看起来和普通柱状图非常接近的图表类型,是一个用来表示同一个纬度范围中,不同区间频率的图形。

你可以说它是也是柱状图,但并不是所有柱状图都是直方图。

B 端设计|分布类图表的设计和应用

直方图不是一个简单的第一级图表,它是一个二级图表,是对一级数据的进一步转化。比如看上图案例,散点图(下面会说)本身记录了不同的数据的位置,而直方图就是记录在发生在这个纬度内的次数。

直方图咋一看很像柱状图,但实际应用场景往往使用了非常密集的柱体,让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的,那就是在 Lightroom 和 Photoshop 中的通道直方图。

B 端设计|分布类图表的设计和应用

当视觉设计师、摄影师在学习处理位图的时候,就必然要学会直方图的读取,它并不是用来让我们学习如何对比前后数据差异的,而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。

直方图是统计学中的 “频率分布” 的视觉表现形式,需要确保使用的场景符合直方图的定义,以及确保用户能理解图表内容。

1.2 堆叠图

相较于直方图,堆叠图就好理解的多,堆叠图即将每个柱体当成一个坐标轴再进一步进行拆解的图表类型。比如一般堆叠柱状图和百分比堆叠柱状图。

B 端设计|分布类图表的设计和应用
B 端设计|分布类图表的设计和应用

一般堆叠柱状图中,我们拆分了若干更下级的纬度,比如一个统计区域人口数的柱状图,每个柱状代表的人口下级可以再拆分年龄端或者男女的实际比例,并将每个纬度用不同颜色表示。

而百分比柱状堆叠图,则不在意总数的情况,每个柱体作为一个整体,对二级纬度所占百分比进行表示。比如对咖啡类型进行数据可视化呈现中,不同咖啡的成分占比就是百分比就是百分比堆叠的表现形式。

B 端设计|分布类图表的设计和应用

1.3 箱型图

箱型图页脚盒须图,和直方图类似,它也是一个二级图表,即它不是直观反应原始数据,而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料,每个箱型包含下面这些信息元素。

B 端设计|分布类图表的设计和应用

箱型图反应的是一种 “大概” 情况,它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成,下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。

这里的排列主要通过 “数值大小” 来决定,而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高,虽然每个身高包含的人数不同,但 160 就是它的下四分卫,180 是它的上四分卫。

那么160-180身高包含的人数就是箱体本身的区域,上四分卫到上边缘是 180-190 的人数,下四分卫到下边缘是 160-150 的人数。

箱型图可以反应的信息是非常丰富的,它可以非常有效的反应不同数据组的虚实、占比、上下限,可以获得非常多有趣的结论。

1.4 K线图

相信稍微了解过股票还是基金的同学,对K线图那可就一点也不见外了,下影阳线、收盘光头阳、小阳线,开口就是老韭……不对,老股民了。

K线图是箱型图的一个变种,也叫蜡烛图,主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨,阴险代表下跌。

每个类型中,同时还表示当日成交中的最低价和最高价,柱体代表的是开盘价和收盘价。在我国股市,上涨用红色,下跌用绿色,在币市则相反。

B 端设计|分布类图表的设计和应用

K线图实际上动手设计它的情况微乎其微(只用开发好的),我们只要了解它的原理即可。

02、散点图的应用

接下来,就要说说散点图了,散点图也是极其常见的图表类型,尤其对于数据可视化来说也是至关重要。下面,我将散点图拆分成了两个类进行讲解,希望大家可以更好的认识它们。

2.1 一般散点图

一般散点图,就是建立一个一般二维坐标轴后进行 “点” 分布的图表。最基础的散点图,就是由二维坐标和点共通组成。

在散点图中,每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”,我们首先用样本来称呼每个点。

B 端设计|分布类图表的设计和应用

每个样本在散点图中必然包含两种以上的信息,一个是纬度值,一个是数值,这样我们才能确定它在坐标轴中的位置。

当然,针对样本并不是只可以包含两种信息,比如表示班级成员身高体重的散点图,我们可以再引入男女的对比,对散点图进行色彩的区分。再者,还可以添加体脂率,用每个点的大小来表示。

B 端设计|分布类图表的设计和应用

散点图是一个很直观的样本分布图表,但它在概率论中对应的是回归分析,所以往往我们会看到散点图内出现了一个线段,那条线段叫做 “回归线”,他是通过散点分布情况,计算出来的一个均值线段,通过这个均值线段帮助我们进行概率的计算。

回归线包含指数、线性、多项式三种,其实就是对应绘制出来的回归线是曲线、直线、还是波浪线。

B 端设计|分布类图表的设计和应用

2.2 非一般散点图

一般散点图,使用普通二维坐标轴,而非一般的散点图,自然使用的就是 “非一般” 的坐标类型了。在可视化图表中,就有一些常见图表完全就是散点图,只不过样式和坐标体系比较不同。

最常见的,就是地图散点图了。背景不是普通的坐标轴和格线,而是实际的地图,坐标由经纬度体系来记录。图片

再为每个散点添加不同的动画样式,还可以很快制定出符合大屏需求的动态散点图。

B 端设计|分布类图表的设计和应用

对于非一般的散点图来说,背景使用什么图形类型,那么散点就遵循哪种坐标体系,既可以是地图经纬度的,也可以是球场、屏幕、靶子等等。

在这些非一般的散点图中,我们关注的就是纯粹的分布,而脱离数学上的回归方程式。对每个散点中的不同属性表现,也有色彩、大小、图标等样式可以实现。

B 端设计|分布类图表的设计和应用

今天的分布部分先写到这里!之后再继续更新后面的内容~

业界动态

抖音电商有后发优势吗?

2021-6-25 10:22:48

业界动态

公众号KOL投放避坑指南

2021-6-25 10:35:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索