extract-datawrapper-charts

Extract Datawrapper embed chart data into TypeScript constants.

Updated Aug 23, 2025
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill extract-datawrapper-charts
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: extract-datawrapper-charts
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/extract-datawrapper-charts
Command: npx skills add https://github.com/therealityreport/trr-app --skill extract-datawrapper-charts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data teams need a reliable, code-friendly path to convert embedded Datawrapper chart data into typed TypeScript data ready for TRR components, eliminating manual transcription and reducing errors.

Core Features & Use Cases

  • Extract and map chart data from Datawrapper embeds (inline data and metadata) into TypeScript data interfaces.
  • Generate constants named following BRAND_SLUG_TOPIC_DATA conventions for easy import in TRR dashboards.
  • Enable optional resource directories (scripts/references/assets) to support richer automation when present.

Quick Start

Provide one or more Datawrapper embed URLs with ?plain=1 along with optional brand and topic slugs to generate TypeScript data constants.

Frequently Asked Questions about extract-datawrapper-charts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract Datawrapper chart data into TypeScript constants?

You can extract Datawrapper chart data by providing embed URLs with ?plain=1 to automatically convert inline JSON, inline CSV, and metadata into TypeScript constants mapped to TRR chart interfaces.

Can I convert Datawrapper inline CSV and JSON data into TypeScript interfaces?

Yes, converting Datawrapper inline CSV and JSON data into TypeScript interfaces is fully supported, automatically parsing embedded data sources and mapping them to structured TRR chart data constants.

Does this tool generate TypeScript constants with specific naming conventions for dashboards?

Yes, it generates TypeScript constants using a BRAND_SLUG_TOPIC_DATA naming convention, ensuring the extracted Datawrapper chart data integrates easily into TRR dashboards without manual transcription.

What is the best way to automate Datawrapper chart data extraction for code pipelines?

The best way to automate Datawrapper chart data extraction is passing embed URLs with optional brand and topic slugs to produce structured TypeScript constants, enabling reliable integration into automated data pipelines.

Are there fallbacks when extracting data from Datawrapper embeds fails?

Yes, the extraction process includes basic fallbacks for handling various Datawrapper embed data sources, ensuring structured output is maintained even when primary inline data parsing encounters issues.

Do I need specific dependencies to map Datawrapper charts to TRR interfaces?

No specific dependencies are required, as the Skill operates independently to map Datawrapper chart data into TypeScript data interfaces, though optional resource directories can support richer automation.