Skip to content

Instantly share code, notes, and snippets.

@vincentschut
Created September 21, 2012 09:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vincentschut/3760665 to your computer and use it in GitHub Desktop.
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
Display the source blob
Display the rendered blob
Raw
{
"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