Created
September 21, 2012 09:48
-
-
Save vincentschut/3760665 to your computer and use it in GitHub Desktop.
version of callback.ipynb (https://gist.github.com/2605662) that works on python3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"metadata": { | |
"name": "callbacks" | |
}, | |
"nbformat": 3, | |
"nbformat_minor": 0, | |
"worksheets": [ | |
{ | |
"cells": [ | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"*this cell loads the flot jQuery plugin, used for plotting*\n", | |
"<script type=\"text/javascript\">\n", | |
" // load flot\n", | |
" $.getScript(\"http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js\", function(){});\n", | |
"</script>" | |
] | |
}, | |
{ | |
"cell_type": "heading", | |
"level": 1, | |
"metadata": {}, | |
"source": [ | |
"Interactive JavaScript plots with kernel callbacks" | |
] | |
}, | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"This is an example of a plotting widget, entirely in javascript, \n", | |
"which can make callbacks to the Kernel to update data.\n", | |
"\n", | |
"In this case, there is a user-defined function (`update_plot`) that\n", | |
"generates the new data for the plot. The widget has sliders, which\n", | |
"trigger calls to this function when they change. There is a javascript\n", | |
"callback hooked up, which updates a plot area with the new data when it arrives." | |
] | |
}, | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"You must run this one code cell to define the function before it is available to the widget." | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [ | |
"import json\n", | |
"from IPython.core.display import JSON, display, HTML\n", | |
"from scipy.special import jn\n", | |
"from numpy import linspace\n", | |
"import sys, cgitb\n", | |
"\n", | |
"def update_plot(n, xmax=10, npoints=200):\n", | |
" try:\n", | |
" x = linspace(0, xmax, npoints)\n", | |
" lines = []\n", | |
" for i in range(1,n+1):\n", | |
" #lines.append(zip(x,jn(x,i))) # this does not work in python>=3 (zip returns generator object)\n", | |
" lines.append(list(zip(x,jn(x,i))))\n", | |
" display(JSON(json.dumps(lines)))\n", | |
" except:\n", | |
" display(HTML(cgitb.html(sys.exc_info())))" | |
], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [], | |
"prompt_number": 40 | |
}, | |
{ | |
"cell_type": "markdown", | |
"metadata": {}, | |
"source": [ | |
"**Bessel Functions**\n", | |
"\n", | |
"<div id=\"errormessage\"></div>\n", | |
"\n", | |
"<div id=\"theplot\" style=\"width:600px;height:300px;\"></div>\n", | |
"\n", | |
"<span id=\"n_label\"></span><div id=\"n_slider\"></div>\n", | |
"\n", | |
"<span id=\"xmax_label\"></span><div id=\"xmax_slider\"></div>\n", | |
"\n", | |
"<span id=\"npoints_label\"></span><div id=\"npoints_slider\"></div>\n", | |
"\n", | |
"<script type=\"text/javascript\">\n", | |
" var kernel = IPython.notebook.kernel;\n", | |
"\n", | |
" update_plot = function(msg_type, content){\n", | |
" // clear errormessage div\n", | |
" $(\"#errormessage\").empty();\n", | |
" // callback for updating the plot with the output of the request\n", | |
" if (msg_type !== 'display_data') {\n", | |
" console.log('update_plot called with !== display_data:' + msg_type);\n", | |
" return;\n", | |
" }\n", | |
" var lines = content['data']['application/json'];\n", | |
" if (lines != undefined){\n", | |
" lines = JSON.parse(lines);\n", | |
" console.log('plotting');\n", | |
" $.plot($(\"#theplot\"), lines);\n", | |
" } else {\n", | |
" console.log(\"no lines?!\");\n", | |
" msg = content['data']['text/html'];\n", | |
" if (msg != undefined) {\n", | |
" $(\"#errormessage\").html(msg);\n", | |
" }\n", | |
" }\n", | |
" };\n", | |
" \n", | |
" request_update = function(){\n", | |
" // execute update on the kernel\n", | |
" var n = $('div#n_slider').slider(\"value\");\n", | |
" $('span#n_label').text(\"n = \" + n);\n", | |
" \n", | |
" var xmax = $('div#xmax_slider').slider(\"value\");\n", | |
" $('span#xmax_label').text(\"xmax = \" + xmax);\n", | |
" \n", | |
" var npoints = $('div#npoints_slider').slider(\"value\");\n", | |
" $('span#npoints_label').text(\"npoints = \" + npoints);\n", | |
" \n", | |
" var args = n + \", xmax=\" + xmax + \", npoints=\" + npoints;\n", | |
" kernel.execute(\"update_plot(\" + args + \")\", {'output': update_plot});\n", | |
" };\n", | |
" \n", | |
" $('div#n_slider').slider({\n", | |
" min : 1,\n", | |
" max : 20,\n", | |
" value : 4,\n", | |
" slide : request_update,\n", | |
" change: request_update\n", | |
" });\n", | |
" $('div#xmax_slider').slider({\n", | |
" min : 1,\n", | |
" max : 32,\n", | |
" step : 0.2,\n", | |
" value : 10,\n", | |
" slide : request_update,\n", | |
" change: request_update\n", | |
" });\n", | |
" $('div#npoints_slider').slider({\n", | |
" min : 2,\n", | |
" max : 200,\n", | |
" step : 1,\n", | |
" value : 100,\n", | |
" slide : request_update,\n", | |
" change: request_update\n", | |
" });\n", | |
" request_update();\n", | |
"</script>\n" | |
] | |
}, | |
{ | |
"cell_type": "raw", | |
"metadata": {}, | |
"source": [] | |
}, | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [], | |
"prompt_number": 40 | |
}, | |
{ | |
"cell_type": "code", | |
"collapsed": false, | |
"input": [], | |
"language": "python", | |
"metadata": {}, | |
"outputs": [], | |
"prompt_number": 40 | |
} | |
], | |
"metadata": {} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment