Visualizza più esportazioni mpld3 su una singola pagina HTML

Question

Ho trovato che il pacchetto mpld3 è brillante per esportare un grafico matplolib in HTML e visualizzarlo tramite un'app flask.

Ogni esportazione viene fornito con un sacco di JS che sembra una duplicazione non necessaria se si desidera visualizzare più trame all'interno di una singola pagina. Tuttavia non sono abbastanza esperto in JS per estrarre i componenti rilevanti e quindi passarli in loop. Il metodo .fig_to_dict fornisce il JSON necessario per visualizzare ogni grafico, ma poi mi chiedo quale sia il lavoro JS/modello necessario per visualizzare ogni grafico a turno.

Ho considerato di impilare ciascun grafico in un'unica grande cifra, ma mi piacerebbe disporre i grafici in DIV separati e quindi questa non è la soluzione giusta.

Penso di poter vedere cosa sta facendo il JS per visualizzarli ma non ho abbastanza conoscenza per modificare le funzioni in base allo scopo.

Non ho incluso il codice poiché mi aspetto che questo sia pertinente per qualcuno con esperienza mpld3 ma che può fornire un codice di esempio se necessario.

Esempio output HTML per 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> 

avrei pensato che sarebbe stato più semplice che collega i due script di base dall'intestazione modello e quindi la creazione di un nuovo script per tutte le esportazioni JSON. Ma questo non ha funzionato per me.

Answer 1

Sei a metà strada con la tua risposta. Penso che ciò che si vuole fare è qualcosa di simile, che incorporerà tre figure sulla pagina:

<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> 

Il codice JSON per ogni figura possono essere creati in Python eseguendo

import json 

# ... create matplotlib figure 

json01 = json.dumps(mpld3.fig_to_dict(fig)) 

Incorpora questo stringa nella posizione appropriata nel documento HTML che si sta creando e si dovrebbe essere a posto. Spero che aiuti!

Answer 2

Si noti che da quando la risposta di jakevdp è stata pubblicata, mpld3 ha avuto una nuova versione. A partire da oggi (settembre 2014) l'inclusione di mpld3 deve essere:

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>