Although I think legend are on the todo, just thought to mention this. Maybe this can help in planning for the same.
Example here: http://bl.ocks.org/simzou/6439398

Would this be a plugin behavior or a standard feature?

Really enjoying the package, many thanks for sharing.

This is a suggested improvement, but it's not quite pythonic. But then again neither is d3js :)

It's great that the figure's set size is reflected on screen, but I think it would be "more responsive" to have an option to set the canvas size to the bounding div, and then letting that div size be determine by the browser width/whatever else the developer wants.

Is it worth me mucking about in _js.py and _object.py to get this going?

Sorry if this has come up before - couldn't find any other similar issues.

I just took mpld3 for a test drive. The test scripts in the root of the repo appear to be working correctly - in that a browser window opens, connects to mpld3's webserver, and I'm able to interact with the plots on the page. However, when I try to create plots in a live notebook, it appears as if the plots are not being created properly. This illustrates the issue:

The full text of the ReferenceError is "d3 is not defined".

I'm not very familiar with debugging javascript - please let me know if there's any possibly helpful information I can extract from the console.

One pressing need, especially as the plugin framework becomes more mature, is to have a documentation page and example gallery. Probably a sphinx page is the easiest to do, and we'd want to add a gallery generator similar to that used in matplotlib or scikit-learn.

I want to use mpld3 without ipython so i want hand the result html file?
any way to do this?

I use axhline(0) to draw the line x=2, and then plot a scatterplot over it.

When dragging the d3 plot generated by mpld3, the scatterplot points move with the axis but the horizontal line does not. (ie. if I draw the horizontal line is at x=6 instead of x=2).

I don't know wether it's possible and/or how hard is to popup a new window in ipython notebook.

If it's possible, it should be nice to allow user plotting in new html window, such as do default interactive matplotlib backend.

What do you think ?

PS: i didn't find anything on "opening a new window with some html inside in ipython notebook". If you can indicate me how to do it I will be glade to make a pull request.

It would be nice to optionally implement tooltips. D3 offers several ways to implement this: (see one example here). The biggest question is how to make this available through the API.

A zeroth-order solution would be to use the label attribute of each class, and provide an argument to fig_to_html which would display the label as you hover over any argument.

You might also want to show the (x, y) coordinates of any element: this could be done as well, but we'd have to figure out how to specify this via the mpld3 API.

imshow is broken again. With d3 enabled, the image is not positioned at (0, 0), so data plotting on top of it is not positioned over the image correctly, the way it does with d3 off.

To make sure that common labels like "line" or "tooltip" don't conflict with pages that mpld3 plots may be embedded in, we should do a poor-man's namespace on all CSS classes: for example line should be mpld3-line and points should be mpld3-points, etc.

i just started playing with this and i really like it. first thing that i noticed was the font-size is not accurately preserved.

http://nbviewer.ipython.org/gist/arsenovic/9073842

is there a reason for this?

Hi! When I added a legend to the tooltip example the plot lost its hover ability, the legend is not shown, and it appeared the following message after the plot

Javascript error adding output!
TypeError: Cannot read property '0' of undefined
See your browser Javascript console for more details.

Is this related to #48?

Hi! I'm new to this, just trying to plot some interactive graphics for fun. I am working directly from the example notebook, but enable_notebook() fails from the start.

I have the two dependencies (matplotlib and jinja2) installed. I checked to see what was importing incorrectly, looks like Ipython.core.getipython is causing the exception.

>>> from IPython.core.getipython import get_ipython
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ImportError: No module named getipython

>>> import IPython.core
>>> IPython.__version__
'0.13.1'

My windows machine prefers I use https for viewing remote IPython notebooks for firewall reasons, so it would be great if there was a clean way for mpld3 to retrieve d3.js via https in this case. The way it is set up now, D3_WEB_LOC = "http://... in _objects.py results in an error about fetching http data from an https page.

To replicate this error, you will need to have a .pem file, which you can get with

openssl req -x509 -nodes -days 365 -newkey rsa:1024 -keyout mycert.pem -out mycert.pem

and then to run ipython with the options ipython notebook --certfile=mycert.pem. (Additional details here: http://ipython.org/ipython-doc/rel-1.1.0/interactive/public_server.html )

As a workaround, I put d3.v3.js in the same dir as my notebooks as changed the like in _objects.py to have D3_WEB_LOC = "/files/d3.v3.js".

Thanks for your work on this!

As a viewer of beautiful mpld3 charts, I would like to be able to reset a visualization to its initial state. (e.g. origin, zoom)

Here is a minimal example:

fig = plt.figure(figsize=(12,4))

y = randn(10)
y[3] = nan

plot(y, 'ks-', mec='w', mew=3, ms=10)
mpld3.display.display_d3(fig, closefig=False, d3_url='files/d3.v3.js')

And here are the results of running this in my IPython notebook: http://nbviewer.ipython.org/gist/aflaxman/8143035

Number.NaN seems to be the javascript equivalent of numpy.nan, but just doing a string replace for this produces different errors, because SVG doesn't like NaN, either. I think I can hack together a string replacement for that, too, by adding this to the LINE_TEMPLATE

     axes_{axid}.append("svg:path")
                    .attr("d", line_{lineid}(data_{lineid}))
+                     .replace(/M[0-9\.]+,NaNM/g,"L")
+                     .replace(/MNaN,[0-9\.]+M/g,"L")
                    .attr('class', 'line{lineid}');

But there must be a better way to do it!

Thanks to @jkfurtney we have basic support for log axes. But the tick labels can get ugly. The underlying tick labels contain TeX: Text(10,0,'$\\mathdefault{10^{1}}$'). This seems like a good excuse to see how difficult it would be to render tick labels using MathJax. Ultimately, of course, it would be nice to support MathJax for all text.

• MathJax-free approach using CSS -- useful reference whether or not MathJax is part of our solution
• rendering MathJax as a foreignObject inside an svg, specifically this comment
• not-so-helpful but related SO post

UPDATE: OK, we don't have to reinvent the wheel of d3 + mathjax. Roundup:

• https://gist.github.com/chrisbrich/3391642

Jake, I'd be especially interested in your reaction to the CSS approach (first link) before I dive too far into this.

Has anyone got Tooltips working with a Line2d from plot, as opposed to PathCollection from scatter? I've tried a couple variations on the code below -- my best guess -- and none have shown a Tooltip.

import mpld3.plugins
fig, ax = plt.subplots()
lines = ax.plot([0, 1, 2, 3], [1,2,3,5])
tips = mpld3.plugins.PointLabelTooltip(lines[0], ['a'])
fig.plugins = [tips]

I believe this is supported, and I'm just not doing it right. If not, I'm willing to help.

In the README.md, you mention installing requirements, but no such file exists in the repository. It looks like it was removed sometimes after it was initially included in the PR_deps merge by @mwaskom.

I think this line should perhaps use the variable axname instead of xy?

https://github.com/jakevdp/mpld3/blob/master/mpld3/_objects.py#L458

Hi @jakevdp I am at Strata and was wanting to demo mpld3 as part of my talk. I am finding that mpld3 is broken with IPython master in the notebook. I observe the warning below and not mpld3 output. Any thoughts here. BTW, IPython recently changed how it handles exceptions that are raised in formatters. This is where the warning is coming from, but it looks like the exception was from within mpld3.

(Jake--I didn't get far enough to change code to address this, and my attention will inevitably have to drop. In lieu of some code, I thought I would at least create an issue to collect some notes on the topic.)

d3/svg has a more limited number of built-in symbols for plotting points than matplotlib. If a matplotlib plot uses a symbol not supported by svg, mpld3 will issue a warning message,

Only markers 'o' (circle), '^' (triangle-up),
'v' (triangle-down), '+' (cross), 'd' (diamond),
and 's' (square) are currently supported.
Defaulting to 'circle'.

and will, as promised, render the symbol as a circle.

In matplotlib, the limits of error bars are rendered as a set of points with either the '_' or '|' plot symbols (for y or x errors, respectively). Thus, when converted to svg using d3, the ends of the error bars are rendered as circles.

Hey all- I am able to install and run mpld3, but ran into a couple of issues.

First, if I leave any
ax.grid(color='lightgray', alpha=0.7)

line commented in, I get an error, which IPython supresses. @jakevdp suggested via twitter to use calling mpld3.fig_to_d3(fig) to get the error:

/Library/Frameworks/EPD64.framework/Versions/7.3/lib/python2.7/site-packages/matplotlib/colors.pyc in to_rgba(self, arg, alpha)
    351             return r,g,b,alpha
    352         except (TypeError, ValueError), exc:
--> 353             raise ValueError('to_rgba: Invalid rgba arg "%s"\n%s' % (str(arg), exc))
    354 
    355     def to_rgba_array(self, c, alpha=None):

ValueError: to_rgba: Invalid rgba arg "lightgray"
to_rgb: Invalid rgb arg "lightgray"
could not convert string to float: lightgray

So commenting that out let the graph render, but only in static form. I'll note that if I run the notebook w/o executing any cells, I can do all the d3 goodness without any issue. I'm using Chrome.

I suspect this is a version issue. I use enthought, but have upgraded some packages (like IPython). Any advice on what version info I should share here?

Thanks for all the help. This is a great package and I'd like to start using it in my work as soon as I can!

ag

I'd like to think about refactoring the conversion code to make it more useful to others.

Currently, the functions that walk through a matplotlib plot are completely entwined with the functions that generate the javascript code. I think it would be very useful to separate these, so that other libraries (vispy, plotly, etc.) could take advantage of that infrastructure. This would look a lot like the matplotlib backend framework, but stay closer to the data (the matplotlib backends work almost exclusively in figure coordinates)

This is my thought on design: we can have an Exporter class structure and a Renderer class structure. The Exporter is instantiated with a figure and a renderer, and contains the machinery to walk through the matplotlib object tree.

The Renderer looks a lot like a typical backend renderer, and contains the machinery to create a representation (mpld3 javascript, plotly output, vispy output, WebGL output, etc.) using a few basic building blocks. I think the following are the methods we'd need in the renderer:

• draw_axes: draw a (zoomable) set of axes
• draw_text: any text (titles, axis labels, etc.)
• draw_image: draw the results of plt.imshow
• draw_path: works for lines and patches
• draw_path_collection: can be implemented via draw_path, but allows for more efficient implementations
• draw_markers: (for scatter-plots, etc.) could be implemented via draw_path_collection, but allows for more efficient implementations

Each of these methods would take arguments specifying whether the associated coordinates are figure coordinates or data coordinates, and which axes (if any) the data are associated with. With this base in place, anyone could implement their own renderer class to output any sort of interactive graphic they're interested in.

Scenario

Scientific web app does a bunch of crunching and analysis in the backend using the Python scientific ecosystem- NumPy, SciPy, Scikit-learn, Pandas. The user sends JSON data (from the web app backend) to the client to render via some JS library (Flot, jqplot, HighCharts, D3 etc.). This does require the developer to often take care of a lof of JS.

Where does mpld3 fit in

Instead of sending JSON to the client, the server side of the web app can send the html generated by mpld3. The developer does not have to write JS code for generating the plots.

Does this sound like a reasonable idea? If it does, I can submit an example PR here.

We're getting close to being able to release this in an 0.1 version on PyPI.

A few things I'd like to see before this happens (any others?)

• Implement general marker types (see #37 and #38)
• Fix legend support (see #48)
• Fix line colors (see #47)
• Finalize plugin design (see #43 (comment) and #50)
• Make HTML documentation & examples, especially for plugin framework (#54)

Other suggestions for must-have features or bug fixes?

What versions of IPython, matplotlib and jinja2 are required?
I looked but could not find the requirements.
I have

ipython==1.1.0
matplotlib==1.3.1
Jinja2 = 2.7.1

but mpld3 is not working for me.

I'm getting up to speed on the mpld3 rewrite, and I find that nosetests now has some failing tests:

[abie@dismod mpld3]$ nosetests
...
======================================================================
FAIL: mpld3.mplexporter.tests.test_plotly.test_simple_line
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/homes/abie/anaconda/lib/python2.7/site-packages/nose/case.py", line 197, in runTest
    self.test(*self.arg)
  File "/snfs2/HOME/abie/mpld3/mpld3/mplexporter/tests/test_plotly.py", line 23, in test_simple_line
    assert equivalent, msg
AssertionError: ['autosize', 'yaxis', 'showlegend', 'height', 'width', 'xaxis', 'margin'] not ['showlegend', 'title', 'yaxis', 'height', 'width', 'xaxis']

======================================================================
FAIL: mpld3.mplexporter.tests.test_plotly.test_subplots
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/homes/abie/anaconda/lib/python2.7/site-packages/nose/case.py", line 197, in runTest
    self.test(*self.arg)
  File "/snfs2/HOME/abie/mpld3/mpld3/mplexporter/tests/test_plotly.py", line 47, in test_subplots
    assert equivalent, msg
AssertionError: ['autosize', 'yaxis', 'xaxis5', 'xaxis4', 'xaxis3', 'xaxis2', 'height', 'width', 'yaxis2', 'yaxis3', 'yaxis4', 'yaxis5', 'xaxis', 'showlegend', 'margin'] not ['xaxis4', 'height', 'yaxis2', 'yaxis3', 'yaxis4', 'yaxis5', 'showlegend', 'title', 'xaxis5', 'yaxis', 'xaxis3', 'xaxis2', 'width', 'xaxis']

----------------------------------------------------------------------

It seems like this is no big deal, and also just some silly thing about comparing lists versus sets, so this issue is more about workflow than the failing tests themselves.

1. is nosetests an appropriate way to test mpld3? and if not, what should we use?
2. if there is an issue with mplexporter that shows up in mpld3, should we deal with it here, or that project?

This package it fantastic!
One of the only things I was missing upon the transition from (cli) ipython to the notebook interface was interacting with plots.
This not only regain it but has huge potential to extend it!
Thanx!

I was trying to find a way to get the information of an image using mouse hovering, a la D3 Scatter Plot (with tooltips!) in D3 Plugins: Truly Interactive Matplotlib In Your Browser (for example [x, y, pxl value] ).
I did not figure out how this should be done.
Previously I could use variations over image_zcoord.py.
Using the notebook interface and mpld3 the best I came up with so far is the following ugly trick: add an invisible scatter plot, with one marker per entry in the array, and create a plugin based on this scatter.

%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
import mpld3
mpld3.enable_notebook()

import numpy as np

np.random.seed(0)
A = np.random.rand(25, 25)
fig = plt.figure(figsize=(9,6))
ax = fig.gca()
ax.matshow(A)
## get the indices of the array to "tile" using scatter
y, x = np.mgrid[:A.shape[0], :A.shape[1]]
x,y = x.ravel(),y.ravel()
## pseudo-transparent scatter
scatter = ax.scatter(x, y, c=A, s=40, marker='s', edgecolor='none')
## create the plugin
labels = ['({},{},{})'.format(i,j,a) for i,j,a in zip(y, x, A.ravel())]
fig.plugins = [plugins.PointLabelTooltip(scatter, labels)]

There's probably a cleaner way to get this done. What am I missing?
Besides being an ugly hack, this solution is missing several desired features -

• The markers do not extend over the entire "effective pixel" but only over the marker (which size does not vary as we zoom-in/out)
• It would be nice to place the label at a fixed position outside the array (say at the bottom-left corner)
• It would be nice to change the colour of the label, or put in a text box, such that it is readable while hovering.

Looking forward for hints as well as for progress of the mpld3 package!

It is funny to decide what is a bug and what is a feature request, I guess you could call this either.

When matplotlib renders text, it has a verticalalignment parameter (va for short), and mpld3 should respect that. Here is a notebook that can serve as a test: http://nbviewer.ipython.org/gist/aflaxman/8724854

The horizontalalignment parameter is something we should check also.

This would be an awesome feature to have. For an example, see the first plot here:

https://www.authorea.com/users/3/articles/3904/_show_article

I imagine the API would look something like this:

import matplotlib.pyplot as plt
import numpy as np
from mpld3 import plugins, show_d3

fig, ax = plt.subplots(2)
data = np.random.normal(size=(3, 100))

points0 = ax[0].plot(data[0], data[1], 'o')
points1 = ax[1].plot(data[0], data[2], 'o')

plugins.connect(fig, plugins.LinkedBrush(points0[0], points1[0]))
show_d3()

There would need to be some sort of way of disabling panning/zooming, perhaps via a toolbar button. I think this could be extremely useful!

Hi,
I created a sample IPython notebook to illustrate this:
http://nbviewer.ipython.org/gist/nipunreddevil/61663e12be0947d80f82

Matplotlib is correctly showing the x axis from 2010 onwards (Out [11]). Whereas, mpld3 plot (Out [9] shows the year as 1941).

Maybe this is also an opportunity to illustrate some Pandas plotting via mpld3.

In the current version, scrollwheel zooming scrolls in both axis. In many cases, this is not desirable. Box select based zooming can fix this to a large extent though.

When I run "python process_testplots.py", most of the script seems to run until it gets to test_plots/test_plot_w_color_eq_none.py, which throws the following error message:

Traceback (most recent call last):
File "process_testplots.py", line 120, in
outfile = run_main()
File "process_testplots.py", line 113, in run_main
d3_url=args.d3_url)
File "process_testplots.py", line 80, in combine_testplots
fig_html.append(fig_to_d3(fig, d3_url))
File "/Volumes/Macintosh HD/Users/jshea/src/mpld3/mpld3/display.py", line 29, in fig_to_d3
return D3Figure(fig).html(d3_url=d3_url, *_kwargs)
File "/Volumes/Macintosh HD/Users/jshea/src/mpld3/mpld3/_objects.py", line 260, in html
return self._render(d3_url, *_kwargs)
File "/Volumes/Macintosh HD/Users/jshea/src/mpld3/mpld3/_objects.py", line 270, in _render
self.fig.savefig(io.BytesIO(), format='png')
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/figure.py", line 1421, in savefig
self.canvas.print_figure(_args, *_kwargs)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/backend_bases.py", line 2220, in print_figure
*_kwargs)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/backends/backend_agg.py", line 505, in print_png
FigureCanvasAgg.draw(self)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/backends/backend_agg.py", line 451, in draw
self.figure.draw(self.renderer)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/artist.py", line 55, in draw_wrapper
draw(artist, renderer, *args, *_kwargs)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/figure.py", line 1034, in draw
func(_args)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/artist.py", line 55, in draw_wrapper
draw(artist, renderer, *args, *_kwargs)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/axes.py", line 2086, in draw
a.draw(renderer)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/artist.py", line 55, in draw_wrapper
draw(artist, renderer, _args, *_kwargs)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/lines.py", line 530, in draw
gc.set_foreground(ln_color_rgba)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/backend_bases.py", line 921, in set_foreground
self._rgb = colors.colorConverter.to_rgba(fg)
File "/Users/jshea/Library/Enthought/Canopy_64bit/User/lib/python2.7/site-packages/matplotlib/colors.py", line 365, in to_rgba
'to_rgba: Invalid rgba arg "%s"\n%s' % (str(arg), exc))
ValueError: to_rgba: Invalid rgba arg "None"
to_rgb: Invalid rgb arg "None"
cannot convert argument to rgb sequence

I'm not sure what is causing this issue. My matplotlib is at 1.3.1. Any help is appreciated.

For figures with multiple subplots, panning and zooming should be tied together when sharex or sharey is True.

This will likely take some refactoring, so that each axes element is an object which can be referenced by other axes.

Many people coming from the Matlab world search for the equivalent of a ".fig" save. This ".fig" save in Matlab allows figures to be edited later without needing to call the script which originally generated the plot.
I think mpld3 can provide a similar functionality easily via save_json and the complementary load_json. Just thought to mention this while fresh in memory!

It would be nice to add a toolbar to each figure. There's already a rudimentary reset/home button implemented (set the with_reset_button argument to True to see it in action). This could be combined with #8 (and perhaps a button for #6) in a nicely formatted toolbar.

I don't know wether it's possible and/or easy to add it but it would be awesome to allow complex visualisations in tooltips to allow quick and easy data exploration.

For example this code should display an image on tooltips :

from mpld3 import plugins

fig, ax = plt.subplots(subplot_kw=dict(axisbg='#EEEEEE'))
ax.grid(color='white', linestyle='solid')

N = 50
scatter = ax.scatter(np.random.normal(size=N),
                     np.random.normal(size=N),
                     c=np.random.random(size=N),
                     s = 1000 * np.random.random(size=N),
                     alpha=0.3,
                     cmap=plt.cm.jet)

ax.set_title("D3 Scatter Plot (with tooltips!)", size=20)

img_str = '<img src="http://fakeimg.pl/300/" alt="point {0}" />'

labels = [img_str.format(i + 1) for i in range(N)]
fig.plugins = [plugins.PointLabelTooltip(scatter, labels)]

Print current mouse position x and y coordinates below the figure (such as default with interactive matplotlib backend).

See test_plots/test_legend.py

Hi Jake,

it looks like test_plots/test_logscale.py needs pandas installed (I didn't see that mentioned in requirements)

Running this example from StackOverflow:

http://stackoverflow.com/a/5147430

...the plot renders fine, but if I zoom or drag the plot, the text annotations do not move while the points do. The annotations should be transformed along with the text.

Mozilla and webkit support nearest-neighbor image rendering but, as this page demonstrates, they don't do the job very well. It's better to draw each pixel into a canvas, which looks great.

I don't think I have the Javascript chops to do this, but I'm pretty sure it is the right approach.

With multiple tied axes, when you zoom and pan on one, and then zoom and pan on another, there are some strange jumps. This can be seen in the example notebook linked in the main README file.

It would be great to implement a slider plugin (e.g. like http://thematicmapping.org/playground/d3/d3.slider/) connected to plots. I've tried writing up an example myself, but got hopelessly lost in the interplay between the python and the js. I'm trying to make a set of parameter plots with two "control" parameters (to be slider'd).

Paths denoted in pixel coordinates rather than data coordinates currently have their y-axis flipped.

Here is an example:

import matplotlib.pyplot as plt
import numpy as np

from mpld3 import show_d3

x = np.random.normal(size=100)
y = np.random.normal(size=100)

plt.scatter(x, y, marker='^', color='green', s=20)
plt.scatter(y, x, marker='v', color='red', s=20)

show_d3()

Green triangles should point up, red triangles should point down, but mpld3 shows the opposite.

To make things more flexible (and to enable tying axes zooms together) it would be helpful to make the Javascript side of this more flexible. I created a gist with an example of how this might look:
https://gist.github.com/jakevdp/8211270

Since d3 generate svg it should be cool to allow user to save current figure to svg.

D3 generate svg client side, so to do that we have to find a way to send client data (svg code) back to the ipython kernel and then to save it as svg file on hard drive (I don't think it's possible/good to do it client side).

What do you think ?

D3Image assumes a 2D array, while image data may also be a 3D array, with the 3rd dimension being either RGB or RGBA values. (ping @danielballan)

Currently there is no way to specify tick labels and locations. Especially in subplots and date plots, this causes issues. with overlapping tick labels and overly-dense grids. This should be addressed soon.