<jsxgraph width="{width}" height="150">
    var board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-1.5,1.5,1.5*({whole}+2),-1.5], axis:false, ShowCopyright: false, showNavigation:false});

    board.create('circle', [[0, 0],[1,0]],{strokeColor:'black'});

    var s1 = board.create('sector', [[0,0], [1,0], [{sectX},{sectY}]], {
    anglePoint: {visible:false}, center: {visible: false}, radiusPoint: {visible: false},
    fillColor: '{s1Fill}', strokeColor: 'black'});


    var l1=board.create('line',[[0,0],[{x[0]},{y[0]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l2=board.create('line',[[0,0],[{x[1]},{y[1]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l3=board.create('line',[[0,0],[{x[2]},{y[2]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l4=board.create('line',[[0,0],[{x[3]},{y[3]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l5=board.create('line',[[0,0],[{x[4]},{y[4]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l6=board.create('line',[[0,0],[{x[5]},{y[5]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l7=board.create('line',[[0,0],[{x[6]},{y[6]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l8=board.create('line',[[0,0],[{x[7]},{y[7]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l9=board.create('line',[[0,0],[{x[8]},{y[8]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l10=board.create('line',[[0,0],[{x[9]},{y[9]}]],{strokeColor:'black',straightFirst:false, straightLast:false});
    var l11=board.create('line',[[0,0],[{x[10]},{y[10]}]],{strokeColor:'black',straightFirst:false, straightLast:false});


    for (let i=0; i&lt;{whole}; i++) {
    board.create('circle', [[2.5+(2.5*i), 0],[3.5+(2.5*i),0]],{strokeColor:'black',fillColor:'{shadeColor}'} );
    }



</jsxgraph>