skills.rest
AarnavBaddam
AarnavBaddamCOMMUNITY
Explore all skills by this author →
GitHub

visualize

Create interactive HTML visualizations, charts, maps, and simulations inline in conversation.

Updated Jul 31, 2026
Search Tags:#html#simulation#visualization#interactive charts#maps#inline rendering#d3-geo
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill visualize-aarnavbaddam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualize
Source: https://github.com/AarnavBaddam/skills/tree/main/visualize
Command: npx skills add https://github.com/AarnavBaddam/skills --skill visualize-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve? Explaining dynamic systems, data relationships, or spatial information with plain text often falls short. This Skill builds interactive charts, maps, simulators, and explorable diagrams directly in the conversation so users can see and adjust the thing being explained. ## Core Features & Use Cases - Inline Interactive Visuals: Generates self-contained HTML fragments with charts, plots, maps, simulations, and adjustable inputs rendered directly in the chat thread. - Theme-Aware Design System: Ships a full CSS utility kit (cards, buttons, forms, tables, tooltips) with light/dark theme variables, accessibility rules, and responsive layout down to 320px. - Export and Preview Tooling: Includes a render script that wraps any fragment into a standalone CSP-sandboxed HTML document or serves it locally for browser inspection. - Use Case: Ask how compound interest grows over time and receive an interactive chart with sliders for rate and years, or request a world map of country-level data rendered with d3-geo projections. ## Quick Start Ask the assistant to show how something works with an interactive chart, map, or simulation, for example: create an interactive plot comparing monthly revenue across regions with adjustable date ranges.

Frequently Asked Questions about visualize

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

FAQPage Schema
How do I create an interactive chart in a chat conversation?▼

Request the visualization in natural language, describing the data and interactions you need. The Skill writes a self-contained HTML fragment with inline SVG or a CDN-approved charting library, rendered directly in the thread with theme-aware styling.

What libraries can inline visualizations use?▼

Fragments may load scripts only from an allowlist of CDNs: cdnjs.cloudflare.com, esm.sh, cdn.jsdelivr.net, unpkg.com, and Google or Bunny font hosts. Maps use d3-geo with topojson-client, and icons come from the sandbox-provided Lucide library.

Can I export an inline visualization as a standalone HTML file?▼

Yes. Run the bundled render script with the fragment path and a destination to produce a standalone HTML document wrapped in a sandboxed iframe with a strict Content Security Policy. The --serve flag previews it locally in a browser.

When should I use Mermaid instead of an HTML visualization?▼

Use Mermaid when labeled nodes and edges fully explain a static structure, such as flowcharts or dependency diagrams. Reserve HTML fragments for dynamics, spatial motion, adjustable inputs, maps, and other interactive content.

Why does my visualization fail to load external data?▼

The sandbox CSP blocks fetch, XHR, and WebSocket calls, so all data must be inlined in the fragment. Keep fragments under 2 MB by aggregating, binning, or downsampling large datasets before embedding them.

Related Skills

Explore More Design & Creative Skills→
WalkerVVVWalkerVVV

Excel Analysis

Analyze Excel spreadsheets with pandas for cleaning, aggregation, and reporting.

Community
Intermediate
openaiopenai
5.3k

publish-artifact-to-sites

Publishes validated Data Analytics report and dashboard artifacts as Sites-hosted snapshots.

Official
Advanced
awslabsawslabs
13

claims-analytics

Parse X12 837/835 claims into DataFrames and detect billing anomalies.

Official
Advanced
JaviMontanoJaviMontano

mermaid-diagramming

Generate syntactically valid Mermaid diagrams for architecture, flows, and technical documentation.

Community
Intermediate