Skip to content

antvis/T8

Repository files navigation

English | 简体中文

🧬 T8: Narrative Text Visualization

T8 is a text visualization solution for unstructured data within the AntV technology stack, where T stands for Text, and 8 represents a byte of 8 bits, symbolizing that it can deeply uncover insights hidden beneath the text.

gzip size Build Status npm Version npm License

T8 examples dark

T8 is a declarative JSON Schema syntax that can be used to describe the content of data interpretation reports. Technically, based on the assumption that the JSON Schema data is generated by the server, the frontend simply consumes the Schema for rendering. As the demand for diversity and immediacy in data representation grows, along with the increasing application of AI and NLP technologies, maintaining text templates on the frontend will become unsustainable. In this context, using T8 for unified rendering will be the optimal choice.

  • Introduction - a brief overview and T8's motivations.
  • Example - a live demo to learn from and copy-paste with ai.
  • Tutorials - interactive case-driven guides of T8's core concepts.

✨ Features

  • 🛫 Technology stack agnostic - Can be used into React, Vue, and other frontend stack.
  • 🤖 LLM friendly - The T8's schema is easy to be generated by AI with prompt.
  • 🛠️ Extensible - Register custom EntityPhrase to easily customize the T8's ui elements.
  • 🪩 Lightweight - Few dependencies, small footprint, before gzip it was less than 20 Kb.

🔨 Getting Started

T8 is usually installed via a package manager such as npm or Yarn.

$ npm install @antv/t8
$ yarn add @antv/t8

The Text object then can be imported from T8.

<div id="container"></div>
import { Text } from '@antv/t8';

// A text json schema to be visualized.
const schema = {
  /*  */
};

// Instantiate a new Text.
const text = new Text({
  container: 'container',
});

// Specify schema visualization.
text.schema(schema).theme('light');

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

// Destroy.
unmont();

If all goes well, you can get the following narrative text visualization!

T8 examples light

📮 Contributing

This project exists thanks to all the people who contribute. And thank you to all our backers! 🙏

📄 License

MIT@AntV.