data-visualization-engine
Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
Datos de origen
- Repositorio
- Fadil369/Solutions
- Última actividad en el origen
- 9 de abril de 2026 a las 00:36
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 1
- Forks
- 0
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- 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 en GitHub