JSXGraph.jl


JSXGraph.jl

Install Package

julia> using Pkg; Pkg.add("JSXGraph")
julia> using JSXGraph

Insert secret ingredient

insert JSXGraph.PREAMBLE

```julia:preamble
# Insert secret ingredient. It is not a trade secret since Franklin is OSS.
println(~~~<script>$(JSXGraph.PREAMBLE)</script>~~~)
```
\textoutput{preamble}

Edit _layout/head.html

<link rel="stylesheet" href="/libs/jsx/jsxgraph.css">
<script src="/libs/jsx/jsxgraphcore.js"></script>

Edit config.md

@def hasjsx = false

Let's get started

Hello World

```julia
b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="Hello World")
```

Is is enough ? Actually NO. We need insert another secret ingredient like:

```julia
println("""~~~$(JSXGraph.standalone(b, preamble=false))~~~""")
```

Therefore, Franklin users should write code like:

```julia
b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="hello")
print("""~~~$(JSXGraph.standalone(b, preamble=false))~~~""") # hide
```

This will give:

b = board("brd", xlim=[-2,2], ylim=[-2,2])
b ++ point(0, 0, name="hello")

Congratulations!!!

Gallery

Lissajous curve

Example 5.1.1

b = board("b3", xlim=[-12, 12], ylim=[-10,10])
b ++ (
    slider("a", [[-11,7],[-5,7],[0,3,6]], name="a"),
    slider("b", [[-11,5],[-5,5],[0,2,6]], name="b"),
    slider("A", [[1,7],[7,7],[0,3,6]], name="A"),
    slider("B", [[1,5],[7,5],[0,3,6]], name="B"),
    slider("delta", [[2,-7],[6,-7],[0,0,π]], name="&delta;")
    )
@jsf f1(t) = val(A)*sin(val(a)*t+val(delta))
@jsf f2(t) = val(B)*sin(val(b)*t)
b ++ plot(f1, f2, a=0, b=2π,
          strokecolor="#aa2233", strokewidth=3)