cellular_raza-building-blocks 0.1.4

cellular_raza Building Blocks
Documentation 
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<!-- TODO Fix color and styling and adapt to theme -->
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
function potential(r, v0, l, R, cutoff) {
    if (r > cutoff) {
        return 0;
    } else {
        return v0 * (1 - Math.exp(- l * (r - R)))**2;
    }
}
function generate_data(xi, v0, l, R, cutoff) {
    var y = [];
    x.forEach((xi, i) => {
        y[i] = potential(xi, v0, l, R, cutoff);
    });
    return y;
}
var l = 3.0;
var R = 1.0;
var v0 = 1.0;
var cutoff = 3.0;
var n_samples = 200;
var x = [...Array(n_samples+1).keys()].map((s) => 1.1 * cutoff / n_samples * (s+1));
var y = generate_data(x, v0, l, R, cutoff);
var data_l = [0.1, 0.3, 0.6];
var sliderSteps = [];
for (i=0; i<data_l.length; i++) {
    // Calculate new values
    var l_new = data_l[i];
    var l_new_name = l_new.toFixed(2);
    var y_new = generate_data(x, v0, l_new, R, cutoff);
    // Append new slider step
    var sliderstep = {
        label: l_new_name,
        method: 'animate',
        args: [
            {
                data: [{x: x, y: y_new}],
                mode: 'immediate',
                layout: {
                    xaxis: {
                        tickvals: [R, cutoff],
                        ticktext: ['R', 'cutoff'],
                    },
                    yaxis: {
                        color: "#FFF",
                        range: [-0.3*v0, 1.1*v0],
                        tickvals: [0, v0],
                        ticktext: ['0', 'V<sub>0</sub>'],
                    },
                },
            },
        ],
    };
    sliderSteps.push(sliderstep);
}
var initial_step = 2;
var layout = {
    xaxis: sliderSteps[initial_step]["args"][0]["layout"]["xaxis"],
    yaxis: sliderSteps[initial_step]["args"][0]["layout"]["yaxis"],
    title: "Morse Potential",
    plot_bgcolor:"#FFF4",
    paper_bgcolor:"#505050",
    font: {
        color: "#FFF",
    },
    margin: {
        t: 60,
        b: 60,
        l: 60,
        r: 60,
    },
    sliders: [{
        pad: {1: 130, t:55},
        currentvalue: {
            visible: true,
            prefix: 'Ratio interaction range to radius: ',
            xanchor: 'right',
            font: {size: 20, color: '#FFF'},
        },
        transition: {duration: 500},
        steps: sliderSteps,
        active: initial_step,
    }],
};
var options = {staticPlot: true};
Plotly.newPlot('myDiv', {
    data: [{
        x: x,
        y: y,
        type: 'scatter',
        line: {
            color: "#FDBF35",
        },
    }],
    layout: layout,
    options: options,
});
</script>