Quick Start

What is T8

T8 is a text visualization solution under the AntV technology stack, where T stands for Text, and 8 represents a byte of 8 bits, implying that this tool can deeply analyze insights beneath the text.

Currently, it mainly focuses on a specific area: Insight-based narrative text display and editing capabilities.

"The cost of building text-schema is high, why should I use T8 instead of directly concatenating DOM?"

To answer this question, we need to first clarify where the JSON comes from.

Narrative-related technology is based on the assumption that JSON data comes from LLM (Large Language Models), and the frontend consumes the schema for rendering. As the requirements for data expression diversity and real-time response increase, and NLP technology is increasingly applied, maintaining text templates on the frontend will become unsustainable. At this point, using NarrativeTextVis for unified rendering will be the best choice.

However, it's undeniable that for quite some time, similar text expressions can be satisfied with one or several default templates. Considering the learning cost of text-schema, using familiar dom/jsx for development might seem like a better choice. If your business has low requirements for text expression extensibility and relatively fixed templates, please use the syntax you're familiar with. However, using text-schema will bring the following benefits:

• As a standard description for interpretive text, it can staticize text data structure, maintain in one place and reuse everywhere;
• The JSON format makes it conducive to data storage and further consumption;
• Standardized styling, looks good by default;
• Word-scale charts are supported by default, and more inline data displays can be obtained with version upgrades;
• Extensibility of related interactions;

Usage Scenarios

In the full process of data analysis display, besides visualization charts, describing data phenomena and providing insight conclusions through text to assist analysis is also very important.

Especially with the development of augmented analytics, the data text descriptions directly output with the help of NLP (Natural Language Processing) need a rendering engine to present them in the user interface. Narrative-text related technical solutions are aimed at solving this scenario.

Features

• Standardized JSON schema description for data interpretation text (narrative-text-schema);
• Pure JS rendering engine Text for text-schema;
  • Parse text structure description JSON schema into HTML;
  • Standard visual representation of data phrases (such as metric values, ratios, differences, proportions, contribution rates, etc.);
  • Data-driven display of inline charts (mini pie, mini line) to improve text reading efficiency;

Basic Usage

T8 can be installed using regular package management tools such as npm or Yarn.

$ npm install @antv/t8

$ yarn add @antv/t8

After installation, you can export the Text object and API from the T8 library.

<div id="container"></div>

import { Text } from '@antv/t8';

// Schema to be visualized
const spec = {
  /*  */
};

// Instantiate Text
const text = new Text(document.getElementById('app'));

// Specify visualization elements
text.schema(spec).theme('dark');

// Render
const unmont = text.render();

// Destroy
unmont();

If you haven't encountered any other issues, you should get the following clear data text visualization effect.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox