AVA:见字如晤,展信舒颜

avatar
数据可视化 @蚂蚁集团

导读

又是一年 1122,好久不见!今年智能可视分析框架 AVA 要和大家分享两件事:解读文本可视化,让我们来看一看数据分析得出的洞察结论应该如何用一种图文并茂的方式来呈现;AVA 总包升级,我们将原先 AVA 的诸多模块化繁为简,在维持灵活性的基础上整合为一个 JS 总包 @antv/ava 和一个 React 封装包 @antv/ava-react,并为大家带来 alpha 版本,先睹为快!

解读文本可视化模块 NTV

去年我们发布了 AVA 2.0 框架,从图表推荐升级为「经验驱动」和「洞察驱动」两条可视化推荐路径。洞察驱动路径上,除了可视化标注洞察外,通过自然语言描述洞察结论也是非常重要的。今年我们隆重推出了数据解读文本的展示模块 NTV,用于提升文本的阅读和交互体验。

NTV 的名字来源于 Narrative(叙述性)+ Text(文本)+ Vis(可视化) ,即用文本叙述数据事实的可视化方案,也是针对“结构化表达”、“可读性”、“交互扩展”三大特性给出的解决方案。

“图文并茂”的洞察表达

说到数据可视化,我们常说“一图胜千言”。为什么做可视化还需要文字?

文本有不可替代的优势,在描述洞察时能为图形提供重要补充。 图表虽然可以比较准确地呈现数据现状,但一张图表中可以包含多个洞察,也可以根本不具有洞察。不同的读者对于同一张图表的解读也可能是不一样的。因此,对于“探索分析时的快速提示”或“既定洞察信息的有效转达”之类的场景来说,图表的效率并不高。而文字的表述是更具体更详细的,可以表达出更具体的现状细节、归因逻辑,甚至根据业务理解提出数据集本身不具有的“场外信息”——分析上下文。此外,文本内容还在多端适配、兼容性等方面具有优势。

“No one ever made a decision because of a number. They need a story.”

“没有人因为数字做出决策。他们需要一个故事。”

—— Gartner

叙述性的文本解读支撑了很多先进的分析技术,是未来数据分析的重要能力。 在当前 BI 和增强分析的发展阶段,自动洞察挖掘、自然语言生成(NLG)等先进技术已有不少实践。洞察被自动化地挖掘出来,必然也需要自动化地进行呈现。而 NLG 技术还不完全成熟,必须辅以合理的交互设计来补足才能商用。另外,“数据故事 Data Storytelling”也已成为分析巨头和新一代分析工具的风口。如 PowerBI 的 smart narrativeYellowfin BI Assisted Insights,以及 narrativescience 公司(已被 Tableau 收购)的 Lexio

那么,如何对数据解读文本做更好的展示以提高用户体验呢? 要解答这个问题,需要先明确用文字描述数据的三个需求特点:

  1. 信息密度大:相较于图和表,文字在单位面积内的可描述的数据信息更多,通常一段文字就可能是 4-5 张可视化图表的内容;
  2. 内容依赖自动化生成:随着数据分析平民化以及 NLP 技术的成熟,越来越多的洞察结论将由机器自动生成;
  3. 基于文本继续分析:从看数到分析,不管在探索分析应用还是交互式分析报表中,都需要基于分析结果展示进行二次分析做相关交互如筛选、下钻、上卷等,而文本作为分析结果重要的形式也是需要交互辅助分析能力的。

针对上述三个特点,提升用户阅读数据文本的体验可以针对性地从以下三方面入手:

  1. 提高可读性:通过使用可视化映射原理对数据元素做标记,帮助用户快速识别关键信息;通过增加行内小图,在感性层面提高用户对数据的感知;
  2. 结构标准化定义:洞察结论文本的自动化乃至智能化生成的基础是数据结构的标准化,做好领域标准结构定义也将促进技术合力积累与发展;
  3. 交互与自定义扩展:解读文本是含有数据绑定信息的,特别是短语作为数据元信息绑定的基础单元可以作为分析交互等触发控件,如基于日期描述做日期切换、基于拆分维度做维值切换等,可以通过自定义扩展实现。

解读文本可视化结构和规范

数据文本视觉映射

为了标准化文本表达的样式,我们使用了数据可视化理论中视觉通道映射的概念。文本与可视化标识(点、线、面)一样具有视觉通道,如“颜色(字色)”、“大小(字号)”等。此外还有一些文本特有的表达,如字体、背景色、下划线、加粗、斜体等。其中颜色和背景色被广泛使用,且被认为是用户感知最强的通道[1]。基于理论基础,我们规范了文本的视觉映射表达并在 NTV 中实现。

除了文字本身的视觉映射之外,我们还提供了“行内小图”作为数据的图形化的表达,目前包括表示占比的饼图和表示趋势的折线图,还有多种类型未来将逐一发布。

解读文本可视化声明式规范

为了将上述的规范形式化地定义出来,我们使用声明式的方法设计了一套解读文本的标准化表述 schema(ntv-schema)。这将有利于该产物在各系统之间的流转,也为未来的智能推荐做储备。ntv-schema 分为结构层短语层

结构层看:

  • 整套解读结构称为 narrative,包括一个题目(headline)和多个章节(section);
  • 每个章节有多个段落(paragraph)构成,段落有标题类(heading)、正文类(normal)、列表类(bullets)和自定义类型;
  • 每个段落又由多个短语(phrase)构成。

短语层则体现出“数据描述文本”和普通文本的最大差别。短语(phrase)分为三种:text、entity 和 custom。

  • text 就是普通纯文本;

  • entity 是具有数据含义的短语,将数据映射为文本,是解读文本可视化的主要内容;

  • custom 则是一种提供给用户自定义的短语插槽,当前常被用于实现一些短语级别的交互。

交互和扩展

洞察除了展示以外,也有交互的需求。我们将洞察结论的交互分为「联动交互」和「分析控件」两类。

联动交互是指通过高亮、动画等同步效果,帮助用户在阅读一篇数据报告时快速识别相关信息的描述对象或标注位置。“数据短语”、“行内小图”、“可视化图表”这三种元素相互之间均可进行联动。

分析控件则承载了基于文本结论做进一步筛选、下钻、上卷等探索分析操作的能力。比如下图中的例子,通过调整时间筛选控件来获得新的数据洞察。

当前 NTV 默认支持的交互还比较有限,之后我们将扩展更多交互能力,比如 entity 默认支持分析交互控件、文本与图表的双向联动、文本与文本的联动等。

便捷的使用方式

我们为这种规范的使用设计了 React 组件:<NarrativeTextVis />。当你拥有了符合 ntv-schema 定义的 JSON Spec ,直接传入这个组件即可得到经过视觉映射的数据文本。

而其中的 Spec,则与上文提到的声明式结构一致。通过我们发布的 JSON Schema 可以辅助快速编写和结构校验。虽然有一定的学习成本,但是结构比较清晰,也可以覆盖几乎全部基础展示需求。在蚂蚁内部的产品中有两种实践:一种是由后端直接生成这种结构,另一种是由前端基于业务数据构建出这种结构。以下是一个 Spec 和对应结果的例子。

对于高阶一些的需求,我们也提供了自定义短语和区块的能力,以便完成更定制化和多样化的展示与交互,点击查看 demo

业务中的提效

解读文本可以融入进数据分析人员的工作流中,提高业务中常见的探索分析、指标监控、数据汇报等数据消费环节的效率和效果,已在蚂蚁内部多个数据业务场景中加以应用。

1.探索分析提效

通过将解读文本可视化融入进用户的分析工作流中,可以为用户发现数据现象、探索其背后的原因、分享和消费分析结论提供有力帮助。

2.重要指标监控提效

解读和数据报表结合,能揭示指标和图表信息中值得关注的数据现象,辅以智能分析算法,将自动化分析结论固定在数据报表中,减少盯盘和周期性分析任务的人力成本。

3.数据汇报提效

洞察报告实质上是一种沟通与交流数据的形式,输出分析过程的成果和结论,将可行性建议以及其他价值信息传递给行动和决策人员,让阅读者能对结果做出正确的理解与判断,并可以根据其做出有针对性、操作性、战略性的决策。

化繁为简的 AVA 总包升级

我们将 NTV 的各级能力实现在了 AVA 框架中,且和其他模块一样是可插拔的。在这次 1122 品牌日,我们为大家带来了 AVA v3 两个总包的 alpha 版本,我们将在明年初和 G2 5.0 一起发布正式版。

@antv/ava

自 AVA 诞生以来,就提供了 CKB、DataWizard、ChartAdvisor、LiteInsight 等多个模块和 npm 包。虽然串联使用的方式会比较灵活,但过多独立的包给用户带来的很多理解上的负担。所以,今年我们在维持整体能力一致的基础上,将所有模块整合到一个 @antv/ava 总包中。通过整合为一个 npm 包,AVA 也更加明确了专注做好智能可视分析的定位以及有效服务业务的todo目标。

在这个 js 总包中,包含以下最高频使用的能力,并且我们都做了对应的优化:

@antv/ava-react

除了 @antv/ava 作为 AVA 的核心 JS 包,我们还提供了 React 封装 @antv/ava-react。React 包会持续添加从业务需求中提炼的能力。目前,上文中提到的<NarrativeTextVis />组件就在其中。

在明年初的正式版中,我们还将提供更轻盈的经典组件<AutoChart />、原先 SmartBoard 升级后的数据分析结果区组件,等等。

声明式语法对接 G2 5.0

在 AVA v3 正式版中,原先底层描述可视化的声明式语法 antv-spec 将进行升级,与 G2 5.0 中的 Specification 成为同一套描述。这种纯静态的描述文件能够将整个图表真正看做一份数据,纯静态的形式便于流转,清晰的结构更是可以被未来更多的智能可视化方法所使用。我们可以看到 NTV 在底层也使用了 ntv-schema 这种声明式结构。

声明式语法对于新一代可视化工具来说是非常重要的。在数据分析民主化趋势下,分析职责会从少量专业分析师和决策者逐渐普及到所有业务人员。对数据可视化的使用门槛要求大幅降低,BI 工具的可视化必须自动化、智能化。在这样的趋势下,能够支持更多智能可视化探索的声明式结构显得尤为重要。

结语

见字如晤,希望解读文本可视化的能力可以帮助大家厘清洞察细节,讲好数据故事。

展信舒颜,但愿 AVA 架构的简化可以降低大家的使用成本。愿天下没有难画的图表、没有难做的数据分析。

另外,AntV 全栈迁移新域名,访问速度大大提升!AVA新官网请访问 ava.antv.antgroup.com/。 关于本文发布的 v3 总包及 NTV 相关新特性可以通过 ava-next.antv.vision/ 进行访问,待正式发布时将同步至官网。

最后,随文附上《增强分析白皮书·洞察展现篇》预览版,欢迎交流讨论,请关注明年初的正式发布哦!

附录

AntV 发布详情

  • 主文
  • 技术专文
  • 设计专文
  • 学海无涯