📑 D3 Workout 01. Chart Building

d3_01.html

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<style>

3

@import 'https://fonts.googleapis.com/css?family=Wallpoet';

4

#d3barchart_title {color:silver; 

5

                   font-family:Wallpoet; font-size:20px}

6

#d3barchart {width:98%; height:30%;}

7

</style>

8

<div id='d3barchart'><text id='d3barchart_title'></text></div>

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

%%javascript

2

var data=[4,12,21,28,7,15];

3

var tc=setInterval(function(){

4

    var now=new Date().getTime();

5

    var width=.7*Math.max(window.screen.width,window.innerWidth);

6

    var div=d3.select('#d3barchart');

7

    div.select('#d3barchart_title')

8

       .text('An Example of D3 Bar Charts');

9

    div.style('text-align','right')

10

       .style('text-shadow','3px 3px 3px slategray')

11

       .style('padding','5px')

12

       .style('color',d3.interpolateSinebow(now/1000000))

13

       .style('background',d3.interpolateSinebow(now/1000000));

14

    var x=d3.scaleLinear().domain([0,d3.max(data)])

15

            .range([0,.6*width])

16

    div.selectAll('div').data(data).join('div')

17

       .style('background','silver')

18

       .style('padding','5px').style('margin','1px')

19

       .style('width',d=>x(d)+'px')

20

       .style('font-family','Wallpoet')

21

       .style('font-size','20px')

22

       .text(d=>d);},100);

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Chart Building 01: Line Charts with Transition.

chart_building01.html

<style>
    @import 'https://fonts.googleapis.com/css?family=Wallpoet';
    .h1 {font-family:Wallpoet; font-size:160%; text-shadow:3px 3px 3px #aaa;}
    .text1 {font-family:Wallpoet; font-size:100%; color:slategray;}
    .text1:hover {font-size:105%; text-shadow:3px 3px 3px #aaa;}
    .xy_axis1 {font-family:Wallpoet; font-size:90%; color:slategray;}
    .xy_axis1:hover {font-size:95%; text-shadow:3px 3px 3px #aaa;}
    #text_area_array {width:81%; height:80px; border:double slategray;}
    #num_points {text-align:center; text-align-last:center; background:silver; 
                 width:200px; height:30px; font-family:Wallpoet; color:slategray;}
    #run_button {background:silver; width:200px; height:30px; vertical-align:middle;
                 font-family:Wallpoet; font-size:160%; color:slategray;}
    #chart_building_01_01 {background-color:silver; }
    body {margin:5px 5px 5px 15px;}
</style> 

<script>
  margin={top:40,right:20,bottom:40,left:40};
  var width=Math.min(window.screen.width,window.innerWidth),
      height=.3*width;
  n=parseInt(document.getElementById('num_points').value);
  var svg=d3.select('#chart_building_01_01')
              .attr('width',.8*width).attr('height',height);
  function get_values(data,n) {
    var values=[];
    for (var i=0; i<n; i++){values.push(Math.floor(data[i]['y']*100)/100)};
    return values.toString();};
  reveal=path=>
  path.transition().duration(n*1000).ease(d3.easeLinear)
      .attrTween('stroke-dasharray',function() {
        const length=this.getTotalLength();
        return d3.interpolate(`0,${length}`,`${length},${length}`);});
  function draw_chart() {
    var n=parseInt(document.getElementById('num_points').value);
    var x=d3.scaleLinear().domain([0,n-1])
            .range([margin.left,.8*(width-margin.right)]),
        y=d3.scaleLinear().domain([0,n])
            .range([height-margin.bottom,margin.top]); 
    var line=d3.line().curve(d3.curveMonotoneX)
               .x(function(d,i) {return x(i);})
               .y(function(d) {return y(d.y);});
    var data=d3.range(n).map(function(d) {
        return {'y':d3.randomUniform(n)()}; });
    var iddoc=document.getElementById('text_area_array');
    iddoc.innerHTML=get_values(data,n);
    var xAxis=(g,scale=x)=>g
        .attr('transform',`translate(0,${height-margin.bottom})`)
        .attr('class','xy_axis1').attr('stroke','slategray')
        .call(d3.axisBottom(scale).ticks(width/60).tickSizeOuter(0)),
        yAxis=(g,scale=y)=>g
        .attr('transform',`translate(${margin.left},0)`)
        .attr('class','xy_axis1').attr('stroke','slategray')
        .call(d3.axisLeft(scale).ticks(height/40));
    svg.selectAll('g').remove(); svg.selectAll('path').remove();
    svg.append('g').call(xAxis); svg.append('g').call(yAxis);
    svg.append('path')
       .datum(data).attr('d',line)
       .attr('stroke','slategray').attr('stroke-width',3)
       .attr('fill','none');
    svg.append('path').attr('id','path_line1')
       .datum(data).attr('d',line)
       .attr('stroke','silver').attr('stroke-width',2)
       .attr('stroke-miterlimit',1)
       .attr('stroke-dasharray','0,1')
       .attr('fill','none')
       .call(reveal); 
    svg.select('#linechart_title')
       .text('An Example of D3 Line Charts')
       .attr('x',x(.4*n)).attr('y',y(n))
       .attr('class','h1');
  };
  var tc=setInterval(function() {
    var now=new Date().getTime();
    var iddoc1=document.getElementById('header1');
    var iddoc2=document.getElementById('linechart_title');
    var iddoc3=document.getElementById('path_line1');
    iddoc1.style.color=d3.interpolateSinebow(now/1000/n);
    iddoc2.style.fill=d3.interpolateSinebow(now/1000/n);
    iddoc3.style.stroke=d3.interpolateSinebow(now/1000/n);
  },1);
</script>

📑 Chart Building 02: Bar Charts with Color Interpolation.

 chart_building02.html

<style>

    @import 'https://fonts.googleapis.com/css?family=Wallpoet|Orbitron|Akronim|Smokum|Ewert|Aladin';

    h1 {font-family:Wallpoet; font-size:160%; text-shadow:3px 3px 3px #aaa;}

    .text1 {font-family:Wallpoet; font-size:100%; color:slategray;}

    .text1:hover {font-size:105%; text-shadow:3px 3px 3px #aaa;}

    #s_font_family {text-align:center; text-align-last:center; background:silver; 

                    width:200px; height:30px; font-family:Wallpoet; color:slategray;}          

    body {margin:5px 5px 5px 15px;}

</style>

<script>

  var tc=setInterval(function() {

    var width=Math.min(window.screen.width,window.innerWidth);

    var now=new Date().getTime();

    var iddoc1=document.getElementById('header1');

    iddoc1.style.color=d3.interpolateSinebow((now%30000)/30000);

    var data=[];

    for (var i=1; i<10; i++){

      v=parseInt(document.getElementById('value'+i).value);

      data.push(v)};

    var ff=document.getElementById('s_font_family').value;

    var fs=parseInt(document.getElementById('s_font_size').value);

    var div=d3.select('#chart_building_02_01');

    div.style('text-align','right')

       .style('text-shadow','3px 3px 3px darkslategray')

       .style('padding','5px')

       .style('width','80%').style('height',38*Math.pow(fs,.78)+'px')

       .style('color',d3.interpolateSinebow((now%60000)/60000))

       .style('background',d3.interpolateSinebow((now%60000)/60000));

    div.select('#barchart_title')

       .text('An Example of D3 Bar Charts')

       .style('text-shadow','3px 3px 3px darkslategray')

       .style('color','silver')

       .style('font-family',ff).style('font-size',fs+'px');

    var x=d3.scaleLinear().domain([0,d3.max(data)]).range([0,.75*width]);

    div.selectAll('div').data(data).join('div')

       .style('background','silver')

       .style('padding','5px').style('margin','3px')

       .style('width',d=>x(d)+'px')

       .style('font-family',ff).style('font-size',fs+'px')

       .text(d=>d);

  },1);

</script>

  

🏙 Thebe Experiments 01 with Live SageMath Coding.

🌐   thebe_01.html

✒️   Cell #1

    sage: var('t'); n=3; d={2*i+1:[2*i+2] for i in [0..6]}
    sage: c=[colormaps.ocean(24*k)[:3] for k in [0..10]]
    sage: p=polar_plot([(t+k/n)*log(t/n) for k in [0..10]],
    sage:              0,n*pi,color=c,fill=d,fillcolor=c)
    sage: ti=r'$f=(t+k/%d)'%n+' \cdot \log(t/%d)'%n+', k \in \{0,1,...,10\}$'
    sage: p.show(title=ti,fontsize=12,figsize=5)

✒️   Cell #2

    sage: @interact
    sage: def _(a=[7,9,..,17],b=[10,12,..,20]):
    sage:     x(t)=cos(t)+cos(a*t)/2+sin((a+b)*t)/3
    sage:     y(t)=sin(t)+sin(a*t)/2+cos((a+b)*t)/3
    sage:     def col(c): return colormaps.hsv(5*c)[:3]
    sage:     p=sum([parametric_plot((x,y),(t,(i-1)*pi/24,i*pi/24),
    sage:                            color=col(i)) for i in [1..48]])
    sage:     p.show(aspect_ratio=1,figsize=7,gridlines=True)

✒️   Cell #3

    sage: %%r
    sage: elements<-c('☜','☞','☝︎','☟')
    sage: n<-length(elements)
    sage: S<-unique(t(sapply(1:10^3,function(x) sample(elements,n)))) 
    sage: S<-apply(S,1,function(x) paste0(x,collapse=''))
    sage: print(length(S)==factorial(4)); S

📑 Circus of Programming Tricks 01. Coordinate Interpolation

tricks_01.html

xxxxxxxxxx

 

1

import numpy as np; from skimage import io,transform

2

file_path='https://raw.githubusercontent.com/'+\

3

          'OlgaBelitskaya/data/main/patterns/'

4

file1,file2='01_01_001.png','01_01_002.png'

5

def preprocess_img(file1,file2,file_path=file_path):

6

    img1,img2=io.imread(file_path+file1),io.imread(file_path+file2)

7

    imgbw1,imgbw2=np.ones(img1.shape[:2]),np.ones(img2.shape[:2])

8

    imgbw1[img1[:,:,1]<int(128)],imgbw2[img2[:,:,1]<int(127)]=0,0

9

    coord1=np.array(np.where(imgbw1<1)).T; coord=coord1

10

    coord2=np.array(np.where(imgbw2<1)).T

11

    if coord1.shape[0]>coord2.shape[0]: coord1,coord2=coord2,coord

12

    while not coord2.shape==coord1.shape:

13

        randi=np.random.randint(

14

            0,coord2.shape[0]-1,coord2.shape[0]-coord1.shape[0])

15

        coord2=np.delete(coord2,list(randi),axis=0)

16

    return coord1,coord2

17

coord1,coord2=preprocess_img(file1,file2)

18

def create_coords(coord1,coord2):

19

    coords=[]

20

    for el in [coord1,coord2]:

21

        fx=el[:,0]; fy=el[:,1]

22

        fx=.025+.95*(fx-fx.min())/(fx.max()-fx.min())

23

        fy=.025+.95*(fy-fy.min())/(fy.max()-fy.min())

24

        el=np.array([[fx[i],fy[i]] for i in range(len(fx))])

25

        coords.append(el)

26

    return np.array(coords)

27

coords=create_coords(coord1,coord2)

28

steps=20; img_size_out=256

29

def interpolate_hypersphere(v1,v2,steps):

30

    v1norm=np.linalg.norm(v1); v2norm=np.linalg.norm(v2)

31

    vectors=[]; v2normalized=v2*(v1norm/v2norm)

32

    for step in range(steps):

33

        interpolated=v1+(v2normalized-v1)*step/(steps-int(1))

34

        interpolated_norm=np.linalg.norm(interpolated)

35

        interpolated_normalized=\

36

        interpolated*(v1norm/interpolated_norm)

37

        vectors.append(interpolated_normalized)

38

    return np.array(vectors)

39

coords_int=np.vstack(

40

    [interpolate_hypersphere(coords[1],coords[0],steps),

41

     interpolate_hypersphere(coords[0],coords[1],steps)])

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

def create_images(coords_int,img_size_out,img_size=2048):

2

    imgs=[]

3

    for i in range(coords_int.shape[0]):

4

        fx=coords_int[i,:,0]; fy=coords_int[i,:,1]

5

        fx=np.array(np.clip(fx*img_size,0,img_size-1),

6

                    dtype='int32')

7

        fy=np.array(np.clip(fy*img_size,0,img_size-1),

8

                    dtype='int32')

9

        f=np.array([[fx[i],fy[i]] for i in range(len(fx))])

10

        img=np.zeros((img_size,img_size))

11

        for [x,y] in f: img[x,y]=1

12

        imgs.append(transform.resize(

13

            img,(img_size_out,img_size_out)))

14

    return np.array(imgs)

15

imgs=create_images(coords_int,img_size_out)

16

def mplot(imgs,i,fig_size=3):

17

    return matrix_plot(

18

        imgs[i],figsize=(fig_size,fig_size),frame=False) 

19

for i in [0,steps]: mplot(imgs,i).show()

20

animate([mplot(imgs,i) for i in range(2*steps)])

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Circus of Programming Tricks 01. Super Resolution

tricks_01.html

xxxxxxxxxx

 

1

!python3 -m pip install --upgrade pip \

2

--user --quiet --no-warn-script-location

3

!python3 -m pip install tensorflow_hub \

4

--user --quiet --no-warn-script-location

5

#!python3 -m pip install tensorflow==2.6.0 \

6

#--user --quiet --no-warn-script-location

7

path='/home/sc_work/.sage/local/lib/python3.9/site-packages'

8

import sys,warnings; sys.path.append(path)

9

warnings.filterwarnings('ignore')

10

import numpy as np,tensorflow as tf,tensorflow_hub as hub

11

super_hub_path='https://tfhub.dev/captain-pool/esrgan-tf2/1'

12

os.environ['TFHUB_MODEL_LOAD_FORMAT']='COMPRESSED'

13

file_path='https://raw.githubusercontent.com/'+\

14

          'OlgaBelitskaya/data_kitchen/main/'

15

file_name='Pictograms64.h5'

16

img_size=int(64); lr_size=int(50)

17

super_model=hub.load(super_hub_path)

18

func=super_model.signatures[tf.saved_model\

19

.DEFAULT_SERVING_SIGNATURE_DEF_KEY]

20

func.inputs[0].set_shape([1,lr_size,lr_size,3])

21

converter=tf.lite.TFLiteConverter.from_concrete_functions([func])

22

converter.optimizations=[tf.lite.Optimize.DEFAULT]

23

tflite_super_model=converter.convert()

24

with tf.io.gfile.GFile('ESRGAN.tflite','wb') as f: 

25

    f.write(tflite_super_model)

26

esrgan_model_path='./ESRGAN.tflite'

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

input_file=urllib.request.urlopen(file_path+file_name)

2

output_file=open(file_name,'wb')

3

output_file.write(input_file.read())

4

output_file.close(); input_file.close()

5

with h5py.File(file_name,'r') as f:

6

    keys=list(f.keys())

7

    images=np.array(f[keys[int(0)]])

8

    labels=np.array(f[keys[int(1)]])

9

    names=[[el.decode('utf-8') for el in f[keys[i]]] 

10

           for i in range(int(2),len(keys))]

11

    f.close(); os.remove(file_name)

12

N=images.shape[0]; shuffle_ids=np.arange(N)

13

np.random.RandomState(12).shuffle(shuffle_ids)

14

images=images[shuffle_ids]

15

labels=np.array([labels[i][shuffle_ids] 

16

                 for i in range(labels.shape[int(0)])])

17

@interact(layout=dict(

18

    top=[['original_type','original_object']]))

19

def _pictograms(original_type=selector(names[0],default='pictogram'),

20

                original_object=selector(names[1],default='bird')):

21

    global names,images,labels,esrgan_model_path,lr_size

22

    original_names=[names[0].index(original_type),

23

                    names[1].index(original_object)]

24

    original_cond=np.intersect1d(

25

        np.where(labels[0]==original_names[0]),

26

        np.where(labels[1]==original_names[1]))

27

    original_images=images[original_cond]

28

    original_len=original_images.shape[0]

29

    original_img=original_images[randint(0,original_len-1)]

30

    lr=tf.image.resize(original_img,[lr_size,lr_size])

31

    lr=tf.expand_dims(lr.numpy()[:,:,:int(3)],axis=int(0))

32

    lr=tf.cast(lr*int(255),tf.float32)

33

    interpreter=tf.lite.Interpreter(model_path=esrgan_model_path)

34

    interpreter.allocate_tensors()

35

    input_details=interpreter.get_input_details()

36

    output_details=interpreter.get_output_details()

37

    interpreter.set_tensor(input_details[int(0)]['index'],lr)

38

    interpreter.invoke()

39

    output_data=interpreter.get_tensor(output_details[0]['index'])

40

    sr=tf.squeeze(output_data,axis=int(0))

41

    sr=tf.clip_by_value(sr,int(0),int(255))

42

    sr=tf.cast(tf.round(sr),tf.uint8)

43

    lr=tf.cast(tf.squeeze(lr,axis=int(0)),tf.uint8)

44

    print('original 64x64 '+' lower resolution 50x50 '+\

45

          ' higher resolution 200x200\n')

46

    for img in [original_img,lr/int(255),sr/int(255)]: 

47

        matrix_plot(img,frame=True,figsize=3.8).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Circus of Programming Tricks 01. Fun Horoscope

tricks_01.html

xxxxxxxxxx

 

1

el=['😀','😁','😂','😃','😄','😅','😆','😇','😈','😉','😊',

2

    '😋','😌','😍','😎','😏','😐','😑','😒','😓','😔','😕',

3

    '😖','😗','😘','😙','😚','😛','😜','😝','😞','😟','😠',

4

    '😡','😢','😣','😥','😦','😧','😨','😩','😪','😫','😭',

5

    '😮','😯','😰','😱','😲','😳','😴','😵','😶','😷']

6

script_str="""<script>

7

var idc=setInterval(function() {

8

    var iddoc=document.getElementById('colored_font');

9

    var now=new Date().getTime();

10

    var t=Math.floor((now%(1000*60))/1000);

11

    var col='rgb('+(5+Math.abs(245-8*t))+

12

            ',0,'+(250-Math.abs(245-8*t))+')';

13

    iddoc.style.color=col;}, 1000);</"""+"""script>"""

14

head_str="""<h1 id='colored_font' style='padding-left:120px;'>"""

15

head_str+="""Emotional Horoscope for the Day</"""+"""h1>"""

16

display(html(script_str+head_str))

17

var('t,k'); n=randint(12,24)

18

a,b,c=randint(4,7),randint(8,24),2*randint(3,10)

19

fy(t,k)=cos(pi*t/n+2*k*pi/c)+cos(a*pi*t/n+2*k*pi/c)+\

20

        cos(b*pi*t/n+2*k*pi/c)

21

fx(t,k)=sin(pi*t/n+2*k*pi/c)-sin(a*pi*t/n+2*k*pi/c)+\

22

        sin(b*pi*t/n+2*k*pi/c)

23

L=[[[fx(t,k),fy(t,k)] for t in range(2*n)] for k in range(2*c)]

24

EL=[(3.2*cos(j*pi/12),3.2*sin(j*pi/12)) for j in [1..24]]

25

def col(): return (random(),0,random())

26

def poly(i): 

27

    return polygon2d(L[i],color=col(),thickness=.7,alpha=.05)

28

EP1=sum([poly(i) for i in range(2*c)])

29

EP2=sum([text(el[randint(0,len(el)-1)]+str(31-j),

30

              EL[j-2],fontsize=20,color=col()) for j in [7..24]])

31

EP3=text(el[randint(0,len(el)-1)],(0,0),fontsize=70,color='white')

32

(EP1+EP2+EP3).show(axes=False,figsize=(6,6))

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Circus of Programming Tricks 01. Animated Graphs.

tricks_01.html

xxxxxxxxxx

 

1

from sage.plot.animate import Animation

2

class MyAnimation(Animation):

3

    def make_image(self,frame,filename,**kwds):

4

        G=frame.plot()

5

        G.set_axes_range(floor(G.xmin()),ceil(G.xmax()),

6

                         floor(G.ymin()),ceil(G.ymax()))

7

        G.save_image(filename,**kwds)

8

def rotate_line(a,l): 

9

    return [[(cos(a)*x-sin(a)*y).n(),(sin(a)*x+cos(a)*y).n()] 

10

            for [x,y] in l]

11

def linegraph(g):

12

    vg=g.get_pos(); eg=g.edges(); ne=len(eg)

13

    return [[list(vg[eg[i][0]]),list(vg[eg[i][1]])] 

14

            for i in range(ne)]  

15

def col(): return (.3+random()/3,0,.3+random()/3)

16

def rotate_bezier_path_cubegraph(m,k,color='default',th=.5):

17

    g=graphs.CubeGraph(m) 

18

    lg=linegraph(g); LG=Graphics()

19

    rlg=[[rotate_line(j*pi/k,lg[i]) 

20

          for i in range(len(lg))] for j in range(2*k)] 

21

    for i in range(2*k): 

22

        if color=='default': color=col()

23

        LG+=bezier_path(rlg[i],color=color,thickness=th)

24

    return LG

25

@interact

26

def _(m1=[3,4,5,6],m2=[3,4,5,6],

27

      th1=[.5,.7,.9,1.1],th2=[.3,.7,1.1,1.5]):

28

    M=MyAnimation([sum(

29

        [rotate_bezier_path_cubegraph(m1,k,th=th1),

30

         rotate_bezier_path_cubegraph(m2,k,color='white',th=th2)]) 

31

                  for k in range(3,9)],figsize=(5,5),axes=False)

32

    M.show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Circus of Programming Tricks 01. 3D Function Drawing

tricks_01.html

xxxxxxxxxx

 

1

@interact

2

def _(num=[2..4],alpha=[4..8],

3

      opacity=slider([.9,.8,..,.1],default=.5),

4

      col=slider(['#ff3366','#ff33aa','#ff36ff',

5

                  '#ff3636','#ff6633','#ff66aa'])):

6

    var('u,v')

7

    x=(2+cos(v/3)*sin(u)-sin(v/3)*sin(6*u))*cos(v)

8

    y=(2+cos(v/3)*sin(u)-sin(v/3)*sin(6*u))*sin(v)

9

    z=30*abs(sin(v/3)*sin(u)+cos(v/3)*sin(6*u))

10

    pp=[parametric_plot3d(

11

        [2*i*x,2*i*y,z],(u,0,alpha*pi),(v,0,alpha*pi),

12

        opacity=opacity,mesh=True,frame=False,color=col)

13

        for i in [1..num]]

14

    sum(pp).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑   Data Building. Practice Project 0_0: Artificial Image Data

In this project, we'll create artificial images, represent and process their examples.

✒️   Code Modules & Settings

xxxxxxxxxx

 

1

import os,warnings; warnings.filterwarnings('ignore')

2

import h5py,pandas as pd,numpy as np

3

from skimage.transform import resize

4

img_size=int(1024); img_size_out=int(256)

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Image Creating

xxxxxxxxxx

 

1

def randint_coord(img_size_out,img_size=img_size):

2

    a=(.5+.1**6*np.random.randint(1,999999))*\

3

      np.random.choice([-1,1],1)[0]

4

    b=np.random.randint(3,7)

5

    c=.1**3*np.random.randint(1,99)*\

6

      np.random.choice([-1,1],1)[0]

7

    t=np.arange(0,12*np.pi,1/(1440*b))

8

    fx=np.sin(t/6)+a*np.sin(b*t)*np.cos(t)-c*np.sin(16*b*t)

9

    fy=np.cos(t/6)+a*np.sin(b*t)*np.sin(t)-c*np.cos(16*b*t)

10

    fx=.951*(fx-1.051*fx.min())/(fx.max()-fx.min())

11

    fy=.951*(fy-1.051*fy.min())/(fy.max()-fy.min())

12

    fx=np.array(np.clip(fx*img_size,0,img_size),dtype='int32')

13

    fy=np.array(np.clip(fy*img_size,0,img_size),dtype='int32')

14

    f=np.array([[fx[i],fy[i]] for i in range(len(t))])

15

    img=np.ones((img_size,img_size,3))

16

    randcol=.9-.8*np.random.random(3)

17

    for [x,y] in f: img[y,x,:]=randcol

18

    img=resize(img,(img_size_out,img_size_out))

19

    return img,np.around(a,6),b,np.around(c,3),randcol

20

for i in range(2):

21

    img,a,b,c,col=randint_coord(img_size_out)

22

    matrix_plot(img,figsize=5).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data Storing

xxxxxxxxxx

 

1

num_images=50

2

images=np.zeros((num_images,img_size_out,img_size_out,3),

3

                dtype=np.float32)

4

labels=np.zeros((num_images,),dtype=np.int32)

5

targets=np.zeros((num_images,2),dtype=np.float32)

6

colors=np.zeros((num_images,3),dtype=np.float32)

7

for i in range(num_images):

8

    if (i+1)%int(.2*num_images)==0: print('=>',end='',flush=True)

9

    img,a,b,c,col=randint_coord(img_size_out)

10

    images[i,:,:,:]=img

11

    labels[i],targets[i,0],targets[i,1]=b-3,a,c

12

    colors[i,:]=col

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

h5f='ArtificialImages'+str(img_size)+'.h5'

2

with h5py.File(h5f,'w') as f:

3

    f.create_dataset('images',data=images,compression='gzip')

4

    f.create_dataset('labels',data=labels,compression='gzip')

5

    f.create_dataset('targets',data=targets,compression='gzip')

6

    f.create_dataset('colors',data=colors,compression='gzip')

7

    f.close()

8

pretty_print('file size: %s'%list(os.stat(h5f))[6])

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

with h5py.File(h5f,'r') as f:

2

    keys=list(f.keys()); print(keys)

3

    images=np.array(f[keys[1]],dtype='float32')

4

    labels=np.array(f[keys[2]],dtype='int32')

5

    targets=np.array(f[keys[3]],dtype='float32')

6

    colors=np.array(f[keys[0]],dtype='float32')

7

    f.close()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data Processing

xxxxxxxxxx

 

1

shuffle_ids=np.arange(num_images)

2

np.random.RandomState(12).shuffle(shuffle_ids)

3

images=images[shuffle_ids]; labels=labels[shuffle_ids]

4

colors=colors[shuffle_ids]; targets=targets[shuffle_ids]

5

n=int(.1*num_images)

6

x_test,x_valid,x_train=images[:n],images[n:2*n],images[2*n:]

7

y_test1,y_valid1,y_train1=labels[:n],labels[n:2*n],labels[2*n:]

8

y_test2,y_valid2,y_train2=\

9

targets[:,:n],targets[:,n:2*n],targets[:,2*n:]

10

images.shape,labels.shape,targets.shape,colors.shape

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

def pd_style():

2

    return [dict(selector='th',

3

                 props=[('font-size','12pt'),

4

                        ('min-width','150px')]),

5

            dict(selector='td',

6

                 props=[('padding','0em 0em'),

7

                        ('min-width','150px')]),

8

            dict(selector='tr:hover th:hover',

9

                 props=[('font-size','16pt'),

10

                        ('max-width','150px'),

11

                        ('text-shadow','3px 3px 3px #aaa')]),

12

            dict(selector='tr:hover td:hover',

13

                 props=[('font-size','13pt'),

14

                        ('max-width','150px'),

15

                        ('text-shadow','3px 3px 3px #aaa')])]

16

pretty_print(html('<h2>data outputs: </h2>'))

17

df=pd.DataFrame([[x_train.shape,x_valid.shape,x_test.shape],

18

                 [x_train.dtype,x_valid.dtype,x_test.dtype],

19

                 [y_train1.shape,y_valid1.shape,y_test1.shape],

20

                 [y_train1.dtype,y_valid1.dtype,y_test1.dtype],

21

                 [y_train2.shape,y_valid2.shape,y_test2.shape],

22

                 [y_train2.dtype,y_valid2.dtype,y_test2.dtype]],

23

                columns=['train','valid','test'],

24

                index=['image shape','image type',

25

                       'label shape','label type',

26

                       'target shape','target type'])

27

display(df.style.set_table_styles(pd_style()))

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data Checking

xxxxxxxxxx

 

1

list_plot([[targets[i,0],targets[i,1]] 

2

           for i in range(num_images)],color='#348ABD')\

3

.show(frame=True,gridlines=True,figsize=4,title='targets')

4

bar_chart(np.unique(labels,return_counts=True)[1],color='#348ABD')\

5

.show(frame=True,axes=False,xmin=-1,figsize=4,title='labels')

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

def check_coord(a,b,c,img_size=img_size):

2

    t=np.arange(0,12*np.pi,1/(1440*b))

3

    fx=np.sin(t/6)+a*np.sin(b*t)*np.cos(t)-c*np.sin(16*b*t)

4

    fy=np.cos(t/6)+a*np.sin(b*t)*np.sin(t)-c*np.cos(16*b*t)

5

    fx=.951*(fx-1.051*fx.min())/(fx.max()-fx.min())

6

    fy=.951*(fy-1.051*fy.min())/(fy.max()-fy.min())

7

    fx=np.array(np.clip(fx*img_size,0,img_size),dtype='int32')

8

    fy=np.array(np.clip(fy*img_size,0,img_size),dtype='int32')

9

    f=np.array([[fx[i],fy[i]] for i in range(len(t))])

10

    return f

11

n=randint(0,num_images-1)

12

b,a,c=labels[n]+3,targets[n,0],targets[n,1]

13

f=check_coord(a,b,c)

14

list_plot(f,size=1,color=list(colors[n]))\

15

.show(frame=True,flip_y=True,figsize=(4,4))

16

matrix_plot(images[n]).show(figsize=(4,4))

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑   Data Building. Practice Project 1_0: Letter Detection

✒️   Code Modules & Settings

xxxxxxxxxx

 

1

#!python3 -m pip install tensorflow==2.6.0 \

2

#--user --quiet --no-warn-script-location

3

path='/home/sc_work/.sage/local/lib/python3.9/site-packages'

4

import sys,warnings; sys.path.append(path)

5

warnings.filterwarnings('ignore')

6

import os,zipfile,h5py,cv2,urllib,requests

7

import numpy as np,tensorflow as tf

8

file_path='https://raw.githubusercontent.com/'+\

9

          'OlgaBelitskaya/data/main/letters/'

10

img_size=int(2048)

11

file_pre,file_list,file_name='',[],''; lc,uc=0,0

12

tf_img,img,gray_img,edges=[],[],[],[]

13

names=[['lowercase','uppercase'],

14

       [s for s in u'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'],

15

       ['single-colored paper','striped paper',

16

        'squared paper','graph paper']]

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Image Loading

xxxxxxxxxx

 

1

def tf_get_img(file_name,file_path=file_path,img_size=img_size):

2

    input_file=urllib.request.urlopen(file_path+file_name)

3

    output_file=open(file_name,'wb')

4

    output_file.write(input_file.read())

5

    output_file.close(); input_file.close()

6

    img=tf.io.read_file(file_name)

7

    img=tf.image.decode_image(img,channels=3)

8

    img=tf.image.convert_image_dtype(img,tf.float32)

9

    shape=tf.cast(tf.shape(img)[:-int(1)],tf.float32)

10

    new_shape=tf.cast(shape*img_size/max(shape),tf.int32)

11

    img=tf.image.resize(img,new_shape)

12

    return img[tf.newaxis,:]

13

def cv_get_img(file_name,lower_canny,upper_canny,

14

               file_path=file_path,img_size=img_size):

15

    input_file=urllib.request.urlopen(file_path+file_name)

16

    output_file=open(file_name,'wb')

17

    output_file.write(input_file.read())

18

    output_file.close(); input_file.close()

19

    img=cv2.imread(file_name)   

20

    gray_img=cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)

21

    img=cv2.cvtColor(img,cv2.COLOR_BGR2RGB)

22

    edges=cv2.Canny(gray_img,int(lower_canny),int(upper_canny))

23

    cv2.waitKey(int(0))

24

    return img/255.,gray_img,edges

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

@interact(layout=dict(top=[['lower_upper','letter','background'],

2

                           ['lower_canny','upper_canny']]))

3

def _get_params(lower_upper=selector(names[0],default='uppercase'),

4

                letter=selector(names[1],default='б'),

5

                background=selector(names[2],

6

                                    default='single-colored paper'),

7

                lower_canny=selector([10,20,..,210],default=20),

8

                upper_canny=selector([10,20,..,210],default=120)):

9

    global file_pre,file_list,file_name,\

10

    tf_img,img,gray_img,edges,lc,uc    

11

    file_pre='%02d_'%names[0].index(lower_upper)

12

    file_pre+='%02d_'%names[1].index(letter)

13

    file_pre+='%02d_'%names[2].index(background)

14

    print('file prefix: '+file_pre)

15

    file_list=np.array([file_pre+'%02d'%(i+1)+'.jpg' 

16

                        for i in range(4)])

17

    file_name=file_list[0]

18

    lc,uc=lower_canny,upper_canny

19

    print('[lower_canny,upper_canny] = %s'%str([lc,uc]))

20

    tf_img=tf_get_img(file_name)

21

    img,gray_img,edges=cv_get_img(file_name,lc,uc)

22

    for el in [tf_img.numpy()[int(0)],img,gray_img,edges]:

23

        matrix_plot(el,figsize=(5,7)).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Contour Detection

xxxxxxxxxx

 

1

def get_closed_img(edges,kernel):

2

    kernel=cv2.getStructuringElement(

3

        cv2.MORPH_RECT,(int(kernel),int(kernel)))

4

    closed_edges=cv2.morphologyEx(edges,cv2.MORPH_CLOSE,kernel) 

5

    cv2.waitKey(int(0))

6

    return closed_edges

7

def get_contours(gray_img,closed_edges):

8

    (contours, _)=cv2.findContours(

9

        closed_edges.copy(),cv2.RETR_EXTERNAL,

10

        cv2.CHAIN_APPROX_SIMPLE)

11

    for c in contours: 

12

        arc=cv2.arcLength(c,True) 

13

        approx_pdp=cv2.approxPolyDP(c,float(.02)*arc,True) 

14

        contour_img=cv2.drawContours(

15

            gray_img,[approx_pdp],-int(1),

16

            (int(0),int(255),int(0)),int(2))

17

    cv2.waitKey(int(0))

18

    return contours,contour_img

19

kernel,edge_kernel,closed_edges,contours,contour_img=0,0,[],[],[]

20

@interact(layout=dict(top=[['select_kernel']]))

21

def _get_kernel(select_kernel=selector([3,5,..,17],default=7)):

22

    global kernel,edge_kernel,closed_edges,contours,contour_img

23

    edge_kernel=select_kernel

24

    closed_edges=get_closed_img(edges,edge_kernel)

25

    contours,contour_img=get_contours(gray_img,closed_edges)

26

    for el in [closed_edges,contour_img]:

27

         matrix_plot(el,figsize=(5,7)).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data Building

xxxxxxxxxx

 

1

def get_imgs(contours,img_size_out=int(32)):

2

    imgs=[]

3

    for c in contours: 

4

        x,y,w,h=cv2.boundingRect(c)

5

        m=np.random.randint(int(7),int(21))

6

        if (w>int(30) and w<int(250) and h>int(30) and h<int(250)):

7

            y1=int(y*(int(1)-float(.0015)*m))

8

            y2=int((y+h)*(int(1)+float(.0005)*m))

9

            x1=int(x*(int(1)-float(.001)*m))

10

            x2=int((x+w)*(int(1)+.001*m))

11

            new_img=img[y1:y2,x1:x2]

12

            if min(new_img.shape[int(0)],

13

                   new_img.shape[int(1)])>int(30):

14

                new_img=cv2.resize(new_img,

15

                                   (img_size_out,img_size_out))

16

                imgs.append(new_img)

17

    return np.array(imgs)

18

imgs=get_imgs(contours); n_img=int(7)

19

@interact(layout=dict(top=[['image_number']]))

20

def _get_images(image_number=selector([2,3,..,10],default=7)):

21

    global imgs

22

    if len(imgs)<49: image_number=int(2)

23

    ga=[[matrix_plot(imgs[i+image_number*j]) 

24

         for i in range(image_number)] for j in range(image_number)]

25

    graphics_array(ga).show(frame=False)

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data ZIP Storing

xxxxxxxxxx

 

1

file_list_out=[]; file_name_zip=file_pre[:-1]+'.zip'

2

def get_zip(imgs,start=0):

3

    global file_name_zip,file_pre,file_list_out

4

    current_list_out=[]

5

    for i in range(len(imgs)):

6

        idx=start+i

7

        file_name_img=file_pre+'%04d'%idx+'.png'

8

        cv2.imwrite(file_name_img,imgs[i]*255.)

9

        if (file_name_zip not in os.listdir()):

10

            with zipfile.ZipFile(file_name_zip,'w') as f:

11

                f.write(file_name_img); f.close()

12

        else:

13

            with zipfile.ZipFile(file_name_zip,'a') as f:

14

                f.write(file_name_img); f.close()

15

        os.remove(file_name_img)

16

        current_list_out+=[file_name_img]

17

    file_list_out+=current_list_out 

18

    return file_list_out

19

file_list_out=get_zip(imgs)

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

with zipfile.ZipFile(file_name_zip) as z:

2

    with open(file_list_out[-1],'wb') as f:

3

        f.write(z.read(file_list_out[-1]))

4

example_img=cv2.imread(file_list_out[-1])   

5

matrix_plot(example_img/255,figsize=(3,3)).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   Data H5 Storing

xxxxxxxxxx

 

1

file_name_h5=file_pre[:-1]+'.h5'

2

lbls=[[int(file_pre[:2]),int(file_pre[3:5]),int(file_pre[6:8])]

3

      for i in range(len(imgs))]

4

imgs=np.array(imgs,dtype='float32')

5

lbls=np.array(lbls,dtype='int32')

6

print(imgs.shape,lbls.shape)

7

maxlen=max([max([len(n) for n in names[i]]) 

8

            for i in range(len(names))])

9

nms=[np.array([np.string_(name.encode('utf-8')) 

10

               for name in names[i]],dtype='S%d'%maxlen) 

11

     for i in range(len(names))]

12

with h5py.File(file_name_h5,'w') as f:

13

    f.create_dataset('images',data=imgs,compression='gzip')

14

    f.create_dataset('labels',data=lbls,compression='gzip')

15

    for i in range(len(names)): 

16

        f.create_dataset('names%d'%(i+1),data=nms[i],

17

                         dtype='S%d'%maxlen,compression='gzip')

18

    f.close()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

with h5py.File(file_name_h5,'r') as f:

2

    keys=list(f.keys())

3

    print('file keys: '+', '.join(keys))

4

    images=np.array(f[keys[0]]); labels=np.array(f[keys[1]])

5

    names=[[el.decode('utf-8') for el in f[keys[i]]]

6

           for i in range(2,len(keys))]

7

    f.close()

8

ti=[names[i][labels[0,i]] for i in range(3)]

9

matrix_plot(images[0],title=str(ti),figsize=(3,3)).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   ZIP Storing of All Images with the Same Labels

xxxxxxxxxx

 

1

if (file_name_zip in os.listdir()): os.remove(file_name_zip)

2

start=0; file_list_out=[]

3

letter_names=(

4

    [['name %d'%i,[np.string_(name.encode('utf-8')) 

5

      for name in names[i]]] for i in range(len(names))])

6

np.savetxt('letter_names.txt',[str(letter_names)],fmt='%s')

7

print('letter labels: '+letter_names[1][1][0].decode('utf-8')+\

8

      '-'+letter_names[1][1][32].decode('utf-8'))

9

with zipfile.ZipFile(file_name_zip,'w') as f:

10

    f.write('letter_names.txt')      

11

def file_exist(file_name,file_path=file_path):

12

    r=requests.head(file_path+file_name)

13

    exist={'True':'exists','False':'does not exist'}

14

    print(file_path+file_name,exist[str(r.status_code==int(200))])

15

    return r.status_code==int(200)

16

for f in file_list:

17

    if file_exist(f):

18

        img,gray_img,edges=cv_get_img(f,lc,uc)

19

        closed_edges=get_closed_img(edges,edge_kernel)

20

        contours,contour_img=get_contours(gray_img,closed_edges)

21

        imgs=get_imgs(contours)

22

        file_list_out=get_zip(imgs=imgs,start=start)

23

        start=int(file_list_out[-1][-7:-4])+1

24

    else: break

25

file_list_out[-1]

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

@interact(layout=dict(top=[['image_step']]))

2

def _get_examples(image_step=selector([10,20,..,100],default=10)):

3

    global file_name_zip,file_list_out

4

    with zipfile.ZipFile(file_name_zip) as z:

5

        for i in range(3):

6

            current_file_name=file_list_out[-1-image_step*i]

7

            with open(current_file_name,'wb') as f:

8

                f.write(z.read(current_file_name))

9

            example_img=cv2.imread(current_file_name)   

10

            matrix_plot(example_img/255,title=current_file_name,

11

                        figsize=(3,3)).show()

12

    z.close()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

✒️   H5 Storing of All Images with the Same Labels

xxxxxxxxxx

 

1

file_name_h5=file_pre[:-1]+'.h5'; imgs,lbls=[],[]

2

def file_exist(file_name,file_path=file_path):

3

    r=requests.head(file_path+file_name)

4

    exist={'True':'exists','False':'does not exist'}

5

    print(file_path+file_name,exist[str(r.status_code==int(200))])

6

    return r.status_code==int(200)

7

for f in file_list:

8

    if file_exist(f):

9

        img,gray_img,edges=cv_get_img(f,lc,uc)

10

        closed_edges=get_closed_img(edges,edge_kernel)

11

        contours,contour_img=get_contours(gray_img,closed_edges)

12

        imgs0=get_imgs(contours); imgs.append(imgs0)

13

        lbls.append([[int(file_pre[:2]),int(file_pre[3:5]),

14

                      int(file_pre[6:8])]

15

                      for i in range(len(imgs0))])

16

imgs=np.array(np.vstack(imgs),dtype='float32')

17

lbls=np.array(np.vstack(lbls),dtype='int32')

18

print(imgs.shape,lbls.shape)

19

maxlen=max([max([len(n) for n in names[i]]) 

20

            for i in range(len(names))])

21

nms=[np.array([np.string_(name.encode('utf-8')) 

22

               for name in names[i]],

23

              dtype='S%d'%maxlen)

24

           for i in range(len(names))]

25

with h5py.File(file_name_h5,'w') as f:

26

    f.create_dataset('images',data=imgs,compression='gzip')

27

    f.create_dataset('labels',data=lbls,compression='gzip')

28

    for i in range(len(names)): 

29

        f.create_dataset('names%d'%(i+1),data=nms[i],

30

                         dtype='S%d'%maxlen,compression='gzip')

31

    f.close()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

xxxxxxxxxx

 

1

with h5py.File(file_name_h5,'r') as f:

2

    keys=list(f.keys())

3

    print('file keys: '+', '.join(keys))

4

    images=np.array(f[keys[0]]); labels=np.array(f[keys[1]])

5

    names=[[el.decode('utf-8') for el in f[keys[i]]]

6

           for i in range(2,len(keys))]

7

    f.close()

8

randi=randint(0,images.shape[0]-1)

9

ti=[names[i][labels[randi,i]] for i in range(3)]

10

matrix_plot(images[randi],title='n: %d =>'%randi+str(ti),

11

            figsize=(3,3)).show()

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: radial-gradient & webkit-background-clip

style_01.html

radial-gradient & webkit-background-clip

xxxxxxxxxx

 

1

%%html

2

<style>

3

@import 'https://fonts.googleapis.com/css?family=Ewert';

4

#d302h01 {background:white; text-align:center; padding:2px;}

5

.h1rg {display:inline-block; font-size:35px; line-height:1.1;

6

       padding:10px; font-family:'Ewert',sans-serif;

7

       text-transform:uppercase;

8

       background:radial-gradient(

9

           circle farthest-corner at center center,

10

           orange,magenta,cyan) no-repeat;

11

       -webkit-background-clip:text;

12

       -webkit-text-fill-color:transparent;}

13

</style>

14

<div id='d302h01'><h1 class='h1rg'>

15

Dawn comes to those who have seen the darkness 

16

in all its mysterious majesty...</h1></div>

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: d3 color interpolation

style_01.html

d3 color interpolation

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<style>

3

@import 'https://fonts.googleapis.com/css?family=Akronim';

4

.gakronim {font-family:Akronim; color:white; text-align:center;}

5

#canvas001,#canvas002 {width:10%; vertical-align:middle;}

6

</style>

7

<h1 id='colorized1' class='gakronim'>

8

Color Interpolation in Text Displaying</h1>

9

<h1 id='colorized2' class='gakronim'>

10

Background Interpolation in Text Displaying</h1>

11

<h1 id='colorized3' class='gakronim'>

12

<canvas id='canvas001'></canvas>

13

Canvas Drawing in Headers

14

<canvas id='canvas002'></canvas></h1><br/>

15

<script>

16

var tc=setInterval(function() {

17

    var now=new Date().getTime();

18

    var iddoc1=document.getElementById('colorized1');

19

    var iddoc2=document.getElementById('colorized2');

20

    var iddoc3=document.getElementById('colorized3');

21

    iddoc1.style.color=d3.interpolateSinebow(now/60000);

22

    iddoc2.style.background=d3.interpolateSinebow(now/60000);

23

    iddoc3.style.color=d3.interpolateRainbow(now/1000);

24

    var r=10,n=7;

25

    var c1=document.getElementById('canvas001'); 

26

    var context1=c1.getContext('2d');

27

    var c2=document.getElementById('canvas002'); 

28

    var context2=c2.getContext('2d');

29

    c1.style.background=d3.interpolateSinebow(now/60000); 

30

    c2.style.background=d3.interpolateSinebow(now/60000);

31

    context1.strokeStyle=d3.interpolateRainbow(now/1000);    

32

    context2.strokeStyle=d3.interpolateRainbow(now/1000);

33

    for (var i=1; i<n; i++) {

34

        context1.beginPath(); context2.beginPath();

35

        for (var j=0; j<6; j++) {

36

            context1.arc(60*j,r*(n+.5),i*r,0,2*Math.PI);

37

            context2.arc(60*j,r*(n+.5),i*r,0,2*Math.PI); };

38

        context1.stroke(); context2.stroke(); }; },1)

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: inputs & outputs

style_01.html

inputs & outputs

xxxxxxxxxx

 

1

%%html

2

<style>

3

@import 'https://fonts.googleapis.com/css?family=Akronim';

4

.sagecell_output {width:90%; background:ghostwhite; 

5

                  border:2px double slategray; padding:10px;}

6

.sagecell_input {width:90%; background:ivory; 

7

                 border:2px double slategray; padding:5px;

8

                 text-shadow:2px 2px 2px #aaa;}

9

#d302h02 {font-size:200%; font-family:Akronim; 

10

          color:slategray; text-align:center;

11

          border:2px double slategray;}

12

</style>

13

<div id='d302h02'><text>

14

😋 😌 😍 😎 😏 <br/>

15

formatting of SageMathCell inputs & outputs

16

</text></div>

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: creating js pretty_print

style_01.html

creating js pretty_print

xxxxxxxxxx

 

1

from IPython.display import display,HTML,Javascript

2

def js_pretty_print(string,font_size,div_width=100):

3

    js_str="""

4

var out1=document.querySelector('#d302h03'),

5

    text1=document.createElement('text'),

6

    str1='"""+string+"""';

7

text1.appendChild(document.createTextNode(str1));

8

out1.appendChild(text1); out1.style.border='double'; 

9

out1.style.width='"""+str(div_width)+"""%';

10

text1.id='text001'; text1.style.padding='20px'; 

11

var tc=setInterval(function() {

12

  var doc=document.getElementById('text001');

13

  var sec=Math.floor(new Date().getTime()%60000/1000);

14

  var col='rgb(0,'+(5+Math.abs(245-8*sec))+','+

15

          (250-Math.abs(245-8*sec))+')';

16

  doc.style.color=col;}, 1000);  """

17

    display(HTML("""<style>

18

    @import 'https://fonts.googleapis.com/css?family=Ewert';

19

    </style><div id='d302h03' style='font-family:Ewert; 

20

    font-size:"""+str(font_size)+"""px; 

21

    height:"""+str(1.8*font_size)+"""px;'></div>"""))

22

    display(Javascript(js_str))

23

js_pretty_print('😋 😌 😍 😎 😏 HELLO',24,50)

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: js div_hide_display

style_01.html

js div_hide_display

xxxxxxxxxx

 

1

from IPython.display import HTML

2

HTML("""<script>

3

div_show=true; 

4

function div_hide_display() {

5

    if (div_show) {

6

        $('#d302h04').each(function(id) {

7

            if (id==0||$(this).html().indexOf('hide_display')>-1)

8

            {$(this).hide();} });

9

        $('#d302h04').css('opacity',0);} 

10

    else {$('#d302h04').each(function(id){$(this).show();});

11

          $('#d302h04').css('opacity',1);};

12

    div_show=!div_show;} 

13

$(document).ready(div_hide_display);

14

</"""+"""script>

15

<div id='d302h04' style='border:double slategray; width:32%;'>

16

<p>😋 😌 😍 😎 😏 ===> HELLO</p><center>

17

<img width='90%' 

18

src='https://raw.githubusercontent.com/OlgaBelitskaya/data/main/

19

flowers/00_001.png'>

20

</img>

21

</center><p>HELLO <=== 😋 😌 😍 😎 😏</p></div>

22

<form action='javascript:div_hide_display()'>

23

<input style='color:slategray; background:silver; opacity:.7;'

24

type='submit' value='click to display or hide div'></form>""")

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: html styling by clicks

style_01.html

html styling by clicks

xxxxxxxxxx

 

1

def clickhtml(string,emo='✒️'):

2

    font_color_set=['#E91E63','#FA7A00','#FED85D','#91E351',

3

                    '#00D8A0','#1AADE0','#3355FF','#7855EE']

4

    font_family_set=['times','courier']

5

    font_size_set=[21,22,23,24,25]

6

    font_color=choice(font_color_set)

7

    font_family=choice(font_family_set)

8

    font_size=choice(font_size_set)

9

    html_str="""

10

    <p class='click_header' 

11

    onclick='setStyle(this,

12

        """"+font_color+"""",

13

        """"+font_family+"""",

14

        """"+str(font_size)+"""")'

15

    style='text-shadow:3px 3px 3px #ccc; font-family:courier; 

16

    font-size:20px; color:#ff33ff;'>

17

    """+emo+"""  """+string+"""

18

    </p>

19

    <script>

20

    function setStyle(element,color,family,size) {

21

     var docs=document.getElementsByClassName('click_header');

22

     for (var i=0; i<docs.length; i++) {

23

         docs[i].style='text-shadow:4px 4px 4px slategray; '+

24

                       'font-family:'+family+

25

                       '; font-size:'+size+'px; '; 

26

         docs[i].style.color=color;}; };

27

    </"""+"""script>"""

28

    display(html(html_str))

29

for i in range(4):

30

    print(15*'*=* ')

31

    clickhtml('Header Styling by Clicks #%d'%(i+1))

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 Style Workout 01: code hiding

style_01.html

code hiding

xxxxxxxxxx

 

1

from IPython.display import HTML

2

display(HTML("""<script>

3

div_show=false; 

4

function input_hide_display() {

5

    if (div_show) {

6

        $('.sagecell_input').each(function(id) {

7

            if (id==0||$(this).html().indexOf('hide_display')>-1)

8

            {$(this).hide();} });

9

        $('.sagecell_input').css('opacity',0);} 

10

    else {$('.sagecell_input').each(function(id){$(this).show();});

11

          $('.sagecell_input').css('opacity',1);};

12

    div_show=!div_show;} 

13

$(document).ready(input_hide_display);

14

</"""+"""script>

15

<form action='javascript:input_hide_display()'>

16

<input style='color:slategray; background:silver; opacity:.7;'

17

type='submit' value='click to display or hide div'></form>"""))

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages

📑 D3 Workout 01. Timers for Color Interpolation

d3_01.html

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%javascript

2

var tc=setInterval(function() {

3

  var now=new Date().getTime();

4

  var n=Math.abs(120-4*Math.floor((now%(1000*60))/1000));

5

  var svg1=d3.select('#d301svg01')

6

             .attr('width',284).attr('height',264)

7

             .call(svg=>svg.selectAll('circle')

8

             .data(d3.range(128,0,-8)).join('circle')

9

             .attr('transform','translate(132,132)')

10

             .attr('fill',d3.scaleSequential(

11

               d3.interpolateSinebow).domain([0,128+n]))

12

             .attr('r',d =>d)).node();},1);

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages