Ndtyjky

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/ganja.js@1.0.99/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?

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/ganja.js@1.0.99/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)

}