skills.rest
arbazkhan971
arbazkhan971COMMUNITY
Explore all skills by this author →
Website𝕏@arb5zGitHub

chart

Create accessible bar, line, scatter, heatmap, treemap, and sankey charts from tabular datasets.

26|8|Updated Mar 19, 2026
Search Tags:#accessibility#dashboard#plotly#charting#d3#data-transformation#visualize
One-click install
npx skills add https://github.com/arbazkhan971/godmode --skill chart-arbazkhan971
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chart
Source: https://github.com/arbazkhan971/godmode/tree/main/skills/chart
Command: npx skills add https://github.com/arbazkhan971/godmode --skill chart-arbazkhan971

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts raw or messy datasets into clear, accessible, and performant visualizations so teams can communicate insights without manual design and implementation overhead. It ensures charts are correctly chosen, responsive, a11y-compliant, and validated before delivery.

Core Features & Use Cases

  • Chart type & library selection: Recommends and configures bar, line, scatter, heatmap, treemap, sankey and other charts with D3.js, Chart.js, Recharts, Plotly, or similar.
  • Data transformation & validation: Produces aggregation, pivoting, sorting, downsampling and missing-data strategies required by chosen visualizations.
  • Accessibility & responsive design: Enforces colorblind-safe palettes, keyboard/aria support, and mobile/desktop breakpoints with a data table alternative.
  • Performance & production readiness: Applies canvas/WebGL, LTTB downsampling, web workers, and bundle-impact reporting for large datasets.
  • Dashboard composition & delivery: Lays out KPI rows, primary and supporting charts, deliverable components (chart components, transformers, Storybook, and tests) and automatic validation reports.
  • Use case: Build an executive analytics dashboard with KPIs, trend charts, drill-down tables, and accessibility validation for monthly reporting.

Quick Start

Create a responsive, accessible line chart from sales.csv using D3.js and include a filterable data table alternative.

Frequently Asked Questions about chart

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

FAQPage Schema
How do I create accessible data visualizations from raw datasets?▼

Accessible data visualizations from raw datasets are created by applying colorblind-safe palettes, keyboard and aria support, and providing a data table alternative for screen readers.

What's the best way to choose a charting library between D3, Chart.js, Recharts, and Plotly?▼

Charting library selection among D3, Chart.js, Recharts, and Plotly depends on your chart requirements, with the Skill recommending and configuring the best fit for bar, line, scatter, heatmap, treemap, or sankey visualizations.

How do I handle large dataset rendering performance for dashboards?▼

Large dataset rendering performance is handled by applying LTTB downsampling, canvas or WebGL rendering, and web workers to reduce browser load and ensure smooth dashboard interactions.

Can I transform messy data before generating charts and reports?▼

Messy data can be transformed before chart generation through aggregation, pivoting, sorting, and missing-data strategies required by the chosen data visualizations.

How do I compose an executive analytics dashboard with KPIs and trend charts?▼

An executive analytics dashboard is composed by laying out KPI rows, primary and supporting charts, drill-down tables, and accessibility validation for monthly reporting.

Does this approach work for building responsive charts for mobile and desktop?▼

Responsive charts for mobile and desktop are supported by enforcing mobile and desktop breakpoints alongside accessibility validation to ensure correct rendering across devices.

Related Skills

Explore More Data & Analytics Skills→
BirdywenBirdywen
1

chart-visualization

Visualize your answer with AI-powered precision and unmatched speed. Get the right chart in seconds, every time.

Community
Intermediate
xtonextone
3

nextjs-react-implementation

Generate Next.js/React components with TS types, Tailwind styling, Vitest, and Storybook from design specs.

Official
Advanced
ricardops34ricardops34

reversa-highcharts-visualizer

Generate interactive Highcharts visualizations from datasets into standalone HTML files.

Community
Advanced
ShubhamsabooShubhamsaboo
131.7k

visualization-expert

Recommend chart types and generate dashboard outlines for data analysis.

Community
Basic