JupyterでPythonからjavascriptに変数を渡してd3.jsのダイアグラムを描画する方法。

knowledge_link_d3.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from neo4jrestclient.client import GraphDatabase\n",
    "\n",
    "username = \"your user name\"\n",
    "password = \"your pass word\"\n",
    "url = \"http://ictknowledgegraph.sb10.stations.graphenedb.com:24789/db/data/\"\n",
    "gdb = GraphDatabase(url, username=username, password=password)\n",
    "q = \"\"\"MATCH (m)-[r]->(n) RETURN m,r,n\"\"\"\n",
    "result = gdb.query(q, data_contents=True)\n",
    "list_node_words= []\n",
    "list_relations = []\n",
    "for item in result.rows:\n",
    "    list_node_words.append({\"word\": item[0][\"Word\"]})\n",
    "    list_node_words.append({\"word\": item[2][\"Word\"]})\n",
    "    list_relations.append({\"source\":item[0][\"Word\"], \"target\": item[2][\"Word\"]})\n",
    "    \n",
    "list_node = list({v['word']:v for v in list_node_words}.values())  # nodesのユニークな値(dict)を取得\n",
    "dct_words ={value[\"word\"]: idx for idx, value in enumerate(list_node)} # リストのインデックス（リスト中の出現順）とwordの変換dict\n",
    "links = [{\"source\": dct_words[x[\"source\"]], \"target\": dct_words[x[\"target\"]]} for x in list_relations]\n",
    "\n",
    "dct_element = {}\n",
    "dct_element[\"nodes\"] = list_node\n",
    "dct_element[\"links\"] = links"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"d3-example\"></div>\n",
       "<style>\n",
       ".node {stroke: #fff; stroke-width: 1.5px;}\n",
       ".link {stroke: #999; stroke-opacity: .6;}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<div id=\"d3-example\"></div>\n",
    "<style>\n",
    ".node {stroke: #fff; stroke-width: 1.5px;}\n",
    ".link {stroke: #999; stroke-opacity: .6;}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "window.graph = {'links': [{'target': 3, 'source': 1}, {'target': 11, 'source': 1}, {'target': 11, 'source': 12}, {'target': 2, 'source': 1}, {'target': 8, 'source': 1}, {'target': 8, 'source': 12}, {'target': 13, 'source': 1}, {'target': 13, 'source': 12}, {'target': 13, 'source': 4}, {'target': 6, 'source': 10}, {'target': 7, 'source': 6}, {'target': 9, 'source': 13}, {'target': 4, 'source': 10}, {'target': 5, 'source': 1}, {'target': 0, 'source': 1}, {'target': 0, 'source': 1}], 'nodes': [{'word': 'アカウント'}, {'word': '管理者'}, {'word': 'パスワード'}, {'word': 'メール'}, {'word': '会計ソフト'}, {'word': 'セキュリティ'}, {'word': 'Google docs'}, {'word': 'クラウド'}, {'word': 'サーバー'}, {'word': 'スマートフォン'}, {'word': 'Excel'}, {'word': 'ホームページ'}, {'word': '情報資産'}, {'word': 'パソコン'}]}"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import Javascript\n",
    "#　変数をpythonからjavascriptにpassする\n",
    "Javascript(\"\"\"window.graph = {}\"\"\".format(dct_element))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "graph = window.graph;\n",
       "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
       "require([\"d3\"], function(d3) {\n",
       "    var width = 800,\n",
       "        height = 600;\n",
       "    var indent = 5;\n",
       "    var color = d3.scale.category10();\n",
       "    var force = d3.layout.force()\n",
       "        .charge(-600)\n",
       "        .linkDistance(120)\n",
       "        .size([width, height]);\n",
       "\n",
       "    var svg = d3.select(\"#d3-example\").select(\"svg\")\n",
       "    if (svg.empty()) {\n",
       "        svg = d3.select(\"#d3-example\").append(\"svg\")\n",
       "                    .attr(\"width\", width)\n",
       "                    .attr(\"height\", height);\n",
       "    }\n",
       "    \n",
       "    force.nodes(graph.nodes)\n",
       "        .links(graph.links)\n",
       "        .start();\n",
       "\n",
       "    var link = svg.selectAll(\".link\")\n",
       "        .data(graph.links)\n",
       "        .enter().append(\"line\")\n",
       "        .attr(\"class\", \"link\");\n",
       "\n",
       "    var node = svg.selectAll(\".node\")\n",
       "        .data(graph.nodes)\n",
       "        .enter().append(\"circle\")\n",
       "        .attr(\"class\", \"node\")\n",
       "        .attr(\"r\", 8)  \n",
       "        .style(\"fill\", \"steelblue\")\n",
       "        .call(force.drag);\n",
       "\n",
       "    var txt = svg.selectAll(\".txt\")\n",
       "        .data(graph.nodes)\n",
       "        .enter().append(\"text\")\n",
       "        .attr(\"class\", \"txt\")\n",
       "        .text(function(d){return d.word; })\n",
       "        .call(force.drag);\n",
       "\n",
       "    force.on(\"tick\", function() {\n",
       "        link.attr(\"x1\", function(d) { return d.source.x; })\n",
       "            .attr(\"y1\", function(d) { return d.source.y; })\n",
       "            .attr(\"x2\", function(d) { return d.target.x; })\n",
       "            .attr(\"y2\", function(d) { return d.target.y; });\n",
       "\n",
       "        node.attr(\"cx\", function(d) { return d.x; })\n",
       "            .attr(\"cy\", function(d) { return d.y; });\n",
       "\n",
       "        txt.attr(\"x\", function(d) { return d.x + indent; })\n",
       "            .attr(\"y\", function(d) { return d.y; })\n",
       "            .attr(\"font-size\", 12);\n",
       "\n",
       "    });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "graph = window.graph;\n",
    "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
    "require([\"d3\"], function(d3) {\n",
    "    var width = 800,\n",
    "        height = 600;\n",
    "    var indent = 5;\n",
    "    var color = d3.scale.category10();\n",
    "    var force = d3.layout.force()\n",
    "        .charge(-600)\n",
    "        .linkDistance(120)\n",
    "        .size([width, height]);\n",
    "\n",
    "    var svg = d3.select(\"#d3-example\").select(\"svg\")\n",
    "    if (svg.empty()) {\n",
    "        svg = d3.select(\"#d3-example\").append(\"svg\")\n",
    "                    .attr(\"width\", width)\n",
    "                    .attr(\"height\", height);\n",
    "    }\n",
    "    \n",
    "    force.nodes(graph.nodes)\n",
    "        .links(graph.links)\n",
    "        .start();\n",
    "\n",
    "    var link = svg.selectAll(\".link\")\n",
    "        .data(graph.links)\n",
    "        .enter().append(\"line\")\n",
    "        .attr(\"class\", \"link\");\n",
    "\n",
    "    var node = svg.selectAll(\".node\")\n",
    "        .data(graph.nodes)\n",
    "        .enter().append(\"circle\")\n",
    "        .attr(\"class\", \"node\")\n",
    "        .attr(\"r\", 8)  \n",
    "        .style(\"fill\", \"steelblue\")\n",
    "        .call(force.drag);\n",
    "\n",
    "    var txt = svg.selectAll(\".txt\")\n",
    "        .data(graph.nodes)\n",
    "        .enter().append(\"text\")\n",
    "        .attr(\"class\", \"txt\")\n",
    "        .text(function(d){return d.word; })\n",
    "        .call(force.drag);\n",
    "\n",
    "    force.on(\"tick\", function() {\n",
    "        link.attr(\"x1\", function(d) { return d.source.x; })\n",
    "            .attr(\"y1\", function(d) { return d.source.y; })\n",
    "            .attr(\"x2\", function(d) { return d.target.x; })\n",
    "            .attr(\"y2\", function(d) { return d.target.y; });\n",
    "\n",
    "        node.attr(\"cx\", function(d) { return d.x; })\n",
    "            .attr(\"cy\", function(d) { return d.y; });\n",
    "\n",
    "        txt.attr(\"x\", function(d) { return d.x + indent; })\n",
    "            .attr(\"y\", function(d) { return d.y; })\n",
    "            .attr(\"font-size\", 12);\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.4.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}