skills.rest
vishalsachdev
vishalsachdevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

infographic-generator-p5

Convert vis-network JSON data into interactive p5.js infographics.

1|1|Updated Nov 22, 2025
Search Tags:#p5.js#interactive#vis-network#visualization#infographic
One-click install
npx skills add https://github.com/vishalsachdev/database-management --skill infographic-generator-p5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-generator-p5
Source: https://github.com/vishalsachdev/database-management/tree/main/.claude-skills/skills/infographic-generator-p5
Command: npx skills add https://github.com/vishalsachdev/database-management --skill infographic-generator-p5

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5.js, and includes assets (resource) components.

What problem does it solve?

This skill converts vis-network JSON data into a standalone, interactive infographic implemented in p5.js, emphasizing hover tooltips and a bottom detail panel for descriptions.

Core Features & Use Cases

  • P5.js infographics: read vis-network data to render nodes and edges with hover tooltips.
  • Fixed layout with details panel: information shown in a dedicated control region below the drawing area.
  • Data-driven visuals: supports JSON data for rapid visualization.

Quick Start

Provide your data.json, then run the skill to generate index.md, main.html, and the p5 sketch file for interactive exploration.

Frequently Asked Questions about infographic-generator-p5

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert vis-network JSON data into an interactive infographic?▼

This Skill transforms vis-network JSON data into interactive infographics rendered with p5.js. Provide your data.json file in vis-network format, and the Skill generates a standalone HTML file with nodes, edges, hover tooltips, and a detail panel for exploration.

Can I use p5.js to create concept maps and mind maps with hover tooltips?▼

Yes. This Skill renders educational diagrams like concept maps, mind maps, and knowledge graphs using p5.js with fixed node coordinates, hover-based tooltips, and a bottom detail panel displaying information for the selected item.

What data format does this infographic generator accept?▼

The Skill accepts data in vis-network JSON format. Structure your nodes and edges as vis-network specifies, and the Skill reads data.json to render the interactive visualization with fixed layouts and hover interactions.

How does the detail panel work in the interactive infographic?▼

When you hover over a node, the Skill displays a tooltip and populates a dedicated detail panel at the bottom of the canvas with descriptions and metadata for that item, enabling exploration without cluttering the main drawing area.

Do I need any dependencies to use this p5.js infographic Skill?▼

You need p5.js, which the Skill includes as a dependency. Prepare your vis-network JSON data and the Skill handles rendering the interactive visualization with all required p5.js functionality.

What output files does the Skill generate?▼

The Skill generates index.md, main.html, and the p5.js sketch file, creating a complete standalone interactive infographic ready for deployment or local exploration.

Related Skills

Explore More Design & Creative Skills→
HuuBarHuuBar

infographic-generator-p5

Render interactive infographics from data.json graph data using p5.js.

Community
Advanced
Gundlapuriswathiii006Gundlapuriswathiii006

infographic-builder

Build infographics from data using AntV Infographic DSL or React components.

Community
Advanced
fuzheadofuzheado
15

wikimedia-page-styling

Apply custom CSS and layout patterns to MediaWiki pages via TemplateStyles.

Community
Intermediate
linguistic76linguistic76
2

vis-network

Render interactive physics-based network graphs from Neo4j data via FastHTML.

Community
Advanced