ralphgraph5.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# notes\n",
    "* thanks to Christian Moscardi (cmoscardi) at github) https://github.com/cmoscardi/embedded_d3_example/blob/master/Embedded_D3.ipynb\n",
    "* https://stackoverflow.com/a/48444142/170988"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'/home/jjon/.jupyter'"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import display, Javascript, HTML\n",
    "import json\n",
    "from pprint import pprint\n",
    "from jupyter_core.paths import jupyter_config_dir\n",
    "jupyter_config_dir()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Generate or load data here:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = json.load(open(\"ralph_graph.json\"))\n",
    "ralphjson = open(\"ralph_graph.json\").read()\n",
    "#pprint(data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.ralphdata={\n",
       "    \"directed\": true,\n",
       "    \"multigraph\": true,\n",
       "    \"graph\": {},\n",
       "    \"nodes\": [\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#hostage_exchange_1233a\",\n",
       "            \"dc:date\": \"1233-06-10\",\n",
       "            \"rdf:type\": \"crm:Event\",\n",
       "            \"rdfs:label\": \"1233 hostages: Ralph Mortimer gives Henry de Brompton to William de Stutevill\",\n",
       "            \"pome:attestedIn\": \"ns1:d1e13573\",\n",
       "            \"pome:isDiscussedIn\": \"R. C. Stacey <cite>Finance and Politics in the reign of Henry III</cite>\",\n",
       "            \"rdfs:comment\": \"Complex hostage exchange involving nearly 30 people, intimates of the crown as well as marcher lords. Each ternary relation (guarantor, hostage, captor) is recorded in a separate resource.\",\n",
       "            \"id\": \"hostage_exchange_1233a\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#William_de_Stutevill\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"foaf:name\": \"William de Stutevill\",\n",
       "            \"rdfs:label\": \"Stutevill, William de\",\n",
       "            \"id\": \"William_de_Stutevill\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Henry_de_Brompton\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"rdfs:label\": \"Henry (son of Brian) de Brompton\",\n",
       "            \"foaf:name\": \"Henry de Brompton\",\n",
       "            \"id\": \"Henry_de_Brompton\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Mortimer_Ralph_d_1247\",\n",
       "            \"rdfs:label\": \"Mortimer, Ralph (d.1247)\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"id\": \"Mortimer_Ralph_d_1247\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Stutevill_Osmund_de\",\n",
       "            \"rdfs:label\": \"Stutevill, Osmund de\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"id\": \"Stutevill_Osmund_de\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#hostage_exchange_1233b\",\n",
       "            \"pome:isDiscussedIn\": \"R. C. Stacey <cite>Finance and Politics in the reign of Henry III</cite>\",\n",
       "            \"dc:date\": \"1233-06-10\",\n",
       "            \"rdfs:label\": \"1233 hostages: William de Stutevill gives son Osmund de Stutevill to Stephen Segrave\",\n",
       "            \"pome:attestedIn\": \"ns1:d1e13573\",\n",
       "            \"rdf:type\": \"crm:Event\",\n",
       "            \"id\": \"hostage_exchange_1233b\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Ferri\\u00e8res_Isabella_de\",\n",
       "            \"rdfs:label\": \"Ferri\\u00e8res, Isabella de\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"id\": \"Ferri\\u00e8res_Isabella_de\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Mortimer_Roger_d_1214\",\n",
       "            \"rdfs:label\": \"Mortimer, Roger (d.1214)\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"id\": \"Mortimer_Roger_d_1214\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Brompton_Brian_de_1215-1277\",\n",
       "            \"rdfs:label\": \"Brompton, Brian de (1215-1277)\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"foaf:name\": \"Brian de Brompton\",\n",
       "            \"id\": \"Brompton_Brian_de_1215-1277\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Gwladys_Ddu\",\n",
       "            \"rdfs:label\": \"Gwladys_Ddu\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"id\": \"Gwladys_Ddu\"\n",
       "        },\n",
       "        {\n",
       "            \"uri\": \"http://example.com/thisgraph#Segrave_Stephen_d_1241\",\n",
       "            \"rdf:type\": \"pome:Person\",\n",
       "            \"rdfs:label\": \"Segrave, Stephen de d.1241\",\n",
       "            \"id\": \"Segrave_Stephen_d_1241\"\n",
       "        }\n",
       "    ],\n",
       "    \"links\": [\n",
       "        {\n",
       "            \"source\": \"hostage_exchange_1233a\",\n",
       "            \"target\": \"William_de_Stutevill\",\n",
       "            \"type\": \"pome:hostageHolder\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"hostage_exchange_1233a\",\n",
       "            \"target\": \"Henry_de_Brompton\",\n",
       "            \"type\": \"pome:hostage\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"hostage_exchange_1233a\",\n",
       "            \"target\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"type\": \"pome:hostageGiver\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"William_de_Stutevill\",\n",
       "            \"target\": \"Stutevill_Osmund_de\",\n",
       "            \"type\": \"rel:parentOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"William_de_Stutevill\",\n",
       "            \"target\": \"Segrave_Stephen_d_1241\",\n",
       "            \"type\": \"pome:gives_hostage_to\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"William_de_Stutevill\",\n",
       "            \"target\": \"Henry_de_Brompton\",\n",
       "            \"type\": \"pome:holds_as_hostage\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"William_de_Stutevill\",\n",
       "            \"target\": \"hostage_exchange_1233a\",\n",
       "            \"type\": \"crm:participated_in\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"William_de_Stutevill\",\n",
       "            \"target\": \"hostage_exchange_1233b\",\n",
       "            \"type\": \"crm:participated_in\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Henry_de_Brompton\",\n",
       "            \"target\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"type\": \"pome:is_hostage_for\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Henry_de_Brompton\",\n",
       "            \"target\": \"hostage_exchange_1233a\",\n",
       "            \"type\": \"crm:participated_in\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Henry_de_Brompton\",\n",
       "            \"target\": \"Brompton_Brian_de_1215-1277\",\n",
       "            \"type\": \"rel:childOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"hostage_exchange_1233a\",\n",
       "            \"type\": \"crm:participated_in\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"Ferri\\u00e8res_Isabella_de\",\n",
       "            \"type\": \"rel:childOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"Mortimer_Roger_d_1214\",\n",
       "            \"type\": \"rel:childOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"Brompton_Brian_de_1215-1277\",\n",
       "            \"type\": \"pome:lordOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"Gwladys_Ddu\",\n",
       "            \"type\": \"rel:spouseOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"target\": \"William_de_Stutevill\",\n",
       "            \"type\": \"pome:gives_hostage_to\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Stutevill_Osmund_de\",\n",
       "            \"target\": \"William_de_Stutevill\",\n",
       "            \"type\": \"pome:is_hostage_for\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Stutevill_Osmund_de\",\n",
       "            \"target\": \"William_de_Stutevill\",\n",
       "            \"type\": \"rel:childOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"hostage_exchange_1233b\",\n",
       "            \"target\": \"William_de_Stutevill\",\n",
       "            \"type\": \"pome:hostageGiver\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Mortimer_Roger_d_1214\",\n",
       "            \"target\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"type\": \"rel:parentOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Brompton_Brian_de_1215-1277\",\n",
       "            \"target\": \"Henry_de_Brompton\",\n",
       "            \"type\": \"rel:parentOf\"\n",
       "        },\n",
       "        {\n",
       "            \"source\": \"Brompton_Brian_de_1215-1277\",\n",
       "            \"target\": \"Mortimer_Ralph_d_1247\",\n",
       "            \"type\": \"pome:serves\"\n",
       "        }\n",
       "    ]\n",
       "}\n",
       ";"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# get the data into a global browser variable\n",
    "Javascript(\"\"\"window.ralphdata={};\"\"\".format(ralphjson))\n",
    "\n",
    "# fiddling:\n",
    "# fizz = {'foo':'bar', 'answer':42}\n",
    "# Javascript(\"\"\"window.foovar={}\"\"\".format(fizz))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Diddle the DOM here: sub-elements and style elements\n",
    "We'll be generating the SVG in one of the sub-elements here defined."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  .node {opacity: .2}\n",
       "  .edgelabel {visibility: hidden}\n",
       "  .edgelabel.active {visibility: visible}\n",
       "  .edge.active {stroke-opacity: 1}\n",
       "  .active {opacity: 1}\n",
       "  #exchangeEvent {float: right}\n",
       "  .clicked-element {\n",
       "    text-align: center;\n",
       "    font-weight: bold;\n",
       "    text-decoration: underline overline;\n",
       "  }\n",
       "  #metadata {\n",
       "    position: absolute;\n",
       "    max-height: 300px;\n",
       "    overflow: auto;\n",
       "    padding: 2px;\n",
       "    font: 9pt sans-serif;\n",
       "    background: #efeadf;\n",
       "    border: 0px;\n",
       "    border-radius: 8px;\n",
       "    width: min-content;\n",
       "    min-width: 460px;\n",
       "  }\n",
       "  table.metadata {\n",
       "    margin-left: auto!important;\n",
       "    margin-right: auto!important;\n",
       "  }\n",
       "  table.metadata td.value {text-align: left;}\n",
       "  table.metadata td.key {\n",
       "    border-style: solid;\n",
       "    border-width: 1px 6px 0px 0px;\n",
       "    border-color: #930;\n",
       "    text-align: right;\n",
       "    padding-right: 1em;\n",
       "  }\n",
       "  #myTable2 {position: fixed;\n",
       "    bottom: 0px;\n",
       "    height: 100px;\n",
       "  }\n",
       "</style>\n",
       "<div id='metadata'></div>\n",
       "<div id='graphdisplay'></div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Diddle the DOM here: sub-elements and <style> element\n",
    "\n",
    "#HTML(filename='ralphgraph.css.html') #Why does this not work?\n",
    "HTML(\"\"\"\n",
    "<style>\n",
    "  .node {opacity: .2}\n",
    "  .edgelabel {visibility: hidden}\n",
    "  .edgelabel.active {visibility: visible}\n",
    "  .edge.active {stroke-opacity: 1}\n",
    "  .active {opacity: 1}\n",
    "  #exchangeEvent {float: right}\n",
    "  .clicked-element {\n",
    "    text-align: center;\n",
    "    font-weight: bold;\n",
    "    text-decoration: underline overline;\n",
    "  }\n",
    "  #metadata {\n",
    "    position: absolute;\n",
    "    max-height: 300px;\n",
    "    overflow: auto;\n",
    "    padding: 2px;\n",
    "    font: 9pt sans-serif;\n",
    "    background: #efeadf;\n",
    "    border: 0px;\n",
    "    border-radius: 8px;\n",
    "    width: min-content;\n",
    "    min-width: 460px;\n",
    "  }\n",
    "  table.metadata {\n",
    "    margin-left: auto!important;\n",
    "    margin-right: auto!important;\n",
    "  }\n",
    "  table.metadata td.value {text-align: left;}\n",
    "  table.metadata td.key {\n",
    "    border-style: solid;\n",
    "    border-width: 1px 6px 0px 0px;\n",
    "    border-color: #930;\n",
    "    text-align: right;\n",
    "    padding-right: 1em;\n",
    "  }\n",
    "  #myTable2 {position: fixed;\n",
    "    bottom: 0px;\n",
    "    height: 100px;\n",
    "  }\n",
    "</style>\n",
    "<div id='metadata'></div>\n",
    "<div id='graphdisplay'></div>\n",
    "\"\"\")\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Here's the `%%javascript` cell where the simulation is generated\n",
    "I wanted to import it from a file using `require` or some other strategem, but haven't figured that out yet. Putting the whole d3 script here means we can use the data in the `window.ralphdata` variable defined above. Herein, we can also diddle the DOM using jQuery: (eg.`$(\"#metadata\").draggable();`)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "//console.log(require.load);\n",
       "\n",
       "$(\"#metadata\").draggable();\n",
       "\n",
       "require([\"ralphgraph_test.js\"], function(){\n",
       "    drawGraph(graphdisplay, params, ralphdata);\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "//console.log(require.load);\n",
    "\n",
    "$(\"#metadata\").draggable();\n",
    "\n",
    "require([\"ralphgraph_test.js\"], function(){\n",
    "    drawGraph(graphdisplay, params, ralphdata);\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['__about__', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__path__', '__spec__', '__version__', '_jupyter_nbextension_paths', 'communicate', 'core', 'daiquiri', 'execute', 'execute_with_requirements', 'get_ipython', 'link_css', 'link_js', 'load_css', 'load_ipython_extension', 'load_js', 'logger', 'logging', 'magic', 'notebook', 'register_comm_targets', 'require', 'safe_execute', 'time']\n"
     ]
    }
   ],
   "source": [
    "import jupyter_require\n",
    "print(dir(jupyter_require))"
   ]
  }
 ],
 "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.7.4"
  },
  "require": {
   "paths": {
    "d3": "d3.ver5.js"
   },
   "shim": {}
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}