plebeiangraphlibrary 1.0.6 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Build/pgl.d.ts +104 -43
- package/Build/pgl.d.ts.map +1 -1
- package/Build/pgl.js +661 -169
- package/Build/pgl.js.map +1 -1
- package/Build/pgl_module.js +10378 -7252
- package/Build/pgl_module.js.map +1 -1
- package/CODE_OF_CONDUCT.md +39 -39
- package/CONTRIBUTING.md +52 -52
- package/Examples/1_ZKC_simple.html +81 -75
- package/Examples/2_ZKC_edge_bundling.html +87 -81
- package/Examples/3_LargePointCloud.html +88 -81
- package/Examples/4_ToggleActivation.html +111 -105
- package/Examples/5_Hierarchy_simple.html +54 -0
- package/Examples/6_Flowmap_style.html +86 -0
- package/Examples/7_Graph_algorithms.html +123 -0
- package/Examples/8_ThreeWrapper_variants.html +51 -0
- package/Examples/MasterStyle.css +161 -53
- package/Examples/examples.html +61 -0
- package/LICENSE +21 -21
- package/README.md +144 -139
- package/package.json +72 -67
- package/Examples/index.html +0 -34
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<link rel="stylesheet" href="MasterStyle.css">
|
|
9
|
+
<title>Example 7 – Graph algorithms: diameter path</title>
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body class="example-page">
|
|
13
|
+
<header class="example-header">
|
|
14
|
+
<a href="examples.html" class="back-link">← All examples</a>
|
|
15
|
+
<h1>Example 7 – Graph algorithms: diameter path</h1>
|
|
16
|
+
<p class="example-desc">
|
|
17
|
+
<strong>1)</strong> Pick random node → <strong style="color:#00ff00">color 1 (green)</strong>.<br>
|
|
18
|
+
<strong>2)</strong> Dijkstra out, find farthest node <strong>end1</strong> → <strong style="color:#0066ff">color 2 (blue)</strong>. Path start→end1 drawn in <strong style="color:#00ff00">color 1</strong>.<br>
|
|
19
|
+
<strong>3)</strong> Dijkstra from end1, find farthest <strong>end2</strong> → <strong style="color:#ff4444">color 3 (red)</strong>. Path end1→end2 drawn in <strong style="color:#0066ff">color 2</strong>.<br>
|
|
20
|
+
<strong>4)</strong> BFS back from end2 to start. That path drawn in <strong style="color:#ff4444">color 3</strong>. Three segments form a closed loop.
|
|
21
|
+
</p>
|
|
22
|
+
<a href="https://github.com/range-et/PGL/blob/main/Examples/7_Graph_algorithms.html" class="code-link" target="_blank" rel="noopener">View code</a>
|
|
23
|
+
</header>
|
|
24
|
+
<div class="canvas-wrap">
|
|
25
|
+
<canvas id="displayCanvas" class="displayCanvas"></canvas>
|
|
26
|
+
<script type="module">
|
|
27
|
+
import * as PGL from "../Build/pgl_module.js";
|
|
28
|
+
|
|
29
|
+
const G = await PGL.SampleData.LoadZKCSimulated();
|
|
30
|
+
G.printData();
|
|
31
|
+
|
|
32
|
+
const nodeIds = [...G.nodes.keys()];
|
|
33
|
+
const adj = G.get_adjacency();
|
|
34
|
+
const withNeighbors = nodeIds.filter((id) => (adj.get(id)?.length ?? 0) > 0);
|
|
35
|
+
const pickFrom = withNeighbors.length > 0 ? withNeighbors : nodeIds;
|
|
36
|
+
const start = pickFrom[Math.floor(Math.random() * pickFrom.length)];
|
|
37
|
+
|
|
38
|
+
function tracePath(bfsMap, fromNode) {
|
|
39
|
+
const path = [];
|
|
40
|
+
let cur = fromNode;
|
|
41
|
+
while (cur !== -1 && bfsMap.has(cur)) {
|
|
42
|
+
path.push(cur);
|
|
43
|
+
cur = bfsMap.get(cur);
|
|
44
|
+
}
|
|
45
|
+
return path;
|
|
46
|
+
}
|
|
47
|
+
function pathFromTo(bfsMap, fromNode, toNode) {
|
|
48
|
+
const back = tracePath(bfsMap, toNode);
|
|
49
|
+
back.reverse();
|
|
50
|
+
return back;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const bfsStart = await PGL.GraphMethods.BFSSearch(G, start);
|
|
54
|
+
const D1 = await PGL.GraphMethods.Dijkstra(G, start);
|
|
55
|
+
let end1 = start;
|
|
56
|
+
let d1Max = -1;
|
|
57
|
+
for (const n of D1.keys()) {
|
|
58
|
+
const d = D1.get(n);
|
|
59
|
+
if (d > d1Max) {
|
|
60
|
+
d1Max = d;
|
|
61
|
+
end1 = n;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const bfsEnd1 = await PGL.GraphMethods.BFSSearch(G, end1);
|
|
66
|
+
const D2 = await PGL.GraphMethods.Dijkstra(G, end1);
|
|
67
|
+
let end2 = end1;
|
|
68
|
+
let d2Max = -1;
|
|
69
|
+
for (const n of D2.keys()) {
|
|
70
|
+
const d = D2.get(n);
|
|
71
|
+
if (d > d2Max) {
|
|
72
|
+
d2Max = d;
|
|
73
|
+
end2 = n;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const path1 = pathFromTo(bfsStart, start, end1);
|
|
78
|
+
const path2 = pathFromTo(bfsEnd1, end1, end2);
|
|
79
|
+
const path3 = tracePath(bfsStart, end2);
|
|
80
|
+
|
|
81
|
+
const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
|
|
82
|
+
G.apply_edge_pos_maps(lmap);
|
|
83
|
+
|
|
84
|
+
const width = 800;
|
|
85
|
+
const height = 700;
|
|
86
|
+
const canvas = document.getElementById("displayCanvas");
|
|
87
|
+
const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width, height, canvas });
|
|
88
|
+
await graph3d.init();
|
|
89
|
+
|
|
90
|
+
const bounds = 1;
|
|
91
|
+
const COLOR1 = 0x00ff00;
|
|
92
|
+
const COLOR2 = 0x0066ff;
|
|
93
|
+
const COLOR3 = 0xff4444;
|
|
94
|
+
|
|
95
|
+
const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphVertices(G, bounds, 4, 0x888888);
|
|
96
|
+
PGL.ThreeWrapper.ChangeTheVertexColours(nodeVisualElements, [start], COLOR1);
|
|
97
|
+
PGL.ThreeWrapper.ChangeTheVertexColours(nodeVisualElements, [end1], COLOR2);
|
|
98
|
+
PGL.ThreeWrapper.ChangeTheVertexColours(nodeVisualElements, [end2], COLOR3);
|
|
99
|
+
graph3d.addVisElement(nodeVisualElements);
|
|
100
|
+
|
|
101
|
+
const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThin(G, bounds, 0xcccccc);
|
|
102
|
+
graph3d.addVisElement(edgeVisualElements);
|
|
103
|
+
|
|
104
|
+
if (path1.length >= 2) {
|
|
105
|
+
graph3d.addVisElement(PGL.ThreeWrapper.DrawThickPathFromNodeIds(G, bounds, path1, COLOR1, 5));
|
|
106
|
+
}
|
|
107
|
+
if (path2.length >= 2) {
|
|
108
|
+
graph3d.addVisElement(PGL.ThreeWrapper.DrawThickPathFromNodeIds(G, bounds, path2, COLOR2, 5));
|
|
109
|
+
}
|
|
110
|
+
if (path3.length >= 2) {
|
|
111
|
+
graph3d.addVisElement(PGL.ThreeWrapper.DrawThickPathFromNodeIds(G, bounds, path3, COLOR3, 5));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function animate() {
|
|
115
|
+
requestAnimationFrame(animate);
|
|
116
|
+
graph3d.rendercall();
|
|
117
|
+
}
|
|
118
|
+
animate();
|
|
119
|
+
</script>
|
|
120
|
+
</div>
|
|
121
|
+
</body>
|
|
122
|
+
|
|
123
|
+
</html>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<link rel="stylesheet" href="MasterStyle.css">
|
|
9
|
+
<title>Example 8 – ThreeWrapper variants</title>
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body class="example-page">
|
|
13
|
+
<header class="example-header">
|
|
14
|
+
<a href="examples.html" class="back-link">← All examples</a>
|
|
15
|
+
<h1>Example 8 – ThreeWrapper variants</h1>
|
|
16
|
+
<p class="example-desc">Different draw styles: box nodes, simplified edges, and modularity-based node/edge groups.</p>
|
|
17
|
+
<a href="https://github.com/range-et/PGL/blob/main/Examples/8_ThreeWrapper_variants.html" class="code-link" target="_blank" rel="noopener">View code</a>
|
|
18
|
+
</header>
|
|
19
|
+
<div class="canvas-wrap">
|
|
20
|
+
<canvas id="displayCanvas" class="displayCanvas"></canvas>
|
|
21
|
+
<script type="module">
|
|
22
|
+
import * as PGL from "../Build/pgl_module.js";
|
|
23
|
+
|
|
24
|
+
const G = await PGL.SampleData.LoadZKCSimulated();
|
|
25
|
+
const pmap = G.get_position_map();
|
|
26
|
+
const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
|
|
27
|
+
G.apply_edge_pos_maps(lmap);
|
|
28
|
+
|
|
29
|
+
const width = 800;
|
|
30
|
+
const height = 700;
|
|
31
|
+
const canvas = document.getElementById("displayCanvas");
|
|
32
|
+
const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width, height, canvas });
|
|
33
|
+
await graph3d.init();
|
|
34
|
+
|
|
35
|
+
const bounds = 1;
|
|
36
|
+
const boxNodes = PGL.ThreeWrapper.AddBoxBasedImaging(pmap, bounds, 0xffffff, 4);
|
|
37
|
+
graph3d.addVisElement(boxNodes);
|
|
38
|
+
const simplifiedEdges = PGL.ThreeWrapper.DrawSimplifiedEdges(G, 0.15, 0x62b6cb);
|
|
39
|
+
graph3d.addVisElement(simplifiedEdges);
|
|
40
|
+
|
|
41
|
+
const modGroups = await PGL.ThreeWrapper.AddInModularityBasedPointGroups(G, "modularity");
|
|
42
|
+
for (const g of modGroups.nodeGroups.values()) graph3d.addVisElement(g);
|
|
43
|
+
for (const g of modGroups.EdgeGroups.values()) graph3d.addVisElement(g);
|
|
44
|
+
|
|
45
|
+
function animate() { requestAnimationFrame(animate); graph3d.rendercall(); }
|
|
46
|
+
animate();
|
|
47
|
+
</script>
|
|
48
|
+
</div>
|
|
49
|
+
</body>
|
|
50
|
+
|
|
51
|
+
</html>
|
package/Examples/MasterStyle.css
CHANGED
|
@@ -1,53 +1,161 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--skyBlue: #bee9e8;
|
|
3
|
-
--teal: #62b6cb;
|
|
4
|
-
--navy: #1b4965;
|
|
5
|
-
--lavender: #cae9ff;
|
|
6
|
-
--electricBlue: #5fa8d3;
|
|
7
|
-
--charcoal: #333533;
|
|
8
|
-
--black: #242423;
|
|
9
|
-
--yellow: #f5cb5c;
|
|
10
|
-
--cream: #e8eddf;
|
|
11
|
-
--grey: #cfdbd5;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
margin: auto;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
margin-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--skyBlue: #bee9e8;
|
|
3
|
+
--teal: #62b6cb;
|
|
4
|
+
--navy: #1b4965;
|
|
5
|
+
--lavender: #cae9ff;
|
|
6
|
+
--electricBlue: #5fa8d3;
|
|
7
|
+
--charcoal: #333533;
|
|
8
|
+
--black: #242423;
|
|
9
|
+
--yellow: #f5cb5c;
|
|
10
|
+
--cream: #e8eddf;
|
|
11
|
+
--grey: #cfdbd5;
|
|
12
|
+
--cardBg: #2a2a2a;
|
|
13
|
+
--border: #3d3d3d;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
* {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
22
|
+
background: linear-gradient(160deg, var(--charcoal) 0%, var(--black) 100%);
|
|
23
|
+
color: var(--cream);
|
|
24
|
+
margin: 0;
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
line-height: 1.5;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* ----- Index page ----- */
|
|
30
|
+
.index-page main {
|
|
31
|
+
max-width: 720px;
|
|
32
|
+
margin: 0 auto;
|
|
33
|
+
padding: 2rem 1rem 3rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.index-page h1 {
|
|
37
|
+
font-size: 1.75rem;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
margin-bottom: 0.5rem;
|
|
40
|
+
letter-spacing: -0.02em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.index-page .subtitle {
|
|
44
|
+
color: var(--grey);
|
|
45
|
+
font-size: 0.95rem;
|
|
46
|
+
margin-bottom: 2rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.index-page .example-list {
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
gap: 0.75rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.index-page .example-card {
|
|
56
|
+
display: block;
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
color: inherit;
|
|
59
|
+
background: var(--cardBg);
|
|
60
|
+
border: 1px solid var(--border);
|
|
61
|
+
border-radius: 10px;
|
|
62
|
+
padding: 1rem 1.25rem;
|
|
63
|
+
text-align: left;
|
|
64
|
+
transition: border-color 0.15s, background 0.15s;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.index-page .example-card:hover {
|
|
68
|
+
border-color: var(--teal);
|
|
69
|
+
background: #323232;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.index-page .example-card .num {
|
|
73
|
+
font-size: 0.8rem;
|
|
74
|
+
color: var(--teal);
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
margin-bottom: 0.25rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.index-page .example-card .title {
|
|
80
|
+
font-size: 1.05rem;
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
margin-bottom: 0.35rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.index-page .example-card .desc {
|
|
86
|
+
font-size: 0.875rem;
|
|
87
|
+
color: var(--grey);
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* ----- Example pages ----- */
|
|
92
|
+
.example-page .example-header {
|
|
93
|
+
max-width: 820px;
|
|
94
|
+
margin: 0 auto;
|
|
95
|
+
padding: 1rem 1rem 0.5rem;
|
|
96
|
+
text-align: left;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.example-page .back-link {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: 0.35rem;
|
|
103
|
+
font-size: 0.85rem;
|
|
104
|
+
color: var(--teal);
|
|
105
|
+
text-decoration: none;
|
|
106
|
+
margin-bottom: 0.75rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.example-page .back-link:hover {
|
|
110
|
+
color: var(--skyBlue);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.example-page .example-header h1 {
|
|
114
|
+
font-size: 1.35rem;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
margin: 0 0 0.35rem 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.example-page .example-desc {
|
|
120
|
+
font-size: 0.9rem;
|
|
121
|
+
color: var(--grey);
|
|
122
|
+
margin: 0 0 0.75rem 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.example-page .example-header .code-link {
|
|
126
|
+
font-size: 0.8rem;
|
|
127
|
+
color: var(--electricBlue);
|
|
128
|
+
text-decoration: none;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.example-page .example-header .code-link:hover {
|
|
132
|
+
text-decoration: underline;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.example-page .canvas-wrap {
|
|
136
|
+
text-align: center;
|
|
137
|
+
padding: 0 1rem 1.5rem;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.displayCanvas {
|
|
141
|
+
display: block;
|
|
142
|
+
margin: 0 auto;
|
|
143
|
+
border-radius: 8px;
|
|
144
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
145
|
+
border: 1px solid var(--border);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
#toggle {
|
|
149
|
+
padding: 0.6rem 1.2rem;
|
|
150
|
+
background: var(--navy);
|
|
151
|
+
border-radius: 8px;
|
|
152
|
+
max-width: 200px;
|
|
153
|
+
margin: 1rem auto;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
font-size: 0.9rem;
|
|
156
|
+
transition: background 0.15s;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
#toggle:hover {
|
|
160
|
+
background: var(--teal);
|
|
161
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<link rel="stylesheet" href="MasterStyle.css" />
|
|
8
|
+
<title>PGL Examples</title>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body class="index-page">
|
|
12
|
+
<main>
|
|
13
|
+
<h1>Plebeian Graph Library</h1>
|
|
14
|
+
<p class="subtitle">3D graph visualization with Three.js — examples</p>
|
|
15
|
+
|
|
16
|
+
<section class="example-list">
|
|
17
|
+
<a href="1_ZKC_simple.html" class="example-card">
|
|
18
|
+
<div class="num">Example 1</div>
|
|
19
|
+
<div class="title">Simple ZKC</div>
|
|
20
|
+
<p class="desc">Basic 3D graph: ZKC dataset with box nodes and thick edges. Good starting point for loading data and drawing a graph.</p>
|
|
21
|
+
</a>
|
|
22
|
+
<a href="2_ZKC_edge_bundling.html" class="example-card">
|
|
23
|
+
<div class="num">Example 2</div>
|
|
24
|
+
<div class="title">Edge bundling</div>
|
|
25
|
+
<p class="desc">ZKC with curved, bundled edges and vertical displacement for an arc-style flow look. Combines DrawEdgeBundling and DisplaceEdgeInY.</p>
|
|
26
|
+
</a>
|
|
27
|
+
<a href="3_LargePointCloud.html" class="example-card">
|
|
28
|
+
<div class="num">Example 3</div>
|
|
29
|
+
<div class="title">Large point cloud</div>
|
|
30
|
+
<p class="desc">Erdős–Rényi random graph (5000 nodes), Kamada–Kawai layout, and point-cloud + thin edges. Scales to larger graphs.</p>
|
|
31
|
+
</a>
|
|
32
|
+
<a href="4_ToggleActivation.html" class="example-card">
|
|
33
|
+
<div class="num">Example 4</div>
|
|
34
|
+
<div class="title">Toggle activation</div>
|
|
35
|
+
<p class="desc">Interactive node highlighting: click to toggle a subset "active" and recolor nodes. Useful for diffusion or selection demos.</p>
|
|
36
|
+
</a>
|
|
37
|
+
<a href="5_Hierarchy_simple.html" class="example-card">
|
|
38
|
+
<div class="num">Example 5</div>
|
|
39
|
+
<div class="title">Hierarchy</div>
|
|
40
|
+
<p class="desc">3D KD-tree clustering: nodes within a distance threshold are merged into super-nodes at centroids. Simplified graph with thick edges.</p>
|
|
41
|
+
</a>
|
|
42
|
+
<a href="6_Flowmap_style.html" class="example-card">
|
|
43
|
+
<div class="num">Example 6</div>
|
|
44
|
+
<div class="title">Flow map</div>
|
|
45
|
+
<p class="desc">FlowmapBlue-style: zoom in/out to change clustering. Zoom out = fewer merged nodes and flows; zoom in = more detail. 3D KD-tree by camera distance.</p>
|
|
46
|
+
</a>
|
|
47
|
+
<a href="7_Graph_algorithms.html" class="example-card">
|
|
48
|
+
<div class="num">Example 7</div>
|
|
49
|
+
<div class="title">Graph algorithms: diameter path</div>
|
|
50
|
+
<p class="desc">GraphDiameter (Dijkstra) finds the longest shortest path; BFS reconstructs the path. Nodes colored green (start), blue (end), red (path); thick 5px line along the path.</p>
|
|
51
|
+
</a>
|
|
52
|
+
<a href="8_ThreeWrapper_variants.html" class="example-card">
|
|
53
|
+
<div class="num">Example 8</div>
|
|
54
|
+
<div class="title">ThreeWrapper variants</div>
|
|
55
|
+
<p class="desc">Different draw styles: box nodes, simplified (cylinder-style) edges, and modularity-based node/edge groups by a node property.</p>
|
|
56
|
+
</a>
|
|
57
|
+
</section>
|
|
58
|
+
</main>
|
|
59
|
+
</body>
|
|
60
|
+
|
|
61
|
+
</html>
|
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 Indrajeet Haldar
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Indrajeet Haldar
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|