Display multiple mpld3 exports on a single HTML page Display multiple mpld3 exports on a single HTML page flask flask

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>