ralphgraph2-Copy1.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display, Javascript, HTML\n",
    "import json\n",
    "from pprint import pprint\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'/home/jjon/.jupyter'"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from jupyter_core.paths import jupyter_config_dir\n",
    "jupyter_config_dir()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "***\n",
    "# here we diddle with data: import graph data as json, and/or generate json data with networkx or rdflib"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "('{\\n'\n",
      " '    \"directed\": true,\\n'\n",
      " '    \"multigraph\": true,\\n'\n",
      " '    \"graph\": {},\\n'\n",
      " '    \"nodes\": [\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#hostage_exchange_1233a\",\\n'\n",
      " '            \"dc:date\": \"1233-06-10\",\\n'\n",
      " '            \"rdf:type\": \"crm:Event\",\\n'\n",
      " '            \"rdfs:label\": \"1233 hostages: Ralph Mortimer gives Henry de '\n",
      " 'Brompton to William de Stutevill\",\\n'\n",
      " '            \"pome:attestedIn\": \"ns1:d1e13573\",\\n'\n",
      " '            \"pome:isDiscussedIn\": \"R. C. Stacey <cite>Finance and Politics '\n",
      " 'in the reign of Henry III</cite>\",\\n'\n",
      " '            \"rdfs:comment\": \"Complex hostage exchange involving nearly 30 '\n",
      " 'people, intimates of the crown as well as marcher lords. Each ternary '\n",
      " 'relation (guarantor, hostage, captor) is recorded in a separate resource.\",\\n'\n",
      " '            \"id\": \"hostage_exchange_1233a\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#William_de_Stutevill\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"foaf:name\": \"William de Stutevill\",\\n'\n",
      " '            \"rdfs:label\": \"Stutevill, William de\",\\n'\n",
      " '            \"id\": \"William_de_Stutevill\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Henry_de_Brompton\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"rdfs:label\": \"Henry (son of Brian) de Brompton\",\\n'\n",
      " '            \"foaf:name\": \"Henry de Brompton\",\\n'\n",
      " '            \"id\": \"Henry_de_Brompton\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"rdfs:label\": \"Mortimer, Ralph (d.1247)\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"id\": \"Mortimer_Ralph_d_1247\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Stutevill_Osmund_de\",\\n'\n",
      " '            \"rdfs:label\": \"Stutevill, Osmund de\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"id\": \"Stutevill_Osmund_de\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#hostage_exchange_1233b\",\\n'\n",
      " '            \"pome:isDiscussedIn\": \"R. C. Stacey <cite>Finance and Politics '\n",
      " 'in the reign of Henry III</cite>\",\\n'\n",
      " '            \"dc:date\": \"1233-06-10\",\\n'\n",
      " '            \"rdfs:label\": \"1233 hostages: William de Stutevill gives son '\n",
      " 'Osmund de Stutevill to Stephen Segrave\",\\n'\n",
      " '            \"pome:attestedIn\": \"ns1:d1e13573\",\\n'\n",
      " '            \"rdf:type\": \"crm:Event\",\\n'\n",
      " '            \"id\": \"hostage_exchange_1233b\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": '\n",
      " '\"http://example.com/thisgraph#Ferri\\\\u00e8res_Isabella_de\",\\n'\n",
      " '            \"rdfs:label\": \"Ferri\\\\u00e8res, Isabella de\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"id\": \"Ferri\\\\u00e8res_Isabella_de\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Mortimer_Roger_d_1214\",\\n'\n",
      " '            \"rdfs:label\": \"Mortimer, Roger (d.1214)\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"id\": \"Mortimer_Roger_d_1214\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": '\n",
      " '\"http://example.com/thisgraph#Brompton_Brian_de_1215-1277\",\\n'\n",
      " '            \"rdfs:label\": \"Brompton, Brian de (1215-1277)\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"foaf:name\": \"Brian de Brompton\",\\n'\n",
      " '            \"id\": \"Brompton_Brian_de_1215-1277\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Gwladys_Ddu\",\\n'\n",
      " '            \"rdfs:label\": \"Gwladys_Ddu\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"id\": \"Gwladys_Ddu\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"uri\": \"http://example.com/thisgraph#Segrave_Stephen_d_1241\",\\n'\n",
      " '            \"rdf:type\": \"pome:Person\",\\n'\n",
      " '            \"rdfs:label\": \"Segrave, Stephen de d.1241\",\\n'\n",
      " '            \"id\": \"Segrave_Stephen_d_1241\"\\n'\n",
      " '        }\\n'\n",
      " '    ],\\n'\n",
      " '    \"links\": [\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"target\": \"William_de_Stutevill\",\\n'\n",
      " '            \"type\": \"pome:hostageHolder\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"target\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"type\": \"pome:hostage\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"target\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"type\": \"pome:hostageGiver\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"William_de_Stutevill\",\\n'\n",
      " '            \"target\": \"Stutevill_Osmund_de\",\\n'\n",
      " '            \"type\": \"rel:parentOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"William_de_Stutevill\",\\n'\n",
      " '            \"target\": \"Segrave_Stephen_d_1241\",\\n'\n",
      " '            \"type\": \"pome:gives_hostage_to\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"William_de_Stutevill\",\\n'\n",
      " '            \"target\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"type\": \"pome:holds_as_hostage\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"William_de_Stutevill\",\\n'\n",
      " '            \"target\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"type\": \"crm:participated_in\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"William_de_Stutevill\",\\n'\n",
      " '            \"target\": \"hostage_exchange_1233b\",\\n'\n",
      " '            \"type\": \"crm:participated_in\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"target\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"type\": \"pome:is_hostage_for\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"target\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"type\": \"crm:participated_in\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"target\": \"Brompton_Brian_de_1215-1277\",\\n'\n",
      " '            \"type\": \"rel:childOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"hostage_exchange_1233a\",\\n'\n",
      " '            \"type\": \"crm:participated_in\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"Ferri\\\\u00e8res_Isabella_de\",\\n'\n",
      " '            \"type\": \"rel:childOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"Mortimer_Roger_d_1214\",\\n'\n",
      " '            \"type\": \"rel:childOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"Brompton_Brian_de_1215-1277\",\\n'\n",
      " '            \"type\": \"pome:lordOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"Gwladys_Ddu\",\\n'\n",
      " '            \"type\": \"rel:spouseOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"target\": \"William_de_Stutevill\",\\n'\n",
      " '            \"type\": \"pome:gives_hostage_to\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Stutevill_Osmund_de\",\\n'\n",
      " '            \"target\": \"William_de_Stutevill\",\\n'\n",
      " '            \"type\": \"pome:is_hostage_for\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Stutevill_Osmund_de\",\\n'\n",
      " '            \"target\": \"William_de_Stutevill\",\\n'\n",
      " '            \"type\": \"rel:childOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"hostage_exchange_1233b\",\\n'\n",
      " '            \"target\": \"William_de_Stutevill\",\\n'\n",
      " '            \"type\": \"pome:hostageGiver\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Mortimer_Roger_d_1214\",\\n'\n",
      " '            \"target\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"type\": \"rel:parentOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Brompton_Brian_de_1215-1277\",\\n'\n",
      " '            \"target\": \"Henry_de_Brompton\",\\n'\n",
      " '            \"type\": \"rel:parentOf\"\\n'\n",
      " '        },\\n'\n",
      " '        {\\n'\n",
      " '            \"source\": \"Brompton_Brian_de_1215-1277\",\\n'\n",
      " '            \"target\": \"Mortimer_Ralph_d_1247\",\\n'\n",
      " '            \"type\": \"pome:serves\"\\n'\n",
      " '        }\\n'\n",
      " '    ]\\n'\n",
      " '}\\n')\n"
     ]
    }
   ],
   "source": [
    "data = json.load(open(\"ralph_graph.json\"))\n",
    "ralphjson = open(\"ralph_graph.json\").read()\n",
    "pprint(ralphjson)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "***\n",
    "# Prepare the HTML display:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<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: #f60;\n",
       "    text-align: right;\n",
       "    padding-right: 1em;\n",
       "  }\n",
       "  #myTable2 {position: fixed;\n",
       "    bottom: 0px;\n",
       "    height: 100px;\n",
       "  }\n",
       "</style>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(filename='ralphgraph.css.html')\n",
    "#pprint(open('ralphgraph.css.html').read())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='metadata'></div><div id='graphdisplay'></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(\"<div id='metadata'></div><div id='graphdisplay'></div>\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "***\n",
    "# Do some jQuery meddling with the HTML:\n",
    "using the `%%javascript` cell magic"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "$(\"#metadata\").draggable();\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "$(\"#metadata\").draggable();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        //d3: 'http://localhost:8888/edit/Projects/RalphGraph/d3.ver5.js' //this doesn't work\n",
       "        d3: 'https://d3js.org/d3.v5.min' //Or:\n",
       "        //d3: 'http://neolography.com/common-js/d3.ver5' //not trusted\n",
       "        //haven't yet figured out how to define a require path to \n",
       "        //a local file\n",
       "    }\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        //d3: 'http://localhost:8888/edit/Projects/RalphGraph/d3.ver5.js' //this doesn't work\n",
    "        d3: 'https://d3js.org/d3.v5.min' //Or:\n",
    "        //d3: 'http://neolography.com/common-js/d3.ver5' //not trusted\n",
    "        //haven't yet figured out how to define a require path to \n",
    "        //a local file\n",
    "    }\n",
    "});\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "/***********************************\n",
       "ToDo: implement css\n",
       "***********************************/\n",
       "require.undef('ralphgraph'); //forces reload\n",
       "\n",
       "define('ralphgraph', ['d3'], function (d3) {\n",
       "  window.sim = undefined;  // for debugging purposes only\n",
       "  window.debug = undefined; // for debugging purposes only\n",
       "  window.links = undefined;\n",
       "  window.nodes = undefined;\n",
       "\n",
       "  console.log(\"foobar\");\n",
       "  function drawGraph(container, params, data){\n",
       "        var 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",
       "        //ToDo: make charge strength a parameter of drawGraph\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",
       "        sim = simulation; //for debugging purposes only\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",
       "      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",
       "      //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",
       "  return drawGraph;\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",
       "\n",
       "});\n",
       "\n",
       "element.append('<small>&#x25C9; &#x25CB; &#x25EF; Loaded ralphgraph.js &#x25CC; &#x25CE; &#x25CF;</small>');\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Javascript(filename='ralphgraph.js')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "***\n",
    "# `require` the d3 digraph generation code (`ralphgraph.js`) and execute the function it returns.\n",
    "\n",
    "Since ```require.config paths``` can't seem to import a local file for d3, I still haven't found a recipe to ```require``` d3 first, then ```ralphgraph.js``` and then display the result."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require(['ralphgraph'], function(ralphgraph){\n",
       "    const params = {\n",
       "        'chargeStrength': -600\n",
       "    }\n",
       "\n",
       "    ralphgraph(graphdisplay, params, {\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",
       ");\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Javascript(\"\"\"\n",
    "require(['ralphgraph'], function(ralphgraph){\n",
    "    const params = {\n",
    "        'chargeStrength': -600\n",
    "    }\n",
    "\n",
    "    ralphgraph(graphdisplay, params, %s);\n",
    "});\n",
    "\"\"\" % ralphjson)\n",
    "\n",
    "\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"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}