How do I rotate a piece of a function about a point, using JSXGraph?

Question

I'm instructing students online and trying to describe the shape of a cubic function. As part of that, I want to emphasise the rotational symmetry of a cubic function around the point of inflection, using an interactive JSXGraph plot of y=x^3. I want to show that the section of the function where x<0, when rotated 180 degrees, maps directly onto the section of the function where x>0.

I have tried to accomplish this by creating 3 functiongraph elements:

f1, which is y=x^3 from -6<x<6, for the rotated function to overlap onto f2, which is y=x^3 from -6<x<0, the function I want to rotate rotatedf2, which is y=x^3 from -6<x<0, but transformed by rotation using a slider

However, the rotatedf2 function is never visible - nothing changes when using the slider.

I'm wondering if the issue is that I can't transform a functiongraph element, that I'd need to convert it to some other element such as curve.

Here is the code I've used:

    <div id="cubic11" class="jxgbox" style="width:400px; height:300px; margin:auto "></div>
    <script type="text/javascript">
    // Create board template
    JXG.Options.text.useMathJax = true;
    (function() {
        var board = JXG.JSXGraph.initBoard('cubic11', {
            boundingbox: [-3, 4, 3, -4],
            axis: true,
            keepaspectratio: true,
            showGrid: true
        });

        // Create function plot for f1: y = x^3
        var f1 = board.create('functiongraph', [function(x) {
            return x * x * x;
        }, -6, 6], {
            strokeColor: '#EF233C'
        });

        // Create function plot for f2: y = x^3 (between -6 and 0)
        var f2 = board.create('functiongraph', [function(x) {
            return x * x * x;
        }, -6, 0]);

        // Label point of inflection/rotation
        var ip = board.create('point', [0, 0], {
            fixed: true,
        });

        // Create slider for rotation of f2
        var r = board.create('slider', [
            [1, -2],
            [4, -2],
            [0, 0, 360]
        ], {
            name: 'rotation',
            snapWidth: 45,
            highline: {
                strokeColor: '#ED7D31'
            },
            label: {
                strokeColor: '#ED7D31'
            },
            fillColor: '#ED7D31',
            highlightStrokeColor: '#ED7D31'
        });

        // Create a new function graph rotated by the value of the slider for f2: y = x^3
        var t = board.create('transform', [function() {
            return r.Value() * Math.PI / 180
        }, ip], {
            type: 'rotate'
        });
        var rotatedf2 = board.create('functiongraph', [f2, t], {
            strokeColor: '#2ECC40'
        });

        // Inset equation text
        var text = board.create('text', [-4.5, -2.5, function() {
            var equationText = 'y=x^3';
            return '$$' + equationText + '$$';
        }], {
            fontSize: 14
        });
    })();
    </script><br>`

Any help is appreciated (AI was hopeless).

Answer 1

So, I was able to find an older question about line transformations that had an answer: JSXGraph: Applying a line transformation with applyOnce() Adapting Alfred's answer, here's my new code that works as intended:

<div id="cubic1" class="jxgbox" style="width:400px; height:300px; 
background-color:#FFFDE1; margin:auto "></div>
<script type="text/javascript">
// Create board template
JXG.Options.text.useMathJax = true;
(function() {
    var board = JXG.JSXGraph.initBoard('cubic1', {
        boundingbox: [-3, 4, 3, -4],
        axis: true,
        showCopyright: false,
        showNavigation: false
    });

    // Create function plot
    var f1 = board.create('functiongraph', [function(x) {
        return x * x * x;
    }, -3, 3], {
        strokeColor: '#EF233C'
    });
    var f2 = board.create('functiongraph', [function(x) {
        return x * x * x;
    }, -3, 0]);

    // Label point of inflection/rotation
    var ip = board.create('point', [0, 0], {
        fixed: true,
    });

    // Create slider for rotation of functiongraph
    var r = board.create('slider', [
        [0.5, -2],
        [2, -2],
        [0, 0, 180]
    ], {
        name: 'rotation',
        snapWidth: 45,
        highline: {
            strokeColor: '#ED7D31'
        },
        label: {
            strokeColor: '#ED7D31'
        },
        fillColor: '#ED7D31',
        highlightStrokeColor: '#ED7D31'
    });

    // Rotate functiongraph
    var rot = board.create('transform', [function() {
        return r.Value() * Math.PI / 180
    }, ip], {
        type: 'rotate'
    });
    var rotatedf2 = board.create('curve', [f2, rot], {
        strokeWidth: 2,
        strokeColor: '#ED7D31',
        fixed: false
    });
    rot.bindto(f2);

    // Inset equation text
    var text = board.create('text', [-4.5, -2.5, function() {
        var equationText = 'y=x^3';

        return '$$' + equationText + '$$';
    }], {
        fontSize: 14
    });
})();
</script><br>