data-visualization-engine
Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
Informações da origem
- Repositório
- Fadil369/Solutions
- Última atividade na origem
- 9 de abril de 2026 às 00:36
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 1
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- Data Visualization Engine
- version
- 1.0.0
- description
- Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
- author
- workspace
- activated
- false
# Data Visualization Engine
Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
## Decision Framework
### When to Apply
Use when: Dashboards, reports, analytics views, data exploration interfaces
### When NOT to Apply
Don't use when: Simple data tables, single number displays
## Anti-Patterns
### 1. Misleading Charts
```javascript
// BAD: Truncated Y-axis exaggerates differences
options: { scales: { y: { min: 95, max: 100 } } }
// GOOD: Zero-based Y-axis
options: { scales: { y: { beginAtZero: true } } }
```
### 2. 3D Charts
3D charts distort data perception. Always prefer 2D.
### 3. No Legends
Charts without legends are meaningless when multiple series exist.
## Trigger Phrases
- "Create chart"
- "Data visualization"
- "Graph component"
- "Dashboard charts"
- "Interactive visualization"
## Patterns
### Responsive Chart Component
```javascript
const ChartContainer = ({ type, data, options }) => {
const containerRef = useRef(null);
const chartRef = useRef(null);
useEffect(() => {
if (chartRef.current) chartRef.current.destroy();
chartRef.current = new Chart(containerRef.current, {
type, data,
options: { responsive: true, maintainAspectRatio: false, ...options }
});
return () => chartRef.current?.destroy();
}, [type, data, options]);
return <div style={{ position: 'relative', height: '400px' }}>
<canvas ref={containerRef} />
</div>;
};
```
## Integration
- Works with: dashboard-composition-engine, performance-budget-enforcer
Ver no GitHub