Visualization Notes: JS & Functions

<script src='https://code.highcharts.com/highcharts.js'></script> was added in the page head.

xxxxxxxxxx
 
%%html
<style>
 @import url('https://fonts.googleapis.com/css?family=Roboto|Aladin');
</style>
<p style="background-color:white; color:steelblue; 
          font-family:Aladin; font-size:120%;">
The code cell calls a function 
which performs iterations and returns the result:</p>
<button id="calculation1" width=600 
style="background-color:lightgray; text-align:left; 
       color:steelblue; font-family:Roboto; font-size:80%;"></button>
<button id="calculation2" width=600 
style="background-color:lightgray; text-align:left; 
       color:steelblue; font-family:Roboto; font-size:80%;"></button>
<script>
function F1(x){return Math.pow(x,3);};
var A1=-0.1,B1=0.1,A2=0,B2=2,E=Math.pow(10,-4);
function F2(x){return Math.log(20/Math.sqrt(.009))-
                      1.5*(Math.exp(x/3)+Math.exp(-x/3))-x;};
function findroot(f,a,b,e){
    var s1='It is not possible to use ',
        s2='the segment for this decision method';
    l=f.toString().length; 
    var s3='Iteration steps'+'<br/>f(x)='+
           f.toString().slice(22,l-2);
    if (Math.sign(f(a))==Math.sign(f(b))){return s1+s2;} 
    else {
        while (b-a>e){
            var ab=a+(b-a)/2; 
            s3=s3+'<br/>'+f(a)+'; '+f(ab)+'; '+f(b);
            if (Math.sign(f(a))!=Math.sign(f(ab)))
                {if (f(ab)==0){break}; b=ab;}
            else {a=ab;};};
        return s3+'<br/> f(x)=0 => x&#8776;'+ab+'<p/>';};}
document.getElementById('calculation1').innerHTML=findroot(F1,A1,B1,E);
document.getElementById('calculation2').innerHTML=findroot(F2,A2,B2,E);

xxxxxxxxxx
 
%%html
<div id='container2' 
     style='height:500px; width:500px; margin:0 auto'>
</div><script>
function f(x,z){
    return (Math.log(Math.sqrt(Math.PI))+Math.abs(2-x))/
           (3.3-1/z)+Math.pow(z,2/3)*Math.cos(Math.pow(x,2));};
var series=[]; var x0=6.7,hx=.1,n=4,z0=3.3,hz=.2,m=3;
for (var j=0; j<m; j++) {
    xz=Array(4).fill(z0+j*hz).map((z,i)=>[x0+i*hx,f(x0+i*hx,z)]); 
    series.push({name:'z='+(z0+j*hz),
                 marker:{radius:7-2*j},data:xz});};
Highcharts.chart('container2',{
    chart:{type:'line'},title:{text:'Function of Two Variables'},
    xAxis:{title:{text:'x'}},yAxis:{title:{text:'f(x,z)'}},
    credits:{enabled:false},series:series });

xxxxxxxxxx
 
%%html
<div id='container3' 
     style='height:500px; width:500px; margin:0 auto'></div>
<script>
function factorial(x){
    if (x===0){return 1;} return x*factorial(x-1);};
function sumf(n,x){var s=0;
  for (var k=1; k<n+1; k++){
      var m=1/factorial(k)+1/factorial(2*k+1);
      s+=Math.pow(Math.sign(-1),k+1)*Math.pow(x,2*k+1)*m;};
  return s;};
function controlf(x){
    return 2*x-x*Math.exp(-1*Math.pow(x,2))-Math.sin(x);};
var n=35,d=.03;
var cxy=Array(n).fill(d).map((r,x)=>[x*r,controlf(x*r)]);
    sxy3=Array(n).fill(d).map((r,x)=>[x*r,sumf(3,x*r)]);
    sxy5=Array(n).fill(d).map((r,x)=>[x*r,sumf(5,x*r)]);
Highcharts.chart('container3',{
    chart:{type:'line'},credits:{enabled:false},
    xAxis:{title:{text:'x'}},yAxis:{title:{text:'y'}},
    title:{text:'Sum Function and Control Function'},
    series:[{name:'sum function n=3',color:'#3636ff',
             marker:{radius:4,symbol:'triangle-down'},data:sxy3},
            {name:'sum function n=5',color:'#36ff36',
             marker:{radius:4,symbol:'square'},data:sxy5},
            {name:'control function',color:'#ff3636',
             marker:{radius:2,symbol:'circle',opacity:.5},data:cxy}]});

Visualization Notes

Tuesday, August 10, 2021

JS & Functions

<script src='https://code.highcharts.com/highcharts.js'></script> was added in the page head.

No comments:

Post a Comment