Quelle  graph-visjs.ipynb   Sprache: unbekannt

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "true"
      ]
     },
     "execution_count": 1,
     "metadata": {
      "text/plain": ""
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "LoadPackage(\"AtlasRep\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "function( nodes, labels, edges ) ... end"
      ]
     },
     "execution_count": 2,
     "metadata": {
      "text/plain": ""
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graph := function(nodes,labels,edges)\n",
    "    local r, b, sn, se, e, i, nnodes, nedges, id;\n",
    "    id:=Base64String(Concatenation(\"graph\",String(Random(1,10000))));\n",
    "    b := Concatenation(\"<div id='\",id,\"'></div>\\ \",\n",
    "        \"<link href=\\\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\\\" rel=\\\"stylesheet\\\" type=\\\"text/css\\\" />\\\n",
    "       <script type=\\\"text/javascript\\\">\\\n",
    "       require.config({\\\n",
    "           paths: {\\\n",
    "               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'\\\n",
    "           }\\\n",
    "       });\\\n",
    "       require(['vis'], function (vis) {\\\n",
    "       var options = {\\\n",
    "       width:  '600px',\\\n",
    "       height: '600px',\\\n",
    "       keepAspectRatio: true,\\\n",
    "       verticalRatio: 0.5\\\n",
    "        };\\ \");\n",
    "    #b:=Concatenation(\"<div id='\",id,\"'></div>\\ \",b);\n",
    "    sn:=\"var nodes = new vis.DataSet([\\ \";\n",
    "    nnodes:=Length(nodes);\n",
    "    for i in [1..nnodes-1] do\n",
    "        sn:=Concatenation(sn, \"{id: \", String(nodes[i]), \", label: '\", String(labels[i]),\"'},\\ \" );\n",
    "    od;\n",
    "    sn:=Concatenation(sn, \"{id: \", String(nodes[nnodes]), \", label: '\", String(labels[nnodes]),\"'}]);\\ \" );\n",
    "\n",
    "    se:=\"var edges = new vis.DataSet([\\ \";\n",
    "    \n",
    "    nedges:=Length(edges);\n",
    "    for i in [1..nedges-1] do \n",
    "        se:=Concatenation(se, \"{from: \", String(edges[i][1]), \", to: \", String(edges[i][2]), \"},\\ \");\n",
    "    od;\n",
    "    se:=Concatenation(se, \"{from: \", String(edges[nedges][1]), \", to: \", String(edges[nedges][2]), \"}]);\\ \");\n",
    "\n",
    "    e:=\"var data = {\\\n",
    "            nodes: nodes,\\\n",
    "            edges: edges\\\n",
    "        };\\\n",
    "        var container = document.getElementById('\";\n",
    "    e:=Concatenation(e,id,\"');\\\n",
    "        var network = new vis.Network(container, data, options);\\\n",
    "       });\\\n",
    "    </script>\");\n",
    "    \n",
    "    r:=Concatenation(b,sn,se,sn,e);\n",
    "    return Objectify( JupyterRenderableType, rec(  source := \"gap\"\n",
    ", data := rec( (\"text/html\") := r ), metadata:=rec() ));\n",
    "end;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='Z3JhcGgyODcw'></div> <link href=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" />       <script type=\"text/javascript\">       require.config({           paths: {               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'           }       });       require(['vis'], function (vis) {       var options = {       width:  '600px',       height: '600px',       keepAspectRatio: true,       verticalRatio: 0.5        }; var nodes = new vis.DataSet([ {id: 1, label: 'a'}, {id: 2, label: 'b'}, {id: 3, label: 'c'}, {id: 4, label: 'd'}, {id: 5, label: 'e'}]); var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 1, to: 3}, {from: 4, to: 5}, {from: 1, to: 5}]); var nodes = new vis.DataSet([ {id: 1, label: 'a'}, {id: 2, label: 'b'}, {id: 3, label: 'c'}, {id: 4, label: 'd'}, {id: 5, label: 'e'}]); var data = {            nodes: nodes,            edges: edges        };        var container = document.getElementById('Z3JhcGgyODcw');        var network = new vis.Network(container, data, options);       });    </script>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graph([1,2,3,4,5], [\"a\",\"b\",\"c\",\"d\",\"e\"], [[1,2],[1,3],[4,5],[1,5]]);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='Z3JhcGgyMDQ2'></div> <link href=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" />       <script type=\"text/javascript\">       require.config({           paths: {               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'           }       });       require(['vis'], function (vis) {       var options = {       width:  '600px',       height: '600px',       keepAspectRatio: true,       verticalRatio: 0.5        }; var nodes = new vis.DataSet([ {id: 1, label: 'a'}, {id: 2, label: 'b'}, {id: 3, label: 'c'}, {id: 4, label: 'd'}, {id: 5, label: 'e'}]); var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 1, to: 3}, {from: 4, to: 5}, {from: 1, to: 5}, {from: 2, to: 5}]); var nodes = new vis.DataSet([ {id: 1, label: 'a'}, {id: 2, label: 'b'}, {id: 3, label: 'c'}, {id: 4, label: 'd'}, {id: 5, label: 'e'}]); var data = {            nodes: nodes,            edges: edges        };        var container = document.getElementById('Z3JhcGgyMDQ2');        var network = new vis.Network(container, data, options);       });    </script>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graph([1,2,3,4,5], [\"a\",\"b\",\"c\",\"d\",\"e\"], [[1,2],[1,3],[4,5],[1,5],[2,5]]);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "One can also make it work with dot language."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "function( dot ) ... end"
      ]
     },
     "execution_count": 5,
     "metadata": {
      "text/plain": ""
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graphdot := function(dot)\n",
    "    local r, b, sn, se, e, i, nnodes, nedges, id;\n",
    "    id:=Base64String(Concatenation(\"graph\",String(Random(1,10000))));\n",
    "    b := Concatenation(\"<div id='\",id,\"'></div>\\ \",\n",
    "        \"<link href=\\\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\\\" rel=\\\"stylesheet\\\" type=\\\"text/css\\\" />\\\n",
    "       <script type=\\\"text/javascript\\\">\\\n",
    "       require.config({\\\n",
    "           paths: {\\\n",
    "               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'\\\n",
    "           }\\\n",
    "       });\\\n",
    "       require(['vis'], function (vis) {\\\n",
    "       var options = {\\\n",
    "       width:  '600px',\\\n",
    "       height: '600px',\\\n",
    "       keepAspectRatio: true,\\\n",
    "        verticalRatio: 0.5\\\n",
    "        };\\ \");\n",
    "    sn:=Concatenation(\"var data = {dot: '\",NormalizedWhitespace(dot),\"'};\");\n",
    "    \n",
    "    e:=Concatenation(\"var container = document.getElementById('\",\n",
    "        id,\n",
    "        \"');var network = new vis.Network(container, data, options); });</script>\");\n",
    "    \n",
    "    r:=Concatenation(b,sn,e);\n",
    "    return Objectify( JupyterRenderableType, rec(  source := \"gap\", data := rec( (\"text/html\") := r ), metadata:=rec() ));\n",
    "end;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='Z3JhcGg4OTc2'></div> <link href=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" />       <script type=\"text/javascript\">       require.config({           paths: {               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'           }       });       require(['vis'], function (vis) {       var options = {       width:  '600px',       height: '600px',       keepAspectRatio: true,        verticalRatio: 0.5        }; var data = {dot: 'graph NSGraph{ 1 [label=\"4\"]; 2 [label=\"6\"]; 7; 2 -- 1; }'};var container = document.getElementById('Z3JhcGg4OTc2');var network = new vis.Network(container, data, options); });</script>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graphdot(\"graph  NSGraph{\\n1 [label=\\\"4\\\"];\\n2 [label=\\\"6\\\"]; 7; \\n2 -- 1;\\n}\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or with hierarchy"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "function( dot ) ... end"
      ]
     },
     "execution_count": 8,
     "metadata": {
      "text/plain": ""
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graphdoth := function(dot)\n",
    "    local r, b, sn, se, e, i, nnodes, nedges, id;\n",
    "    id:=Base64String(Concatenation(\"graph\",String(Random(1,10000))));\n",
    "    b := Concatenation(\"<div id='\",id,\"'></div>\\ \",\n",
    "        \"<link href=\\\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\\\" rel=\\\"stylesheet\\\" type=\\\"text/css\\\" />\\\n",
    "       <script type=\\\"text/javascript\\\">\\\n",
    "       require.config({\\\n",
    "           paths: {\\\n",
    "               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'\\\n",
    "           }\\\n",
    "       });\\\n",
    "       require(['vis'], function (vis) {\\\n",
    "       var options = {\\\n",
    "       width:  '600px',\\\n",
    "       height: '600px',\\\n",
    "       keepAspectRatio: true,\\\n",
    "        verticalRatio: 0.5,\\\n",
    "        layout: { hierarchical: { sortMethod: 'directed' }  }\\\n",
    "        };\\ \");\n",
    "    sn:=Concatenation(\"var data = {dot: '\",NormalizedWhitespace(dot),\"'};\");\n",
    "    \n",
    "    e:=Concatenation(\"var container = document.getElementById('\",\n",
    "        id,\n",
    "        \"');var network = new vis.Network(container, data, options); });</script>\");\n",
    "    \n",
    "    r:=Concatenation(b,sn,e);\n",
    "    return Objectify( JupyterRenderableType, rec(  source := \"gap\", data := rec( (\"text/html\") := r ), metadata:=rec() ));\n",
    "end;"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='Z3JhcGg5MTM0'></div> <link href=\"https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" />       <script type=\"text/javascript\">       require.config({           paths: {               vis: 'https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min'           }       });       require(['vis'], function (vis) {       var options = {       width:  '600px',       height: '600px',       keepAspectRatio: true,        verticalRatio: 0.5,        layout: { hierarchical: { sortMethod: 'directed' }  }        }; var data = {dot: 'graph A{1; 2; 3; 1 -- 2; 3 -- 2;}'};var container = document.getElementById('Z3JhcGg5MTM0');var network = new vis.Network(container, data, options); });</script>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "graphdoth(\"graph A{1; 2; 3; 1 -- 2; 3 -- 2;}\");"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "GAP 4",
   "language": "gap",
   "name": "gap-4"
  },
  "language_info": {
   "codemirror_mode": "gap",
   "file_extension": ".g",
   "mimetype": "text/x-gap",
   "name": "GAP 4",
   "nbconvert_exporter": "",
   "pygments_lexer": "gap",
   "version": "4.11.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}