PyCafe - Panel - Interactive Elliptic Curves Visualizer with JSXGraph

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import panel as pn
import param

from panel.custom import JSComponent

pn.extension(sizing_mode="stretch_width")

class JSXGraphComponent(JSComponent):
    # Source: https://jsxgraph.org/share/example/elliptic-curves-group-law
    _esm = """
    import JXG from 'https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.mjs';

    export function render({ model, el }) {
        // Create a div element to hold the JSXGraph board
        let boardDiv = document.createElement("div");
        boardDiv.style.width = "100%";
        boardDiv.style.height = "100%";
        el.appendChild(boardDiv);
        
        JXG.Options.label.autoposition = true;
 
        const board = JXG.JSXGraph.initBoard(boardDiv, {
            boundingbox: [-5, 5, 5, -5],
            axis: true
        });
        
        var curve = board.create('implicitcurve', ['-(y**2) + x**3 - 2 * x + 1'], {strokeWidth: 2});
        var A = board.create('glider', [-1.5, 0, curve]);
        var B = board.create('glider', [0, 1, curve]);
        var line = board.create('line', [A, B], {color: 'black', strokeWidth: 1});
        var C = board.create('otherintersection', [line, curve, [A, B]], {color: 'blue'});
        var D = board.create('point', [() => C.X(), () => -C.Y()], {name: '-C = A + B', color: 'blue'})
    }
    """

jsx = JSXGraphComponent(height=500)

logo = pn.pane.PNG("https://jsxgraph.org/wp/img/jsxgraph_1_0.png")
description = """\
[JSXGraph](https://jsxgraph.org/wp/index.html) is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.

This example was created in response to [Discourse #8469](https://discourse.holoviz.org/t/jscomponent-add-a-div/8469).
"""

pn.template.FastListTemplate(
    title="Panel + JSXGraph",
    sidebar=[logo, description],
    main=[jsx],
    main_layout=None,
    theme_toggle=False,
).servable()
Py.Cafe

jsxgraph-elliptic-curves

Interactive Elliptic Curves Visualizer with JSXGraph
