In [12]:

    

import numpy as np


mpld3.enable_notebook()


    

In [3]:

    

np.random.seed(0)
plt.plot(np.random.rand(10));


    

In [1]:

    

import mpld3
from mpld3 import plugins
import matplotlib.pyplot as plt
#%matplotlib inline
#mpld3.enable_notebook()
class HelloWorld(plugins.PluginBase):  # inherit from PluginBase
    """Hello World plugin"""
    
    JAVASCRIPT = """
    mpld3.register_plugin("helloworld", HelloWorld);
    HelloWorld.prototype = Object.create(mpld3.Plugin.prototype);
    HelloWorld.prototype.constructor = HelloWorld;
    function HelloWorld(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };
    
    HelloWorld.prototype.draw = function(){
        this.fig.canvas.append("text")
            .text("hello world")
            .style("font-size", 72)
            .style("opacity", 0.3)
            .style("text-anchor", "middle")
            .attr("x", this.fig.width / 2)
            .attr("y", this.fig.height / 2)
    }
    """
    def __init__(self):
        self.dict_ = {"type": "helloworld"}
        
fig, ax = plt.subplots();
plugins.connect(fig, HelloWorld())


    

In [3]:

    

from IPython.display import HTML
MyHTML=mpld3.fig_to_html(fig, template_type="simple")
print(MyHTML)


    

    




<script type="text/javascript" src="https://mpld3.github.io/js/d3.v3.min.js"></script>
<script type="text/javascript" src="https://mpld3.github.io/js/mpld3.v0.2.js"></script>

<style>

</style>

<div id="fig_el66145413226407790496189"></div>
<script type="text/javascript">

  !function(mpld3){
       
    mpld3.register_plugin("helloworld", HelloWorld);
    HelloWorld.prototype = Object.create(mpld3.Plugin.prototype);
    HelloWorld.prototype.constructor = HelloWorld;
    function HelloWorld(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };
    
    HelloWorld.prototype.draw = function(){
        this.fig.canvas.append("text")
            .text("hello world")
            .style("font-size", 72)
            .style("opacity", 0.3)
            .style("text-anchor", "middle")
            .attr("x", this.fig.width / 2)
            .attr("y", this.fig.height / 2)
    }
    
       mpld3.draw_figure("fig_el66145413226407790496189", {"axes": [{"xlim": [0.0, 1.0], "yscale": "linear", "axesbg": "#FFFFFF", "texts": [], "zoomable": true, "images": [], "xdomain": [0.0, 1.0], "ylim": [0.0, 1.0], "paths": [], "sharey": [], "sharex": [], "axesbgalpha": null, "axes": [{"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "bottom", "nticks": 6, "tickvalues": null}, {"scale": "linear", "tickformat": null, "grid": {"gridOn": false}, "fontsize": 12.0, "position": "left", "nticks": 6, "tickvalues": null}], "lines": [], "markers": [], "id": "el6614541324112", "ydomain": [0.0, 1.0], "collections": [], "xscale": "linear", "bbox": [0.125, 0.099999999999999978, 0.77500000000000002, 0.80000000000000004]}], "height": 480.0, "width": 640.0, "plugins": [{"type": "reset"}, {"enabled": false, "button": true, "type": "zoom"}, {"enabled": false, "button": true, "type": "boxzoom"}, {"type": "helloworld"}], "data": {}, "id": "el6614541322640"});
  }(mpld3);


</script>

In [ ]: