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:

이 기술은 vis-network 호환 JSON 데이터를 읽는 p5.js를 사용하여 대화형 인포그래픽 시각화를 생성합니다. 사용자가 개념 간의 관계를 탐색할 수 있는 노드, 가장자리 및 호버 상호 작용이 포함된 교육용 인포그래픽을 만들 때 이 기술을 사용하세요. 각 인포그래픽은 레이블이 있는 모양을 표시하고, 마우스를 올리면 도구 설명을 표시하며, 그리기 영역 아래 제어판에 자세한 설명을 표시합니다. 노드는 절대 좌표에 배치됩니다. 출력은 반응형 디자인이 아닙니다. 출처: vishalsachdev/claude-skills.

원본 보기