Skip to main content

Data Visualization Library

Build reusable visualization component library with consistent styling, interactivity, responsiveness, and accessibility.

Complexity: Moderate | Duration: 15-30m | Category: Devops

Tags: analytics visualization component-library frontend

Workflow Diagram​

Steps​

Step 1: Chart inventory​

Agent: data

analyst - Identify commonly used chart types

Step 2: Library selection​

Agent: frontend

react-typescript-expert - Choose D3, Chart.js, Recharts, Plotly

Step 3: Component creation​

Agent: frontend

react-typescript-expert - Create React/Vue components for each chart

Step 4: Styling​

Agent: frontend

react-typescript-expert - Apply consistent color scheme, fonts

Step 5: Interactivity​

Agent: frontend

react-typescript-expert - Add tooltips, zoom, pan, click events

Step 6: Responsiveness​

Agent: frontend

react-typescript-expert - Make charts responsive to screen size

Step 7: Accessibility​

Agent: frontend

react-typescript-expert - Add ARIA labels, keyboard navigation

Step 8: Documentation​

Agent: data

analyst - Document usage, props, examples

Usage​

To execute this workflow:

/workflow devops/data-visualization-library.workflow

See other workflows in this category for related automation patterns.