Toggle navigation
直到世界的尽头
主页
搜索
数据可视化流程和规范
我的职场
2022-05-10 15:18:40.0
# 目标 好懂、好看、好做、好用 好懂：简单使用、清晰准确表达数据 好看：配色得体、风格统一 好做：方便制作，容易套用 好用：开口说话，表达观点 不管我们用哪种类型的图表，都需要牢记以下三条原则： 明确目标受众：他们对该问题有何了解？ 确定要传递的信息：数据说明了什么？需要传达多个信息吗？ 确定信息的特点：是要进行项目比较、显示时间趋势，还是分析数据关系？ ## 1、确定表达指标主题 同一组数据用不同的角度看，有不同的主题，比如下面这组数据：  如果你的注意力放在 1 月- 5 月的销售发展趋势以及售价是怎么样随时间而变化的。那你的图表主题应该是「销售额自 1 月份开始稳步上升」 或者你可能想把重点集中在某一点上，比如说集中在 5 月份的数据上，你可能会记录产品 A，B 和 C 的销售量排列名次。那样的话，图表主题应该是「5 月份，产品A的销售额大幅超过B和C」 从另一个角度看同样是5月份的数据，你还可能会将侧重点放在每个产品占销售额的百分比上。那你的图表主题应该是「5月份，产品 A 占公司产品总销售额的比例位居首位」。 选择合适图表的关键，最初也是最重要的，就是确定想要表达的具体主题。而选择正确的图表形式，完全取决于主题是否清晰明确。图表仅仅是表明数据的组织形式，它最终是要强调一个主题，这主题其实就可以作为图表的标题。 ## 2、确定对比关系  给大家简单举几个例子： “预计在今后 10 年多的时间里，销售额将增长 ”对应的关系为时间趋势 “雇员的最高工资额在 30000 到 35000 美元之间 ”对应的关系为频率分布 “汽油并不是牌子越响价格越高其性能就越好”对应的关系为相关性 “9 月份里，6 个区域的营业额大致相同”对应的关系为排名对比 “销售部经理在他的领域内只花费了他 15% 的时间”对应的关系为占比 “奖金的多少与工龄长短无关“对应的关系为相关性 “去年，人员更替主要发生在 30-35 岁的年龄段”对应的关系为频率分布 “C 区域的产品生产力排名垫底”对应的关系为排名对比 “我们公司的平均收入份额正在下降”对应的关系为时间趋势 “制造业占有资金的最大份额”对应的关系为占比 ## 3、选择图表形式 现在我们准备好了进入最后一个步骤：从相对关系到最适合你的信息的图表形式 数据可视化的图表各式各样、种类繁多，但只要掌握其中的一小部分就能满足绝大多数需求，其中最常用的只有十几种类型  ### （1）占比类 在成分对比关系中，我们主要对每一部分的大小占总数的百分比感兴趣，比如： 公司某款产品的销售额占总销售额的超过30% 2018年，我司的市场份额少于5% 公司的业务招待费占所有管理费用的超过25% 5月份，A产品的销售量占公司总销售量的首位。 2001年客户市场份额少于整个行业的10% 占据公司资金的半数的两个渠道 你的主题中只要包括如下词汇如：份额、占比、总数百分比、占百分比多少等字样时，可以肯定你是在制作一个构成的对比关系图表，构成对比关系的常用图表有如下几个： 饼图：饼图是一个划分为几个扇形的圆形统计图表，通常用来展现数据的分类和占比情况。 比如想要突出表示某个部分在整体中所占比例，尤其该部分所占比例达到总体的25%或50%时。  环形图：展现数据的分类和占比情况，相比饼图，环形图的可读性更高，可以把重要数据放在中间  百分比堆积条形图：对比同一个分组数据内不同分类的占比，分组多  百分比堆积柱形图：对比同一个分组数据内不同分类的占比，分组少  矩形树状图：清晰地显示层次结构，通过矩形面积、排列的不同来展示层次内部的占比关系  ### （2）比较类 在项目对比时，我们需要比较类别间的大小、高低，例如： 客户的销售收益率位居第四； 6个部门的周转率大致相同 我司今年的销量处于全市场的第3位； 我们可以从大于、小于或相同之类的词汇中找到类别比较的线索，常用的图表类型如下： 柱形图：  条形图：  堆积条形图：表示多个类别里的各构成的对比，表明组成整体的成分情况  旋风图：对比分类数据的数值大小，表明两个不同成分的特点，如进口百分比与出口百分比  范围条形图：表示多个类别间的由低到高的数值范围，而不是表示单个数值，适合用于表示多个类别间的数值范围间的比较。  雷达图：将多个分类的数据量映射到坐标轴上，对比某项目不同属性的特点。了解同类别的不同属性的综合情况，以及比较不同类别的相同属性差异。  ### （3）时间序列比较 这个对比关系是我们最常见的对比关系，表示随时间变化的情况。 我们对每一个部分在总数的比例或大小不感兴趣，但是对它们随时间的变化感兴趣，比如： 销售量自1月份以来呈现逐步下滑态势； 过去5年我司的盈利状况每况愈下； 过去10年的薪资水平均处于一个小幅增长的态势 时间序列对比关系的触发词有：变化、增长、下降、减少、波动等，常见的图表类型如下： 折线图：展示连续数值（例如时间）或者有序分类的变化趋势  面积图：用面积展示数值大小，展示数量随时间变化的趋势。  垂直瀑布图：一般适用于汇报数量的增减，比如一年中各月销售额、用户数等指标的变化  ### （4）频率分布对比 这种对比关系表示有多少个项目或类别符合一个数字发展的范围。 比如，我们用一个频率分布对比关系来展示我司有多少员工的月薪超过5万元，有多少员工的月薪处于3-5万元之间，有多少员工的月薪在1-3万元区间等，或者有多少员工的年龄小于25岁，25-30岁员工人数有多少、超过30岁的员工人数有多少等。 这种对比关系的关键词包括：x到y的范围，密度，频率，分布等，常用图表类型如下： 人口金字塔图  直方图：表达连续的区间上数量的分布  分布曲线图  箱型图  ### （5）相关性对比 相关性对比关系表示两个变数之间的关系可以是，也可以不是你所证明的模式。 例如：你可以证明利润随着销售额的增加而增长，也可以论证销售额随着打折幅度的增加而增长 5月份的销售情况表明，销售额与推销员的经验无关。 董事长的薪水并随着公司规模大小需变化 保险单的大小与保险客户的收入成正比。 当你的主题包括与什么相关，随什么增长，随什么减退，根据什么变化，或者不随什么增长等，那么就可以断定是一个相关性对比关系。 相关性对比关系因为是表示两个变量——之间的关系，两个坐标轴都是数值轴，和常见的其它图表类型柱形图、条形图、折线图等一个类别轴（或时间轴）、一个数值轴不同，下面是表达相关性的常用图表类型： 散点图：散点图通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。  波士顿矩阵图  气泡图  ###（6）位置对比 空间图表可以数据中的精确位置和地理模式。比如显示人流量最多的航站楼或全国各地所有销售额 空间地图包括填充地图、点分布图、符号地图和密度地图，常用的类型如下： 区域地图：区域图是对不同的区域划分分别进行区面着色展示的可视化类型  点地图：点地图图是把一系列离散的数据点按照位置信息标注在地图上。适合需要把大量具有相同属性的地址信息同时展示在地图上的业务场景。比如展示连锁店分布、加油站分布、银行网点分布等。  热力地图：热力图通过指定的半径范围进行数据叠加计算，然后与梯度颜色进行数据映射，不同的颜色深度代表不同的数据密度。通常适用于数据量比较多且在一定地域范围内相对密集的业务场景。 比如展示某个商圈的人流分布、某个景区的客流分布、某个区域的车流分布等。  流向地图：迁徙图是在两点之间绘制弧线进行连接，并配以动画呈现移动效果的图像，主要用于展示不同地点之间人员、物品、车辆等流动的方向。  更多图形 参考 [60 种数据图表，制作工具和使用场景](https://mp.weixin.qq.com/s/CpWGOcXHf0gjR7RooPNvMA "60 种数据图表，制作工具和使用场景") # 数据可视化标准 ## 错误示范 数据展示处于无可视化规范的状态，导致频频出现“数据堆叠”“数据出界”“数值无单位”等可读性低的问题。  ## 好的规范 ### 基础 “知道什么数据用什么图表，了解颜色的使用规范、数据排版展示的要点、适配性原则”等基础规范，从配色、布局、基础展示规则上，满足数据展示的美观度和可读性。  ### 配色  1、分类配色 区分不同的类型 2、连续配色 同类型的情况变化 3、配色主题 商务配色 和 暗黑配色  ### 布局 【基础布局】：图表的构成，由一系列独立的图形与法元素结合而成，如包含标题区、操作功能区、面包屑、图例区、单位区和图表区，通过合理的基础布局增强图表的秩序性和一致性，同时规范标题、图例等元素的展示适配规则。  【精细图形】：整体的图形展示细节也做了统一调整，从整体排布、字体、字号、圆角、描边粗细、数据轴、标签等方面进行了优化设计，使整个图表看起来更加精细。 基础的配色、字号、布局调整之后，基本满足了数据的展示基准，从基础合理性展示和视觉感提升上，有了一定的改良。  3.适配-更灵活的规则带来细腻的交互体验 【定义图表的适配规则】：定义四种图表卡片的适配方案，当图表放大或缩小到某一区间时，内部布局会根据图表大小变化进行有权重的删减，使图表在多种区间内能够将核心数据表达的更清晰。  ### 极端情况的处理规则 最难解决但也最有价值的痛点是：数据体量大、维度多带来的“不确定性问题”，想要把海量、高维的数据以准确有效的方式展示，需要建立高质量的交互和配图规则。因此，我们在梳理基准展示规范的基础上，也对极端情况进行了一系列的规则处理。 【过滤数据】：首先从底层数据进行过滤，过滤底层占比0%的数据，减少数据呈现量。将占比为0%的大部分数据在图表的可视化展示中去除，转移到图例中展示，满足了用户需要完整数据的诉求外还大幅度提升了图表的可视化程度。 【元素优化】：优化标签、线条、指示等元素的展示规范，从定义边界位置、规范标签的展示内容上，对图表内元素的极端情况做适配处理。 【智能检测】：为了消除信息过载带来的标签碰撞，我们制定了标签的智能检测规则，当两个标签重叠超过1/3时，自动化地隐藏部分标签，被隐藏的部分可以通过悬停展示详细信息，不经意间大幅度的提升图表的展示美感和用户的浏览体验。 # 参考链接 https://mp.weixin.qq.com/s/YJJootl2jPPhbbrQqqLiMQ https://mp.weixin.qq.com/s/CpWGOcXHf0gjR7RooPNvMA https://mp.weixin.qq.com/s/2Wh9eYFmhC7uottd2oUQ5w https://mp.weixin.qq.com/s/2sCj-48fThQCSvoRRjkl4g