支付宝发布数据可视化规范,可视化分析有套路!

早先,阿里发布了支付宝数据可视化规范,这是一套数据可视化的设计语言,对数据图形进行了拆解、提炼,从色彩搭配、组件规范、基础元素、功能上进行了归纳总结。

图表用色

图表用色上,提出了一些图表用色上的建议,给出了一个标准的配色方案。

1.单色的使用

在使用单色就能表达数据意义的情况下,建议不使用多色。

在图表只展示单一属性的情况下,建议不要使用多种色相。

如果数据的数值已经通过形状、位置、角度等其他视觉通道进行了编码,那就没有必要再设置不同的亮度和饱和度。

2.多色的使用

人们在不连续区域的情况下通常可以分辨6~12种不同色相,以及有限个可辨亮度层次。过多的颜色使用将对人类的视觉感知产生困扰。建议谨慎选择颜色的数量。

在考虑图表中的颜色数量时,需要将背景色和图例颜色考虑进去,即显示区域所有颜色的总和。

如果着色区域比较小,由于视觉通道的相互影响,可分辨的数量将相应有所下降。

多色相的使用:

当图表展示了多种不同的属性时,建议用不同色相来区分不同属性。

多亮度与多饱和度的使用:

亮度和饱和度可以编码数据的顺序或数量特征。通常我们只会在特定图表内使用到多亮度或多饱和度,例如在一个“热力图”中,用不同亮度的红色来表示不同的气温测量值。

3.背景色的使用

图表设计中的颜色使用必须统一,建议背景颜色不要选取与图表主体内容相同或相近的颜色。

在一个精心设计的图表中,背景颜色既要能良好地衬托图表主体,又不产生喧宾夺主的效果。

通常我们较多地使用白色、浅灰色作为背景颜色,有些情况下也会使用黑色。

4.透明度的使用

透明度是与色相、亮度、饱和度紧密相关的另一个视觉通道。

由于透明度编码本身受亮度和饱和度编码的强烈影响,建议不要同时使用这三个视觉通道。但是它可以和色相编码一起使用。

通常使用透明度时,图表会有很多堆叠层次,我们需要做到使每一个前景层都能够在背景层之上良好地显示,并且不产生相互干扰。

5.辅助元素配色

辅助元素的配色需要避免与图表主体配色产生冲突。

在此基础上,尽量与图表主体配色统一。

图表类型

图表类型上,从数据出发,按照功能角度对图表进行了以下分类。依据上文的配色建议,这里利用商业智能可视化工具FineBI做了相应图表,以供参考。

1.比较类

可视化的方法显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,通常用于展示不同分类间的数值对比,不同时间点的数据对比。

2.关系类

可视化的方法显示数据之间相互关系。使用图形的嵌套和位置表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

3.趋势类

可视化的方法分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

4.分布类

可视化的方法显示频率,数据分散在一个区间或分组。 使用图形的位置、大小、颜色的渐变程度来表现数据的分布,通常用于展示连续数据上数值的分布情况。

5.地图类

可视化的方法显示地理区域上的数据。 使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。

6.区间类

可视化的方法显示同一维度上值的上限和下限之间的差异。使用图形的大小和位置表示数值的上限和下限,通常用于表示数据在某一个分类(时间点)上的最大值和最小值。

7.时间类

可视化的方法显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布,通常用于表现数据在时间维度上的趋势和变化。

最后,总结一句,数据可视化首先要保证数据的准确展示,其次选对图表和配色,可大大增加视觉感。如果觉得配色有困难,审美难以决断,不妨尝试一些可视化不错的工具。

本文作者:佚名

来源:51CTO

时间: 2024-10-29 11:51:34

支付宝发布数据可视化规范,可视化分析有套路!的相关文章

VisIt 2.3.1发布 科学数据可视化和图形分析工具

VisIt 2.3.1这个版本主要是修正错误的发布和解决在若干领域悬而未决的问题.卷的绘图和精简绘图的错误被修正,临界值和http://www.aliyun.com/zixun/aggregation/16666.html">IndexSelect运营商中的错误被修正.其他修补程序Libsim和各种阅读插件. VisIt是一个交互式并直观看科学数据可视化和图形分析工具.用户可以快速生成他们的数据可视化,动画,通过操作它们,并保存为演示所产生的图像.访问包含了丰富的可视化功能设置,使您可以查

VisIt 2.3.0发布 科学数据可视化和图形分析工具

VisIt是一个交互式并直观看科学http://www.aliyun.com/zixun/aggregation/12238.html">数据可视化和图形分析工具.用户可以快速生成他们的数据可视化,动画,通过操作它们,并保存为演示所产生的图像.访问包含了丰富的可视化功能设置,使您可以查看多种方式的数据.它可用于二维和三维(2D和3D)结构化和非结构化网格定义的标量和向量场可视化.它的目的是,以交互方式处理非常大的数据集TeraScale范围的大小,和行之有效的降低到较小的数据集的千字节的范

云杉网络发布数据驱动的云网可视化与分析产品

网络与业务正在脱节 通常来说,企业业务的经营与管理离不开"业务架构"."应用系统"和"IT基础设施"三个有机部分.其中,应用系统是业务的直观体现,而业务架构彰显的是运营模式,IT基础设施则作为前两者的载体存在. 在云计算时代,企业本身朝着数字化转型,业务架构朝着服务化转型,应用系统则迈入了DevOps时代,随之,IT基础设施迎来云时代.在IT基础设施中,和计算.存储一样,网络(网络架构.网络服务.网络运维管理)如果不变革,网络将无法适应业务发展的

VisIt 2.5.0发布 可视化和图形分析工具

VisIt 是一个用于查看科学数据的交互式并行可视化和图形分析工具.用户可以快速生成可视化数据,通过时间进行绘制,并保存为演示所产生的图像.它包含了丰富的可视化功能设置,使您可以有多种方式查看数据.它可用于二维和三维(2D和3D)结构化和非结构化网格定义的标量和向量场可视化.其目的是以交互方式处理TeraScale范围http://www.aliyun.com/zixun/aggregation/14294.html">的大数据集,以及降低数据集到较小的千字节范围内. VisIt 2.5.

VisIt 2.4.2发布 可视化和图形分析工具

VisIt是一个用于查看科学数据的交互式并行可视化和图形分析工具.用户可以快速生成可视化数据,通过时间进行绘制,并保存为演示所产生的图像.它包含了丰富的可视化功能设置,使您可以有多种方式查看数据.它可用于二维和三维(2D和3D)结构化和非结构化网格定义的标量和向量场可视化.其目的是以交互方式处理TeraScale范围http://www.aliyun.com/zixun/aggregation/14294.html">的大数据集,以及降低数据集到较小的千字节范围内. VisIt 2.4.2

百G当关、以策万全 安博通发布单盒100G可视化深度安全网关

[51CTO.com原创稿件]众所周知,防火墙是各类网络边界的安全控制点与检测点,作为关卡守护着网络中的关键通道,其本质作用在于:做好网络访问控制,缩小攻击面与提高攻击门槛. 安全事件频发,安全网关在注重性能的同时也应做好网络访问控制 随着网络应用与威胁不断变化,防火墙的安全能力随之不断演进,从最初的包过滤与状态检测到统一威胁防护,从"下一代"到"新一代",从智能到智慧.防火墙性能在不断提升,体现了极强的可视性.融合性.智能化. 然而,来自外部网络的攻击事件仍旧层出

阿里云发布国内首个可视化GPU云服务

本文讲的是阿里云发布国内首个可视化GPU云服务[IT168 资讯]2月24日,阿里云全新GPU计算实例GA1正式发布.这是一个集GPU.CPU.存储.网络于一体的计算实例.基于最新的AMD服务器图形处理卡能大大提升图形.图像渲染领域的计算效率. 这是国内首款可视化GPU计算实例,也是全球首个基于AMD GPU的公共云计算实例. GA1强大的图形处理和浮点数运算能力让可视化计算处理与获得洞见成为可能.据了解,该实例能够为用户提供单实例最大总计8192个并行处理核心.32GB的GPU显存.15 TF

如何将枯燥的大数据呈现为可视化的图?

将数据转化成可视化图表/形,其实一个工具就能完成,碍于工具太多,按照使用场景,暂且将已成熟应用的分为三个层次: 第一层:数据报告.信息图 这里统称信息图.信息图是把数据.信息或知识可视化,必须要有一个清楚准确的解释或表达甚为复杂且大量的信息. 代表人物是新闻界的David McCandless(大卫. 麦克坎德雷斯),曾为<英国卫报>.<连线>.<独立报>等刊物撰稿.常以简洁精美的图像展现复杂抽象资讯,并将不同的数据组合,展现其中的联系.他在TED上曾讲过: 可视化并不

通过数据发现和可视化实现商务智能

文章讲的是通过数据发现和可视化实现商务智能,Aberdeen 集团之前针对商务智能(BI) 进行的一项调研发现,企业要在正确的时间将正确的信息传达给正确人员变得越来越困难.例如,Aberdeen 在 2012 年 2 月进行的有关运营商务智能的一项研究<Operational Intelligence - Part 1: Driving Performance with Tactical Visibility>(运营智能 - 第一章:利用战术可视性提高绩效)表明,共有65% 的受访业务管理者正