js_in_jupyter_notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Follow example https://www.stefaanlippens.net/jupyter-custom-d3-visualization.html\n",
    "you have to replace the url"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display, Javascript, HTML\n",
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        //d3: 'https://d3js.org/d3.v5.min',\n",
       "        TerminusClient:'https://dl.bintray.com/terminusdb/terminusdb/dev/terminusdb-client.min',\n",
       "        TerminusDBGraph:'https://dl.bintray.com/terminusdb/terminusdb/dev/terminusdb-d3-graph.min'\n",
       "    }\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        //d3: 'https://d3js.org/d3.v5.min',\n",
    "        TerminusClient:'https://dl.bintray.com/terminusdb/terminusdb/dev/terminusdb-client.min',\n",
    "        TerminusDBGraph:'https://dl.bintray.com/terminusdb/terminusdb/dev/terminusdb-d3-graph.min'\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "(function(element){\n",
       "require(['d3','TerminusClient','TerminusDBGraph'], function(d3,TerminusClient,TerminusDBGraph){\n",
       "    \n",
       "    console.log(TerminusDBGraph);\n",
       "    const resultData={\n",
       "  \"@type\":\"api:WoqlResponse\",\n",
       "  \"api:status\":\"api:success\",\n",
       "  \"api:variable_names\": [\n",
       "    \"Person\",\n",
       "    \"Name\",\n",
       "    \"Mother\",\n",
       "    \"Mother_Name\",\n",
       "    \"Mother_DOB\",\n",
       "    \"GranMother_Name\"\n",
       "  ],\n",
       "  \"bindings\": [\n",
       "    {\n",
       "      \"GranMother_Name\":\"system:unknown\",\n",
       "      \"Mother\":\"terminusdb:///data/Person_Maria_1945-12-03\",\n",
       "      \"Mother_DOB\": {\n",
       "      \"@type\":\"http://www.w3.org/2001/XMLSchema#date\",\n",
       "     \"@value\":\"1945-12-03\"\n",
       "      },\n",
       "      \"Mother_Name\": {\n",
       "       \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
       "       \"@value\":\"Maria\"\n",
       "      },\n",
       "      \"Name\": {\n",
       "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
       "  \"@value\":\"Anna\"\n",
       "      },\n",
       "      \"Person\":\"terminusdb:///data/Person_Anna_1974-02-10\"\n",
       "    },\n",
       "    {\n",
       "      \"GranMother_Name\":\"terminusdb:///data/Person_Maria_1945-12-03\",\n",
       "      \"Mother\":\"terminusdb:///data/Person_Anna_1974-02-10\",\n",
       "      \"Mother_DOB\": {\n",
       "  \"@type\":\"http://www.w3.org/2001/XMLSchema#date\",\n",
       "  \"@value\":\"1974-02-10\"\n",
       "      },\n",
       "      \"Mother_Name\": {\n",
       "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
       "  \"@value\":\"Anna\"\n",
       "      },\n",
       "      \"Name\": {\n",
       "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
       "  \"@value\":\"Emily\"\n",
       "      },\n",
       "      \"Person\":\"terminusdb:///data/Person_Emily_2011-06-23\"\n",
       "    },\n",
       "    {\n",
       "      \"GranMother_Name\":\"system:unknown\",\n",
       "      \"Mother\":\"system:unknown\",\n",
       "      \"Mother_DOB\":\"system:unknown\",\n",
       "      \"Mother_Name\":\"system:unknown\",\n",
       "      \"Name\": {\n",
       "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
       "  \"@value\":\"Maria\"\n",
       "      },\n",
       "      \"Person\":\"terminusdb:///data/Person_Maria_1945-12-03\"\n",
       "    }\n",
       "  ],\n",
       "  \"deletes\":0,\n",
       "  \"inserts\":0,\n",
       "  \"transaction_retry_count\":0\n",
       "}\n",
       "    \n",
       "    const woqlGraphConfig= TerminusClient.View.graph();\n",
       "    woqlGraphConfig.height(500).width(800)\n",
       "    \n",
       "    var result = new TerminusClient.WOQLResult(resultData);\n",
       "    let viewer = woqlGraphConfig.create(null);\n",
       "\n",
       "    viewer.setResult(result);\n",
       "    const graphResult= new TerminusDBGraph.GraphResultsViewer(viewer.config, viewer);\n",
       "    graphResult.load(element.get(0),true);\n",
       "})\n",
       "})(element)\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "(function(element){\n",
    "require(['TerminusClient','TerminusDBGraph'], function(TerminusClient,TerminusDBGraph){\n",
    "    \n",
    "    console.log(TerminusDBGraph);\n",
    "    const resultData={\n",
    "  \"@type\":\"api:WoqlResponse\",\n",
    "  \"api:status\":\"api:success\",\n",
    "  \"api:variable_names\": [\n",
    "    \"Person\",\n",
    "    \"Name\",\n",
    "    \"Mother\",\n",
    "    \"Mother_Name\",\n",
    "    \"Mother_DOB\",\n",
    "    \"GranMother_Name\"\n",
    "  ],\n",
    "  \"bindings\": [\n",
    "    {\n",
    "      \"GranMother_Name\":\"system:unknown\",\n",
    "      \"Mother\":\"terminusdb:///data/Person_Maria_1945-12-03\",\n",
    "      \"Mother_DOB\": {\n",
    "      \"@type\":\"http://www.w3.org/2001/XMLSchema#date\",\n",
    "     \"@value\":\"1945-12-03\"\n",
    "      },\n",
    "      \"Mother_Name\": {\n",
    "       \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
    "       \"@value\":\"Maria\"\n",
    "      },\n",
    "      \"Name\": {\n",
    "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
    "  \"@value\":\"Anna\"\n",
    "      },\n",
    "      \"Person\":\"terminusdb:///data/Person_Anna_1974-02-10\"\n",
    "    },\n",
    "    {\n",
    "      \"GranMother_Name\":\"terminusdb:///data/Person_Maria_1945-12-03\",\n",
    "      \"Mother\":\"terminusdb:///data/Person_Anna_1974-02-10\",\n",
    "      \"Mother_DOB\": {\n",
    "  \"@type\":\"http://www.w3.org/2001/XMLSchema#date\",\n",
    "  \"@value\":\"1974-02-10\"\n",
    "      },\n",
    "      \"Mother_Name\": {\n",
    "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
    "  \"@value\":\"Anna\"\n",
    "      },\n",
    "      \"Name\": {\n",
    "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
    "  \"@value\":\"Emily\"\n",
    "      },\n",
    "      \"Person\":\"terminusdb:///data/Person_Emily_2011-06-23\"\n",
    "    },\n",
    "    {\n",
    "      \"GranMother_Name\":\"system:unknown\",\n",
    "      \"Mother\":\"system:unknown\",\n",
    "      \"Mother_DOB\":\"system:unknown\",\n",
    "      \"Mother_Name\":\"system:unknown\",\n",
    "      \"Name\": {\n",
    "  \"@type\":\"http://www.w3.org/2001/XMLSchema#string\",\n",
    "  \"@value\":\"Maria\"\n",
    "      },\n",
    "      \"Person\":\"terminusdb:///data/Person_Maria_1945-12-03\"\n",
    "    }\n",
    "  ],\n",
    "  \"deletes\":0,\n",
    "  \"inserts\":0,\n",
    "  \"transaction_retry_count\":0\n",
    "}\n",
    "    \n",
    "    const woqlGraphConfig= TerminusClient.View.graph();\n",
    "    woqlGraphConfig.height(500).width(800)\n",
    "    \n",
    "    var result = new TerminusClient.WOQLResult(resultData);\n",
    "    let viewer = woqlGraphConfig.create(null);\n",
    "\n",
    "    viewer.setResult(result);\n",
    "    const graphResult= new TerminusDBGraph.GraphResultsViewer(viewer.config, viewer);\n",
    "    graphResult.load(element.get(0),true);\n",
    "})\n",
    "})(element)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}