Loading external javascript libraries in jupyter notebooks

Question

I am currently trying to load an external JavaScript library (https://github.com/enkimute/ganja.js) from a jupyter notebook and add an element to the notebook I am working in

Here is gist of a minimal example of my code: https://gist.github.com/hugohadfield/7c42d6944b154ba8d73f07059964c730

%%javascript
require.config({paths: {ganja: 'https://unpkg.com/[email protected]/ganja'}});

console.log('Test1');

require(['ganja'],
    function(){                  
        Algebra(2,0,1,()=>{

            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.
            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.
            var point = (x,y)=>1e12-x*1e02+y*1e01;    

            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :
            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;

            // Define 3 points.
            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); 

            // Define the line y=x-0.5
            var L=line(-1,1,0.5)

            // Or by joining two points. We define M as a function so it will update when C or A are dragged.
            var M=()=>C&A;

            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. 
            var D=()=>L^M;


            console.log('Test2');


            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts
            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.
            element.append(this.graph([
                A, "A",         // Render point A and label it.
                B, "B",         // Render point B and label it.
                C, "C",         // Render point C and label them.
                L, "L", M, "M", // Render and label lines.
                D, "D",         // Intersection point of L and M
                0xff0000,       // Set the color to red.
                [B,C],          // Render line segment from B to C. 
                0xffcccc,       // Set the color to light red.
                [A,B,C]         // render polygon ABC.
            ],{grid:true}));

        });

});

Nothing displays in the notebook and I get an error code of: ReferenceError: "Algebra is not defined"

I thought that the require would handle the loading of the library and as such I should be able to use Algebra, which is defined in that library. Why can I not do this, what is the correct form for loading external libraries into jupyter notebooks?

Please, do not edit the answer into a question, rather post it as an answer. — Suma
– Suma, Commented Dec 12, 2018 at 2:28

Hugo Hadfield · Accepted Answer · 2018-12-12 11:53:50Z

Fixed this, it was to do with the names of the objects that the library exports and how the require loads them, the fixed code:

    %%javascript

require.config({paths: {Algebra: 'https://unpkg.com/[email protected]/ganja'}});
require(['Algebra'],function(Algebra){add_graph_to_notebook(Algebra)});

function add_graph_to_notebook(Algebra){
    var output = Algebra(2,0,1,()=>{

            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.
            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.
            var point = (x,y)=>1e12-x*1e02+y*1e01;    

            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :
            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;

            // Define 3 points.
            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); 

            // Define the line y=x-0.5
            var L=line(-1,1,0.5)

            // Or by joining two points. We define M as a function so it will update when C or A are dragged.
            var M=()=>C&A;

            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. 
            var D=()=>L^M;

            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts
            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.
            return this.graph([
                A, 'A',         // Render point A and label it.
                B, 'B',         // Render point B and label it.
                C, 'C',         // Render point C and label them.
                L, 'L', M, 'M', // Render and label lines.
                D, 'D',         // Intersection point of L and M
                0xff0000,       // Set the color to red.
                [B,C],          // Render line segment from B to C. 
                0xffcccc,       // Set the color to light red.
                [A,B,C]         // render polygon ABC.
            ],{grid:true});

        });

    console.log(output);
    element.append(output)
}

Collectives™ on Stack Overflow

Loading external javascript libraries in jupyter notebooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest