Skip to content

Instantly share code, notes, and snippets.

@cschin

cschin/De_Bruijn_VIS.ipynb

Created August 14, 2012 02:36
Show Gist options
  • Save cschin/3345861 to your computer and use it in GitHub Desktop.
Save cschin/3345861 to your computer and use it in GitHub Desktop.
Download ZIP
Demo for showing De Bruijn graph with ipython notebook + d3.js
Display the source blob
Display the rendered blob
Raw
De_Bruijn_VIS.ipynb
{
"metadata": {
"name": "De_Bruijn_VIS"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Some background about De Bruijn Graph\n",
"http://en.wikipedia.org/wiki/De_Bruijn_graph"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Set-up ``networkx`` for visualizing the local structure of such network."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"import networkx as nx\n",
"from IPython.core.display import display_javascript\n",
"#from IPython.frontend.html.notebook import visutils as vis\n",
"import json\n",
"import time"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Load D3.js"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%install_ext https://raw.github.com/cschin/ipython_d3_mashup/master/extension/visutils.py\n",
"%reload_ext visutils\n",
"vis.run_js(\"$.getScript('http://d3js.org/d3.v2.js')\")\n",
"vis.run_js(\"$.getScript('https://raw.github.com/cschin/ipython_d3_mashup/master/extension/vis_extension.js')\")\n",
"time.sleep(2)\n",
"vis.run_js(\"IPython.vis_init();\")"
],
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": [
"Installed visutils.py. To use it, type:\n",
" %load_ext visutils\n"
]
},
{
"javascript": [
"$.getScript('http://d3js.org/d3.v2.js')"
],
"output_type": "display_data"
},
{
"javascript": [
"$.getScript('https://raw.github.com/cschin/ipython_d3_mashup/master/extension/vis_extension.js')"
],
"output_type": "display_data"
},
{
"javascript": [
"IPython.vis_init();"
],
"output_type": "display_data"
}
],
"prompt_number": 2
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Set up the visulization \"cell\"/widget."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"try:\n",
" vis_display.remove()\n",
"except:\n",
" pass\n",
"plot_area_style = {\"position\":\"absolute\",\n",
" \"top\":\"0px\",\n",
" \"width\":\"850px\",\n",
" \"left\":\"750px\",\n",
" \"height\":\"350px\",\n",
" \"border\":\"9px groove\",\n",
" \"background-color\":\"rgba(200,200,200,0.5)\"}\n",
"\n",
"vis_cell = vis.VISCellWidget(name=\"plot_area\", style = plot_area_style)\n",
"\n",
"## attache the container to a \"visual display\"\n",
"vis_display = vis.NotebookVisualDisplay(container = vis_cell)\n",
"\n",
"\n",
"## create the SVG element for D3\n",
"svg_style = {\"width\":\"850px\", \n",
" \"height\":\"300px\",\n",
" \"border\":\"2px solid\"}\n",
"\n",
"svg = vis.SVGWidget(name = \"svg_display\", \n",
" parent = \"plot_area\", \n",
" style = svg_style,\n",
" vis = vis_display)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"$('#plot_area').remove()"
],
"output_type": "display_data"
},
{
"javascript": [
"IPython.vis_utils.insert_vis_cell(\"plot_area\"); \n",
" $(\"#plot_area\").css(\"top\", \"0px\");\n",
" $(\"#plot_area\").css(\"height\", \"350px\");\n",
" $(\"#plot_area\").css(\"width\", \"850px\");\n",
" $(\"#plot_area\").css(\"position\", \"absolute\");\n",
" $(\"#plot_area\").css(\"border\", \"9px groove\");\n",
" $(\"#plot_area\").css(\"background-color\", \"rgba(200,200,200,0.5)\");\n",
" $(\"#plot_area\").css(\"left\", \"750px\");"
],
"output_type": "display_data"
}
],
"prompt_number": 20
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def replace_nodes(G0, Ns, N0):\n",
" G0.add_node(N0, X=\"X\")\n",
"\n",
" head = Ns[0]\n",
" tail = Ns[-1]\n",
" \n",
" p = G0.predecessors(Ns[0])\n",
" if len(p) == 1:\n",
" p = p[0]\n",
" G0.add_edge(p, N0)\n",
" \n",
" n = G0.successors(Ns[-1])\n",
" if len(n) == 1:\n",
" n = n[0]\n",
" G0.add_edge(N0, n)\n",
" \n",
" G0.remove_nodes_from(Ns)\n",
"\n",
"def reduce_graph(G0):\n",
" G1 = G0.copy()\n",
" G2 = G0.copy()\n",
" nodes_to_remove = []\n",
" for n in G1.nodes():\n",
" if len(G1.successors(n)) > 1 or len(G1.predecessors(n)) > 1:\n",
" if n[0] != \"^\" and n[-1] != \"$\":\n",
" nodes_to_remove.append(n)\n",
" G1.remove_nodes_from(nodes_to_remove)\n",
"\n",
" for ns in nx.weakly_connected_components(G1):\n",
" ns = [n for n in ns if n[0] != \"^\" and n[-1] != \"$\"]\n",
" if len(ns) == 0: continue\n",
" contig = []\n",
" n_sorted = nx.topological_sort(G1, ns)\n",
" n_sorted = [n for n in n_sorted if n[0] != \"^\" and n[-1] != \"$\"]\n",
" if len(n_sorted) <= 1: continue\n",
"\n",
" for kmer in n_sorted:\n",
" assert len(G1.successors(kmer)) <= 1\n",
" if len(contig) == 0:\n",
" contig.append(kmer)\n",
" else:\n",
" contig.append(kmer[-1])\n",
" replace_nodes(G2, n_sorted, \"\".join(contig))\n",
" \n",
" return G2"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 21
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Generate the json for d3.js for the force layout."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def get_group(w, w1):\n",
" c = 0\n",
" for c1, c2 in zip(w,w1):\n",
" if c1 == c2:\n",
" c += 1\n",
" continue\n",
" break\n",
" return c\n",
"\n",
"def set_g_json(seq, k, reduce_g = False):\n",
" G=nx.DiGraph()\n",
" seq = \"^\"+seq+\"$\"\n",
" for i in range(len(seq)-k+1):\n",
" w1 = seq[i:i+k-1]\n",
" w2 = seq[i+1:i+k]\n",
" G.add_edge(w1, w2)\n",
" if reduce_g == True:\n",
" G = reduce_graph(G)\n",
" def generateD3JSONForG(G):\n",
" s = {\"nodes\":[], \"links\":[]}\n",
" name2Idx = {}\n",
" c = 0\n",
" for n in G.nodes():\n",
" #print n\n",
" g = len(G.neighbors(n))\n",
" if \"^\" in n:\n",
" s[\"nodes\"].append({\"name\":n, \"group\":g, \"fixed\":True, \"x\":0,\"y\":150})\n",
" elif \"$\" in n:\n",
" s[\"nodes\"].append({\"name\":n, \"group\":g, \"fixed\":True, \"x\":850,\"y\":150})\n",
" else:\n",
" s[\"nodes\"].append({\"name\":n, \"group\":g})\n",
" name2Idx[n] = c\n",
" c += 1\n",
" for e in G.edges():\n",
" col = \"rgb(0,0,255)\"\n",
" width = 1\n",
" s[\"links\"].append({\"source\":name2Idx[e[0]], \"target\":name2Idx[e[1]], \"color\":col, \"width\":width})\n",
" return json.dumps(s) \n",
" n_json = generateD3JSONForG(G)\n",
" vis_cell.set_js_var(\"n_json\", n_json)\n",
" "
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 22
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Set up d3.js code for showing up the network around the word ``START``."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"vis_display.js_code=[]\n",
"\n",
"set_g_json(\"ACGTACGTTGTGCAGTAGTAGTAGT\",5)\n",
"\n",
"js = \"\"\"\n",
"\n",
"(function() {\n",
"\n",
"var plot_neighbor=function(json) {\n",
" var w = 850,\n",
" h = 300,\n",
" fill = d3.scale.category10();\n",
" var vis = d3.select(\"#plot_area #svg_display\")\n",
" var force = d3.layout.force()\n",
" .charge(-40)\n",
" .linkDistance(2)\n",
" .nodes(json.nodes)\n",
" .links(json.links)\n",
" .size([w, h])\n",
" .linkStrength(0.1)\n",
" .start();\n",
"\n",
" var link = vis.selectAll(\"line.link\")\n",
" .data(json.links)\n",
" .enter().append(\"svg:line\")\n",
" .attr(\"class\", \"link\")\n",
" .style(\"stroke-width\", function(d) { return d.width; })\n",
" .style(\"stroke\", function(d) { return d.color; })\n",
" .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",
" var node = vis.selectAll(\"circle.node\")\n",
" .data(json.nodes)\n",
" .enter().append(\"svg:circle\")\n",
" .attr(\"class\", \"node\")\n",
" .attr(\"cx\", function(d) { return d.x; })\n",
" .attr(\"cy\", function(d) { return d.y; })\n",
" .attr(\"r\", 4)\n",
" .style(\"fill\", function(d) { return fill(d.group); })\n",
" .call(force.drag);\n",
"\n",
" node.append(\"svg:title\")\n",
" .text(function(d) { return d.name; });\n",
"\n",
" vis.style(\"opacity\", 1e-6)\n",
" .transition()\n",
" .duration(1000)\n",
" .style(\"opacity\", 1);\n",
"\n",
"\n",
"// Per-type markers, as they don't inherit styles.\n",
"vis.append(\"svg:defs\").selectAll(\"marker\")\n",
" .data([\"arrow\"])\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\", 6)\n",
" .attr(\"markerHeight\", 6)\n",
" .attr(\"orient\", \"auto\")\n",
" .append(\"svg:path\")\n",
" .attr(\"d\", \"M0,-5L10,0L0,5\");\n",
" \n",
"\n",
"var path = vis.append(\"svg:g\").selectAll(\"path\")\n",
" .data(force.links())\n",
" .enter().append(\"svg:path\")\n",
" .attr(\"class\", function(d) { return \"link arrow\"; })\n",
" .attr(\"marker-end\", function(d) { return \"url(#arrow)\"; })\n",
" .style(\"stroke-width\", \"1.5px\");\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",
" path.attr(\"d\", function(d) {\n",
" var dx = d.target.x - d.source.x,\n",
" dy = d.target.y - d.source.y,\n",
" dr = Math.sqrt(dx * dx + dy * dy);\n",
" return \"M\" + d.source.x + \",\" + d.source.y + \"L\" + d.target.x + \",\" + d.target.y;\n",
" })\n",
"\n",
" });};\n",
"var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];\n",
"//alert(vc.data);\n",
"var n_json=$.parseJSON(vc.data.n_json);\n",
"//var n_json = vc.data.n_json;\n",
"//alert(vc.data[\"n_json\"]);\n",
"plot_neighbor(n_json)})()\n",
"\"\"\"\n",
"vis_display.attach_js_code(js)\n",
"vis_display.refresh()\n"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"(function(){var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];vc.data.n_json=\"{\\\"nodes\\\": [{\\\"group\\\": 2, \\\"name\\\": \\\"TAGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTAC\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"ACGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTTG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTAG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CGTT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTGC\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGTG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CAGT\\\"}, {\\\"y\\\": 150, \\\"x\\\": 850, \\\"fixed\\\": true, \\\"group\\\": 0, \\\"name\\\": \\\"AGT$\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGCA\\\"}, {\\\"y\\\": 150, \\\"x\\\": 0, \\\"fixed\\\": true, \\\"group\\\": 1, \\\"name\\\": \\\"^ACG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TACG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"AGTA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GCAG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CGTA\\\"}], \\\"links\\\": [{\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 0, \\\"target\\\": 10, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 0, \\\"target\\\": 14, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 1, \\\"target\\\": 13, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 2, \\\"target\\\": 5, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 2, \\\"target\\\": 16, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 3, \\\"target\\\": 8, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 4, \\\"target\\\": 0, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 5, \\\"target\\\": 3, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 6, \\\"target\\\": 11, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 7, \\\"target\\\": 6, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 8, \\\"target\\\": 7, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 9, \\\"target\\\": 14, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 11, \\\"target\\\": 15, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 12, \\\"target\\\": 2, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 13, \\\"target\\\": 2, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 14, \\\"target\\\": 4, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 15, \\\"target\\\": 9, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 16, \\\"target\\\": 1, \\\"width\\\": 1}]}\";})()"
],
"output_type": "display_data"
},
{
"javascript": [
"$('#plot_area').remove()"
],
"output_type": "display_data"
},
{
"javascript": [
"IPython.vis_utils.insert_vis_cell(\"plot_area\"); \n",
" $(\"#plot_area\").css(\"top\", \"0px\");\n",
" $(\"#plot_area\").css(\"height\", \"350px\");\n",
" $(\"#plot_area\").css(\"width\", \"850px\");\n",
" $(\"#plot_area\").css(\"position\", \"absolute\");\n",
" $(\"#plot_area\").css(\"border\", \"9px groove\");\n",
" $(\"#plot_area\").css(\"background-color\", \"rgba(200,200,200,0.5)\");\n",
" $(\"#plot_area\").css(\"left\", \"750px\");"
],
"output_type": "display_data"
},
{
"javascript": [
"(function(){var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];vc.data.n_json=\"{\\\"nodes\\\": [{\\\"group\\\": 2, \\\"name\\\": \\\"TAGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTAC\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"ACGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTTG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTAG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CGTT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTGC\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGTG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CAGT\\\"}, {\\\"y\\\": 150, \\\"x\\\": 850, \\\"fixed\\\": true, \\\"group\\\": 0, \\\"name\\\": \\\"AGT$\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGCA\\\"}, {\\\"y\\\": 150, \\\"x\\\": 0, \\\"fixed\\\": true, \\\"group\\\": 1, \\\"name\\\": \\\"^ACG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TACG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"AGTA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GCAG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CGTA\\\"}], \\\"links\\\": [{\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 0, \\\"target\\\": 10, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 0, \\\"target\\\": 14, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 1, \\\"target\\\": 13, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 2, \\\"target\\\": 5, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 2, \\\"target\\\": 16, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 3, \\\"target\\\": 8, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 4, \\\"target\\\": 0, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 5, \\\"target\\\": 3, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 6, \\\"target\\\": 11, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 7, \\\"target\\\": 6, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 8, \\\"target\\\": 7, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 9, \\\"target\\\": 14, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 11, \\\"target\\\": 15, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 12, \\\"target\\\": 2, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 13, \\\"target\\\": 2, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 14, \\\"target\\\": 4, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 15, \\\"target\\\": 9, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 16, \\\"target\\\": 1, \\\"width\\\": 1}]}\";})()"
],
"output_type": "display_data"
},
{
"javascript": [
"\n",
"\n",
"$(\"#plot_area\").append(\"<svg id='svg_display'></svg>\"); \n",
" $(\"#svg_display\").css(\"width\", \"850px\");\n",
" $(\"#svg_display\").css(\"border\", \"2px solid\");\n",
" $(\"#svg_display\").css(\"height\", \"300px\");\n",
"\n",
"\n",
"\n",
"(function() {\n",
"\n",
"var plot_neighbor=function(json) {\n",
" var w = 850,\n",
" h = 300,\n",
" fill = d3.scale.category10();\n",
" var vis = d3.select(\"#plot_area #svg_display\")\n",
" var force = d3.layout.force()\n",
" .charge(-40)\n",
" .linkDistance(2)\n",
" .nodes(json.nodes)\n",
" .links(json.links)\n",
" .size([w, h])\n",
" .linkStrength(0.1)\n",
" .start();\n",
"\n",
" var link = vis.selectAll(\"line.link\")\n",
" .data(json.links)\n",
" .enter().append(\"svg:line\")\n",
" .attr(\"class\", \"link\")\n",
" .style(\"stroke-width\", function(d) { return d.width; })\n",
" .style(\"stroke\", function(d) { return d.color; })\n",
" .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",
" var node = vis.selectAll(\"circle.node\")\n",
" .data(json.nodes)\n",
" .enter().append(\"svg:circle\")\n",
" .attr(\"class\", \"node\")\n",
" .attr(\"cx\", function(d) { return d.x; })\n",
" .attr(\"cy\", function(d) { return d.y; })\n",
" .attr(\"r\", 4)\n",
" .style(\"fill\", function(d) { return fill(d.group); })\n",
" .call(force.drag);\n",
"\n",
" node.append(\"svg:title\")\n",
" .text(function(d) { return d.name; });\n",
"\n",
" vis.style(\"opacity\", 1e-6)\n",
" .transition()\n",
" .duration(1000)\n",
" .style(\"opacity\", 1);\n",
"\n",
"\n",
"// Per-type markers, as they don't inherit styles.\n",
"vis.append(\"svg:defs\").selectAll(\"marker\")\n",
" .data([\"arrow\"])\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\", 6)\n",
" .attr(\"markerHeight\", 6)\n",
" .attr(\"orient\", \"auto\")\n",
" .append(\"svg:path\")\n",
" .attr(\"d\", \"M0,-5L10,0L0,5\");\n",
" \n",
"\n",
"var path = vis.append(\"svg:g\").selectAll(\"path\")\n",
" .data(force.links())\n",
" .enter().append(\"svg:path\")\n",
" .attr(\"class\", function(d) { return \"link arrow\"; })\n",
" .attr(\"marker-end\", function(d) { return \"url(#arrow)\"; })\n",
" .style(\"stroke-width\", \"1.5px\");\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",
" path.attr(\"d\", function(d) {\n",
" var dx = d.target.x - d.source.x,\n",
" dy = d.target.y - d.source.y,\n",
" dr = Math.sqrt(dx * dx + dy * dy);\n",
" return \"M\" + d.source.x + \",\" + d.source.y + \"L\" + d.target.x + \",\" + d.target.y;\n",
" })\n",
"\n",
" });};\n",
"var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];\n",
"//alert(vc.data);\n",
"var n_json=$.parseJSON(vc.data.n_json);\n",
"//var n_json = vc.data.n_json;\n",
"//alert(vc.data[\"n_json\"]);\n",
"plot_neighbor(n_json)})()\n"
],
"output_type": "display_data"
}
],
"prompt_number": 23
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"vis_display.hide()"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"$(\"#plot_area\").css(\"visibility\",\"hidden\")"
],
"output_type": "display_data"
}
],
"prompt_number": 24
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"vis_display.show()"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"$(\"#plot_area\").css(\"visibility\",\"visible\")"
],
"output_type": "display_data"
}
],
"prompt_number": 25
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def show_neighbors(w, k, reduce_g = False):\n",
" vis.run_js('$(\"#svg_display *\").remove();')\n",
" set_g_json(w, k, reduce_g = reduce_g)\n",
" for jc in vis_display.js_code:\n",
" vis.run_js(jc)\n",
" \n",
" \n",
"## create a test input text box\n",
"input_style = {\"width\":\"440px\"}\n",
"tb = vis.InputWidget(name = \"input_1\",\n",
" parent = \"plot_area\",\n",
" style = input_style,\n",
" value = \"AATTAATTAAGGTTTTAATTATTAATTGTAATTAATTAATTAATACTGAT\",\n",
" vis = vis_display)\n",
"\n",
"def onchange(self, *argv, **kwargv):\n",
" self.update_value()\n",
" \n",
"vis.set_action(tb, \"onchange\", onchange)\n",
"\n",
"\n",
"## create a input text box for k\n",
"input_style = {\"width\":\"40px\"}\n",
"kb = vis.InputWidget(name = \"input_2\",\n",
" parent = \"plot_area\",\n",
" style = input_style,\n",
" value = \"5\",\n",
" vis = vis_display)\n",
" \n",
"vis.set_action(kb, \"onchange\", onchange)\n",
"\n",
"button_style = {\"width\":\"120px\"}\n",
"b = vis.ButtonWidget(name=\"button\", \n",
" parent=\"plot_area\", \n",
" style=button_style, \n",
" text=\"show graph\",\n",
" vis = vis_display)\n",
"b.argv = [tb, kb]\n",
"def onclick(self, *argv, **kwargv):\n",
" self.text = argv[0].value\n",
" self.k = int(argv[1].value)\n",
" show_neighbors(self.text, self.k, reduce_g = False)\n",
"vis.set_action(b, \"onclick\", onclick, \"argv\")\n",
" \n",
" \n",
"button_style = {\"width\":\"120px\"}\n",
"b_r = vis.ButtonWidget(name=\"button2\", \n",
" parent=\"plot_area\", \n",
" style=button_style, \n",
" text=\"reduce graph\",\n",
" vis = vis_display)\n",
"b_r.argv = [tb, kb]\n",
"def onclick(self, *argv, **kwargv):\n",
" self.text = argv[0].value\n",
" self.k = int(argv[1].value)\n",
" show_neighbors(self.text, self.k, reduce_g = True)\n",
"vis.set_action(b_r, \"onclick\", onclick, \"argv\") \n",
" \n",
"\n",
"button_style = {\"width\":\"120px\"}\n",
"b2 = vis.ButtonWidget(name=\"button3\", \n",
" parent=\"plot_area\", \n",
" style=button_style, \n",
" text=\"close\",\n",
" vis = vis_display)\n",
"def onclick(self, *argv, **kwargv):\n",
" vis_display.remove()\n",
" \n",
"vis.set_action(b2, \"onclick\", onclick)\n",
"\n",
"vis_display.refresh()"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"$('#plot_area').remove()"
],
"output_type": "display_data"
},
{
"javascript": [
"IPython.vis_utils.insert_vis_cell(\"plot_area\"); \n",
" $(\"#plot_area\").css(\"top\", \"0px\");\n",
" $(\"#plot_area\").css(\"height\", \"350px\");\n",
" $(\"#plot_area\").css(\"width\", \"850px\");\n",
" $(\"#plot_area\").css(\"position\", \"absolute\");\n",
" $(\"#plot_area\").css(\"border\", \"9px groove\");\n",
" $(\"#plot_area\").css(\"background-color\", \"rgba(200,200,200,0.5)\");\n",
" $(\"#plot_area\").css(\"left\", \"750px\");"
],
"output_type": "display_data"
},
{
"javascript": [
"(function(){var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];vc.data.n_json=\"{\\\"nodes\\\": [{\\\"group\\\": 1, \\\"name\\\": \\\"AAGG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTAA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GTTT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTGT\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"TTAA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"ATTG\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"AGGT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"GGTT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTAT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGAT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTTA\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"ATTA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"ATAC\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TACT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TTTT\\\"}, {\\\"y\\\": 150, \\\"x\\\": 850, \\\"fixed\\\": true, \\\"group\\\": 0, \\\"name\\\": \\\"GAT$\\\"}, {\\\"y\\\": 150, \\\"x\\\": 0, \\\"fixed\\\": true, \\\"group\\\": 1, \\\"name\\\": \\\"^AAT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TAAG\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"AATT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TGTA\\\"}, {\\\"group\\\": 2, \\\"name\\\": \\\"TAAT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"AATA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"CTGA\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"TATT\\\"}, {\\\"group\\\": 1, \\\"name\\\": \\\"ACTG\\\"}], \\\"links\\\": [{\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 0, \\\"target\\\": 6, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 1, \\\"target\\\": 20, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 2, \\\"target\\\": 14, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 3, \\\"target\\\": 19, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 4, \\\"target\\\": 17, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 4, \\\"target\\\": 20, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 5, \\\"target\\\": 3, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 6, \\\"target\\\": 7, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 7, \\\"target\\\": 2, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 8, \\\"target\\\": 23, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 9, \\\"target\\\": 15, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 10, \\\"target\\\": 4, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 11, \\\"target\\\": 8, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 11, \\\"target\\\": 4, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 12, \\\"target\\\": 13, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 13, \\\"target\\\": 24, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 14, \\\"target\\\": 10, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 16, \\\"target\\\": 18, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 17, \\\"target\\\": 0, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 18, \\\"target\\\": 5, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 18, \\\"target\\\": 11, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 19, \\\"target\\\": 1, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 20, \\\"target\\\": 21, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 20, \\\"target\\\": 18, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 21, \\\"target\\\": 12, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 22, \\\"target\\\": 9, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 23, \\\"target\\\": 11, \\\"width\\\": 1}, {\\\"color\\\": \\\"rgb(0,0,255)\\\", \\\"source\\\": 24, \\\"target\\\": 22, \\\"width\\\": 1}]}\";})()"
],
"output_type": "display_data"
},
{
"javascript": [
"\n",
"\n",
"$(\"#plot_area\").append(\"<svg id='svg_display'></svg>\"); \n",
" $(\"#svg_display\").css(\"width\", \"850px\");\n",
" $(\"#svg_display\").css(\"border\", \"2px solid\");\n",
" $(\"#svg_display\").css(\"height\", \"300px\");\n",
"\n",
"$(\"#plot_area\").append(\"<input id='input_1' value='AATTAATTAAGGTTTTAATTATTAATTGTAATTAATTAATTAATACTGAT'></input>\"); \n",
" $(\"#input_1\").css(\"width\", \"440px\");( function () {$(\"#input_1\")[0].onchange= function() {var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"]; var vis_code = \"try:\\n _w = _vis.get_widget_by_name('input_1')\\nexcept NameError:\\n import visutils as _vis\\n _w = _vis.get_widget_by_name('input_1')\\n_w.onchange()\";vc.execute_py(vis_code);} } )();\n",
"\n",
"$(\"#plot_area\").append(\"<input id='input_2' value='5'></input>\"); \n",
" $(\"#input_2\").css(\"width\", \"40px\");( function () {$(\"#input_2\")[0].onchange= function() {var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"]; var vis_code = \"try:\\n _w = _vis.get_widget_by_name('input_2')\\nexcept NameError:\\n import visutils as _vis\\n _w = _vis.get_widget_by_name('input_2')\\n_w.onchange()\";vc.execute_py(vis_code);} } )();\n",
"\n",
"$(\"#plot_area\").append(\"<button id='button'>show graph</button>\"); \n",
" $(\"#button\").css(\"width\", \"120px\");( function () {$(\"#button\")[0].onclick= function() {var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"]; var vis_code = \"try:\\n _w = _vis.get_widget_by_name('button')\\nexcept NameError:\\n import visutils as _vis\\n _w = _vis.get_widget_by_name('button')\\n_w.onclick(*_w.argv)\";vc.execute_py(vis_code);} } )();\n",
"\n",
"$(\"#plot_area\").append(\"<button id='button2'>reduce graph</button>\"); \n",
" $(\"#button2\").css(\"width\", \"120px\");( function () {$(\"#button2\")[0].onclick= function() {var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"]; var vis_code = \"try:\\n _w = _vis.get_widget_by_name('button2')\\nexcept NameError:\\n import visutils as _vis\\n _w = _vis.get_widget_by_name('button2')\\n_w.onclick(*_w.argv)\";vc.execute_py(vis_code);} } )();\n",
"\n",
"$(\"#plot_area\").append(\"<button id='button3'>close</button>\"); \n",
" $(\"#button3\").css(\"width\", \"120px\");( function () {$(\"#button3\")[0].onclick= function() {var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"]; var vis_code = \"try:\\n _w = _vis.get_widget_by_name('button3')\\nexcept NameError:\\n import visutils as _vis\\n _w = _vis.get_widget_by_name('button3')\\n_w.onclick()\";vc.execute_py(vis_code);} } )();\n",
"\n",
"\n",
"\n",
"(function() {\n",
"\n",
"var plot_neighbor=function(json) {\n",
" var w = 850,\n",
" h = 300,\n",
" fill = d3.scale.category10();\n",
" var vis = d3.select(\"#plot_area #svg_display\")\n",
" var force = d3.layout.force()\n",
" .charge(-40)\n",
" .linkDistance(2)\n",
" .nodes(json.nodes)\n",
" .links(json.links)\n",
" .size([w, h])\n",
" .linkStrength(0.1)\n",
" .start();\n",
"\n",
" var link = vis.selectAll(\"line.link\")\n",
" .data(json.links)\n",
" .enter().append(\"svg:line\")\n",
" .attr(\"class\", \"link\")\n",
" .style(\"stroke-width\", function(d) { return d.width; })\n",
" .style(\"stroke\", function(d) { return d.color; })\n",
" .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",
" var node = vis.selectAll(\"circle.node\")\n",
" .data(json.nodes)\n",
" .enter().append(\"svg:circle\")\n",
" .attr(\"class\", \"node\")\n",
" .attr(\"cx\", function(d) { return d.x; })\n",
" .attr(\"cy\", function(d) { return d.y; })\n",
" .attr(\"r\", 4)\n",
" .style(\"fill\", function(d) { return fill(d.group); })\n",
" .call(force.drag);\n",
"\n",
" node.append(\"svg:title\")\n",
" .text(function(d) { return d.name; });\n",
"\n",
" vis.style(\"opacity\", 1e-6)\n",
" .transition()\n",
" .duration(1000)\n",
" .style(\"opacity\", 1);\n",
"\n",
"\n",
"// Per-type markers, as they don't inherit styles.\n",
"vis.append(\"svg:defs\").selectAll(\"marker\")\n",
" .data([\"arrow\"])\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\", 6)\n",
" .attr(\"markerHeight\", 6)\n",
" .attr(\"orient\", \"auto\")\n",
" .append(\"svg:path\")\n",
" .attr(\"d\", \"M0,-5L10,0L0,5\");\n",
" \n",
"\n",
"var path = vis.append(\"svg:g\").selectAll(\"path\")\n",
" .data(force.links())\n",
" .enter().append(\"svg:path\")\n",
" .attr(\"class\", function(d) { return \"link arrow\"; })\n",
" .attr(\"marker-end\", function(d) { return \"url(#arrow)\"; })\n",
" .style(\"stroke-width\", \"1.5px\");\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",
" path.attr(\"d\", function(d) {\n",
" var dx = d.target.x - d.source.x,\n",
" dy = d.target.y - d.source.y,\n",
" dr = Math.sqrt(dx * dx + dy * dy);\n",
" return \"M\" + d.source.x + \",\" + d.source.y + \"L\" + d.target.x + \",\" + d.target.y;\n",
" })\n",
"\n",
" });};\n",
"var vc = IPython.vis_utils.name_to_viscell[\"plot_area\"];\n",
"//alert(vc.data);\n",
"var n_json=$.parseJSON(vc.data.n_json);\n",
"//var n_json = vc.data.n_json;\n",
"//alert(vc.data[\"n_json\"]);\n",
"plot_neighbor(n_json)})()\n"
],
"output_type": "display_data"
}
],
"prompt_number": 36
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment