"""
Visualizing Random Walks
========================
This shows the use of transparent lines to visualize random walk data.
Thre is also a custom plugin defined which causes lines to be highlighted
when the mouse hovers over them.
Use the toolbar buttons at the bottom-right of the plot to enable zooming
and panning, and to reset the view.
"""
import jinja2
import json
import numpy as np
import matplotlib.pyplot as plt

import mpld3
from mpld3 import plugins, utils


class HighlightLines(plugins.PluginBase):
    """A plugin to highlight lines on hover"""

    JAVASCRIPT = """
    var LineHighlightPlugin = function(fig, prop){
       this.fig = fig;
       this.prop = mpld3.process_props(this, prop,
                                       {alpha_bg:0.3, alpha_fg:1.0},
                                       ["line_ids"]);
    };

    LineHighlightPlugin.prototype.draw = function(){
      for(var i=0; i<this.prop.line_ids.length; i++){
         var obj = mpld3.get_element(this.prop.line_ids[i]),
             alpha_fg = this.prop.alpha_fg;
             alpha_bg = this.prop.alpha_bg;
         obj.elements()
             .on("mouseover", function(d, i){
                            d3.select(this).transition().duration(50)
                                .style("stroke-opacity", alpha_fg)
                          })
             .on("mouseout", function(d, i){
                            d3.select(this).transition().duration(200)
                                .style("stroke-opacity", alpha_bg);
                          });
      }
    };

    mpld3.register_plugin("linehighlight", LineHighlightPlugin);
    """

    def __init__(self, lines):
        self.lines = lines
        self.dict_ = {"type": "linehighlight",
                      "line_ids": [utils.get_id(line) for line in lines],
                      "alpha_bg": lines[0].get_alpha(),
                      "alpha_fg": 1.0}


N_paths = 50
N_steps = 100

x = np.linspace(0, 10, 100)
y = 0.1 * (np.random.random((N_paths, N_steps)) - 0.5)
y = y.cumsum(1)

fig, ax = plt.subplots(subplot_kw={'xticks': [], 'yticks': []})
lines = ax.plot(x, y.T, color='blue', lw=4, alpha=0.1)
plugins.connect(fig, HighlightLines(lines))

mpld3.show()

@@ -584,167 +584,325 @@
     
-var LineHighlightPlugin = function(fig, prop)%7B%0A       this.fig = fig;%0A       this.prop = mpld3.process_props(this, prop,%0A                                      
+mpld3.register_plugin(%22linehighlight%22, LineHighlightPlugin);%0A    LineHighlightPlugin.prototype = Object.create(mpld3.Plugin.prototype);%0A    LineHighlightPlugin.prototype.constructor = LineHighlightPlugin;%0A    LineHighlightPlugin.prototype.requiredProps = %5B%22line_ids%22%5D;%0A    LineHighlightPlugin.prototype.defaultProps =
  %7Bal
@@ -930,61 +930,97 @@
 1.0%7D
-,
 %0A    
-                                   %5B%22line_ids%22%5D
+function LineHighlightPlugin(fig, props)%7B%0A        mpld3.Plugin.call(this, fig, props
 );%0A 
@@ -1101,32 +1101,33 @@
 i=0; i%3Cthis.prop
+s
 .line_ids.length
@@ -1180,16 +1180,17 @@
 his.prop
+s
 .line_id
@@ -1225,24 +1225,25 @@
  = this.prop
+s
 .alpha_fg;%0A 
@@ -1274,16 +1274,17 @@
 his.prop
+s
 .alpha_b
@@ -1448,34 +1448,32 @@
                 
-  
 .style(%22stroke-o
@@ -1494,34 +1494,9 @@
 _fg)
-%0A                         
+;
  %7D)%0A
@@ -1633,34 +1633,32 @@
                 
-  
 .style(%22stroke-o
@@ -1680,118 +1680,26 @@
 bg);
-%0A                          %7D);%0A      %7D%0A    %7D;%0A%0A    mpld3.register_plugin(%22linehighlight%22, LineHighlightPlugin)
+ %7D);%0A      %7D%0A    %7D
 ;%0A  

Update random walk example for new plugin architecture