Learning Graph Viewer V1

Copy this iframe to your website:

<iframe src="https://dmccreary.github.io/signal-processing/sims/graph-viewer-v1/main.html" width="100%" height="807px" scrolling="no"></iframe>

Run MicroSim in Fullscreen

Description

Superseded by the Learning Graph Viewer

This is the deprecated first version (v1) of the learning graph viewer. It is superseded by the current Learning Graph Viewer, which adds search, taxonomy filtering and graph statistics. This page, and the earlier view-graph* experiments it links to, are kept for reference only.

This MicroSim draws the learning graph of this textbook: 200 concepts (nodes) joined by 370 directed prerequisite edges, read from signal-processing-concepts.json. Each arrow points from a concept to one of its prerequisites, so an arrowhead lands on the idea that must be understood first. Node color is the taxonomy group named in the legend (12 groups, from Math Foundations to AI & Machine Learning).

The layout is computed in two steps. A force-directed solver (ForceAtlas2) first lets every node settle. Physics is then switched off, the 27 Math Foundations nodes are pinned to the left edge, and the 10 Applications and AI & Machine Learning nodes are pinned to the right edge. Read from right to left, the arrows run from the goal concepts back to the mathematics they rest on.

The viewer has no sliders. Drag a node to move it, drag the background to pan, scroll to zoom, and click a node to select it and highlight its edges. The ☰ button hides or shows the legend. The mathematical background behind the left column is covered in Chapter 1: Mathematical Foundations, and the way learning graphs are built is described on the Learning Graph page.

Lesson Plan

Learning Objectives

After using this MicroSim, a student can:

Identify the taxonomy group of a concept from its node color and the legend.
Trace a prerequisite chain by following arrows from a concept back to a Math Foundations node.
Explain how fixed: { x: true, y: false } pins a node to a column while leaving it free to move vertically.
Compare the number of arrows arriving at hub concepts such as Filtering and Signals with the number arriving at a typical concept to judge which concepts are most foundational.

Target Audience

College undergraduates in an introductory signal processing course, and instructors who are designing a learning graph for an intelligent textbook.

Prerequisites

Directed-graph vocabulary: node, edge, arrow, path.
Familiarity with the list of topics in the course description.
Optional: basic JavaScript, for the code-reading questions.

Activities

Read the legend. Match each of the 12 legend colors to nodes in the graph. Expected: the red Math Foundations nodes form one column on the left edge and the green Applications and purple AI & Machine Learning nodes form one column on the right edge. Labels in the two columns overlap, so drag nodes up or down to read them.
Trace a prerequisite chain. Start at Fast Fourier Transform (yellow, Fourier Analysis) and follow one arrow at a time: Fast Fourier Transform, Discrete Fourier Transform, Fourier Transform, Fourier Series, Periodic Signals, Signals, Real Numbers. Expected: 6 arrows, ending on a red node in the left column. Following every arrow from Fast Fourier Transform reaches 10 distinct prerequisite concepts.
Compare pinned and free nodes. Drag Trigonometry (red, left column) diagonally toward the center. Expected: it slides only up or down and its horizontal position does not change. Now drag Unit Circle (gray, Other Transforms) the same way. Expected: it follows the pointer in both directions.
Find the hubs. Click Filtering (lavender). Expected: 37 edges are highlighted, 35 arrows that arrive at it from concepts that list Filtering as a prerequisite and 2 that leave it. Repeat for Signals (28 arrows arrive, 29 edges highlighted), Fourier Transform (21 arrive, 24 highlighted) and Systems (17 arrive, 18 highlighted), the next three busiest prerequisites.

Assessment

Which taxonomy groups are pinned, and to which side of the graph?

Math Foundations (group MATH) is pinned to the left. Applications (APP) and AI & Machine Learning (AI) are pinned to the right.
In the data file an edge reads {"from": 2, "to": 1}, joining Complex Numbers (2) and Real Numbers (1). At which node is the arrowhead drawn, and what does that say about the two concepts?

At Real Numbers. Complex Numbers depends on Real Numbers, so Real Numbers is the prerequisite.
Why does the code use fixed: { x: true, y: false } instead of fixed: true?

The nodes must stay in their column, so x is locked, but y is left free so that the overlapping labels in the column can be pulled apart by dragging.
Why does the script wait for the stabilizationIterationsDone event before pinning the nodes?

Physics runs first with every node free, so the solver can settle the whole graph. Only afterwards is physics switched off and the pinned groups moved to x = -1200 and x = 1200 and locked in x.
Which concepts have no prerequisites at all?

Real Numbers, Vectors, Differential Calculus, Integral Calculus, Probability Theory and Trigonometry. All six are Math Foundations nodes and have no outgoing arrow.

Common Misconceptions

"Arrows point from a prerequisite to the concept it unlocks." In this graph the arrowhead is at the prerequisite. Following arrows takes you down toward the basics, as Activity 2 shows.
"A node's horizontal position tells how advanced it is." Only the pinned columns are placed by rule (left for Math Foundations, right for Applications and AI). Every other position comes from the physics layout and changes from one page load to the next. Group membership is carried by color, not by position.

References

vis-network documentation - visjs.org - options for physics, node fixing and interaction used by this viewer
vis-network on GitHub - GitHub - source and release history of the library, pinned here at version 9.1.9
Force-directed graph drawing - Wikipedia - background on the layout algorithm family that ForceAtlas2 belongs to
Directed acyclic graph - Wikipedia - the structure of a prerequisite graph
Concept map - Wikipedia - the educational tool that learning graphs formalize

Development Notes

How the pinning works

The current graph-viewer.js waits for the physics solver to stabilize, then fixes the x position of the Math Foundations group on the left and the Applications and AI groups on the right:

network.once('stabilizationIterationsDone', function () {
  network.setOptions({ physics: { enabled: false } });
  const updatedNodes = [];
  nodes.forEach(function (node) {
    if (node.group === "MATH") {
      updatedNodes.push({ id: node.id, x: -1200, group: node.group, fixed: { x: true, y: false } });
    } else if (node.group === "APP" || node.group === "AI") {
      updatedNodes.push({ id: node.id, group: node.group, x: 1200, fixed: { x: true, y: false } });
    }
  });
  nodes.update(updatedNodes);
});

Earlier generations

Before the group-based pinning above, the first experiment changed a standard vis.js template to pin nodes in the found (foundation) group to the left and nodes in the goal group to the right, drawn as red boxes and gold stars:

// Extract nodes from the JSON data
const nodes = new vis.DataSet(data.nodes);

// Function to fix the x positions for foundation and goal groups after JSON load
// and set red boxes for foundation and gold stars for goals
nodes.forEach(function (node) {
    if (node.group === "found") {
        node.x = -900;
        node.fixed = { x: true, y: false }; // Fix x, but let y be adjusted by physics
        node.shape = "box";
        node.color = "red";
        node.font = {"color": "white"};
    } else if (node.group === "goal") {
        node.x = 900;
        node.fixed = { x: true, y: false }; // Fix x, but let y be adjusted by physics
        node.shape = "star";
        node.color = "gold";
    }
});

The three earlier viewer pages are kept in this directory unchanged apart from pinning the library version. They read a graph-data.json file that is no longer in the directory, so they currently show an empty network.