infographic-generator-p5

SKILL.md

Generate interactive educational infographics using p5.js that visualize relationships between concepts through nodes and edges. Infographics are data-driven visualizations that read from JSON files in vis-network format, allowing users to hover over elements to see a short definition in a tooltip and detailed information with links below the drawing area.

Infographics transform complex concept relationships into visual, explorable diagrams. Unlike MicroSims which focus on simulation and interaction controls, infographics emphasize information display and exploration through hover interactions. The control region is dedicated exclusively to displaying detailed information about the currently hovered item.

Create a JSON file following the vis-network format with metadata, groups, nodes, and edges:

Esta habilidad genera una visualización infográfica interactiva utilizando p5.js que lee datos JSON compatibles con la red. Utilice esta habilidad al crear infografías educativas con nodos, bordes e interacciones de desplazamiento donde los usuarios pueden explorar las relaciones entre conceptos. Cada infografía muestra formas con etiquetas, muestra información sobre herramientas al pasar el mouse y muestra descripciones detalladas en un panel de control debajo del área de dibujo. Los nodos se colocan en coordenadas absolutas. El resultado no es un diseño responsivo. Fuente: vishalsachdev/claude-skills.

Ver original