Get point information after dragging

Question

There is the amazing mpld3 for interactive matplotlib-plots in IPython Notebooks. mpld3 also features plugins. One is especially interesting for me: You can pick a point in

Answer 1

I have wondered about this and wanted to do something similar. This is what I have found. First, I wanted to know the mouse coordinates are. To be able to read the coordinates, I inserted the following "alert" statement, similar to "print", in drag_points.py:

    var startx = 0;
    var starty = 0;
    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("dragging", true);
      startx = obj.ax.x(d[0]);
      starty = obj.ax.y(d[1]);
    }
    var endx = 0;
    var endy = 0;
    function dragended(d) {
      d3.select(this).classed("dragging", false);
      endx = obj.ax.x(d[0]);
      endy = obj.ax.y(d[1]);
      alert(endx-startx);
      d3.select("input")
          .attr("value",endx-startx)
    }

Upon mouse click and release, it opens an alert diag with the x-distance traveled. This allows accessing the coordinate information.

Next, I tested if I can encode this coordinate information into the underlying html dynamically, thus allowing further backend processing. I learned that d3.js allows you to modify the content of an html tag. I therefore modified the "jinja templates" in _display.py (found in the same directory as "plugins.py". Specifically, I entered the following into the template:

and modified the "drag_points.py" so that instead of opening an alert box, it modified the value of the "input" value from "post" to endx-startx. That is,

      d3.select("input")
          .attr("value",endx-startx)

The end result was, when a ball is dragged and released, the alert box displays the x-displacement and this value is used to update the value of the "input" button. If some other tag besides the input button is used to set the value, it should be possible to utilize the information downstream.