Mpld3 IPython Widget for IPython 3.2

mpld3_custom_widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import random \n",
    "import json \n",
    "\n",
    "from IPython.html import widgets\n",
    "from IPython.display import display, Javascript\n",
    "from IPython.utils.traitlets import Unicode, Integer, Instance, Bool\n",
    "\n",
    "from matplotlib.figure import Figure\n",
    "\n",
    "import mpld3\n",
    "from mpld3._display import NumpyEncoder\n",
    "from mpld3.urls import MPLD3_URL, D3_URL\n",
    "from mpld3.utils import get_id\n",
    "from mpld3.mplexporter import Exporter\n",
    "from mpld3.mpld3renderer import MPLD3Renderer\n",
    "\n",
    "JAVASCRIPT = r\"\"\"\n",
    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
    "    var fig;\n",
    "    var FigureView = widget.DOMWidgetView.extend({\n",
    "        render: function(){\n",
    "            this.$figure = $('<div />')\n",
    "                .attr('id', this.model.get('figid'))\n",
    "                .appendTo(this.$el);\n",
    "            var that = this;\n",
    "            \n",
    "            var onload = function () {\n",
    "                var figid = that.model.get('figid');\n",
    "                var figure_json = JSON.parse(that.model.get('_figure_json'));\n",
    "                var extra_js = that.model.get('_extra_js');\n",
    "                eval(extra_js);\n",
    "                that.fig = mpld3.draw_figure(figid, figure_json);\n",
    "                that.fig.widget_view = that;\n",
    "                that.fig.widget_model = that.model;\n",
    "                // make the div focusable\n",
    "                that.$figure.attr(\"tabindex\", 0);\n",
    "            }\n",
    "    \n",
    "            // This must be called after the DOM is updated\n",
    "            // to include the <div> for this view.\n",
    "            window.setTimeout(function() {\n",
    "                // Fill div with mpld3 figure.\n",
    "                    if(typeof(window.mpld3) !== \"undefined\" && window.mpld3._mpld3IsLoaded){\n",
    "                    !function (mpld3){\n",
    "                        onload();\n",
    "                    }(mpld3);\n",
    "                } else {\n",
    "                    var d3_url = that.model.get('d3_url');\n",
    "                    var mpld3_url = that.model.get('mpld3_url');\n",
    "                    require.config({paths: {d3: d3_url }});\n",
    "                    require([\"d3\"], function(d3){\n",
    "                        window.d3 = d3;\n",
    "                        $.getScript(mpld3_url, function(){\n",
    "                            onload();\n",
    "                        });\n",
    "                    });\n",
    "                }\n",
    "            }, 100);\n",
    "        }\n",
    "    });\n",
    "    manager.WidgetManager.register_widget_view('FigureView', FigureView);\n",
    "});\"\"\"\n",
    "\n",
    "        \n",
    "class FigureWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('FigureView', sync=True)\n",
    "    mpld3_url = Unicode(MPLD3_URL, sync=True)\n",
    "    d3_url = Unicode(D3_URL[:-3], sync=True)\n",
    "\n",
    "    _figure_json = Unicode('', sync=True)  # to be filled in after instantiation\n",
    "    _extra_js = Unicode('', sync=True)  # for plugin support\n",
    "\n",
    "    figid = Unicode('', sync=True)\n",
    "    figure = Instance(Figure, sync=False)\n",
    "\n",
    "    def _figure_changed(self):\n",
    "        renderer = MPLD3Renderer()\n",
    "        Exporter(renderer, close_mpl=True).run(self.figure)\n",
    "        fig, figure_json, extra_css, extra_js = renderer.finished_figures[0]\n",
    "    \n",
    "        self._figure_json = json.dumps(figure_json, cls=NumpyEncoder)\n",
    "        self.figid = 'fig_' + get_id(fig) + str(int(random.random() * 1E10))\n",
    "        self._extra_js = extra_js\n",
    "        display(Javascript(JAVASCRIPT))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    var fig;\n",
       "    var FigureView = widget.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            this.$figure = $('<div />')\n",
       "                .attr('id', this.model.get('figid'))\n",
       "                .appendTo(this.$el);\n",
       "            var that = this;\n",
       "            \n",
       "            var onload = function () {\n",
       "                var figid = that.model.get('figid');\n",
       "                var figure_json = JSON.parse(that.model.get('_figure_json'));\n",
       "                var extra_js = that.model.get('_extra_js');\n",
       "                eval(extra_js);\n",
       "                that.fig = mpld3.draw_figure(figid, figure_json);\n",
       "                that.fig.widget_view = that;\n",
       "                that.fig.widget_model = that.model;\n",
       "                // make the div focusable\n",
       "                that.$figure.attr(\"tabindex\", 0);\n",
       "            }\n",
       "    \n",
       "            // This must be called after the DOM is updated\n",
       "            // to include the <div> for this view.\n",
       "            window.setTimeout(function() {\n",
       "                // Fill div with mpld3 figure.\n",
       "                    if(typeof(window.mpld3) !== \"undefined\" && window.mpld3._mpld3IsLoaded){\n",
       "                    !function (mpld3){\n",
       "                        onload();\n",
       "                    }(mpld3);\n",
       "                } else {\n",
       "                    var d3_url = that.model.get('d3_url');\n",
       "                    var mpld3_url = that.model.get('mpld3_url');\n",
       "                    require.config({paths: {d3: d3_url }});\n",
       "                    require([\"d3\"], function(d3){\n",
       "                        window.d3 = d3;\n",
       "                        $.getScript(mpld3_url, function(){\n",
       "                            onload();\n",
       "                        });\n",
       "                    });\n",
       "                }\n",
       "            }, 100);\n",
       "        }\n",
       "    });\n",
       "    manager.WidgetManager.register_widget_view('FigureView', FigureView);\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%matplotlib inline\n",
    "from IPython.display import display\n",
    "from skimage.data import astronaut\n",
    "fig, ax = plt.subplots()\n",
    "ax.imshow(astronaut())\n",
    "\n",
    "display(FigureWidget(figure=fig))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}