infographic-generator-p5_skill
- Python
1
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill vishalsachdev/claude-skills --skill infographic-generator-p5- SKILL.md16.2 KB
Overview
This skill generates an interactive infographic visualization using p5.js that reads vis-network compatible JSON data. It renders nodes with absolute positions, draws edges, shows tooltips on hover, and displays detailed descriptions in a control panel below the drawing area. The output is a fixed-layout, non-responsive infographic suited for educational concept maps and knowledge graphs.
How this skill works
The skill loads a data.json file in vis-network format, parses groups, nodes, and edges, and maps node properties (position, shape, color, descriptions) to p5.js drawing primitives. It renders edges first, draws node shapes and labels, detects hover state to show short tooltips inside the drawing area, and populates a dedicated detail panel with the node's fullDescription. Canvas sizing updates to its container width but the layout uses absolute node coordinates and is not responsive in terms of re-centering or relayout.
When to use it
- Creating concept maps, mind maps, or knowledge graphs with fixed node positions
- Visualizing relationships between topics or entities for educational content
- Converting vis-network JSON into a standalone p5.js visualization
- Building hover-driven exploration interfaces with tooltips and a detail panel
- Publishing static-layout infographics where precise node placement matters
Best practices
- Prepare data.json with explicit x/y coordinates and concise labels (≤30 chars)
- Provide shortDescription (tooltip) and fullDescription (detail panel) for each node
- Group styles in the JSON to keep consistent colors and shapes across nodes
- Keep node sizes and labels readable for your chosen canvas dimensions
- Avoid relying on responsive reflow—design for the intended canvas width
Example use cases
- A classroom concept map showing prerequisite relationships between topics
- An overview diagram of a research field with nodes linking to papers or resources
- A visual glossary where hovering shows definitions and the panel shows examples and links
- A simple knowledge graph for internal documentation or onboarding materials
- An educational timeline where nodes are placed at absolute coordinates to reflect time positions
FAQ
No. Nodes must include x and y coordinates in the data.json. The skill does not perform force-directed or auto layout.
Will the detail panel render HTML links and formatting?
The panel displays fullDescription as plain text; HTML tags are stripped for p5.js text rendering. Include URLs in plain text or use a separate HTML area if clickable links are required.
Is the visualization responsive to container height or mobile screens?
The canvas width updates to the container, but node positions are absolute and the design is not responsive. Test and design for your target canvas width.
