infographic-generator-p5

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:

Questa competenza genera una visualizzazione infografica interattiva utilizzando p5.js che legge i dati JSON compatibili con la rete vis. Utilizza questa competenza durante la creazione di infografiche didattiche con nodi, bordi e interazioni al passaggio del mouse in cui gli utenti possono esplorare le relazioni tra i concetti. Ogni infografica mostra forme con etichette, mostra descrizioni comandi al passaggio del mouse e visualizza descrizioni dettagliate in un pannello di controllo sotto l'area di disegno. I nodi sono posizionati in coordinate assolute. L'output non è un design reattivo. Fonte: vishalsachdev/claude-skills.