Infographic Generator Creation
Claude Code v2.0.36 Sonnet 4.5 · Claude Pro
Prompt
Use the skill-generator skill to create a new skill called infograph-generator-p5.
This skill is a variation of the microsim-p5 skill. The key difference is that there is
that the control region of the layout is ONLY used for displaying the details of the item
that the user's mouse is hovering over. The definition of infographic is a drawing
region that has shapes (nodes) on it. This microsim reads a JSON file called data.json
that uses the same structure as the vis-network.js format for metadata, groups, nodes and
edges. Each shape has a label over it. The label is usually under 30 characters. When
the user hovers over a shape, a tooltip will be displayed next to the item the user is
hovering over. The tooltip uses a small amount of screen area to give a single sentence
of the item being viewed. Below the drawing in the control area a full paragraph about
the item will be shown. This full paragraph may have links in it. The tooltip will
never have links, just a short description. The tooltip will always be visible in the
drawing area, even if the drawing shape is near the edge of the drawing area. The input
to this simulation is a list of items with the following parameters: item-label,
item-short-description, item-full-description, item shape, item color, item icon
(optional), item location (x,y), item border color, item border width. At the end of the
list of items, there can also be an edge list. This list describes edges between any
two items (to and from to other items). The edges are black by default, but they may
also have a color, a width and a curve type. Use the parameters in the vis-network
library for describing nodes and edges.
⏺ I'll help you create the infograph-generator-p5 skill using the skill-creator. This will be an infographic generator that uses p5.js with hover interactions and vis-network compatible data format.
The "skill-creator" skill is running
The "skill-creator" skill is running
⏺ I'll help you create the infograph-generator-p5 skill following the skill creation process. Let me start by understanding the requirements and then create the skill.
⏺ Bash(python scripts/init_skill.py infograph-generator-p5 --path skills/infograph-generator-p5) ⎿ Error: Exit code 2 python: can't open file '$HOME/Documents/ws/claude-skills/scripts/init_skill.py': [Errno 2] No such file or directory
⏺ Bash(ls -la scripts/)
⎿ total 80
drwxr-xr-x 9 dan staff 288 Nov 8 09:13 .
drwxr-xr-x@ 24 dan staff 768 Nov 9 09:54 ..
… +7 lines (ctrl+o to expand)
⏺ Bash(find ~/.claude/skills/skill-creator -name "*.py" -type f) ⎿ (No content)
⏺ Bash(ls -la ~/.claude/skills/skill-creator/)
⎿ total 48
drwxr-xr-x 5 dan staff 160 Nov 1 17:23 .
drwxr-xr-x 21 dan staff 672 Nov 1 17:25 ..
… +3 lines (ctrl+o to expand)
⏺ Bash(ls -la ~/.claude/skills/skill-creator/scripts/)
⎿ total 40
drwxr-xr-x 3 dan staff 96 Nov 2 08:37 pycache
drwxr-xr-x 6 dan staff 192 Nov 2 08:37 .
… +4 lines (ctrl+o to expand)
⏺ Bash(python ~/.claude/skills/skill-creator/scripts/init_skill.py infograph-generator-p5 --path skills/infograph-generator-p5) ⎿ 🚀 Initializing skill: infograph-generator-p5 Location: skills/infograph-generator-p5 … +14 lines (ctrl+o to expand)
⏺ Bash(find skills/infograph-generator-p5 -type f) ⎿ skills/infograph-generator-p5/infograph-generator-p5/references/api_reference.md skills/infograph-generator-p5/infograph-generator-p5/scripts/example.py skills/infograph-generator-p5/infograph-generator-p5/SKILL.md skills/infograph-generator-p5/infograph-generator-p5/assets/example_asset.txt
⏺ Read(skills/infograph-generator-p5/infograph-generator-p5/SKILL.md) ⎿ Read 86 lines
⏺ Read(skills/microsim-p5/SKILL.md) ⎿ Read 667 lines
⏺ Now let me create the complete infograph-generator-p5 skill. I'll start by writing the SKILL.md file with detailed instructions:
⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/SKILL.md)
⎿ Updated skills/infograph-generator-p5/infograph-generator-p5/SKILL.md with 549
additions and 53 removals
1 ---
2 name: infograph-generator-p5
3 - description: [TODO: Complete and informative explanation of what the
- skill does and when to use it. Include WHEN to use this skill - specific
- scenarios, file types, or tasks that trigger it.]
3 + description: This skill generates interactive infographic visualizations
+ using p5.js that read vis-network compatible JSON data. Use this skill
+ when creating educational infographics with nodes, edges, and hover
+ interactions where users can explore relationships between concepts. Each
+ infographic displays shapes with labels, shows tooltips on hover, and
+ displays detailed descriptions in a control panel below the drawing area.
4 ---
5
6 - # Infograph Generator P5
6 + # Interactive Infographic Generator with P5.js
7
8 ## Overview
9
10 - [TODO: 1-2 sentences explaining what this skill enables]
10 + 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 detailed
+ information.
11
12 - ## Structuring This Skill
12 + ## Purpose
13
14 - [TODO: Choose the structure that best fits this skill's purpose. Common
- patterns:
14 + 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.
15
16 - 1. Workflow-Based (best for sequential processes)
17 - - Works well when there are clear step-by-step procedures
18 - - Example: DOCX skill with "Workflow Decision Tree" → "Reading" →
- "Creating" → "Editing"
19 - - Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ##
- Step 2...
16 + ## When to Use This Skill
17
18 - 2. Task-Based (best for tool collections)
19 - - Works well when the skill offers different operations/capabilities
20 - - Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" →
- "Extract Text"
21 - - Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task
- Category 2...
18 + Use this skill when:
19 + - Creating concept maps, mind maps, or knowledge graphs
20 + - Visualizing relationships between topics, ideas, or entities
21 + - Building interactive diagrams for educational content
22 + - Converting vis-network data into standalone p5.js visualizations
23 + - Creating hover-based information exploration interfaces
24
25 - 3. Reference/Guidelines (best for standards or specifications)
26 - - Works well for brand guidelines, coding standards, or requirements
27 - - Example: Brand styling with "Brand Guidelines" → "Colors" →
- "Typography" → "Features"
28 - - Structure: ## Overview → ## Guidelines → ## Specifications → ##
- Usage...
25 + ## Key Differences from MicroSim
26
27 - 4. Capabilities-Based (best for integrated systems)
28 - - Works well when the skill provides multiple interrelated features
29 - - Example: Product Management with "Core Capabilities" → numbered
- capability list
30 - - Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ###
- 2. Feature...
27 + 1. Control Region Purpose: The control area ONLY displays details of
+ the hovered item (no sliders, buttons, or other controls)
28 + 2. Data-Driven: Reads node and edge data from data.json file
29 + 3. Interaction Model: Primarily hover-based exploration rather than
+ parameter manipulation
30 + 4. Layout: Nodes have fixed positions defined in the data file
31
32 - Patterns can be mixed and matched as needed. Most skills combine
- patterns (e.g., start with task-based, add workflow for complex
- operations).
32 + ## Development Process
33
34 - Delete this entire "Structuring This Skill" section when done - it's
- just guidance.]
34 + ### Step 1: Define Infographic Requirements
35
36 - ## [TODO: Replace with the first main section based on chosen structure]
36 + Gather the following information:
37
38 - [TODO: Add content here. See examples in existing skills:
39 - - Code samples for technical skills
40 - - Decision trees for complex workflows
41 - - Concrete examples with realistic user requests
42 - - References to scripts/templates/references as needed]
38 + 1. Subject Area: What topic does this infographic visualize?
39 + 2. Audience Level: Elementary, Middle School, High School,
+ Undergraduate, Graduate
40 + 3. Node Types: What categories/groups of nodes exist?
41 + 4. Relationships: What do the edges represent?
42 + 5. Data Source: Where will the node/edge data come from?
43
44 - ## Resources
44 + ### Step 2: Prepare Data File (data.json)
45
46 - This skill includes example resource directories that demonstrate how to
- organize different types of bundled resources:
46 + Create a JSON file following the vis-network format with metadata,
+ groups, nodes, and edges:
47
48 - ### scripts/
49 - Executable code (Python/Bash/etc.) that can be run directly to perform
- specific operations.
48 + json
49 + {
50 + "metadata": {
51 + "title": "Topic Overview",
52 + "description": "An interactive infographic showing relationships
+ between concepts",
53 + "author": "Your Name",
54 + "created": "2025-01-09"
55 + },
56 + "groups": {
57 + "foundation": {
58 + "color": "#FF6B6B",
59 + "borderColor": "#C92A2A",
60 + "shape": "ellipse"
61 + },
62 + "intermediate": {
63 + "color": "#4ECDC4",
64 + "borderColor": "#0B7285",
65 + "shape": "box"
66 + }
67 + },
68 + "nodes": [
69 + {
70 + "id": 1,
71 + "label": "Concept Name",
72 + "group": "foundation",
73 + "x": 100,
74 + "y": 100,
75 + "shortDescription": "Brief one-sentence description for tooltip",
76 + "fullDescription": "Detailed paragraph about this concept. Can
+ include <a href='url'>links</a> and formatting."
77 + }
78 + ],
79 + "edges": [
80 + {
81 + "from": 1,
82 + "to": 2,
83 + "label": "depends on",
84 + "color": "#999999",
85 + "width": 2
86 + }
87 + ]
88 + }
89 +
90
91 - Examples from other skills:
92 - - PDF skill: fill_fillable_fields.py, extract_form_field_info.py -
- utilities for PDF manipulation
93 - - DOCX skill: document.py, utilities.py - Python modules for
- document processing
91 + ### Step 3: Generate Infographic Files
92
93 - Appropriate for: Python scripts, shell scripts, or any executable
- code that performs automation, data processing, or specific operations.
93 + Create the following folder structure in
+ /docs/sims/$INFOGRAPHIC_NAME/:
94
95 - Note: Scripts may be executed without loading into context, but can
- still be read by Claude for patching or environment adjustments.
95 + 96 + /docs/sims/$INFOGRAPHIC_NAME/
97 + ├── index.md # Documentation page with iframe
98 + ├── main.html # HTML file with p5.js CDN
99 + ├── $INFOGRAPHIC_NAME.js # p5.js JavaScript code
100 + └── data.json # Node and edge data
101 +
102
103 - ### references/
104 - Documentation and reference material intended to be loaded into context
- to inform Claude's process and thinking.
103 + ## Technical Architecture
104
105 - Examples from other skills:
106 - - Product management: communication.md, context_building.md -
- detailed workflow guides
107 - - BigQuery: API reference documentation and query examples
108 - - Finance: Schema documentation, company policies
105 + ### Canvas Structure (REQUIRED)
106
107 - Appropriate for: In-depth documentation, API references, database
- schemas, comprehensive guides, or any detailed information that Claude
- should reference while working.
107 + Every infographic must have two regions:
108
109 - ### assets/
110 - Files not intended to be loaded into context, but rather used within the
- output Claude produces.
109 + 1. Drawing Region (top): Displays nodes, edges, labels, and tooltips
110 + 2. Detail Display Region (bottom): Shows full description of hovered
+ item
111
112 - Examples from other skills:
113 - - Brand styling: PowerPoint template files (.pptx), logo files
114 - - Frontend builder: HTML/React boilerplate project directories
115 - - Typography: Font files (.ttf, .woff2)
112 + javascript
113 + // Canvas dimensions - REQUIRED structure
114 + let canvasWidth = 800; // Initial width (responsive)
115 + let drawHeight = 600; // Drawing area height
116 + let controlHeight = 120; // Detail display area height
117 + let canvasHeight = drawHeight + controlHeight;
118 + let margin = 20; // Margin for visual elements
119 + let defaultTextSize = 16; // Base text size
120
121 - **Appropriate for:** Templates, boilerplate code, document templates,
- images, icons, fonts, or any files meant to be copied or used in the
- final output.
121 + // Data variables
122 + let infographicData;
123 + let nodes = [];
124 + let edges = [];
125 + let groups = {};
126 + let hoveredNode = null;
127 + let tooltipData = null;
128
129 + function preload() {
130 + infographicData = loadJSON('data.json');
131 + }
132 +
133 + function setup() {
134 + updateCanvasSize();
135 + const canvas = createCanvas(canvasWidth, canvasHeight);
136 + canvas.parent(document.querySelector('main'));
137 +
138 + // Parse data
139 + parseData();
140 +
141 + describe('Interactive infographic showing concept relationships',
+ LABEL);
142 + }
143 +
144 + function draw() {
145 + updateCanvasSize();
146 +
147 + // Drawing area background
148 + fill('aliceblue');
149 + rect(0, 0, width, drawHeight);
150 +
151 + // Detail display area background
152 + fill('white');
153 + rect(0, drawHeight, width, controlHeight);
154 +
155 + // Draw edges first (behind nodes)
156 + drawEdges();
157 +
158 + // Draw nodes
159 + drawNodes();
160 +
161 + // Draw tooltip if hovering over a node
162 + drawTooltip();
163 +
164 + // Draw detail panel for hovered node
165 + drawDetailPanel();
166 + }
167 +
168 +
169 + ### Data Parsing
170 +
171 + javascript
172 + function parseData() {
173 + // Parse groups
174 + if (infographicData.groups) {
175 + groups = infographicData.groups;
176 + }
177 +
178 + // Parse nodes
179 + nodes = infographicData.nodes.map(n => ({
180 + id: n.id,
181 + label: n.label || '',
182 + x: n.x || 0,
183 + y: n.y || 0,
184 + group: n.group || 'default',
185 + shortDescription: n.shortDescription || '',
186 + fullDescription: n.fullDescription || '',
187 + shape: n.shape || (groups[n.group]?.shape || 'ellipse'),
188 + color: n.color || (groups[n.group]?.color || '#97C2FC'),
189 + borderColor: n.borderColor || (groups[n.group]?.borderColor ||
+ '#2B7CE9'),
190 + borderWidth: n.borderWidth || 2,
191 + size: n.size || 40,
192 + icon: n.icon || null
193 + }));
194 +
195 + // Parse edges
196 + edges = infographicData.edges.map(e => ({
197 + from: e.from,
198 + to: e.to,
199 + label: e.label || '',
200 + color: e.color || '#848484',
201 + width: e.width || 1,
202 + dashes: e.dashes || false,
203 + smooth: e.smooth || { type: 'continuous', roundness: 0.5 }
204 + }));
205 + }
206 +
207 +
208 + ### Node Drawing
209 +
210 + javascript
211 + function drawNodes() {
212 + hoveredNode = null;
213 +
214 + for (let node of nodes) {
215 + // Check if mouse is hovering over this node
216 + let d = dist(mouseX, mouseY, node.x, node.y);
217 + let isHovered = d < node.size;
218 +
219 + if (isHovered && mouseY < drawHeight) {
220 + hoveredNode = node;
221 + }
222 +
223 + // Draw node shape
224 + push();
225 + stroke(node.borderColor);
226 + strokeWeight(isHovered ? node.borderWidth + 1 : node.borderWidth);
227 + fill(node.color);
228 +
229 + if (node.shape === 'ellipse' || node.shape === 'circle') {
230 + ellipse(node.x, node.y, node.size * 2);
231 + } else if (node.shape === 'box' || node.shape === 'square') {
232 + rectMode(CENTER);
233 + rect(node.x, node.y, node.size * 1.8, node.size * 1.8);
234 + } else if (node.shape === 'diamond') {
235 + drawDiamond(node.x, node.y, node.size);
236 + }
237 +
238 + // Draw icon if available
239 + if (node.icon) {
240 + // Icon drawing code here
241 + }
242 +
243 + pop();
244 +
245 + // Draw label
246 + fill(0);
247 + noStroke();
248 + textAlign(CENTER, CENTER);
249 + textSize(14);
250 + text(node.label, node.x, node.y + node.size + 15);
251 + }
252 + }
253 +
254 + function drawDiamond(x, y, size) {
255 + beginShape();
256 + vertex(x, y - size); // top
257 + vertex(x + size, y); // right
258 + vertex(x, y + size); // bottom
259 + vertex(x - size, y); // left
260 + endShape(CLOSE);
261 + }
262 +
263 +
264 + ### Edge Drawing
265 +
266 + javascript
267 + function drawEdges() {
268 + for (let edge of edges) {
269 + let fromNode = nodes.find(n => n.id === edge.from);
270 + let toNode = nodes.find(n => n.id === edge.to);
271 +
272 + if (!fromNode || !toNode) continue;
273 +
274 + push();
275 + stroke(edge.color);
276 + strokeWeight(edge.width);
277 +
278 + if (edge.dashes) {
279 + drawingContext.setLineDash([5, 5]);
280 + }
281 +
282 + // Draw curved or straight line based on smooth parameter
283 + if (edge.smooth && edge.smooth.type === 'curvedCW') {
284 + // Draw curved line clockwise
285 + noFill();
286 + let controlX = (fromNode.x + toNode.x) / 2 + 50;
287 + let controlY = (fromNode.y + toNode.y) / 2;
288 + bezier(fromNode.x, fromNode.y, controlX, controlY,
289 + controlX, controlY, toNode.x, toNode.y);
290 + } else {
291 + // Draw straight line
292 + line(fromNode.x, fromNode.y, toNode.x, toNode.y);
293 + }
294 +
295 + drawingContext.setLineDash([]);
296 + pop();
297 +
298 + // Draw edge label if exists
299 + if (edge.label) {
300 + let midX = (fromNode.x + toNode.x) / 2;
301 + let midY = (fromNode.y + toNode.y) / 2;
302 + fill(100);
303 + noStroke();
304 + textAlign(CENTER, CENTER);
305 + textSize(12);
306 + text(edge.label, midX, midY);
307 + }
308 + }
309 + }
310 +
311 +
312 + ### Tooltip Display (REQUIRED)
313 +
314 + Tooltips must always remain visible within the drawing area, even when
+ hovering near edges:
315 +
316 + javascript
317 + function drawTooltip() {
318 + if (!hoveredNode || mouseY >= drawHeight) return;
319 +
320 + let tooltipText = hoveredNode.shortDescription;
321 + if (!tooltipText) return;
322 +
323 + // Measure tooltip dimensions
324 + textSize(14);
325 + let tooltipWidth = textWidth(tooltipText) + 20;
326 + let tooltipHeight = 30;
327 + let padding = 10;
328 +
329 + // Position tooltip near mouse, but keep within drawing bounds
330 + let tooltipX = mouseX + 15;
331 + let tooltipY = mouseY - 20;
332 +
333 + // Adjust if tooltip would go off right edge
334 + if (tooltipX + tooltipWidth > width - padding) {
335 + tooltipX = mouseX - tooltipWidth - 15;
336 + }
337 +
338 + // Adjust if tooltip would go off left edge
339 + if (tooltipX < padding) {
340 + tooltipX = padding;
341 + }
342 +
343 + // Adjust if tooltip would go off top edge
344 + if (tooltipY < padding) {
345 + tooltipY = mouseY + 20;
346 + }
347 +
348 + // Adjust if tooltip would go off bottom of drawing area
349 + if (tooltipY + tooltipHeight > drawHeight - padding) {
350 + tooltipY = drawHeight - tooltipHeight - padding;
351 + }
352 +
353 + // Draw tooltip background
354 + push();
355 + fill(255, 255, 220);
356 + stroke(150);
357 + strokeWeight(1);
358 + rect(tooltipX, tooltipY, tooltipWidth, tooltipHeight, 5);
359 +
360 + // Draw tooltip text
361 + fill(0);
362 + noStroke();
363 + textAlign(LEFT, CENTER);
364 + textSize(14);
365 + text(tooltipText, tooltipX + 10, tooltipY + tooltipHeight / 2);
366 + pop();
367 + }
368 +
369 +
370 + ### Detail Panel Display (REQUIRED)
371 +
372 + The control region exclusively displays the full description of the
+ hovered item:
373 +
374 + javascript
375 + function drawDetailPanel() {
376 + push();
377 + fill(0);
378 + noStroke();
379 + textAlign(LEFT, TOP);
380 + textSize(defaultTextSize);
381 +
382 + let panelX = margin;
383 + let panelY = drawHeight + 10;
384 + let panelWidth = width - 2 * margin;
385 +
386 + if (hoveredNode) {
387 + // Display node label as header
388 + textSize(18);
389 + textStyle(BOLD);
390 + text(hoveredNode.label, panelX, panelY);
391 +
392 + // Display full description
393 + textSize(defaultTextSize);
394 + textStyle(NORMAL);
395 +
396 + // Note: p5.js doesn't render HTML, so strip tags for display
397 + let displayText = hoveredNode.fullDescription.replace(/<[^>]*>/g,
+ '');
398 +
399 + // Wrap text to fit panel width
400 + let words = displayText.split(' ');
401 + let line = '';
402 + let y = panelY + 25;
403 +
404 + for (let word of words) {
405 + let testLine = line + word + ' ';
406 + if (textWidth(testLine) > panelWidth && line.length > 0) {
407 + text(line, panelX, y);
408 + line = word + ' ';
409 + y += 20;
410 + } else {
411 + line = testLine;
412 + }
413 + }
414 + text(line, panelX, y);
415 + } else {
416 + // Default message when nothing is hovered
417 + textStyle(ITALIC);
418 + fill(100);
419 + text('Hover over a concept to see details...', panelX, panelY);
420 + }
421 +
422 + pop();
423 + }
424 +
425 +
426 + ### Responsive Design (REQUIRED)
427 +
428 + javascript
429 + function windowResized() {
430 + updateCanvasSize();
431 + resizeCanvas(canvasWidth, canvasHeight);
432 + }
433 +
434 + function updateCanvasSize() {
435 + const container = document.querySelector('main');
436 + if (container) {
437 + canvasWidth = container.offsetWidth;
438 + }
439 + }
440 +
441 +
442 + ## File Templates
443 +
444 + ### main.html Template
445 +
446 + html
447 + <!DOCTYPE html>
448 + <html lang="en">
449 + <head>
450 + <meta charset="UTF-8">
451 + <title>Infographic Title</title>
452 + <script
+ src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
453 + <style>
454 + body {
455 + margin: 0px;
456 + padding: 0px;
457 + font-family: Arial, Helvetica, sans-serif;
458 + }
459 + </style>
460 + <script src="infographic-name.js"></script>
461 + </head>
462 + <body>
463 + <main></main>
464 + <br/>
465 + <a href=".">Back to Documentation</a>
466 + </body>
467 + </html>
468 +
469 +
470 + ### index.md Template
471 +
472 + markdown
473 ---
474 + title: Infographic Title
475 + description: Brief description of the infographic content
476 + ---
477
478 - **Any unneeded directories can be deleted.** Not every skill requires
- all three types of resources.
478 + # Infographic Title
479 +
480 + <iframe src="main.html" height="722px" scrolling="no"></iframe>
481 +
482 + `[View Fullscreen](./main.html){ .md-button .md-button--primary }
483 +
484 + ## Description
485 +
486 + [Description of what this infographic visualizes]
487 +
488 + ## How to Use
489 +
490 + 1. **Hover** over any concept to see a brief description
491 + 2. **Read** the detailed information in the panel below the diagram
492 + 3. **Explore** the relationships shown by the connecting lines
493 +
494 + ## Legend
495 +
496 + [Explanation of colors, shapes, and edge types]
497 +
498 +
499 + ## Data Format Specification
500 +
501 + ### Node Properties
502 +
503 + Each node in the nodes array supports these properties:
504 +
505 + - id (required): Unique integer identifier
506 + - label (required): Display text (max 30 characters recommended)
507 + - x (required): Horizontal position in pixels
508 + - y (required): Vertical position in pixels
509 + - shortDescription (required): One-sentence tooltip text (no HTML)
510 + - fullDescription (required): Detailed paragraph (can include HTML
+ links)
511 + - group (optional): Group identifier for styling
512 + - shape (optional): 'ellipse', 'box', 'diamond', 'circle', 'square'
513 + - color (optional): Fill color (hex or named color)
514 + - borderColor (optional): Border color
515 + - borderWidth (optional): Border thickness in pixels
516 + - size (optional): Node radius/size in pixels
517 + - icon (optional): Icon identifier (future use)
518 +
519 + ### Edge Properties
520 +
521 + Each edge in the edges array supports these properties:
522 +
523 + - from (required): Source node ID
524 + - to (required): Target node ID
525 + - label (optional): Text label for the edge
526 + - color (optional): Edge color (default: '#999999')
527 + - width (optional): Line thickness (default: 1)
528 + - dashes (optional): Boolean for dashed line (default: false)
529 + - smooth (optional): Object with type and roundness for curved edges
530 +
531 + ### Group Properties
532 +
533 + Groups define default styling for node categories:
534 +
535 + - color: Default fill color for nodes in this group
536 + - borderColor: Default border color
537 + - shape: Default shape type
538 +
539 + ## Quality Standards
540 +
541 + Every infographic must meet these criteria:
542 +
543 + - ✅ Loads and parses data.json without errors
544 + - ✅ All nodes are visible and properly positioned
545 + - ✅ Tooltips remain within drawing bounds
546 + - ✅ Detail panel displays full descriptions correctly
547 + - ✅ Responsive design adapts to container width
548 + - ✅ Clear visual hierarchy and readable labels
549 + - ✅ Edges don't obscure important information
550 +
551 + ## Deployment
552 +
553 + After generating the infographic files:
554 +
555 + 1. Place the folder in /docs/sims/$INFOGRAPHIC_NAME/
556 + 2. Update mkdocs.yml navigation to include the new infographic
557 + 3. Test locally with mkdocs serve
558 + 4. Deploy with mkdocs gh-deploy
559 +
560 + ## Common Use Cases
561 +
562 + ### Concept Maps
563 + Show relationships between educational concepts with hierarchical or
+ network structures.
564 +
565 + ### Timeline Visualizations
566 + Display historical events or process steps as connected nodes.
567 +
568 + ### System Diagrams
569 + Visualize components and their relationships in complex systems.
570 +
571 + ### Knowledge Graphs
572 + Create explorable networks of related topics or ideas.
573 +
574 + ## References
575 +
576 + This skill uses vis-network compatible data formats. For detailed
+ parameter documentation, see references/vis-network-parameters.md.
577 +
578 + Template files are available in assets/ for quick start:
579 + - assets/template-main.html
580 + - assets/template-infographic.js
581 + - assets/template-data.json
⏺ Bash(rm skills/infograph-generator-p5/infograph-generator-p5/assets/example_asset.txt && rm skills/infograph-generator-p5/infograph-generator-p5/scripts/example.py) ⎿ (No content)
⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/assets/template-main.html)
⎿ Wrote 23 lines to
skills/infograph-generator-p5/infograph-generator-p5/assets/template-main.html
<!DOCTYPE html>