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:

Dieser Skill generiert eine interaktive Infografik-Visualisierung mit p5.js, die vis-network-kompatible JSON-Daten liest. Nutzen Sie diese Fähigkeit, wenn Sie pädagogische Infografiken mit Knoten, Kanten und Hover-Interaktionen erstellen, in denen Benutzer Beziehungen zwischen Konzepten erkunden können. Jede Infografik zeigt Formen mit Beschriftungen an, zeigt beim Hovern Tooltips an und zeigt detaillierte Beschreibungen in einem Bedienfeld unterhalb des Zeichenbereichs an. Die Knoten werden in absoluten Koordinaten platziert. Die Ausgabe ist kein responsives Design. Quelle: vishalsachdev/claude-skills.

Original anzeigen