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 the plot and drag it around - it is presented here:

http://mpld3.github.io/examples/drag_points.html.

The source code in the link generates the plot below. I would like to have the information back from the plugin where I have dragged my points to. But I really get lost in the javascript part and how I could get information back from it.

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:

<table width=300 height=200 border=5>
<tr>
  <form method="POST" action="/plot" class="">
  <input type="submit" name="submit" value="PLOT">
  </form>
</tr>
</table>

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.