Skip to content

Commit c67a616

Browse files
dmccrearydmccreary
committed
updating content
1 parent 4c55497 commit c67a616

File tree

10 files changed

+482
-30
lines changed

10 files changed

+482
-30
lines changed

‎docs/sims/knowledge-graphs/graph/cat-colors-3.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Concept Dependency Graph With Category Colors</title>
5+
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
6+
<style>
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
}
10+
#network {
11+
width: 90%;
12+
height: 600px;
13+
border: 1px solid lightgray;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h4>Concept Dependency Graph With Category Colors</h4>
19+
<a href=".">Back to Lesson Plan</a>
20+
<div id="network"></div>
21+
<div id="row-count"></div>
22+
<script src="./cat-colors-3.js"></script>
23+
24+
<table border="1">
25+
<thead>
26+
<tr>
27+
<th>ID</th>
28+
<th>Category Label</th>
29+
<th>Color</th>
30+
<th>Color Preview</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<td>1</td>
36+
<td>Computational Thinking Foundations</td>
37+
<td>red</td>
38+
<td style="background-color: red;"></td>
39+
</tr>
40+
<tr>
41+
<td>2</td>
42+
<td>Programming Fundamentals</td>
43+
<td>orange</td>
44+
<td style="background-color: orange;"></td>
45+
</tr>
46+
<tr>
47+
<td>3</td>
48+
<td>MicroPython Programming</td>
49+
<td>gold</td>
50+
<td style="background-color: gold;"></td>
51+
</tr>
52+
<tr>
53+
<td>4</td>
54+
<td>Hardware Components and Interfacing</td>
55+
<td>green</td>
56+
<td style="background-color: green;"></td>
57+
</tr>
58+
<tr>
59+
<td>5</td>
60+
<td>Electronics Basics</td>
61+
<td>cyan</td>
62+
<td style="background-color: cyan;"></td>
63+
</tr>
64+
<tr>
65+
<td>6</td>
66+
<td>Sensor Integration</td>
67+
<td>blue</td>
68+
<td style="background-color: blue;"></td>
69+
</tr>
70+
<tr>
71+
<td>7</td>
72+
<td>Actuator Control</td>
73+
<td>purple</td>
74+
<td style="background-color: purple;"></td>
75+
</tr>
76+
<tr>
77+
<td>8</td>
78+
<td>Communication Protocols
79+
</td>
80+
<td>pink</td>
81+
<td style="background-color: pink;"></td>
82+
</tr>
83+
<tr>
84+
<td>9</td>
85+
<td>Internet of Things (IoT)</td>
86+
<td>brown</td>
87+
<td style="background-color: brown;"></td>
88+
</tr>
89+
<tr>
90+
<td>10</td>
91+
<td>Advanced Topics and Best Practices</td>
92+
<td>gray</td>
93+
<td style="background-color: gray;"></td>
94+
</tr>
95+
</tbody>
96+
</table>
97+
</body>
98+
</html>
99+
100+
101+
102+
103+
104+
105+
106+

‎docs/sims/knowledge-graphs/graph/cat-colors-3.js

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
// Function to read the CSV file
2+
function loadCSV(callback) {
3+
// console.log("in loadCSV");
4+
5+
var xhr = new XMLHttpRequest();
6+
xhr.open("GET", "graph-data-3.csv", true); // Assuming the updated CSV file is called graph-data.csv
7+
xhr.onreadystatechange = function() {
8+
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status == 0)) {
9+
callback(xhr.responseText);
10+
}
11+
};
12+
xhr.send(null);
13+
}
14+
15+
// Function to parse CSV data
16+
function parseCSV(data) {
17+
var lines = data.trim().split('\n');
18+
// console.log('line count:', lines.length);
19+
var nodes = [];
20+
var edges = [];
21+
22+
// Map CategoryID to colors
23+
var categoryColors = {
24+
1: 'red',
25+
2: 'orange',
26+
3: 'gold',
27+
4: 'green',
28+
5: 'cyan',
29+
6: 'blue',
30+
7: 'purple',
31+
8: 'pink',
32+
9: 'brown',
33+
10: 'gray',
34+
11: 'olive'
35+
};
36+
// console.log('color count:', Object.keys(categoryColors).length);
37+
38+
var validRowCount = 0; // Counter for valid rows
39+
40+
lines.forEach(function(line, index) {
41+
// Skip the header row
42+
if (index === 0) return;
43+
44+
var parts = line.split(',');
45+
46+
// Check if the line has at least 4 parts
47+
if (parts.length < 4) {
48+
console.error('Line ' + (index + 1) + ' is malformed: ' + line);
49+
return; // Skip this line
50+
}
51+
52+
// concept id in first column
53+
var id = parts[0] ? parts[0].trim() : '';
54+
55+
// the concept label is in the second column
56+
var label = parts[1] ? parts[1].trim() : '';
57+
58+
// a pipe-delimited list of dependent IDs is in the third column
59+
var dependencies = parts[2] ? parts[2].trim().split('|') : [];
60+
61+
// the category ID is in the 4th column
62+
var categoryID = parts[3] ? parseInt(parts[3].trim()) : null;
63+
64+
if (!id || !label || isNaN(categoryID)) {
65+
console.error('Missing or invalid data on line ' + (index + 1) + ': ' + line);
66+
return; // Skip this line
67+
}
68+
69+
validRowCount++; // Increment valid row counter
70+
71+
// Assign color based on CategoryID
72+
var color = categoryColors[categoryID] || 'black'; // Default to black if category is not found
73+
74+
// create a new node with the right ID, label, and color
75+
nodes.push({
76+
id: id,
77+
label: label,
78+
color: color // Set node color
79+
});
80+
81+
// now for each dependency, create an edge between ID and its dependent ID
82+
dependencies.forEach(function(depId) {
83+
depId = depId.trim();
84+
if (depId !== '') {
85+
edges.push({ from: id, to: depId });
86+
}
87+
});
88+
});
89+
90+
// Display the number of valid rows read to the web page
91+
var rowCountElement = document.getElementById('row-count');
92+
if (rowCountElement) {
93+
rowCountElement.innerHTML = 'Valid rows read from file: ' + validRowCount;
94+
}
95+
96+
return { nodes: nodes, edges: edges };
97+
}
98+
99+
// Load the CSV and initialize the graph
100+
loadCSV(function(data) {
101+
var parsedData = parseCSV(data);
102+
console.log('parsed CSV');
103+
var nodes = new vis.DataSet(parsedData.nodes);
104+
var edges = new vis.DataSet(parsedData.edges);
105+
106+
var container = document.getElementById('network');
107+
var data = {
108+
nodes: nodes,
109+
edges: edges,
110+
};
111+
// dot or circle?
112+
var options = {
113+
nodes: {
114+
shape: 'dot',
115+
size: 10,
116+
font: {
117+
size: 18,
118+
},
119+
},
120+
edges: {
121+
arrows: 'to',
122+
smooth: true,
123+
},
124+
physics: {
125+
stabilization: false,
126+
},
127+
};
128+
129+
var network = new vis.Network(container, data, options);
130+
});

‎docs/sims/knowledge-graphs/graph/category-colors.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Function to read the CSV file
22
function loadCSV(callback) {
3+
console.log("in loadCSV");
4+
35
var xhr = new XMLHttpRequest();
46
xhr.open("GET", "graph-data-2.csv", true); // Assuming the updated CSV file is called graph-data.csv
57
xhr.onreadystatechange = function() {
@@ -13,6 +15,7 @@ function loadCSV(callback) {
1315
// Function to parse CSV data
1416
function parseCSV(data) {
1517
var lines = data.trim().split('\n');
18+
console.log('line count:', lines.length);
1619
var nodes = [];
1720
var edges = [];
1821

@@ -30,6 +33,7 @@ function parseCSV(data) {
3033
10: 'gray',
3134
11: 'olive'
3235
};
36+
console.log('color count:', categoryColors.length);
3337

3438
lines.forEach(function(line, index) {
3539
// Skip the header row
@@ -58,7 +62,7 @@ function parseCSV(data) {
5862
color: color // Set node color
5963
});
6064

61-
// now for each dependancy, create an edge between ID and its dependant ID
65+
// now for each dependency, create an edge between ID and its dependant ID
6266
dependencies.forEach(function(depId) {
6367
depId = depId.trim();
6468
if (depId !== '') {
@@ -73,7 +77,7 @@ function parseCSV(data) {
7377
// Load the CSV and initialize the graph
7478
loadCSV(function(data) {
7579
var parsedData = parseCSV(data);
76-
80+
console.log('parsed CSV');
7781
var nodes = new vis.DataSet(parsedData.nodes);
7882
var edges = new vis.DataSet(parsedData.edges);
7983

‎docs/sims/knowledge-graphs/graph/graph-data-2.csv

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ ID,Concept Name,Dependencies (IDs),Group ID
1111
10,Control Structures,6|7|8|9,2
1212
11,Conditional Statements,10|9,2
1313
12,Loops,10,2
14-
13,General Functions in Programming,6|7|8|10,2
15-
14,Introduction to MicroPython,6,3
16-
15,Setting Up MicroPython Environment,14,3
14+
13,Functions,6|7|8|10,2
15+
14,Intro to MicroPython,6,3
16+
15,MicroPython Thonny,14,3
1717
16,Syntax in MicroPython,14|15,3
18-
17,Functions in MicroPython,13|16,3
18+
17,Function Parameters,13|16,3
1919
18,Modules in MicroPython,16|17,3
2020
19,Input and Output,16|7|8,3
2121
20,Working with Strings,8|16,3
@@ -31,10 +31,10 @@ ID,Concept Name,Dependencies (IDs),Group ID
3131
30,Breadboard Usage,29|32,4
3232
31,Circuit Basics,,5
3333
32,Ohm's Law,31,5
34-
33,Resistors in Circuits,31|32,5
35-
34,LEDs in Circuits,31,5
36-
35,Using Resistors with LEDs,33|34|32,5
37-
36,Current Limiting Resistors,33|35,5
34+
33,Resistors,31|32,5
35+
34,LEDs,31,5
36+
35,Resistors and LEDs,33|34|32,5
37+
36,Resistors Circuits,33|35,5
3838
37,Connecting LEDs,34|30,5
3939
38,Blinking an LED with MicroPython,37|16|28,3
4040
39,Digital Output Signals,28|16,4
@@ -51,8 +51,8 @@ ID,Concept Name,Dependencies (IDs),Group ID
5151
50,Reading Potentiometer Values,49|46,6
5252
51,Pulse Width Modulation Fundamentals,6|10,7
5353
52,Implementing Pulse Width Modulation in MicroPython,51|16,3
54-
53,LED Brightness Control with Pulse Width Modulation,52|37,7
55-
54,Fading LEDs Using Pulse Width Modulation,53|12,7
54+
53,LED Brightness with PWM,52|37,7
55+
54,Fading LEDs Using PWM,53|12,7
5656
55,Advanced Pulse Width Modulation Techniques,54|52,7
5757
56,Servo Motors Overview,31,7
5858
57,Controlling Servo Motors,52|28|56,7
@@ -66,12 +66,12 @@ ID,Concept Name,Dependencies (IDs),Group ID
6666
65,Voltage Dividers,33|31,5
6767
66,Voltage Dividers and Sensors,65|63,6
6868
67,Time-of-Flight Sensors,31|28,6
69-
68,Interfacing Time-of-Flight Sensors,67|16,6
69+
68,Interfacing ToF Sensors,67|16,6
7070
69,I2C Protocol,70|16,8
7171
70,SPI Protocol,28|16,8
7272
71,Connecting I2C Devices,69|28,8
7373
72,LED Displays Overview,34|31,4
74-
73,Organic Light-Emitting Diode Displays,72,4
74+
73,OLED Displays,72,4
7575
74,Display Drawing,73|16,4
7676
75,Drawing Circles and Ellipses,74,4
7777
76,Drawing Polygons,74,4
@@ -95,8 +95,8 @@ ID,Concept Name,Dependencies (IDs),Group ID
9595
94,Data Logging with MicroPython,16|97,3
9696
95,Storing Data on Raspberry Pi Pico,94|27,4
9797
96,File Handling,16|95,3
98-
97,Universal Serial Bus Communication,27|16,8
99-
98,Universal Asynchronous Receiver-Transmitter Communication,27|16,8
98+
97,USB Communication,27|16,8
99+
98,UART Communication,27|16,8
100100
99,Introduction to Sensors,31,6
101101
100,Temperature Sensors,99|28,6
102102
101,Interfacing Temperature Sensors,100|16,6
@@ -109,12 +109,12 @@ ID,Concept Name,Dependencies (IDs),Group ID
109109
108,Controlling Relays,107|16,7
110110
109,Relays Overview,107,7
111111
110,Relays Safety,109,7
112-
111,Stepper Motors,31,7
113-
112,Controlling Stepper Motors,111|16,7
114-
113,Using Stepper Motor Drivers,112|28,7
115-
114,Generating Sound with Buzzers,31|28,7
116-
115,Using Piezoelectric Buzzers,114|16,7
117-
116,Generating Tones and Melodies,115|12,7
112+
111,DC Motors,31,7
113+
112,Stepper Motors,111|16,7
114+
113,Stepper Motor Drivers,112|28,7
115+
114,Sound,31|28,7
116+
115,Piezoelectric Buzzers,114|16,7
117+
116,Tones and Melodies,115|12,7
118118
117,Infrared Communication,28|16,8
119119
118,Using Infrared Sensors,117|31,8
120120
119,Infrared Remote Control,118|16,8
@@ -183,15 +183,19 @@ ID,Concept Name,Dependencies (IDs),Group ID
183183
182,Gesture Recognition Sensors,181|28,6
184184
183,Touch Sensors,181|28,6
185185
184,Environmental Monitoring,181|105,6
186-
185,Robotics Basics,31|157,4
187-
186,Building Simple Robots,185|16,4
186+
185,Robotics,31|157,4
187+
186,Simple Robots,185|16,4
188188
187,Line-Following Robots,186|83,4
189189
188,Obstacle Avoidance Robots,186|120,4
190190
189,Control Systems Basics,185,10
191191
190,Feedback Mechanisms,189,10
192-
191,Proportional-Integral-Derivative Controllers,190,10
192+
191,PID Controllers,190,10
193193
192,Machine Learning Concepts,6|136,10
194-
193,Using MicroPython for Artificial Intelligence,192|16,10
194+
193,MicroPython in AI,192|16,10
195195
194,Edge Computing,193|128,10
196196
195,Ethics in Technology,6,10
197197
196,Future Trends in Computing,195,10
198+
197,Pico W,124,9
199+
198,Cytron Robotics Board,188,4
200+
199,ToF Robot,198|185,4
201+
200,Rainbow Robot,198|185|80,4

0 commit comments

Comments
 (0)