[FIXED] d3.js Loading version 3 vs version 4 in Jupyter Notebook

Issue

If I try to load the d3.js library into my jupyter notebook it works fine with version 3.x. I can then go to the chrome console and the d3 object is available.

from IPython.core.display import display, HTML
HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>')

If I do the same with version 4.x it is not available even though it is displayed in the sources tab of the chrome developer tools.

from IPython.core.display import display, HTML
HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>')

What am I doing wrong?

Solution

Got an answer from the link mentioned in the comment, but actually I had to leave out the .js at the end of the d3 path because requirejs added it automatically and it was thus trying to call https://d3js.org/d3.v4.js.js which returns 404.

Code that worked for me in jupyter:

from IPython.core.display import display, HTML
HTML('''
<script>
    requirejs.config({
        paths: {
            d3: 'https://d3js.org/d3.v4'
        }
    });

    require(['d3'], function(d3) {
        window.d3 = d3;
    });
</script>
''')

Answered By - jugi