vis-network_skill

Overview

This skill generates an educational MicroSim using the vis-network JavaScript library following a standardized, textbook-friendly layout. It produces a self-contained directory under /docs/sims with responsive HTML, CSS, and JavaScript, plus metadata and documentation for iframe embedding. The default layout puts the graph on the left, controls on the right, a centered title, and a legend in the upper-left for clear teaching workflows.

How this skill works

The skill scaffolds a MicroSim folder with main.html, style.css, the vis-network JS module, an index documentation file, and metadata.json. It configures vis-network options for fixed node layouts, disabled mouse zoom/pan when embedded in an iframe, and always-on navigation buttons. Utility functions detect iframe vs fullscreen and a URL-controlled editor mode enables node dragging and save-to-JSON functionality for manual positioning.

When to use it

• To create compact, browser-based interactive simulations for textbooks or course pages.
• When you need consistent, accessible vis-network visualizations that embed inside iframes without interfering with page scroll.
• For lessons that require step-driven walkthroughs, visible controls, and a legend for interpretation.
• When educators want an editor mode to adjust node positions and export layout JSON.
• To produce lightweight demos that work across desktops and touch devices.

Best practices

• Disable mouse wheel zoom and dragView when the MicroSim runs inside an iframe; enable navigation buttons for discoverability.
• Keep physics disabled and use fixed node positions for pedagogical clarity and reproducibility.
• Design MicroSims to run in 5–15 minute interactions with clear learning objectives and assessment prompts.
• Use the URL parameter enable-save=true to permit node dragging and to surface save controls only in editor mode.
• Provide clear legend entries and step counters to guide learners through each simulation stage.

Example use cases

• Three-color DFS visualization for algorithm classes with step progression and explanations.
• Ecosystem interaction demo showing species nodes and directed edges with states highlighted by legend colors.
• Network flow micro-simulation to teach bottlenecks, with next/reset controls and view presets.
• Classroom activity where students reposition nodes in editor mode and export layout JSON for assignments.
• Interactive concept map embedded in an online chapter so students explore dependencies without page-scroll conflicts.