narrative-text-visualization

Name: narrative-text-visualization
Author: antvis

433stars35forks

How to install narrative-text-visualization?

antvis/chart-visualization-skills/narrative-text-visualization

$npx -y skills add antvis/chart-visualization-skills --skill narrative-text-visualization

Installs into the current project.

Summary

Generate structured narrative text visualizations from data using T8 Syntax. Use when users want to create data interpretation reports, summaries, or structured articles with semantic entity annotations. T8 is designed for unstructured data visualization where T stands for Text a

Files · 1

View on GitHub

SKILL.md

1	# Narrative Text Visualization Skill
2
3	This skill provides a workflow for transforming data into structured narrative text visualizations using T8 Syntax - a declarative Markdown-like language for creating data narratives with semantic entity annotations.
4
5	## What is T8
6
7	T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative.
8
9	Key Features:
10	- LLM-Friendly: The syntax is intuitive and can be easily generated by AI models
11	- Declarative & Readable: Write what you want, not how to build it
12	- Framework Agnostic: Works with React, Vue, or vanilla JavaScript
13	- Standardized Styling: Professional appearance by default
14	- Built-in Data Visualizations: Mini charts (pie, line) are native to the syntax
15	- Lightweight: Less than 20KB before gzip
16
17	## Workflow
18
19	To generate narrative text visualizations, follow these steps:
20
21	### 1. Understand the Requirements
22
23	Analyze the user's request to determine:
24	- The topic or data to be analyzed
25	- The type of narrative needed (report, summary, article)
26	- The key insights to highlight
27	- Any specific data sources or metrics
28
29	### 2. Generate T8 Syntax Content
30
31	Create narrative text using T8 Syntax following the specification below. The content must include:
32	- Proper document structure (headings, paragraphs, lists)
33	- Entity annotations for all meaningful data points
34	- Appropriate metadata for entities (origin, assessment, etc.)
35
36	### 3. Generate Frontend Code
37
38	Create HTML, React, or Vue code to render the T8 content based on user's preferred framework.
39
40	### 4. Validate Output
41
42	Ensure:
43	- All data is from authentic sources
44	- Minimum content length (800 words or equivalent)
45	- Proper entity annotations throughout
46	- Clear structure and logical flow
47
48	---
49
50	## T8 Syntax Specification
51
52	T8 Syntax is a Markdown-like language for creating narrative text with semantic entity annotations. It makes data analysis reports more expressive and visually appealing.
53
54	### Document Structure
55
56	#### Headings (6 levels)
57
58	Use standard Markdown heading syntax:
59
60	```
61	# Level 1 Heading (Main Title)
62	## Level 2 Heading (Section)
63	### Level 3 Heading (Subsection)
64	#### Level 4 Heading
65	##### Level 5 Heading
66	###### Level 6 Heading
67	```
68
69	Rules:
70	- Each heading must be on its own line
71	- Add one space after the `#` symbols
72	- Headings create visual hierarchy in the rendered output
73
74	#### Paragraphs
75
76	Regular text paragraphs are separated by blank lines:
77
78	```
79	This is the first paragraph with some content.
80
81	This is the second paragraph, separated by a blank line.
82	```
83
84	Rules:
85	- Paragraphs can span multiple lines
86	- Use blank lines to separate distinct paragraphs
87	- Text within a paragraph flows naturally
88
89	#### Lists
90
91	T8 Syntax supports both unordered and ordered lists.
92
93	Unordered Lists:
94	```
95	- First item
96	- Second item
97	- Third item
98	```
99
100	Ordered Lists:
101	```
102	1. First step
103	2. Second step
104	3. Third step
105	```
106
107	Rules:
108	- Each list item must be on its own line
109	- Add one space after the bullet marker (`-`, `*`) or number
110	- Lists can contain entities and text formatting
111
112	### Text Formatting
113
114	T8 Syntax supports inline text formatting using Markdown syntax:
115
116	Bold Text: `This is bold text that stands out.`
117
118	Italic Text: `This is italic text for emphasis.`
119
120	Underline Text: `This is __underlined text__ for importance.`
121
122	Links: `Visit [our website](https://example.com) for more information.`
123
124	Rules:
125	- Formatting markers must be balanced (opening and closing)
126	- Formatting can be combined with entities
127	- Links use `[text](URL)` syntax where URL starts with `http://`, `https://`, or `/`
128
129	### Entity Annotation Syntax
130
131	The core feature of T8 Syntax is entity annotation - marking specific data points with semantic meaning and metadata.
132
133	#### Basic Entity Syntax
134
135	```
136	[displayText](entityType)
137	```
138
139	- `displayText`: The text shown to readers
140	- `entityType`: The semantic type of this entity
141
142	Example:
143	```
144	The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.
145	```
146
147	#### Entity with Metadata
148
149	```
150	[displayText](entityType, key1=value1, key2=value2, key3="string value")
151	```
152
153	Metadata Rules:
154	- Separate multiple metadata fields with commas
155	- Numbers and booleans: write directly (e.g., `origin=1500000`, `active=true`)
156	- Strings: wrap in double quotes (e.g., `unit="元"`, `region="Asia"`)
157
158	Example:
159	```
160	Revenue grew by [15.3%](ratio_value, origin=0.153, assessmen

People who liked this also viewed

6 picks

Type

narrative-text-visualization

433stars35forks

View on GitHub

How to install narrative-text-visualization?

antvis/chart-visualization-skills/narrative-text-visualization

$npx -y skills add antvis/chart-visualization-skills --skill narrative-text-visualization

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Narrative Text Visualization Skill
2
3	This skill provides a workflow for transforming data into structured narrative text visualizations using T8 Syntax - a declarative Markdown-like language for creating data narratives with semantic entity annotations.
4
5	## What is T8
6
7	T8 is a text visualization solution under the AntV technology stack designed specifically for insight-based narrative text display. Instead of manually constructing DOM elements, you write simple, human-readable syntax that describes your data narrative.
8
9	Key Features:
10	- LLM-Friendly: The syntax is intuitive and can be easily generated by AI models
11	- Declarative & Readable: Write what you want, not how to build it
12	- Framework Agnostic: Works with React, Vue, or vanilla JavaScript
13	- Standardized Styling: Professional appearance by default
14	- Built-in Data Visualizations: Mini charts (pie, line) are native to the syntax
15	- Lightweight: Less than 20KB before gzip
16
17	## Workflow
18
19	To generate narrative text visualizations, follow these steps:
20
21	### 1. Understand the Requirements
22
23	Analyze the user's request to determine:
24	- The topic or data to be analyzed
25	- The type of narrative needed (report, summary, article)
26	- The key insights to highlight
27	- Any specific data sources or metrics
28
29	### 2. Generate T8 Syntax Content
30
31	Create narrative text using T8 Syntax following the specification below. The content must include:
32	- Proper document structure (headings, paragraphs, lists)
33	- Entity annotations for all meaningful data points
34	- Appropriate metadata for entities (origin, assessment, etc.)
35
36	### 3. Generate Frontend Code
37
38	Create HTML, React, or Vue code to render the T8 content based on user's preferred framework.
39
40	### 4. Validate Output
41
42	Ensure:
43	- All data is from authentic sources
44	- Minimum content length (800 words or equivalent)
45	- Proper entity annotations throughout
46	- Clear structure and logical flow
47
48	---
49
50	## T8 Syntax Specification
51
52	T8 Syntax is a Markdown-like language for creating narrative text with semantic entity annotations. It makes data analysis reports more expressive and visually appealing.
53
54	### Document Structure
55
56	#### Headings (6 levels)
57
58	Use standard Markdown heading syntax:
59
60	```
61	# Level 1 Heading (Main Title)
62	## Level 2 Heading (Section)
63	### Level 3 Heading (Subsection)
64	#### Level 4 Heading
65	##### Level 5 Heading
66	###### Level 6 Heading
67	```
68
69	Rules:
70	- Each heading must be on its own line
71	- Add one space after the `#` symbols
72	- Headings create visual hierarchy in the rendered output
73
74	#### Paragraphs
75
76	Regular text paragraphs are separated by blank lines:
77
78	```
79	This is the first paragraph with some content.
80
81	This is the second paragraph, separated by a blank line.
82	```
83
84	Rules:
85	- Paragraphs can span multiple lines
86	- Use blank lines to separate distinct paragraphs
87	- Text within a paragraph flows naturally
88
89	#### Lists
90
91	T8 Syntax supports both unordered and ordered lists.
92
93	Unordered Lists:
94	```
95	- First item
96	- Second item
97	- Third item
98	```
99
100	Ordered Lists:
101	```
102	1. First step
103	2. Second step
104	3. Third step
105	```
106
107	Rules:
108	- Each list item must be on its own line
109	- Add one space after the bullet marker (`-`, `*`) or number
110	- Lists can contain entities and text formatting
111
112	### Text Formatting
113
114	T8 Syntax supports inline text formatting using Markdown syntax:
115
116	Bold Text: `This is bold text that stands out.`
117
118	Italic Text: `This is italic text for emphasis.`
119
120	Underline Text: `This is __underlined text__ for importance.`
121
122	Links: `Visit [our website](https://example.com) for more information.`
123
124	Rules:
125	- Formatting markers must be balanced (opening and closing)
126	- Formatting can be combined with entities
127	- Links use `[text](URL)` syntax where URL starts with `http://`, `https://`, or `/`
128
129	### Entity Annotation Syntax
130
131	The core feature of T8 Syntax is entity annotation - marking specific data points with semantic meaning and metadata.
132
133	#### Basic Entity Syntax
134
135	```
136	[displayText](entityType)
137	```
138
139	- `displayText`: The text shown to readers
140	- `entityType`: The semantic type of this entity
141
142	Example:
143	```
144	The [sales revenue](metric_name) reached [¥1.5 million](metric_value) this quarter.
145	```
146
147	#### Entity with Metadata
148
149	```
150	[displayText](entityType, key1=value1, key2=value2, key3="string value")
151	```
152
153	Metadata Rules:
154	- Separate multiple metadata fields with commas
155	- Numbers and booleans: write directly (e.g., `origin=1500000`, `active=true`)
156	- Strings: wrap in double quotes (e.g., `unit="元"`, `region="Asia"`)
157
158	Example:
159	```
160	Revenue grew by [15.3%](ratio_value, origin=0.153, assessmen

People who liked this also viewed

6 picks

Type