Narrative Text Visualization Skill
This skill provides a workflow for transforming data into structured narrative text visualizations using the AntV T8 (Text) schema. T8 is designed for unstructured data visualization where T stands for Text, and 8 represents a byte of 8 bits, symbolizing deep insights hidden beneath the text.
Overview
T8 is a declarative JSON Schema syntax used to describe data interpretation reports with semantic entity labeling. It's designed to be:
LLM-friendly: Easy to generate with AI prompts Technology stack agnostic: Works with React, Vue, and other frameworks Extensible: Supports custom entity phrases Lightweight: Less than 20KB before gzip Workflow
To generate narrative text visualizations, follow these steps:
- Understand the Requirements
Analyze the user's request to determine:
The topic or data to be analyzed The type of narrative needed (report, summary, article) The key insights to highlight Any specific data sources or metrics 2. Review the JSON Schema
Consult the references/schema.json file to understand the T8 structure:
Top Structure: Contains headline and sections array Sections: Main chapters containing paragraphs Paragraphs: Text blocks containing phrases, can be: normal: Regular text paragraphs heading1-6: Heading levels bullets: Bulleted/ordered lists Phrases: Text elements that can be: text: Plain text entity: Semantically labeled data with metadata 3. Entity Labeling
Use entity types to mark key information (see references/prompt.md for details):
Entity Type Description Example metric_name Indicator name "Shipment", "Growth Rate" metric_value Main indicator value "146 million units", "120 factories" other_metric_value Other metric values "$19.2 billion" delta_value Difference "+120" ratio_value Rate "+8.4%", "9%" contribute_ratio Contribution "40%" trend_desc Trend Description "Continuously Rising", "Stable" dim_value Dimensional identifier "India", "Jiangsu", "Overseas" time_desc Time stamp "Q3 2024", "all year" proportion Proportion description "30%" 4. Data Requirements
Critical: All data must be from publicly authentic sources:
Official announcements/financial reports Authoritative media (Reuters, Bloomberg, TechCrunch, etc.) Industry research institutions (IDC, Canalys, Counterpoint Research, etc.) Never use fictional, AI-guessed, or simulated data Use specific numbers (e.g., "146 million units", "7058 units"), not vague approximations 5. Generate JSON Schema
Create a JSON object following the T8 schema structure:
{ "headline": { "type": "headline", "phrases": [ { "type": "text", "value": "Article Title" } ] }, "sections": [ { "paragraphs": [ { "type": "normal", "phrases": [ { "type": "text", "value": "In Q3 2024, " }, { "type": "entity", "value": "smartphone shipments", "metadata": { "entityType": "metric_name" } }, { "type": "text", "value": " reached " }, { "type": "entity", "value": "146 million units", "metadata": { "entityType": "metric_value", "origin": 146000000, "assessment": "positive" } }, { "type": "text", "value": ", showing a year-over-year increase of " }, { "type": "entity", "value": "+8.4%", "metadata": { "entityType": "ratio_value", "origin": 0.084, "assessment": "positive" } }, { "type": "text", "value": "." } ] } ] } ] }
- Render the Visualization
Once you have the JSON schema, create an HTML file that uses the T8 library to render the narrative text:
- Output Guidelines The article should be at least 800 Chinese characters or equivalent in other languages Structure should be clear with natural paragraph transitions Provide meaningful data interpretation, not just numbers Use professional, objective language Output only the JSON schema in plain text (no markdown code blocks) Omit the definitions section in final output Best Practices
Entity Metadata: Always add these optional fields when possible:
origin: The exact numerical value (e.g., for "146 million units", origin is 146000000) assessment: Growth trend ('positive' | 'negative' | 'equal') detail: Supplementary data array for trends (e.g., [2,3,4,1,7])
Entity Usage: Maximize entity labeling for:
Metrics and values Time references Dimensional identifiers Trends and changes Proportions and ratios
Structure:
Use headings to organize content Group related information in sections Use bullets for lists and key points Maintain logical flow between paragraphs
Data Quality:
Always cite authentic sources Use specific, verifiable numbers Provide context for metrics Include time references Note data sources where appropriate Example Output
A complete example of T8 schema can be found in the T8 repository. The rendered output provides:
Rich semantic markup for data entities Interactive entity highlighting Clear visual hierarchy Professional report-style formatting Responsive design for all devices Reference Material
Detailed specifications are located in the references/ directory:
prompt.md: Complete prompt template for LLM generation schema.json: Full JSON Schema definition with all types
These references are based on the official AntV T8 repository and should be consulted for accurate implementation details.