前端数据可视化- AVA的使用

早安川
707 阅读4分钟

前言：

前段时间做的一个周报可视化项目，需要进行可视化分析的文本展示，框架技术选择了蚂蚁金服的AntV的AVA可视化解决方案。AVA的自动分析数据生成可视化文本，看着效果还是挺牛的,下面是AVA的洞察卡片效果： image.png

接下来，本文将具体介绍下AVA的NTV可视化文本分析以及在react项目中的使用。

解读AVA的可视化文本技术

介绍

AntV 是由蚂蚁金服可视化团队开发的开源数据可视化解决方案，包含一系列可视化资产、工具、产品和设计指引。其中的 AVA 是为了更简便的可视分析而生的技术框架，NTV则是AVA中的文本可视化方案。
NTV 的名字来源于 Narrative（叙述性）+ Text（文本）+ Vis（可视化） ，即用文本叙述数据事实的可视化方案，也是针对“结构化表达”、“可读性”、“交互扩展”三大特性给出的解决方案。

为什么要用可视化文本？

  1. 文字表达的信息更详细具体
    虽然图表可以给读者带来很直观的数据呈现，但是不同的读者所关注的侧重点可能不同，所以他们的分析结果也会不同，而文字可以在描述洞察时提供重要的补充。 image.png
  2. 结构标准化定义
    AVA将数据格式进行了标准化定义，有利于内容依赖自动化生成，越来越多的洞察结论将由机器自动生成；
  3. 可读性强
    通过使用可视化映射原理对数据元素做标记，帮助用户快速识别关键信息；通过增加行内小图，在感性层面提高用户对数据的感知。 Snipaste_2023-08-29_13-08-26.png

所需的数据结构规范

AVA团队使用声明式的方法设计了一套解读文本的标准化表述 schema（ntv-schema）。ntv-schema 分为结构层和短语层。 image.png image.png

从结构层看：

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

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

  • text 就是普通纯文本；
  • entity 是具有数据含义的短语，将数据映射为文本，是解读文本可视化的主要内容；
  • custom 则是一种提供给用户自定义的短语插槽，当前常被用于实现一些短语级别的交互。

ntv-schema.json 数据示例

{
  "sections": [
    {
      "paragraphs": [
        {
          "type": "normal", // 普通段落，还有 heading bullets 等其他类型
          "phrases": [
            {
              "type": "text",
              "value": "数据表现："
            },
            {
              "type": "entity",
              "value": "单价",
              "metadata": { "entityType": "metric_name" }
            },
            {
              "type": "entity",
              "value": "1.24万",
              "metadata": { "entityType": "metric_value", "origin": 124258.91 }
            }
          ]
        }
      ]
    }
  ]
}

使用

安装

$ npm install @antv/ava
$ npm install @antv/ava-react

在项目中使用

在react项目中使用是比较便捷的，直接将符合上面的ntv-schema定义的JSON Spec传入React 组件：<NarrativeTextVis />即可。 image.png

若是想要依据数据自动生成分析结果可使用AVA的自动洞察(insight)

  • getInsights可以提取数据中存在的洞察。从多维数据中运行不同算法来发现数据中有趣的模式，并将不同类型的模式进行统一评估，按照分数返回高质量的数据洞察结果。
    下面是InsightOptions 自动洞察流程中的一些可选配置
属性 类型 描述 默认值
measures Measures[] 指定作为指标的字段和对应的聚合方法。 所有可用于计算的定量（数字）字段。
dimensions Dimensions[] 指定参与计算的维度。 所有分类、时间字段
insightTypes InsightType[] 指定参与计算的洞察类型。 ['category_outlier', 'trend', 'change_point', 'time_series_outlier', 'majority','low_variance', 'correlation'](所有支持类型)
visualization boolean | InsightVisualizationOptions 是否输出洞察的可视化方案，及可视化输出配置项 false
......

聚合方法有：'MEAN'(平均数)，'MIN'(最小值)，'SUM'(累计和)，'COUNT'(统计数)... 更多请查看官方文档

自动洞察配合可视化文本的代码示例

...
import { NarrativeTextVis } from '@antv/ava-react';
import { getInsights } from '@antv/ava'

const NTVCompoent = () => {
  const data = [
    { year: "2000", value: 1 },
    { year: "2001", value: -1 },
    { year: "2002", value: 2 },
    { year: "2003", value: -2 },
    { year: "2004", value: 7 },
    { year: "2005", value: 3 },
    { year: "2006", value: -3 },
    { year: "2007", value: 0 },
    { year: "2008", value: 0 },
    { year: "2009", value: 1 },
  ];
  const insightsArr = getInsights(data, {
    visualization: { lang: "zh-CN" },
  }).insights;
  let analysisArr = [];
  if (insightsArr.length > 0) {
    insightsArr.forEach((item, index) => {
      let paragraphsItem = {
        paragraphs:
          item.visualizationSpecs.length !== 0
            ? [handleVisualizationSpecs(item.visualizationSpecs)]
            : [],
      };
      analysisArr.push(paragraphsItem);
    });
  }

  let spec = {
    sections: analysisArr,
  };
  return (
      <NarrativeTextVis spec={spec || []} />
  );
};
function handleVisualizationSpecs(data) {
  return data[0].narrativeSpec[0];
}
export default NTVCompoent;

最后的效果就是这样啦 image.png

上述的代码示例仅是较为基础的使用示例，如果想要对数据进行有指向性的分析读者可前往官网进行深入学习。

感谢你看到最后，最后再说两点~
　 ①如果你持有不同的看法或者本文写的有问题，欢迎在文章下方进行留言、评论。
　 ②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~　😘

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

avatar
文章
阅读
粉丝