摘要

本篇文章以一个简单的例子，抽丝剥茧细数讲述如何面向用户可视化设计，化繁为简，化多为少，探索用户最终的目的，如何一张图中体现N张图的含义。

下面是案例优化的具体步骤：

可视化案例优化

可视化的时候，一定要优先考虑用户能够比较什么，然后把这些数据放到一个基准上，并把要比较的东西放到最近的地方。这样用户就可以快速简便的处理比较数据。图中有一系列类似分面的柱状图，代表了 Q1 ~ Q3 三个季度的账户 targeted筛选 -> engaged订阅 -> pitched投放 -> adopted采用的四个状态的百分比，这四个状态是呈漏斗式的数据，分别是上一个数据的子集。这个案列中，用户希望能够在一张图中比较所有的数据。如下是基础原始图：

这张原始也不乏一些优点，每个数据都清晰的表明了含义，但还是需要花费一些的时间找出图中数据表达的最重含义。但是是不是有更好的办法重新排列数据呢？我们来整理下这张图需要对比的内容把。

左上角，我们可以对比 Q1 北美的四条柱状图，因为这四个数据相邻，并且是在一个坐标系中。
最上面一排，我们可以对比 Q1 北美和EMEA engaged订阅（两条紫色柱子）的数据，这个对比需要我们横向用手指去比较，需要参照物，存在一定的门槛。

基于第2点，我们可以考虑转换下思维，转换下数据呈现的类型可以更快速的比较。文中作者从自己在银行的职业生涯中发现线性的角度可以更快速的比较数据。所以就有了下面一张图

再进一步去除无用的柱状图，并把三个纵向的图合并，进一步简化成下面的图

可以看到坐标轴也有一些小优化，增加了字母标注每个步骤，不只是单一的颜色标注，每条线也能够区分出来它的归属（Q1 ~ Q3）。除此之外，我们还有一些非常特殊的信息需要透传，用户虽然在对比以前的数据，但是对当前的现状也是非常关注的，所以增加一些额外的实时信息以及数据解读，可以辅助用户做出下一步决策。

最后进行色彩优化，就可以看到如下最终的方案：

从这个方案，可以清晰的解读出：

每个阶段，北美的数据都比其他地区低
相比其他区域，为什么APAC 的传播度有了突然的提升？
最需要关注Q3的数据，以及最终阶段的数据

最后

其实这篇文章给出的一个可视化案例优化的样板，我总结出以下步骤：

明确用户看图目标，根据需要转换图形表现形式
合并不需要拆分的数据，尽量减少数据的平铺
猜测探索用户下一步，突出当前实时现状、异常点、决策意见
利用色彩给数据分类，避免用户混淆

虽然这篇文章给出了比较场景下的优化案例，但是数据是僵硬的，呈现形式是多样的，其他场景下也会有其他更适合的优化方法。可视化和语言一样，前者是把数据翻译成图形，后者是人的思维翻译成文字。不过这也带来与语言雷同的障碍，换种方式表达可能传达的含义就完全不同。如果数据的表达方式能和语言一样，有一些固定的语法和规则，就可以大大减少表现上的歧义。因为人脑处理图形效率高于文字，所以现在很多大数据还是属于沉睡状态。我们前端做的是提升人机交互效率，通过图形可以几倍甚至几百倍提高理解速度。现在我们做的还只是把结构化的数据做到让人读懂，未来可能数据直接原始化存储，基于深度学习+可视化，转化成图形化数据，就可以让人类读懂图，甚至让机器也读懂，实现自我大数据解析。

未来，一切不可预期~~~

转载于:https://www.cnblogs.com/huxiaoyun90/p/8099363.html

【可视化】对比与位置的艺术 - how we position and what we compare相关推荐

python—matplotlib 散点图，气泡图，气泡饼图/功效矩阵可视化对比
python-matplotlib 散点图,气泡图,气泡饼图/功效矩阵可视化对比刚入行,一直在看大神们的发帖学习,想着自己也写点什么东西,找了好久没找到气泡饼图相关的内容(可能是我眼神不好),于是打 ...
多个模型在测试集上的Accuracy以及AUC指标可视化对比实战
多个模型在测试集上的Accuracy以及AUC指标可视化对比实战目录多个模型在测试集上的Accuracy以及AUC指标可视化对比实战 #仿真数据
R语言使用survminer包生存分析及可视化（ggsurvplot）实战详解：从数据集导入、生存对象生成、ggsurvplot可视化参数配置、设置、可视化对比
R语言使用survminer包生存分析及可视化(ggsurvplot)实战详解:从数据集导入.生存对象生成.ggsurvplot可视化参数配置.设置.可视化对比目录 R语言使用survminer包生 ...
数据分析之excel和finebi报表可视化对比
当我们拿到数据,想对数据实现可视化报表设计.第一步就是要了解什么是数据可视化分析,且数据可视化分析的方法有什么?而且当我们拿到excel表格的数据,第一个想法是excel表格自身实现报表数据可视化,除 ...
CloudCompare:点云间重叠区可视化对比
问题来源:输入点云后无法直接性对比点云间的重叠区,所以需要对点云进行变换,使得点云错开位置,并行放置,便于观察对比,方法如下: step1:选中要变换的点云,点击Edit下Apply Transfor ...
pandas绘图_pandas与seaborn可视化对比小案例
Python网络爬虫与文本数据分析(视频课) 之前分享过pandas也是可以作图的,今天复习一下pandas作图,并与seaborn做对比,熟悉下各自绘图的特点. 导入用到的库 import pand ...
通过antd-charts可视化对比科比和詹姆斯谁更强
文章目录(想直接看综合能力对比图的请直接跳转三) 一.前言二.官方示例三.实际效果(巅峰科比和詹姆斯综合能力值对比) 四.源码(react版本,另外官方是TS代码,这里我用JS写的) 五.
python数据可视化案例淘宝粽子_Python可视化对比分析淘宝低价人群和匿名用户的淘宝连衣裙数据...
1.我是一个低价人群用户上周发表文章<一个匿名用户的淘宝"连衣裙"大观>后,交流群里面很热闹地讨论了起来,小伙伴们都在秀自己的淘宝连衣裙搜索价格,相较于小伙伴们搜索出 ...
html怎么让视频只显示字幕,视频加字幕快速调整字幕显示位置视频画面任意位置添加艺术字幕...
快捷精确调整字幕位置,有多种方法: 方法一.通过九宫格快速定位字幕位置通过"字体设置"栏目,"快速定位摆放的位置"处的九宫格,即可快捷定位字幕位置. 不建议仅 ...

【可视化】对比与位置的艺术 - how we position and what we compare

摘要

可视化案例优化

最后

【可视化】对比与位置的艺术 - how we position and what we compare相关推荐

最新文章

热门文章