Skip to content

Learning Graph Viewer

Copy this iframe to your website:

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

Run MicroSim in Fullscreen

Description

This viewer draws the learning graph of this course: a directed network of the 200 concepts taught in the book, joined by 262 arrows. Each node is a concept. In this book's learning-graph.json an arrow runs from a prerequisite to a concept that depends on it, so the arrow from Real Numbers to Complex Numbers means that Real Numbers should be understood first. The color of a node shows its taxonomy category, and the layout comes from a force-directed physics solver, so the position of a node on the screen carries no meaning.

  • Search Concepts (top of the sidebar) lists up to 10 concepts whose names contain the text you type (two or more characters), each with its category. Click a result to zoom to that node and select it; the concepts that are not connected to it fade for about three seconds. The search covers all 200 concepts, including hidden categories.
  • Categories shows one checkbox per taxonomy category, with its color and concept count. Check All and Uncheck All set all 12 at once.
  • Statistics shows the number of Visible Nodes, the number of Visible Edges (an edge is visible when both of its ends are visible) and Foundational, the visible concepts that have no outgoing arrow. See the note on this number under Common Misconceptions.
  • Menu button (the three bars at the top right of the sidebar header) collapses the sidebar to give the graph more room.
  • Mouse: drag a node to move it, scroll to zoom and drag the background to pan. Concept names are drawn once you zoom in far enough to read them; when the whole graph is in view the boxes are too small for text.
  • A version badge (v1.04) sits at the top right of the graph. It is the version of the viewer template.

The graph settles for about five seconds and then the physics solver stops. Dragging a node switches it back on until you release the node. The viewer reads learning-graph.json from the learning-graph folder, so it always shows the current graph of the book.

The viewer sizes each box by the node's Concept Impact Score (cis) when the JSON file contains one. This book's learning-graph.json was generated before that field existed, so every box is drawn at the same size.

The 12 Categories

Code Category Color Concepts
MATH Mathematical Foundations dark red #8B0000 25
SIG Signal Fundamentals orange-red #FF4500 25
SYS System Properties gold #FFD700 20
CONV Convolution and Correlation lime green #32CD32 10
SAMP Sampling and Quantization blue #1E90FF 15
FOUR Fourier Analysis purple #9370DB 20
XFRM Advanced Transforms deep pink #FF1493 15
FILT Filter Design turquoise #00CED1 25
ADAP Adaptive Processing pink #FF69B4 10
RAND Stochastic Processes brown #8B4513 10
ADVN Advanced Topics indigo #4B0082 15
APPL Applications and AI dark slate #2F4F4F 10

Ways to Use It

  • Course planning: show only the categories of one unit to design a lesson sequence.
  • Concept exploration: search for a concept and see which concepts feed into it and which depend on it.
  • Gap analysis: select a concept with all categories visible and note the arrows into it, then show only your chosen categories. The arrows that disappear started in categories you still need to add.
  • Progressive learning: start with the foundation categories and enable the advanced ones gradually.

Lesson Plan

Learning Objectives

After using this MicroSim, students will be able to:

  • Identify the prerequisites of a concept by tracing the arrows that point into its node.
  • Use the category checkboxes to isolate one category and predict the node and edge counts before reading them from the statistics.
  • Explain why the edge count jumps when a second category is shown, even though the node count only adds the new concepts.
  • Locate a concept with the search box and state which category it belongs to.
  • Evaluate a study sequence by deciding which categories must be shown together so that every visible concept has all of its prerequisites on the screen.

Target Audience

Undergraduate students and instructors in a first signal processing course who want to see how the concepts of the book depend on each other, and course designers who plan the order of topics.

Prerequisites

No signal processing background is needed. Students should know what a prerequisite is and should be able to read a directed graph (a node-and-arrow diagram).

Activities

Activity 1: Read the whole graph (5 min). Open the viewer with all 12 boxes checked. The statistics read Visible Nodes 200, Visible Edges 262 and Foundational 112. Click Uncheck All: all three counts fall to 0 and the canvas is empty. Check only Mathematical Foundations: the counts become 25 nodes, 27 edges and 9 foundational. Zoom in with the scroll wheel until the concept names appear.

Activity 2: Edges need both ends (10 min). Click Uncheck All and check only System Properties: 20 nodes and 5 edges. Uncheck it and check only Signal Fundamentals: 25 nodes and 22 edges. Predict the edge count when both are checked, then try it: 45 nodes and 46 edges, which is \(5 + 22 + 19\). The extra 19 arrows run from Signal Fundamentals into System Properties. They were hidden before because one end of each was hidden.

Activity 3: Find a concept (5 min). Click Check All, click the search box and type convolution. Five concepts are listed: Convolution, Discrete Convolution, Circular Convolution and Convolution Theorem (all in Convolution and Correlation), and Convolutional Neural Networks (Applications and AI). Click Convolution: the view zooms to the node and the concepts that are not connected to it fade for about three seconds. Count the arrows that point into it: three, from Integral Calculus, Signals and Systems.

Activity 4: Plan a study path (10 min). Click Uncheck All and check only Convolution and Correlation: 10 nodes and 8 edges. Add Signal Fundamentals: 35 nodes and 34 edges. Add Mathematical Foundations as well: 60 nodes and 70 edges. Every arrow that enters a Convolution and Correlation concept starts in one of these three categories, so these 60 concepts are a self-contained study unit.

Assessment

  1. With all 12 categories checked, what do the three statistics read?

    Visible Nodes 200, Visible Edges 262 and Foundational 112.

  2. Only System Properties is checked and the viewer reports 5 edges. Signal Fundamentals is then checked as well and the edge count becomes 46. Explain the jump.

    Most arrows that touch System Properties concepts come from Signal Fundamentals (19 of them). An edge is counted only when both ends are visible. Checking Signal Fundamentals adds its own 22 edges and the 19 edges that connect the two categories: \(5 + 22 + 19 = 46\).

  3. Which three concepts are direct prerequisites of Convolution?

    Integral Calculus, Signals and Systems.

  4. How many concepts match the search text convolution, and which category does the last one belong to?

    Five. The last, Convolutional Neural Networks, is in Applications and AI. The search covers hidden categories too.

  5. A student wants to study Fourier Analysis. Which other categories must be shown so that every Fourier Analysis concept has all of its prerequisites on the screen, and what do the statistics read?

    Mathematical Foundations and Signal Fundamentals. Every arrow into a Fourier Analysis concept starts in one of those two categories or in Fourier Analysis itself. The statistics read 70 nodes and 81 edges.

Common Misconceptions

"An arrow points from a concept to the things it needs." In this book's graph the arrows point from a prerequisite to the concept that depends on it. Search for Real Numbers: it has no arrow pointing in, and 13 arrows leave it. It is the only concept in the graph with no prerequisite.

"Foundational counts the concepts that have no prerequisites." The viewer's Foundational statistic counts visible concepts that have no outgoing arrow. The viewer template assumes that an arrow runs from a concept to its prerequisite, but this book's learning-graph.json stores the arrows the other way round. So for this book the statistic counts the concepts that nothing else depends on (112 of the 200, such as the end points of a study path), and not the concepts without prerequisites (only Real Numbers). Regenerating learning-graph.json with the current learning-graph generator would reverse the stored arrows and also add the Concept Impact Scores.

References

  1. Directed acyclic graph - Wikipedia - the graph structure that a learning graph uses so that prerequisites never form a cycle
  2. Concept map - Wikipedia - the node-and-link diagram idea that a learning graph formalizes
  3. Knowledge space - Wikipedia - the theory of prerequisite structure among concepts that underlies adaptive learning
  4. Topological sorting - Wikipedia - how a valid study order is derived from the arrows
  5. vis-network documentation - vis.js project - the library that draws the graph

Development Notes

  • This is the v1.04 viewer template from the book-installer skill (references/assets/): main.html, script.js and local.css are installed unchanged, except that main.html carries the book title and pins vis-network (see the next note). The page you are reading replaces the installer's generic index.md.
  • The viewer loads vis-network 10.1.2. The template's unversioned unpkg.com/vis-network URL resolved to that release when this was installed; it is pinned here so a later release cannot change the viewer silently.
  • The data path is ../../learning-graph/learning-graph.json, relative to docs/sims/graph-viewer/. The viewer uses vis.DataSet for nodes and edges and the node hidden property to filter by category.
  • The group colors and category names come from the groups object of learning-graph.json.