Display multiple mpld3 exports on a single HTML page
You're half-way there with your answer. I think what you want to do is something like this, which will embed three figures on the page:
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script><style></style><div id="fig01"></div><div id="fig02"></div><div id="fig03"></div><script type="text/javascript"> var json01 = { <snip JSON code> }; var json02 = { <snip JSON code> }; var json03 = { <snip JSON code> }; mpld3.draw_figure("fig01", json01); mpld3.draw_figure("fig02", json02); mpld3.draw_figure("fig03", json03);</script>
The json code for each figure can be created in Python by running
import json# ... create matplotlib figurejson01 = json.dumps(mpld3.fig_to_dict(fig))
Embed this string at the appropriate place in the HTML document you're creating, and you should be good to go. I hope that helps!
Note that since jakevdp's answer was posted mpld3 has had a new release. As of today (September 2014) the mpld3 include has to be:
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>