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:

此技能使用 p5.js 生成交互式信息圖表可視化，該 p5.js 讀取 vis 網絡兼容的 JSON 數據。在創建具有節點、邊緣和懸停交互的教育信息圖表時使用此技能，用戶可以在其中探索概念之間的關係。每個信息圖都顯示帶有標籤的形狀，懸停時顯示工具提示，並在繪圖區域下方的控制面板中顯示詳細說明。節點放置在絕對坐標中。 輸出不是響應式設計。 來源：vishalsachdev/claude-skills。

查看原文