<iframe 
    src="http://www.jsxgraph.org/share/iframe/complex-maps" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Complex maps" 
    allowfullscreen
></iframe>

<select id="functionterms" style="max-width:300px">
    <option>z</option>
    <option>z + i</option>
    <option>2z</option>
    <option>-z</option>
    <option>iz</option>
    <option>(1+i)z</option>
    <option>conj(z)</option>
    <option>9/conj(z)</option>
    <option>Re(z)</option>
    <option>i Im(z)</option>
    <option>x+2iy</option>
    <option>z^2</option>
    <option>z^3</option>
    <option>1/z</option>
    <option>e^z</option>
</select>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 50%;" data-ar="1 / 1"></div>
</div>


<div style="width: 600px; display:grid; border: 1px black solid; grid-template-columns: 1fr 1fr; max-width: 100%; padding: 20px;">
    <div id="out_z" style="max-width:200px; text-align: center;"></div>
    <div id="out_fz" style="max-width:200px; text-align: center;"></div>
</div>
<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    const board = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-10, 10, 10, -10],
        keepaspectratio: false,
        axis: true,
        pan: { enabled: false },
        sketches: {
            enabled: true,
            0: { visible: true },
            1: { visible: true, strokeColor: JXG.palette.blue }
        }
    });
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-10, 10, 10, -10],
        keepaspectratio: false,
        axis: true,
        pan: { enabled: false },
        sketches: {
            enabled: true,
            0: { visible: true, strokeColor: JXG.palette.blue, strokeWidth: 3 }
        }
    });
    board.addChild(board2);
    
    var funcs = {
        'z': (z) => z,
        'z + i': (z) => {
            let i = new JXG.Complex(0, 1);
            return i.add(z);
        },
        '2z': (z) => {
            let w = new JXG.Complex(2, 0);
            return w.mult(z);
        },
        '-z': (z) => {
            let w = new JXG.Complex(-1, 0);
            return w.mult(z);
        },
        'iz': (z) => {
            let w = new JXG.Complex(0, 1);
            return w.mult(z);
        },
        '(1+i)z': (z) => {
            let w = new JXG.Complex(1, 1);
            return w.mult(z);
        },
        'conj(z)': (z) => {
            return JXG.C.conj(z);
        },
        '9/conj(z)': (z) => {
            let w = new JXG.Complex(9, 0);
            return JXG.C.div(w, JXG.C.conj(z));
        },
        'Re(z)': (z) => {
            return new JXG.Complex(z.real, 0);
        },
        'i Im(z)': (z) => {
            return new JXG.Complex(0, z.imaginary);
        },
        'x+2iy': (z) => {
            return new JXG.Complex(z.real, 2 * z.imaginary);
        },
        'z^2': (z) => {
            return z.mult(z);
        },
        'z^3': (z) => {
            let res = z.mult(z);
            return res.mult(z);
        },
        '1/z': (z) => {
            let one = new JXG.Complex(1, 1);
            return one.div(z);
        },
        'e^z': (z) => {
            let re = z.real,
                im = z.imaginary,
                s = Math.exp(re);
            return new JXG.Complex(s * Math.cos(im), s * Math.sin(im));
        }
    };
    var f = funcs['z'];
    
    window.setTimeout(function() {
        document.getElementById('functionterms').addEventListener('change', function(evt) {
            f = funcs[evt.target.value];
        });
    }, 500);
    
    var arr1 = board.create('arrow', [[0, 0], [0, 0]], { highlight: false, fixed: true });
    var arr2 = board2.create('arrow', [[0, 0], [0, 0]], { highlight: false, fixed: true });
    
    var map_curvepoint = function(pos) {
        var z, w;
    
        // We just have to care about the mapped data point.
        // The data point is handled by board.sketch automatically.
        z = new JXG.Complex(pos[0], pos[1]);
        w = f(z);
    
        // Regardless if mouse key pressed or not, write the coordinates and position the arrows.
    
        // Write coordinates of z and f(z)
        out_z.innerHTML = `z = ${z.toString(4)}`;
        out_fz.innerHTML = `f(z) = ${w.toString(4)}`;
    
        // Position the arrows
        arr1.point2.moveTo([z.real, z.imaginary]);
        arr2.point2.moveTo([w.real, w.imaginary]);
    
        // Only if mouse key pressed do sketching
        if (board.isSketching[0]) {
            board2.sketch.dataX.push(w.real);
            board2.sketch.dataY.push(w.imaginary);
        }
    };
    
    // On down in the left board, delete the curve in the right board.
    board.on('down', function(evt) {
        // Reset map curve
        board2.sketch.dataX = [];
        board2.sketch.dataY = [];
    
        // Grab the last actual mouse position and map it 
        map_curvepoint(this.getUsrCoordsOfMouse(evt));
    });
    
    board.on('move', function(evt, mode) {
        // Grab the last actual mouse position and map it 
        map_curvepoint(this.getUsrCoordsOfMouse(evt));
    });
 </script>