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:

Cette compétence génère une visualisation infographique interactive à l'aide de p5.js qui lit les données JSON compatibles avec le réseau. Utilisez cette compétence lors de la création d’infographies éducatives avec des nœuds, des bords et des interactions de survol où les utilisateurs peuvent explorer les relations entre les concepts. Chaque infographie affiche des formes avec des étiquettes, affiche des info-bulles au survol et affiche des descriptions détaillées dans un panneau de commande sous la zone de dessin. Les nœuds sont placés en coordonnées absolues. La sortie n’est pas une conception réactive. Source : vishalsachdev/claude-skills.

Voir l'original