ralphgraph4.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:\n",
    "## here we can diddle with `code` before we present it"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[{'source': 'hostage_exchange_1233a',\n",
      "  'target': 'William_de_Stutevill',\n",
      "  'type': 'pome:hostageHolder'},\n",
      " {'source': 'hostage_exchange_1233a',\n",
      "  'target': 'Henry_de_Brompton',\n",
      "  'type': 'pome:hostage'},\n",
      " {'source': 'hostage_exchange_1233a',\n",
      "  'target': 'Mortimer_Ralph_d_1247',\n",
      "  'type': 'pome:hostageGiver'},\n",
      " {'source': 'William_de_Stutevill',\n",
      "  'target': 'Stutevill_Osmund_de',\n",
      "  'type': 'rel:parentOf'},\n",
      " {'source': 'William_de_Stutevill',\n",
      "  'target': 'Segrave_Stephen_d_1241',\n",
      "  'type': 'pome:gives_hostage_to'},\n",
      " {'source': 'William_de_Stutevill',\n",
      "  'target': 'Henry_de_Brompton',\n",
      "  'type': 'pome:holds_as_hostage'},\n",
      " {'source': 'William_de_Stutevill',\n",
      "  'target': 'hostage_exchange_1233a',\n",
      "  'type': 'crm:participated_in'},\n",
      " {'source': 'William_de_Stutevill',\n",
      "  'target': 'hostage_exchange_1233b',\n",
      "  'type': 'crm:participated_in'},\n",
      " {'source': 'Henry_de_Brompton',\n",
      "  'target': 'Mortimer_Ralph_d_1247',\n",
      "  'type': 'pome:is_hostage_for'},\n",
      " {'source': 'Henry_de_Brompton',\n",
      "  'target': 'hostage_exchange_1233a',\n",
      "  'type': 'crm:participated_in'},\n",
      " {'source': 'Henry_de_Brompton',\n",
      "  'target': 'Brompton_Brian_de_1215-1277',\n",
      "  'type': 'rel:childOf'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'hostage_exchange_1233a',\n",
      "  'type': 'crm:participated_in'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'Ferrières_Isabella_de',\n",
      "  'type': 'rel:childOf'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'Mortimer_Roger_d_1214',\n",
      "  'type': 'rel:childOf'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'Brompton_Brian_de_1215-1277',\n",
      "  'type': 'pome:lordOf'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'Gwladys_Ddu',\n",
      "  'type': 'rel:spouseOf'},\n",
      " {'source': 'Mortimer_Ralph_d_1247',\n",
      "  'target': 'William_de_Stutevill',\n",
      "  'type': 'pome:gives_hostage_to'},\n",
      " {'source': 'Stutevill_Osmund_de',\n",
      "  'target': 'William_de_Stutevill',\n",
      "  'type': 'pome:is_hostage_for'},\n",
      " {'source': 'Stutevill_Osmund_de',\n",
      "  'target': 'William_de_Stutevill',\n",
      "  'type': 'rel:childOf'},\n",
      " {'source': 'hostage_exchange_1233b',\n",
      "  'target': 'William_de_Stutevill',\n",
      "  'type': 'pome:hostageGiver'},\n",
      " {'source': 'Mortimer_Roger_d_1214',\n",
      "  'target': 'Mortimer_Ralph_d_1247',\n",
      "  'type': 'rel:parentOf'},\n",
      " {'source': 'Brompton_Brian_de_1215-1277',\n",
      "  'target': 'Henry_de_Brompton',\n",
      "  'type': 'rel:parentOf'},\n",
      " {'source': 'Brompton_Brian_de_1215-1277',\n",
      "  'target': 'Mortimer_Ralph_d_1247',\n",
      "  'type': 'pome:serves'}]\n"
     ]
    }
   ],
   "source": [
    "data = json.load(open(\"ralph_graph.json\"))\n",
    "ralphjson = open(\"ralph_graph.json\").read()\n",
    "pprint(data[\"links\"])"
   ]
  },
  {
   "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",
    "# print(ralphjson)\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": 4,
   "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": 4,
     "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 this script from a file using `require` or some other strategem, but haven't yet found the right incantation for that. 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": 6,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$(\"#metadata\").draggable();\n",
       "\n",
       "require([\"d3.ver5.js\"], function(d3){    \n",
       "/******************************************\n",
       "    Construct the d3 simulation in the cell\n",
       "    because I couldn't figure out how to\n",
       "    import it as a local module\n",
       "*******************************************/\n",
       "    var links = {};\n",
       "    var nodes = {};\n",
       "    \n",
       "    const params = {\n",
       "        \"chargeStrength\": -600\n",
       "    }\n",
       "\n",
       "    function drawGraph(container, params, data){\n",
       "        //console.log(data.links);\n",
       "        const width = 600, height = 600;\n",
       "        links = data.links.map(d => Object.create(d));\n",
       "        nodes = data.nodes.map(d => Object.create(d));\n",
       "\n",
       "        // Links with identical arcs get a `linknum` to calculate bezier anchor.\n",
       "        // implemented in `linkArc()` called in `tick()`\n",
       "        for (var i = 0; i < links.length; i++) {\n",
       "            links[i].id = `edge${i}`;\n",
       "            if (i != 0 &&\n",
       "              links[i].source == links[i - 1].source &&\n",
       "              links[i].target == links[i - 1].target)\n",
       "            {\n",
       "              links[i].linknum = links[i - 1].linknum + 1;\n",
       "            } else { links[i].linknum = 1; };\n",
       "          };\n",
       "\n",
       "        //console.log(links);\n",
       "        const simulation = d3.forceSimulation(nodes)\n",
       "          .force(\"link\", d3.forceLink(links)\n",
       "            .id(d => d.id)\n",
       "            .distance(d => whatNodeTypes(d, 'Event')? 60 : 100)\n",
       "          )\n",
       "          .force(\"charge\", d3.forceManyBody().strength(params.chargeStrength))\n",
       "          .force(\"center\", d3.forceCenter(width / 2, height / 2));\n",
       "\n",
       "        //console.log(simulation);\n",
       "\n",
       "        d3.select(\"svg\").remove();\n",
       "        const svg = d3.select(container).append(\"svg\")\n",
       "          .attr(\"viewBox\", [0, 0, 600, 600]);\n",
       "\n",
       "        svg.append(\"svg:defs\").selectAll(\"marker\")\n",
       "            .data([\"end\",\"none\"])\n",
       "          .enter().append(\"svg:marker\")\n",
       "            .attr(\"id\", String)\n",
       "            .attr(\"viewBox\", \"0 -5 10 10\")\n",
       "            .attr(\"refX\", 15)\n",
       "            .attr(\"refY\", -1.5)\n",
       "            .attr(\"markerWidth\", 8)\n",
       "            .attr(\"markerHeight\", 8 )\n",
       "            .attr(\"orient\", \"auto\")\n",
       "          .append(\"svg:path\")\n",
       "            .attr(\"d\", \"M0,-5L10,0L0,5\");\n",
       "\n",
       "        const link = svg.append(\"g\").attr(\"class\", \"edges\")\n",
       "            .selectAll(\"path\")\n",
       "            .data(links)\n",
       "          .join(\"path\")\n",
       "            .attr(\"class\", \"edge\")\n",
       "            .attr('id', p => p.id)\n",
       "            .attr(\"stroke-opacity\", 0.2)\n",
       "            .attr(\"stroke\", \"#333\")\n",
       "            .attr(\"fill\", \"none\");\n",
       "\n",
       "\n",
       "        const edgelabels = svg.append(\"g\").attr(\"class\", \"edgelabels\")\n",
       "              .selectAll(\".edgelabel\")\n",
       "              .data(links)\n",
       "            .enter()\n",
       "            .append('text')\n",
       "              .attr('class','edgelabel')\n",
       "              .attr('id', (d,i) => 'edgelabel' + i)\n",
       "              .attr(\"fill\",\"#000\")\n",
       "              .style(\"cursor\", \"pointer\")\n",
       "              .style(\"font\", \"6px sans serif\")\n",
       "              .on(\"click\", showMetadata);\n",
       "\n",
       "\n",
       "        edgelabels.append('textPath')\n",
       "            .attr('xlink:href', (d, i) => '#edge' + i)\n",
       "            .style(\"text-anchor\", \"middle\")\n",
       "            //.style(\"pointer-events\", \"none\")\n",
       "            .attr(\"startOffset\", \"50%\")\n",
       "            .text(d => d.type.slice(d.type.indexOf(\":\")+1));\n",
       "\n",
       "\n",
       "        const node = svg.append(\"g\").attr(\"class\", \"nodes\")\n",
       "            .selectAll(\".node\")\n",
       "            .data(nodes)\n",
       "          .join(\"g\").attr(\"class\", \"node\")\n",
       "            .attr(\"id\", d => d.id)\n",
       "          .call(drag(simulation));\n",
       "\n",
       "        node.append(\"circle\")\n",
       "          .attr(\"stroke\", \"#fff\")\n",
       "          .attr(\"stroke-width\", 1.5)\n",
       "          .attr(\"r\", 5)\n",
       "          .attr(\"fill\", \"#f90\")\n",
       "          .style(\"cursor\", \"pointer\")\n",
       "          .on(\"mouseover\", highlight)\n",
       "          .on(\"click\", showMetadata);\n",
       "\n",
       "        node.append(\"text\")\n",
       "          .attr(\"dy\", 12)\n",
       "          .attr(\"dx\", 6)\n",
       "          .text(d => d.id)\n",
       "            //Creates problems: return (d[\"rdf:type\"] == \"crm:Event\")? d.id : d[\"rdfs:label\"]\n",
       "            //ralphjson works but graphjson throws errors from d3.selectors in highlight()\n",
       "          .style(\"font\", \"9px sans serif\")\n",
       "          .clone(true).lower()\n",
       "          .attr(\"fill\", \"none\")\n",
       "          .attr(\"stroke\", \"white\")\n",
       "          .attr(\"stroke-width\", 3);\n",
       "\n",
       "\n",
       "        //node.on(\"click\", highlight);\n",
       "\n",
       "        simulation.on(\"tick\", () => {\n",
       "          link.attr(\"d\", linkArc);\n",
       "          node.attr(\"transform\", d => \"translate(\" + d.x + \", \" + d.y + \")\");\n",
       "        });\n",
       "\n",
       "        //var sim = simulation;\n",
       "\n",
       "        d3.select(\"#exchangeEvent\").on(\"click\", eventNodes);\n",
       "\n",
       "        return svg;\n",
       "    }\n",
       "\n",
       "    function linkArc(d,i,lnks) { // NB i and lnks available as parameters here too\n",
       "      var dx = d.target.x - d.source.x,\n",
       "          dy = d.target.y - d.source.y;\n",
       "      var qx = dy /  6 * d.linknum,\n",
       "          qy = -dx / 6 * d.linknum;\n",
       "      var qx1 = (d.source.x + (dx / 2)) + qx,\n",
       "          qy1 = (d.source.y + (dy / 2)) + qy;\n",
       "      return `M${d.source.x} ${d.source.y}\n",
       "              C${d.source.x} ${d.source.y}, ${qx1} ${qy1}, ${d.target.x} ${d.target.y}`;\n",
       "    };\n",
       "\n",
       "    /* whatNodeTypes returns true if either source or target\n",
       "     *  is the provided Node type.d => whatNodeTypes(d, 'crm:Event')? 10 : 60\n",
       "     */\n",
       "    function whatNodeTypes(link, ntype){\n",
       "      var stype = link.source[\"rdf:type\"];\n",
       "      var ttype = link.target[\"rdf:type\"];\n",
       "      var ltype = link.type;\n",
       "      //console.log(stype,ttype,ltype);\n",
       "      return (stype == ntype || ttype == ntype)? true : false;\n",
       "    }\n",
       "\n",
       "    function eventNodes(){\n",
       "      /* TODO: generalize the filter mechanism to take desired attributes.\n",
       "       * TODO: add mechanism to restore state\n",
       "       * Q: can we act on forces from within this function?\n",
       "       */\n",
       "      /****** Modify the appearance of selected nodes:\n",
       "      const evtNodes = d3.selectAll(\".node\").filter(n => n['rdf:type'] == \"crm:Event\")\n",
       "      evtNodes.each(enode => d3.select(`#${enode.id} circle`)\n",
       "        .attr(\"stroke-width\", 5)\n",
       "        .attr(\"fill\", \"#f60\")\n",
       "        .attr(\"r\", 32)\n",
       "        .attr(\"stroke\", \"#000\")\n",
       "      )\n",
       "      d3.selectAll('.edge').filter(d => d.target.id == \"Mortimer_Ralph_d_1247\").remove()\n",
       "\n",
       "      *************************/\n",
       "      var excha = ralphdata.links.filter(x => x.target == \"Mortimer_Ralph_d_1247\")\n",
       "      d3.selectAll(\".edge\")\n",
       "        .data(excha, (d,i) => console.log(d,i))\n",
       "        .remove() //this removes link index 0-2 no matter their link id.\n",
       "    }\n",
       "\n",
       "    function showMetadata(d,i,nds){\n",
       "      var clicked = (\"target\" in d) ? '<div class=\"clicked-element\">Edge Data</div>' : '<div class=\"clicked-element\">Node Data</div>';\n",
       "      var entries = Object.entries(d.__proto__);\n",
       "      var table = makeTable(entries);\n",
       "      var html = clicked + table\n",
       "      var div = d3.select(\"#metadata\").html(html);\n",
       "    }\n",
       "\n",
       "    function highlight(d,i,nds){\n",
       "      //console.log(d,i,nds);\n",
       "      //console.log(\"links is: \", links);\n",
       "      //return links to base state\n",
       "      d3.selectAll('.active').classed(\"active\", false);\n",
       "      d3.selectAll('.edge').attr(\"marker-end\", \"none\");\n",
       "\n",
       "      // get array of links with mouseover node as either source or target\n",
       "      var nodelinks = links.filter(x => x.source.index == i || x.target.index == i);\n",
       "\n",
       "      // set node class active\n",
       "      // ToDo: This is a problem for graphjson?\n",
       "      new Set(nodelinks.map(x => [x.source, x.target]).flat())\n",
       "      .forEach(x => d3.select(`#${x.id}`).classed('active', true))\n",
       "\n",
       "      // set link class active\n",
       "      nodelinks.forEach(x =>\n",
       "        {d3.select(\"path#edge\" + x.index)\n",
       "        .classed(\"active\", true)\n",
       "        .attr(\"marker-end\", \"url(#end)\");\n",
       "\n",
       "        d3.select(\"text#edgelabel\" + x.index)\n",
       "        .classed(\"active\", true);}\n",
       "      );\n",
       "    }\n",
       "\n",
       "    var drag = simulation => {\n",
       "\n",
       "      function dragstarted(d) {\n",
       "        if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n",
       "        d.fx = d.x;\n",
       "        d.fy = d.y;\n",
       "      }\n",
       "      function dragged(d) {\n",
       "        d.fx = d3.event.x;\n",
       "        d.fy = d3.event.y;\n",
       "      }\n",
       "      function dragended(d) {\n",
       "        if (!d3.event.active) simulation.alphaTarget(0);\n",
       "        d.fx = null;\n",
       "        d.fy = null;\n",
       "      }\n",
       "      return d3.drag()\n",
       "          .on(\"start\", dragstarted)\n",
       "          .on(\"drag\", dragged)\n",
       "          .on(\"end\", dragended);\n",
       "    }\n",
       "\n",
       "  function makeTable(array){\n",
       "    var html = '<table class=\"metadata\">'\n",
       "      for (var i=0; i < array.length; i++){\n",
       "        var d = array[i];\n",
       "        html += `<tr><td class=\"key\">${d[0]}</td><td class=\"value\">${d[1]}</td></tr>`;\n",
       "      };\n",
       "      html += \"</table>\";\n",
       "      return html;\n",
       "    }\n",
       "\n",
       "    //***** draw the graph *****//\n",
       "    drawGraph(graphdisplay, params, ralphdata);\n",
       "    \n",
       "\n",
       "    //element.append('<small>&#x25C9; &#x25CB; &#x25EF; Loaded ralphgraph.js &#x25CC; &#x25CE; &#x25CF;</small>');\n",
       "    //console.log(element);\n",
       "})\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "$(\"#metadata\").draggable();\n",
    "\n",
    "require([\"d3.ver5.js\"], function(d3){    \n",
    "/******************************************\n",
    "    Construct the d3 simulation in the cell\n",
    "    because I couldn't figure out how to\n",
    "    import it as a local module\n",
    "*******************************************/\n",
    "    var links = {};\n",
    "    var nodes = {};\n",
    "    \n",
    "    const params = {\n",
    "        \"chargeStrength\": -600\n",
    "    }\n",
    "\n",
    "    function drawGraph(container, params, data){\n",
    "        //console.log(data.links);\n",
    "        const width = 600, height = 600;\n",
    "        links = data.links.map(d => Object.create(d));\n",
    "        nodes = data.nodes.map(d => Object.create(d));\n",
    "\n",
    "        // Links with identical arcs get a `linknum` to calculate bezier anchor.\n",
    "        // implemented in `linkArc()` called in `tick()`\n",
    "        for (var i = 0; i < links.length; i++) {\n",
    "            links[i].id = `edge${i}`;\n",
    "            if (i != 0 &&\n",
    "              links[i].source == links[i - 1].source &&\n",
    "              links[i].target == links[i - 1].target)\n",
    "            {\n",
    "              links[i].linknum = links[i - 1].linknum + 1;\n",
    "            } else { links[i].linknum = 1; };\n",
    "          };\n",
    "\n",
    "        //console.log(links);\n",
    "        const simulation = d3.forceSimulation(nodes)\n",
    "          .force(\"link\", d3.forceLink(links)\n",
    "            .id(d => d.id)\n",
    "            .distance(d => whatNodeTypes(d, 'Event')? 60 : 100)\n",
    "          )\n",
    "          .force(\"charge\", d3.forceManyBody().strength(params.chargeStrength))\n",
    "          .force(\"center\", d3.forceCenter(width / 2, height / 2));\n",
    "\n",
    "        //console.log(simulation);\n",
    "\n",
    "        d3.select(\"svg\").remove();\n",
    "        const svg = d3.select(container).append(\"svg\")\n",
    "          .attr(\"viewBox\", [0, 0, 600, 600]);\n",
    "\n",
    "        svg.append(\"svg:defs\").selectAll(\"marker\")\n",
    "            .data([\"end\",\"none\"])\n",
    "          .enter().append(\"svg:marker\")\n",
    "            .attr(\"id\", String)\n",
    "            .attr(\"viewBox\", \"0 -5 10 10\")\n",
    "            .attr(\"refX\", 15)\n",
    "            .attr(\"refY\", -1.5)\n",
    "            .attr(\"markerWidth\", 8)\n",
    "            .attr(\"markerHeight\", 8 )\n",
    "            .attr(\"orient\", \"auto\")\n",
    "          .append(\"svg:path\")\n",
    "            .attr(\"d\", \"M0,-5L10,0L0,5\");\n",
    "\n",
    "        const link = svg.append(\"g\").attr(\"class\", \"edges\")\n",
    "            .selectAll(\"path\")\n",
    "            .data(links)\n",
    "          .join(\"path\")\n",
    "            .attr(\"class\", \"edge\")\n",
    "            .attr('id', p => p.id)\n",
    "            .attr(\"stroke-opacity\", 0.2)\n",
    "            .attr(\"stroke\", \"#333\")\n",
    "            .attr(\"fill\", \"none\");\n",
    "\n",
    "\n",
    "        const edgelabels = svg.append(\"g\").attr(\"class\", \"edgelabels\")\n",
    "              .selectAll(\".edgelabel\")\n",
    "              .data(links)\n",
    "            .enter()\n",
    "            .append('text')\n",
    "              .attr('class','edgelabel')\n",
    "              .attr('id', (d,i) => 'edgelabel' + i)\n",
    "              .attr(\"fill\",\"#000\")\n",
    "              .style(\"cursor\", \"pointer\")\n",
    "              .style(\"font\", \"6px sans serif\")\n",
    "              .on(\"click\", showMetadata);\n",
    "\n",
    "\n",
    "        edgelabels.append('textPath')\n",
    "            .attr('xlink:href', (d, i) => '#edge' + i)\n",
    "            .style(\"text-anchor\", \"middle\")\n",
    "            //.style(\"pointer-events\", \"none\")\n",
    "            .attr(\"startOffset\", \"50%\")\n",
    "            .text(d => d.type.slice(d.type.indexOf(\":\")+1));\n",
    "\n",
    "\n",
    "        const node = svg.append(\"g\").attr(\"class\", \"nodes\")\n",
    "            .selectAll(\".node\")\n",
    "            .data(nodes)\n",
    "          .join(\"g\").attr(\"class\", \"node\")\n",
    "            .attr(\"id\", d => d.id)\n",
    "          .call(drag(simulation));\n",
    "\n",
    "        node.append(\"circle\")\n",
    "          .attr(\"stroke\", \"#fff\")\n",
    "          .attr(\"stroke-width\", 1.5)\n",
    "          .attr(\"r\", 5)\n",
    "          .attr(\"fill\", \"#f90\")\n",
    "          .style(\"cursor\", \"pointer\")\n",
    "          .on(\"mouseover\", highlight)\n",
    "          .on(\"click\", showMetadata);\n",
    "\n",
    "        node.append(\"text\")\n",
    "          .attr(\"dy\", 12)\n",
    "          .attr(\"dx\", 6)\n",
    "          .text(d => d.id)\n",
    "            //Creates problems: return (d[\"rdf:type\"] == \"crm:Event\")? d.id : d[\"rdfs:label\"]\n",
    "            //ralphjson works but graphjson throws errors from d3.selectors in highlight()\n",
    "          .style(\"font\", \"9px sans serif\")\n",
    "          .clone(true).lower()\n",
    "          .attr(\"fill\", \"none\")\n",
    "          .attr(\"stroke\", \"white\")\n",
    "          .attr(\"stroke-width\", 3);\n",
    "\n",
    "\n",
    "        //node.on(\"click\", highlight);\n",
    "\n",
    "        simulation.on(\"tick\", () => {\n",
    "          link.attr(\"d\", linkArc);\n",
    "          node.attr(\"transform\", d => \"translate(\" + d.x + \", \" + d.y + \")\");\n",
    "        });\n",
    "\n",
    "        //var sim = simulation;\n",
    "\n",
    "        d3.select(\"#exchangeEvent\").on(\"click\", eventNodes);\n",
    "\n",
    "        return svg;\n",
    "    }\n",
    "\n",
    "    function linkArc(d,i,lnks) { // NB i and lnks available as parameters here too\n",
    "      var dx = d.target.x - d.source.x,\n",
    "          dy = d.target.y - d.source.y;\n",
    "      var qx = dy /  6 * d.linknum,\n",
    "          qy = -dx / 6 * d.linknum;\n",
    "      var qx1 = (d.source.x + (dx / 2)) + qx,\n",
    "          qy1 = (d.source.y + (dy / 2)) + qy;\n",
    "      return `M${d.source.x} ${d.source.y}\n",
    "              C${d.source.x} ${d.source.y}, ${qx1} ${qy1}, ${d.target.x} ${d.target.y}`;\n",
    "    };\n",
    "\n",
    "    /* whatNodeTypes returns true if either source or target\n",
    "     *  is the provided Node type.d => whatNodeTypes(d, 'crm:Event')? 10 : 60\n",
    "     */\n",
    "    function whatNodeTypes(link, ntype){\n",
    "      var stype = link.source[\"rdf:type\"];\n",
    "      var ttype = link.target[\"rdf:type\"];\n",
    "      var ltype = link.type;\n",
    "      //console.log(stype,ttype,ltype);\n",
    "      return (stype == ntype || ttype == ntype)? true : false;\n",
    "    }\n",
    "\n",
    "    function eventNodes(){\n",
    "      /* TODO: generalize the filter mechanism to take desired attributes.\n",
    "       * TODO: add mechanism to restore state\n",
    "       * Q: can we act on forces from within this function?\n",
    "       */\n",
    "      /****** Modify the appearance of selected nodes:\n",
    "      const evtNodes = d3.selectAll(\".node\").filter(n => n['rdf:type'] == \"crm:Event\")\n",
    "      evtNodes.each(enode => d3.select(`#${enode.id} circle`)\n",
    "        .attr(\"stroke-width\", 5)\n",
    "        .attr(\"fill\", \"#f60\")\n",
    "        .attr(\"r\", 32)\n",
    "        .attr(\"stroke\", \"#000\")\n",
    "      )\n",
    "      d3.selectAll('.edge').filter(d => d.target.id == \"Mortimer_Ralph_d_1247\").remove()\n",
    "\n",
    "      *************************/\n",
    "      var excha = ralphdata.links.filter(x => x.target == \"Mortimer_Ralph_d_1247\")\n",
    "      d3.selectAll(\".edge\")\n",
    "        .data(excha, (d,i) => console.log(d,i))\n",
    "        .remove() //this removes link index 0-2 no matter their link id.\n",
    "    }\n",
    "\n",
    "    function showMetadata(d,i,nds){\n",
    "      var clicked = (\"target\" in d) ? '<div class=\"clicked-element\">Edge Data</div>' : '<div class=\"clicked-element\">Node Data</div>';\n",
    "      var entries = Object.entries(d.__proto__);\n",
    "      var table = makeTable(entries);\n",
    "      var html = clicked + table\n",
    "      var div = d3.select(\"#metadata\").html(html);\n",
    "    }\n",
    "\n",
    "    function highlight(d,i,nds){\n",
    "      //console.log(d,i,nds);\n",
    "      //console.log(\"links is: \", links);\n",
    "      //return links to base state\n",
    "      d3.selectAll('.active').classed(\"active\", false);\n",
    "      d3.selectAll('.edge').attr(\"marker-end\", \"none\");\n",
    "\n",
    "      // get array of links with mouseover node as either source or target\n",
    "      var nodelinks = links.filter(x => x.source.index == i || x.target.index == i);\n",
    "\n",
    "      // set node class active\n",
    "      // ToDo: This is a problem for graphjson?\n",
    "      new Set(nodelinks.map(x => [x.source, x.target]).flat())\n",
    "      .forEach(x => d3.select(`#${x.id}`).classed('active', true))\n",
    "\n",
    "      // set link class active\n",
    "      nodelinks.forEach(x =>\n",
    "        {d3.select(\"path#edge\" + x.index)\n",
    "        .classed(\"active\", true)\n",
    "        .attr(\"marker-end\", \"url(#end)\");\n",
    "\n",
    "        d3.select(\"text#edgelabel\" + x.index)\n",
    "        .classed(\"active\", true);}\n",
    "      );\n",
    "    }\n",
    "\n",
    "    var drag = simulation => {\n",
    "\n",
    "      function dragstarted(d) {\n",
    "        if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n",
    "        d.fx = d.x;\n",
    "        d.fy = d.y;\n",
    "      }\n",
    "      function dragged(d) {\n",
    "        d.fx = d3.event.x;\n",
    "        d.fy = d3.event.y;\n",
    "      }\n",
    "      function dragended(d) {\n",
    "        if (!d3.event.active) simulation.alphaTarget(0);\n",
    "        d.fx = null;\n",
    "        d.fy = null;\n",
    "      }\n",
    "      return d3.drag()\n",
    "          .on(\"start\", dragstarted)\n",
    "          .on(\"drag\", dragged)\n",
    "          .on(\"end\", dragended);\n",
    "    }\n",
    "\n",
    "  function makeTable(array){\n",
    "    var html = '<table class=\"metadata\">'\n",
    "      for (var i=0; i < array.length; i++){\n",
    "        var d = array[i];\n",
    "        html += `<tr><td class=\"key\">${d[0]}</td><td class=\"value\">${d[1]}</td></tr>`;\n",
    "      };\n",
    "      html += \"</table>\";\n",
    "      return html;\n",
    "    }\n",
    "\n",
    "    //***** draw the graph *****//\n",
    "    drawGraph(graphdisplay, params, ralphdata);\n",
    "    \n",
    "\n",
    "    //element.append('<small>&#x25C9; &#x25CB; &#x25EF; Loaded ralphgraph.js &#x25CC; &#x25CE; &#x25CF;</small>');\n",
    "    //console.log(element);\n",
    "})"
   ]
  }
 ],
 "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
}