skills.rest
atlasgroupcz
atlasgroupczOFFICIAL
Explore all skills by this author →
GitHub

visualize

Generate interactive HTML data visualizations from A2UI JSON schemas using D3.js, Leaflet, and AG Grid.

2|1|Updated Mar 30, 2026
Search Tags:#html#data visualization#charts#d3.js#kanban#leaflet#a2ui
One-click install
npx skills add https://github.com/atlasgroupcz/codexis-marketplace --skill visualize-atlasgroupcz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualize
Source: https://github.com/atlasgroupcz/codexis-marketplace/tree/main/plugins/visualization/skills/visualize
Command: npx skills add https://github.com/atlasgroupcz/codexis-marketplace --skill visualize-atlasgroupcz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning raw legal or business data into interactive visual representations normally requires manual chart-building work; this Skill automates the creation of self-contained HTML visualizations from structured data. ## Core Features & Use Cases - Nine Predefined Visualization Types: Charts (bar, line, area, pie), network graphs, timelines/Gantt charts, trees, calendars, flowcharts, data grids, kanban boards, and geographic maps. - A2UI Schema Standard: All visualizations follow a consistent JSON schema with BoundValue support, validation, and helpful error messages. - Custom Fallback Rendering: Supports arbitrary visualization types (heatmap, sankey, radar) via CDN libraries like Chart.js, Plotly, ECharts, and Cytoscape.js. - Use Case: Ask to display the number of court decisions per year as a bar chart, and receive a standalone themed HTML file with interactive tooltips, zoom, and light/dark mode. ## Quick Start Ask the assistant to visualize your data, for example: show the number of decisions per year as a bar chart.

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 from my data?▼

Describe your data and desired chart type, such as a bar or line chart. The Skill builds an A2UI JSON specification, embeds it into a D3.js template, and outputs a self-contained HTML file with tooltips, legends, and theme support.

What visualization types does this Skill support?▼

Nine predefined types: chart, graph, timeline, tree, calendar, flowchart, grid, kanban, and map. For other types like heatmaps or sankey diagrams, a fallback workflow uses CDN libraries such as Chart.js, Plotly, or ECharts.

Which libraries are used for rendering visualizations?▼

D3.js renders charts, graphs, trees, and flowcharts; Leaflet renders tile maps; AG Grid renders data tables; Event Calendar handles calendars and timelines. Fallback types can use Plotly, ECharts, Cytoscape.js, or Three.js via CDN.

Does the output support dark mode and responsive layouts?▼

Yes. Every generated HTML file includes light and dark theme CSS variables, detects the theme from URL parameters, and adapts to container size changes. Interactivity such as zoom, pan, and hover tooltips is built in.

What happens if my visualization data is invalid?▼

The A2UI adapter validates the schema before rendering and reports specific errors, such as missing node IDs or malformed coordinates. Templates display user-friendly error messages instead of failing silently.

Related Skills

Explore More Data & Analytics Skills→
nicepkgnicepkg
276

executive-dashboard-generator

Transform raw data from CSVs, spreadsheets, databases, and APIs into executive reports.

Official
Advanced
sellersessionssellersessions

dashboard-auto-generation-client

Generate standalone HTML dashboards from CSV, Excel, JSON, or TSV files.

Community
Advanced
inbrainfuninbrainfun
174

compliant-phase

Enrich entities via brain-first lookup and external web_search with exa.api citations.

Community
Intermediate
404kidwiz404kidwiz

data-analyst

Design interactive dashboards and optimize SQL queries for business intelligence.

Community
Advanced