A professional data visualization designer that transforms complex datasets into clear, intuitive, and interactive charts and visualizations.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install data-viz-designer
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install data-viz-designer using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Data Visualization Designer?
The Data Visualization Designer is an expert-level technical agent skill designed to bridge the gap between raw data and actionable visual intelligence. By leveraging this tool within the Openclaw Skills ecosystem, developers and analysts can seamlessly ingest complex datasets and automatically convert them into clear, structurally optimized charts. The skill prioritizes visual hierarchy, readability, and data-driven chart selection over superficial aesthetics.
This skill automates the entire analytical lifecycle, from initial data exploration to fine-tuning responsive styling and interactive components. It generates clean, standalone frontend code using industry-standard libraries, making it an indispensable asset for developers building analytics dashboards or report generation workflows.
Data Visualization Designer Use Cases
- Data Exploration & Analysis: Convert raw data formats such as CSV, JSON, and Excel into meaningful visual structures.
- Dashboard & Infographic Design: Generate high-fidelity visual representations and responsive charts for technical dashboards, presentations, or business reports.
- Automated Frontend Chart Generation: Create production-ready HTML, CSS, and JavaScript configurations for immediate rendering in web applications.
How Data Visualization Designer Works
- Data Exploration and Analysis: The skill accepts datasets provided in CSV, JSON, Excel, or other structures, parsing them to identify key metrics, underlying trends, and relationships.
- Chart Type Selection: It analyzes the nature of the data (e.g., composition, correlation, trend over time) and selects the most appropriate chart representation based on logical taxonomy rules.
- Layout and Style Design: Applies responsive layouts, visual hierarchies, cohesive typography, and colorblind-friendly color palettes to maximize chart readability.
- Detail Tuning: Enhances the visualization by configuring reference lines, interactive tooltips, custom data labels, and precise legend placement.
- Interactive Component Execution: Integrates optional interactive features like zooming, filtering, and multi-layer drill-downs without compromising initial clarity.
- Code Delivery: Generates standalone, fully operational frontend code (ECharts, D3.js, Chart.js) or static vector graphics (SVG/PNG) matching user requirements.
Data Visualization Designer Setup
To leverage this capability within Openclaw Skills, install the core module and register the visualization configuration using your favorite package manager or CLI interface:
# Install the openclaw engine and skills framework
npm install @openclaw/core @openclaw/skills
# Clone or link the data visualization designer skill
openclaw skills install data-viz-designer
Ensure your project environment supports rendering or exporting dynamic HTML canvas configurations or SVG outputs.
Data Visualization Designer Data Schema & Taxonomy
The Data Visualization Designer organizes its execution pipeline and chart mapping rules dynamically. Below is the mapping framework used to categorize incoming structures:
| Data Type | Recommended Chart Types |
|---|---|
| Category comparison | Bar chart, column chart |
| Trend over time | Line chart, area chart |
| Composition / proportion | Pie chart, donut chart, stacked bar chart |
| Correlation | Scatter plot, bubble chart |
| Distribution | Histogram, box plot |
| Hierarchy | Tree map, sunburst chart |
| Geographic data | Map, heat map |
| Multi-dimensional data | Radar chart, parallel coordinates plot |
Output Format Schema
- Web Assets: Standalone
<!DOCTYPE html>strings bundled with data arrays, styling definitions, responsive event listeners, and CDN library integrations (echarts.min.js,d3.js). - Static Graphics: Clean vector SVG or PNG assets ready for automated export routines.
Data Visualization Designer Advanced Features
- Production-Ready Code Export: Delivers complete data, configuration, and rendering logic into single-file browser-runnable HTML snippets.
- Accessibility-First Styling: Automatically favors colorblind-friendly color palettes, avoiding typical problematic red-green combinations.
- Responsive Mobile Optimization: Builds responsive sizing hooks (
window.addEventListener('resize')) and tactile touch interactions out of the box. - Advanced Interactive Layers: Implements dynamic filtering, axis-hover tooltips, and deep data drill-down features to explore complex hierarchical structures.
SKILL.md
Loading
Related Openclaw Skills
Transmission CAD Design Assistant
An interactive AI agent skill that automates mechanical gearbox calculations and handles CAD schematic generation using the JXT platform.
JXT Suspension CAD Generator
An AI-powered mechanical assistant that automates suspension parameter calculations and outputs production-ready CAD drawings.
Tank CAD Generator
An automated assistant skill for calculating parameters and generating professional CAD drawings for horizontal and vertical storage tanks without requiring login.
Douyin Scraper
An automated Playwright-based scraper to search Douyin videos, track hot trending boards, and extract clean video metadata and copy scripts directly via natural language or CLI.
Vehicle Engineering Overall Design CAD Assistant
An interactive, login-free AI assistant designed to generate comprehensive vehicle engineering CAD drawings using incremental calculation APIs.
Game Design Expert
An advanced game design agent skill that converts any game name into a comprehensive, production-ready HTML5 game design document.
Featured*
