mooigraph
/
sfgraph


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Websfg</title>
<!--
/*
 *  Copyright t lefering
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 *  These are the four essential freedoms with GNU GPL software:
 *  1: freedom to run the program, for any purpose
 *  2: freedom to study how the program works, and change it to make it do what you wish
 *  3: freedom to redistribute copies to help your Free Software friends
 *  4: freedom to distribute copies of your modified versions to your Free Software friends
 *   ,           ,
 *  /             \
 * ((__-^^-,-^^-__))
 * `-_---'  `---_-'
 *  `--|o`   'o|--'
 *      \  `  /
 *       ): :(
 *       :o_o:
 *        "-"
 */
-->
</head>
<body>

<style>
  button { margin:4px; cursor:pointer; font-size: 70%; font-family; arial,sans-serif; margin-right: 5px }
</style>

<h2>Websfg sfg.c as wasm sugiyama graph layout running in the browser</h2>
<a href="https://notabug.org/mooigraph/sfgraph">This is a test-version and See sfg.c in sfgraph at notabug</a>
<br>
<br>
Enter your graph data as edges between node numbers into the text area below.<br>
The node numbers must start with number 1 and try the sample buttons below. <br>
Enter a edge from node number 2 to node number 3 like this way on one line:<br>
2 3
<br>
<button id="sample_1_btn" disabled>Sample 1</button>
<button id="sample_2_btn" disabled>Sample 2</button>
<button id="sample_3_btn" disabled>Sample 3</button>
<button id="sample_4_btn" disabled>Sample 4</button>
<button id="sample_5_btn" disabled>Sample 5</button>
<br>
<textarea id="graph_data" rows="20" cols="80" width="100%" wrap="off">
# this is a comment line starting with # char
# input edges between node numbers starting with node number 1 like this:
# this graph has 10 nodes, 12 edges
1 2
1 3
1 4
1 5
5 7
8 7
9 8
9 6
6 7
2 7
7 10
6 10
</textarea><br>
maximum 1000 chars input text
<p>

<button id="generate_btn" style="font-size: 100%">Generate Graph layout</button>

</p>

<div id="graph_svg_div">
  <!-- Target for dynamic svg generation -->
</div>

<script language="javascript" type="text/javascript" src="jquery-3.6.0.js"> </script>
<script language="javascript" type="text/javascript" src="site.js"> </script>

<script type="bogus" id="sample1_text">
# this graph has 21 nodes, 38 edges
1 2
1 3
1 4
1 5
5 6
5 7
8 9
8 10
8 5
11 12
11 13
11 8
14 15
14 16
14 11
17 19
17 14
19 16
20 19
21 20
21 18
18 19
18 15
15 16
15 12
13 10
12 13
12 9
9 10
9 6
6 7
4 21
4 20
4 17
3 7
2 3
2 21
2 6
</script>

<!------------------------------------------------------------------>

<script type="bogus" id="sample2_text">
# this graph has 12 nodes, 22 edges
1 2
1 3
1 4
1 5
5 6
5 7
8 9
8 10
8 5
10 7
12 11
12 9
9 10
9 6
6 7
4 12
4 11
4 8
3 11
2 3
2 12
2 6
</script>

<!------------------------------------------------------------------>

<script type="bogus" id="sample3_text">
# this graph has 15 nodes, 27 edges
1 2
1 3
1 4
1 5
5 6
8 9
8 10
8 5
11 12
11 13
11 8
13 10
14 13
15 14
15 12
12 13
10 7
9 10
9 6
6 7
4 15
4 14
4 11
3 14
3 7
2 3
2 6
</script>

<!------------------------------------------------------------------>

<script type="bogus" id="sample4_text">
# this graph has 12 nodes, 22 edges
1 2
1 3
1 4
1 5
5 6
5 7
8 9
8 10
8 5
10 7
12 11
12 9
9 10
9 6
6 7
4 12
4 11
4 8
3 11
2 3
2 12
2 6
</script>

<!------------------------------------------------------------------>

<script type="bogus" id="sample5_text">
# this graph has 24 nodes, 42 edges
1 2
1 3
1 4
1 5
5 6
5 7
8 9
8 10
8 5
11 13
11 8
14 16
14 11
17 19
17 14
20 22
20 17
22 19
23 22
24 23
24 21
21 22
21 18
19 16
18 19
18 15
16 13
15 16
15 12
13 10
12 13
12 9
9 10
9 6
6 7
4 24
4 23
4 20
3 7
2 3
2 24
2 6
</script>

</body>
<!-- Defer loading of javascript by placing these tags at the tail end of the document -->
</html>