Display multiple mpld3 exports on a single HTML page

Question

I've found the mpld3 package to be brilliant for exporting a matplolib plot to HTML and displaying this via a flask app.

Each export comes with a lot of JS which seems unnecessary duplication if you want to display multiple plots within a single page. However I'm not well enough versed in JS to extract the relevant components and then loop through them. The .fig_to_dict method gives the necessary JSON to display each chart but then I'm left wondering what JS/ template work is needed to display each chart in turn.

I considered just stacking each plot into a single big figure but I'd like to layout the charts in separate DIVs and so this isn't the right solution.

I think I can see what the JS is doing to display them but I don't have enough knowledge to modify the functions to suit the purpose.

I haven't included code as I'm expecting this only to be relevant to someone with mpld3 experience but can supply some sample code if needed.

Sample HTML output for mpld3.fig_to_html(fig, template_type="simple"):

<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="fig136845463888164451663379"></div>
<script type="text/javascript">
  var spec136845463888164451663379 = { <snip JSON code> };
  var fig136845463888164451663379 = mpld3.draw_figure("fig136845463888164451663379", spec136845463888164451663379);
</script>

I'd thought it would be as simple as linking the two core scripts from the template header and then creating a new script for each JSON export. But that hasn't worked for me.

Answer 1

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 figure

json01 = 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!

Answer 2

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>