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 and 8 represents a by

Narrative Text Visualization Skill 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. What is T8 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. Key Features: LLM Friendly : The syntax is intuitive and can be easily generated by AI models Declarative & Readable : Write what you want, not how to build it Framework Agnostic : Works with React, Vue, or vanilla JavaScript Standardized Styling : Professional appearance by default Built in Data Visualizations : Mini charts (pie, line) are native to the syntax Lightweight : Less than 20KB before gzip Workflow To generate narrative text visualizations, follow these steps: 1. 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. Generate T8 Syntax Content Create narrative text using T8 Syntax following the specification below. The content must include: Proper document structure (headings, paragraphs, lists) Entity annotations for all meaningful data points Appropriate metadata for entities (origin, assessment, etc.) 3. Generate Frontend Code Create HTML, React, or Vue code to render the T8 content based on user's preferred framework. 4. Validate Output Ensure: All data is from authentic sources Minimum content length (800 words or equivalent) Proper entity annotations throughout Clear structure and logical flow T8 Syntax Specification 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. Document Structure Headings (6 levels) Use standard Markdown heading syntax: Rules: Each heading must be on its own line Add one space after the symbols Headings create visual hierarchy in the rendered output Paragraphs Regular text paragraphs are separated by blank lines: Rules: Paragraphs can span multiple lines Use blank lines to separate distinct paragraphs Text within a paragraph flows naturally Lists T8 Syntax supports both unordered and ordered lists. Unordered Lists: Ordered Lists: Rules: Each list item must be on its own line Add one space after the bullet marker ( , ) or number Lists can contain entities and text formatting Text Formatting T8 Syntax supports inline text formatting using Markdown syntax: Bold Text: This is bold text that stands out. Italic Text: This is italic text for emphasis. Underline Text: This is underlined text for importance. Links: Visit [our website](https://example.com) for more information. Rules: Formatting markers must be balanced (opening and closing) Formatting can be combined with entities Links use [text](URL) syntax where URL starts with http:// , https:// , or / Entity Annotation Syntax The core feature of T8 Syntax is entity annotation marking specific data points with semantic meaning and metadata. Basic Entity Syntax displayText : The text shown to readers entityType : The semantic type of this entity Example: Entity with Metadata Metadata Rules: Separate multiple metadata fields with commas Numbers and booleans: write directly (e.g., origin=1500000 , active=true ) Strings: wrap in double quotes (e.g., unit="元" , region="Asia" ) Example: Entity Types Reference Use these entity types to annotate different kinds of data: Entity Type Description When to Use Examples metric name Name of a metric or KPI When mentioning what you're measuring "revenue", "user count", "market share" metric value Primary metric value The main number/value being reported "¥1.5 million", "50,000 users", "250 units" other metric value Secondary or supporting metric value Additional metrics that provide context "average order value: $120" delta value Absolute change/difference When showing numeric change between periods "+1,200 units", " $50K", "increased by 500" ratio value Percentage change/rate When showing percentage change "+15.3%", " 5.2%", "grew 23%" contribute ratio Contribution percentage When showing what % something contributes "accounts for 45%", "represents 30% of total" trend desc Trend description Describing direction/pattern of change "steadily rising", "declining trend", "stable" dim value Dimensional value/category Geographic, categorical, or segmentation data "North America", "Enterprise segment", "Q3" time desc Time period or timestamp When specifying when something occurred "Q3 2024", "January March", "fiscal year 2023" proportion Proportion or ratio When expressing parts of a whole "3 out of 5", "60% of customers" rank Ranking or position When indicating order or position in a list "ranked 1st", "top 3", "5th place" difference Comparative difference When highlighting difference between two items "difference of $50K", "gap of 200 units" anomaly Unusual or unexpected value When pointing out outliers or anomalies "unusual spike", "unexpected drop" association Relationship or correlation When describing connections between metrics "strongly correlated", "linked to", "related" distribution Data distribution pattern When describing how data is spread "evenly distributed", "concentrated in", "spread across" seasonality Seasonal pattern or trend When describing recurring seasonal patterns "seasonal peak", "holiday period", "Q4 surge" Common Metadata Fields Add these optional fields to provide richer data context: origin (number) The raw numerical value behind the displayed text. Examples: [¥1.5M](metric value, origin=1500000) [23.7%](ratio value, origin=0.237) [5.2K users](metric value, origin=5200) [3 out of 4](proportion, origin=0.75) Why use it: Enables data visualization, sorting, and calculations assessment (string) Evaluates whether a change is positive, negative, or neutral. Valid values: "positive" , "negative" , "equal" , "neutral" Examples: [increased 15%](ratio value, assessment="positive") [dropped 8%](ratio value, assessment="negative") [remained flat](trend desc, assessment="equal") Why use it: Enables visual indicators (colors, icons) for good/bad trends unit (string) The unit of measurement for the value. Examples: [¥1,500,000](metric value, unit="元", origin=1500000) [150](metric value, unit="units") detail (any) Additional context or breakdown data for chart rendering. Required for certain entity types. Required for these entity types: rank : Array of numbers representing ranking data Example: [top performer](rank, detail=[5, 8, 12, 15, 20]) difference : Array of numbers showing comparative values Example: [gap narrowing](difference, detail=[100, 80, 60, 40]) anomaly : Array of numbers highlighting outliers Example: [unusual spike](anomaly, detail=[10, 12, 11, 45, 13]) association : Array of {x, y} objects for correlation data Example: [strong correlation](association, detail=[{"x":1,"y":2},{"x":2,"y":4},{"x":3,"y":6}]) distribution : Array of numbers showing data spread Example: [uneven distribution](distribution, detail=[5, 15, 45, 25, 10]) seasonality : Object with data array and optional range Example: [Q4 peak](seasonality, detail={"data":[10,12,15,30],"range":[0,40]}) Optional for other types: [steady growth](trend desc, detail=[100, 120, 145, 180, 210]) 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 Complete T8 Syntax Example Using T8 in HTML, React, and Vue Using in HTML (via CDN) Installation: Using in React Using in Vue 3 Using in Vue 2 Writing Guidelines and Best Practices Content Requirements 1. Minimum Length: No less than 800 words (adjust based on data complexity) 2. Structure: Clear hierarchy with logical flow between sections 3. Analysis: Don't just list numbers explain their significance and context 4. Tone: Natural, fluent, objective, and professional 5. Entity Usage: Annotate ALL meaningful data points metrics, values, trends, times, changes, percentages Entity Annotation Best Practices 1. Be Comprehensive: Mark all quantitative data, not just major figures 2. Use Appropriate Types: Choose the entity type that best describes the semantic meaning 3. Add Metadata: Include origin , assessment , and other relevant fields when applicable 4. Natural Flow: Entities should blend seamlessly into readable prose What to Annotate ✅ DO annotate: All numeric values (revenue, counts, measurements) All percentages (changes, contributions, proportions) Metric names and KPIs Time periods Geographic regions and categories Trend descriptions Comparisons and changes ❌ DON'T annotate: Generic text without specific data meaning Connecting phrases and transitions Context that doesn't represent measurable concepts Output Format When generating T8 Syntax content for the user: 1. Output the T8 Syntax content directly without wrapping in code blocks 2. Provide the frontend code (HTML/React/Vue) based on user preference 3. Ensure all entities are properly annotated with appropriate metadata 4. Verify that content meets minimum length and quality requirements 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 Links T8 GitHub Repository: https://github.com/antvis/T8 T8 Documentation: https://github.com/antvis/T8/blob/main/site/en/tutorial/quick start.md T8 Syntax Reference: https://github.com/antvis/T8/blob/main/prompt.md

narrative-text-visualization