{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "![Grafeno logo](res/logo.svg \"Grafeno\")\n", "\n", "# Interactive visualization of grafeno Graphs" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "We use the great D3 library: https://d3js.org/" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [ { "data": { "application/javascript": [ "'use strict';\n", "\n", "var m; // workaround for a weird minimizer problem\n", "\n", "require.config({\n", " paths: {\n", " d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min'\n", " }\n", "});\n", "\n", "window.CreateGrafenoVisualization = function (output_counter, graph) {\n", "\n", " require(['d3'], function (d3) {\n", " function node_color(node) {\n", " switch (node.sempos) {\n", " case 'n':\n", " return '#CF3C46';\n", " case 'v':\n", " return '#44B033';\n", " case 'j':\n", " return '#FBB136';\n", " case 'r':\n", " return '#476FA5';\n", " }\n", " }\n", " function link_distance(link) {\n", " switch (link.functor) {\n", " case 'SEQ':\n", " return 300;\n", " case 'ATTR':\n", " return 80;\n", " default:\n", " return 140;\n", " }\n", " }\n", " function middle_point(s, t) {\n", " var mx = (t.x + s.x) / 2,\n", " my = (t.y + s.y) / 2,\n", " dx = t.x - s.x,\n", " dy = t.y - s.y;\n", " return { x: mx + dy / 3,\n", " y: my - dx / 3\n", " };\n", " }\n", " var container = d3.select('#d3-container-' + output_counter).select(\"div\");\n", " var _container$0$ = container[0][0],\n", " w = _container$0$.clientWidth,\n", " h = _container$0$.clientHeight;\n", "\n", " var zoom = d3.behavior.zoom().scaleExtent([.5, 5]).size([w, h]).translate([w / 2, h / 2]).on('zoom', zoomed);\n", " container.call(zoom);\n", " var force = d3.layout.force().charge(-300).gravity(0.05).linkDistance(link_distance);\n", " var svg = container.select(\"#graph-layer\");\n", " function zoomed() {\n", " force.stop();\n", " var canvasTranslate = zoom.translate();\n", " svg.attr('transform', 'translate(' + canvasTranslate[0] + ',' + canvasTranslate[1] + ')scale(' + zoom.scale() + ')');\n", " force.resume();\n", " }\n", " zoomed();\n", "\n", " force.nodes(graph.nodes).links(graph.links).start();\n", " var link = svg.selectAll(\".link\").data(graph.links).enter().append(\"g\").attr(\"class\", \"link\");\n", " link.append(\"path\");\n", " link.append(\"text\").text(function (d) {\n", " return d.functor;\n", " });\n", " var node = svg.selectAll(\".node\").data(graph.nodes).enter().append(\"g\").attr(\"class\", \"node\");\n", " node.append(\"circle\").attr(\"r\", 30).style(\"fill\", node_color).call(force.drag).on('mousedown', function () {\n", " return d3.event.stopPropagation();\n", " });\n", " node.append(\"text\").text(function (d) {\n", " return d.concept;\n", " }).attr(\"dx\", function (d) {\n", " return d.x;\n", " }).attr(\"dy\", function (d) {\n", " return d.y;\n", " });\n", " node.append(\"title\").text(function (d) {\n", " return d.concept;\n", " });\n", " force.on(\"tick\", function () {\n", " link.select('path').attr(\"d\", function (d) {\n", " var s = d.source,\n", " t = d.target;\n", " m = middle_point(s, t);\n", " return 'M' + s.x + ',' + s.y + ' Q' + m.x + ',' + m.y + ' ' + t.x + ',' + t.y;\n", " });\n", " link.select('text').attr(\"dx\", function (d) {\n", " return middle_point(d.source, d.target).x;\n", " }).attr(\"dy\", function (d) {\n", " return middle_point(d.source, d.target).y;\n", " });\n", " node.select('circle').attr(\"cx\", function (d) {\n", " return d.x;\n", " }).attr(\"cy\", function (d) {\n", " return d.y;\n", " });\n", " node.select('text').attr(\"dx\", function (d) {\n", " return d.x;\n", " }).attr(\"dy\", function (d) {\n", " return d.y;\n", " });\n", " });\n", " });\n", "};\n", "\n", "/* vim: set filetype=javascript : */\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from grafeno import Graph\n", "from grafeno.transformers import get_pipeline\n", "from grafeno.jupyter import visualize" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [], "source": [ "import yaml\n", "semantic_pipeline = yaml.load(open('../../configs/semantic.yaml'))\n", "T = get_pipeline(['spacy_parse']+semantic_pipeline.get('transformers'))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### One sentence" ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [], "source": [ "sentence = \"\"\"\n", "John writes a short program that works correctly and he comments his code like a good student.\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [], "source": [ "G1 = Graph(text=sentence, transformer=T)" ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "visualize(G1)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Bigger graph (from the simple.wikipedia page of AI)" ] }, { "cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [], "source": [ "text = \"\"\"\n", "An extreme goal of AI research is to create computer programs that can learn, solve problems, and think logically.\n", "In practice, however, most applications have picked on problems which computers can do well.\n", "Searching data bases and doing calculations are things computers do better than people.\n", "On the other hand, \"perceiving its environment\" in any real sense is way beyond present-day computing.\n", "\"\"\"" ] }, { "cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [], "source": [ "G2 = Graph(text=text, transformer=T)" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "scrolled": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "execution_count": 8, "metadata": {}, "output_type": "execute_result" } ], "source": [ "visualize(G2)" ] } ], "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.5.4" } }, "nbformat": 4, "nbformat_minor": 2 }