CODEWITHSUNDEEP
javascriptpythonmatplotlibd3.jsmpld3
M. Ehrmantraut
M. Ehrmantraut

Reputation: 11

mpld3 using d3v3 and d3v4 on the same html page

I am in the process of making a web application running now on a python flask local server. After an initial rendering of my index page I make an aync call using d3.json:

//index.html
<script> 
//...
d3.json( url )
.post(data, function(error, root) {
    if(error!=null){
        console.log("Error: ",error)
    }
    else if (root!=null){
        console.log("Data: ",root)
        script_str = root[3] 
        console.log(script_str)
        $('head').append(script_str);

    }
});
//...
</script>

So in the python server that post is elaborated as below:

#application.py
#...
fig=plt.figure()
plt.plot([3,1,4,1,5], 'ks-', mec='w', mew=5, ms=20)
plt.title("Test plot")
plt.close() # and this one
# mpld3.show()
figInHtml=mpld3.fig_to_html(fig)#,d3_url="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js")
print("--------------------",figInHtml)
return jsonify(data.CountryName,data.Year1,data.Year2,figInHtml)

This will return a dummy plot (later I will replace it with the plot i need after some computation in python) as a json string script, that I add in the dom. All this works perfectly (the plot from python matplotlib is "translated" and visualized on my index page using d3) except for the fact that mpld3 script requires and uses d3 v3 while my project was built using d3 v4 :

//Content of script_str returned by mpld3.fig_to_html(fig)
<style>

</style>

<div id="fig_el203381403861699907281555672219"></div>
<script>
function mpld3_load_lib(url, callback){
  var s = document.createElement('script');
  s.src = url;
  s.async = true;
  s.onreadystatechange = s.onload = callback;
  s.onerror = function(){console.warn("failed to load library " + url);};
  document.getElementsByTagName("head")[0].appendChild(s);
}

if(typeof(mpld3) !== "undefined" && mpld3._mpld3IsLoaded){
   // already loaded: just create the figure
   !function(mpld3){

       mpld3.draw_figure("fig_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
   }(mpld3);
}else if(typeof define === "function" && define.amd){
   // require.js is available: use it to load d3/mpld3
   require.config({paths: {d3: "https://mpld3.github.io/js/d3.v3.min"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", function(){

         mpld3.draw_figure("fig_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
      });
    });
}else{
    // require.js not available: dynamically load d3 & mpld3
    mpld3_load_lib("https://mpld3.github.io/js/d3.v3.min.js", function(){
         mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", function(){

                 mpld3.draw_figure("fig_el203381403861699907281555672219", {"width": 640.0, "height": 480.0, "axes": [], "data": {}, "id": "el20338140386169990728", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
            })
         });
}
</script>

Finally after this long but necessary premise the question (more related to javascript language then other) is:

how can I continue to use "d3" variable as a variable containing version 4.x.x version of d3 before and after drawing the plot using mpld3 and d3 version 3.x.x without changing all "d3.x" calls to "d3v4.x" or other names? I hope the context and the question are clear enough.

Upvotes: 0

Views: 267

Answers (1)

M. Ehrmantraut
M. Ehrmantraut

Reputation: 11

I answer myself if anyone will face a problem like this, I solved this calling d3, that make use of d3 version 4 as d3v4, and keeping d3 just as d3. I would have liked to not do so, cause I had to change all my calls and also replace cdn links with local resources that were modified, replacing even there (inside the libraries) d3 with d3v4.

Upvotes: 1

Related Questions