Infographic Generator with P5.js

Overview

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.

Purpose

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.

When to Use This Skill

Use this skill when:

• Creating concept maps, mind maps, or knowledge graphs
• Visualizing relationships between topics, ideas, or entities
• Building interactive diagrams for educational content
• Converting vis-network data into standalone p5.js visualizations with enhanced behaviors
• Creating hover and click through based information exploration interfaces