Vis.js Tutorials For Learning Graphs

This section provides guidelines for using the vis.js JavaScript library for displaying and editing learning graphs. We focus on the key features of vis.js to support the following key features of a learning graph:

Automatic layout of concepts using a force-directed graph layout engine
Support for displaying legends
Support for using groups to display taxonomies
Clustering to hide group complexity

Why vis.js for Learning Graph Networks

Although there are many JavaScript libraries that display graph networks, vis.js has a good combination of default features, sample code and an active developer community that makes it a good fit for learning graph networks.

Overview of Steps

Learning Graph File Setup Steps

Use generative AI to generate a CSV file of a learning graph.
1. Create a clear course description with prerequisites and goals using [Bloom's Taxonomy]
2. Enumerate Concepts
3. Find Concept dependencies
4. Generate a taxonomy of concepts and place in groups section of a graph.json file
5. Add a classifier to each Concept
6. Validate the learning graph network
Convert this learning graph to JSON format.
Use an enricher to add group="1" to all foundational concepts and group="12" to goals

Learning Graph Visualization

Load graph data from a JSON file and the legend from groups.json
Log any problems such as missing foundation, goals or orphan nodes and set NODE_COUNT
Count the number of nodes and estimate the graph X-dimension CANVAS-WIDTH
Run the enrich_nodes() function which will:
1. Add a x=-CANVAS_WIDTH/2 to foundation nodes and set the shape to "box"
2. Add a x=CANVAS_WIDTH/2 to goal nodes and set the shape to be "star"