Visualization Notes: 08/09/21

Monday, August 9, 2021

Replacements of Array Elements

xxxxxxxxxx
 
%%html
<style>
@import 'https://fonts.googleapis.com/css?family=Ewert|Roboto&effect=3d';
</style>
<p class='font-effect-3d' 
style='color:darkblue; font-family:Ewert; font-size:120%;'>
arrays X & Y</p>
<button id='cell21'
style='color:darkblue; font-family:Roboto; font-size:110%;'
onclick='document.getElementById("cell21").innerHTML=result21()'>
click >>></button>
<p class='font-effect-3d' 
style='color:darkblue; font-family:Ewert; font-size:120%;'>
result and number of replacements</p>
<button id='cell22' 
style='color:darkblue; font-family:Roboto; font-size:110%;'
onclick='document.getElementById("cell22").innerHTML=result22()'>
click >>></button>
<script>
X=Array.from({length:10},()=>
  Math.round(Math.random()*10000-5000)/100);
Y=Array.from({length:10},()=>
  Math.round(Math.random()*10000-5000)/100);
function result21(){return 'X => '+X+'</br>Y => '+Y;}
var Z=[],c=0;
for (var n=0; n<X.length; n++){
    if (X[n]>0) {Z[n]=X[n]} else {Z[n]=Y[n]; c++};}
function result22() {
    return 'Result => '+Z+'</br>Number of replacements => '+c;}

The Total Gravity of N Layers

xxxxxxxxxx
 
var('D,G,i,N')
Vi(D,i)=4/3*pi*((D+i)/2)^3-4/3*pi*((D+i-1)/2)^3
v(D,i)=Vi(D,i).expand().simplify().factor()
pretty_print('the volume of the i-th layer:')
pretty_print(v(D,i))
P(D,G,N)=sum(v(D,i)*G/i,i,1,N)
pretty_print('the total gravity of N layers:')
pretty_print(P(D,G,N).factor())
from sage.plot.plot3d.shapes import Sphere
def display_shell(D,G,N):
    g=Graphics(); s=Sphere(D,color='gray',frame=false)
    layers=sum([Sphere(D+i,opacity=G/i) for i in [1..N]])
    st='<center>D=%d, G=%.2f, N=%d => P=%f</center>'
    pretty_print(html(st%(D,G,N,P(D,G,N))))
    (g+s+layers).show()
display_shell(7,.75,10)

SageMath: Symbolic Integration

✒️ Symbolic Integration

xxxxxxxxxx
 
from sage.symbolic.integration.integral \
import indefinite_integral as ii
f(x)=(5*x^3-17*x^2+18*x-5)/(x-1)^3/(x-2)
intf(x)=ii(f(x),x)
display(html('<p style="color:#3636ff";>$f(x)='+latex(f(x))+'$</p>'
             '<p style="color:#36ff36";>$'
             '\\int f(x) dx='+latex(intf(x))+'$</p>'))
plot([f(x),intf(x)],(2,10),gridlines=True,
     legend_label='automatic',ymin=-10,ymax=10,
     frame=True,figsize=(6,5))

D3 Animated Lines

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

xxxxxxxxxx
 
%%html
number <select id='num_points' 
style='text-align:center; text-align-last:center; 
  background:silver; width:200px; height:25px'>
    <option value='100'>100</option><option value='150'>150</option>
    <option value='200'>200</option><option value='250'>250</option>
    <option value='300'>300</option><option value='350'>350</option>
</select><br/><br/>run &nbsp; &nbsp; &nbsp; &nbsp;
<button style='background:silver; width:200px; height:25px'
onclick='draw_chart();' id='run_button'>=>>></button><br/><br/>
<svg id='d302' style='background-color:silver;'/><script>
margin={top:20,right:20,bottom:20,left:60},width=600,height=400;
reveal=path=>
path.transition().duration(10000).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,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 xAxis=(g,scale=x)=>g
      .attr('transform',`translate(0,${height-margin.bottom})`)
      .call(d3.axisBottom(scale)
              .ticks(width/60).tickSizeOuter(0)),
      yAxis=(g,scale=y)=>g
      .attr('transform',`translate(${margin.left},0)`)
      .call(d3.axisLeft(scale).ticks(height/40));
  var svg=d3.select('#d302')
            .attr('width',width).attr('height',height);
  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','#ff36ff').attr('stroke-width',1)
     .attr('stroke-miterlimit',1).attr('stroke-dasharray','0,1')
     .attr('fill','none').call(reveal);};

D3 Recursive Curves

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

xxxxxxxxxx
 
%%html
n <input type='number' id='n_frames' value=1
style='width:160px; font-size:120%; color:#363636;
background-color:silver; text-align:center;'/> 
m <input type='number' id='m_frames' value=15
style='width:160px; font-size:120%; color:#363636;
background-color:silver; text-align:center;'/>
run =>>> <input type='button' onclick='draw_curves();' value='update'
style='width:160px; font-size:120%; color:#363636;
background-color:silver; text-align:center;'/><br/><br/>
<svg id='d301' style='background-color:silver;'/>
<script>
s=600;
colors=['#3636ff','#ff3636','#ff36ff',
        '#ffff36','#36ff36','#36ffff'];
function subpoint(a,b,m) {
  return [Math.floor(m/2)*(a[0]+b[0])/m,
          Math.floor(m/2)*(a[1]+b[1])/m]};
function subdivpoly(poly,m,iterations=1) {
  var [p1,p2,p3]=poly,points=[];
  var centroid=d3.polygonCentroid(poly);
  if (iterations===0) {points.push(centroid);} 
  else {var subset1=[p1,subpoint(p1,p3,m),p2],
            subset2=[p2,subpoint(p1,p3,m),p3];
        points.push(...subdivpoly(subset1,m,iterations-1));
        points.push(...subdivpoly(subset2,m,iterations-1));}
  return points};
function recursive_curve(len,m,iterations) {
  var contour1=[[0,len],[0,0],[len,0]],
      contour2=[[len,0],[len,len],[0,len]];
  var half1=subdivpoly(contour1,m,iterations),
      half2=subdivpoly(contour2,m,iterations);
  return [...half1,...half2];};
function draw_curves() {
  var m=parseInt(document.getElementById('m_frames').value);
  var n=parseInt(document.getElementById('n_frames').value);
  var line=d3.line();
  var svg=d3.select('#d301').attr('width',s).attr('height',s);
  svg.selectAll('path').remove();
  svg.selectAll('.curve').data(colors).join('path')
     .attr('d',(_,i)=>line(recursive_curve(s,m,i+n))+'z')
     .style('fill',d=>d).style('fill-opacity',.02)
     .style('stroke',d=>d).style('stroke-width',2); };

Artificial Data & H5 Storing

xxxxxxxxxx
 
import warnings; warnings.filterwarnings('ignore')
import imageio,numpy as np,pandas as pd
import os,h5py,seaborn as sn,pylab as pl
from skimage.transform import resize
from IPython.display import HTML
def randintcoord(img_size_out,img_size=1024):
    a=(.5+.1**6*np.random.randint(1,999999))*\
      np.random.choice([-1,1],1)[0]
    b=np.random.randint(3,10)
    c=.1**3*np.random.randint(1,99)*\
      np.random.choice([-1,1],1)[0]
    t=np.arange(0,12*np.pi,1/(2880*b))
    fx=np.sin(t/6)+a*np.sin(b*t)*np.cos(t)-\
       c*np.sin(16*b*t)
    fy=np.cos(t/6)+a*np.sin(b*t)*np.sin(t)-\
       c*np.cos(16*b*t)
    fx=.951*(fx-1.051*fx.min())/(fx.max()-fx.min())
    fy=.951*(fy-1.051*fy.min())/(fy.max()-fy.min())
    fx=np.array(np.clip(fx*img_size,0,img_size-1),dtype='int32')
    fy=np.array(np.clip(fy*img_size,0,img_size-1),dtype='int32')
    f=np.array([[fx[i],fy[i]] for i in range(len(t))])
    img=np.ones((img_size,img_size,3))
    randcol=.9-.8*np.random.random(3)
    for [x,y] in f: img[y,x,:]=randcol
    img=resize(img,(img_size_out,img_size_out))
    return img,np.around(a,6),b,np.around(c,3),randcol

xxxxxxxxxx
 
img_size=256; num_images=10
images=np.zeros((num_images,img_size,img_size,3),dtype=np.float32)
labels=np.zeros((num_images,),dtype=np.int32)
targets=np.zeros((num_images,2),dtype=np.float32)
colors=np.zeros((num_images,3),dtype=np.float32)
for i in range(num_images):
    print('=>',end='',flush=True)
    img,a,b,c,col=randintcoord(img_size)
    images[i,:,:,:]=img
    labels[i],targets[i,0],targets[i,1]=b-3,a,c
    colors[i,:]=col
h5f='ArtificialImages'+str(img_size)+'.h5'
with h5py.File(h5f,'w') as f:
    f.create_dataset('images',data=images,compression='gzip')
    f.create_dataset('labels',data=labels,compression='gzip')
    f.create_dataset('targets',data=targets,compression='gzip')
    f.create_dataset('colors',data=colors,compression='gzip')
    f.close()
print('\nfile size: %s'%list(os.stat(h5f))[6])

xxxxxxxxxx
 
with h5py.File(h5f,'r') as f:
    keys=list(f.keys()); print(keys)
    images=np.array(f[keys[1]]); labels=np.array(f[keys[2]])
    targets=np.array(f[keys[3]]); colors=np.array(f[keys[0]])
    f.close()
fig=pl.figure(figsize=(6,2))
for i in range(2):
    randi=np.random.randint(1,num_images,2)
    ax=fig.add_subplot(1,2,i+1)
    pl.imshow(images[randi[i]]); pl.axis('off')
    ti=str([labels[randi[i]],list(targets[randi[i]])])
    pl.title(ti,color=colors[randi[i]])
pl.tight_layout(); pl.show()

xxxxxxxxxx
 
def interpolate_hypersphere(v1,v2,steps):
    v1norm=np.linalg.norm(v1); v2norm=np.linalg.norm(v2)
    v2normalized=v2*(v1norm/v2norm)
    vectors=[]
    for step in range(1,steps+1):
        interpolated=v1+(v2normalized-v1)*step/steps
        interpolated_norm=np.linalg.norm(interpolated)
        interpolated_normalized=interpolated*(v1norm/interpolated_norm)
        vectors.append(interpolated_normalized)
    return np.array(vectors)
steps=60; file_name='pic.gif'
imgs=np.vstack(
    [interpolate_hypersphere(images[1],images[0],steps),
     interpolate_hypersphere(images[0],images[1],steps)])
imageio.mimsave('pic.gif',imgs)
file_path='https://sagecell.sagemath.org/kernel/'
file_path+=os.getcwd()[14:]+'/files/'
s1='<div id="imgs"><img src="'
s2='" height="400" width="400"></img></div>'
HTML(s1+file_path+file_name+s2)

Color Gradient & Canvas Text

xxxxxxxxxx
 
%%html
<canvas id='canvas001' width='420' height='60'/>
<script>
var c=document.getElementById('canvas001'); 
var context=c.getContext('2d');
context.font='20px Verdana';
var gradient=context.createLinearGradient(0,0,280,0);
gradient.addColorStop('0','#3636ff');
gradient.addColorStop('.33','#ff36ff');
gradient.addColorStop('.66','#36ff36');
gradient.addColorStop('1.','#ff3636');
context.strokeStyle=gradient;
context.strokeText('applying color gradients to canvas texts',10,35)

R Basic Graphics => Barplots

xxxxxxxxxx
 
print(r.eval("""
svg(filename='Rplots.svg',width=6,height=4,onefile=TRUE,
    antialias=c('default','none','gray','subpixel'))
options(repr.plot.width=12,repr.plot.height=7)
par(mar=c(2,4,2,2))
m<-10; n<-100; data<-sample(1:m,n,replace=TRUE)
xmax<-round(1.2*max(table(data)))
pal<-colorRampPalette(
    colors=c('firebrick','midnightblue'))(m)
barplot(sort(table(data)),horiz=TRUE,col=pal,ylab='',
        las=1,main='R Countplot in Seconds',xlim=c(0,xmax))
dev.off()"""))

'Aggregate' for DataFrames from CSV

xxxxxxxxxx
 
print(r.eval("""
mean_aggr_csv<-function(url,sep,column,group_by) {
    df<-read.csv(url,header=TRUE,sep=sep)
    len<-dim(df)[1]
    group_list<-list(df[1:len,group_by])
    result<-aggregate(df[column],group_list,mean)
    colnames(result)<-c(group_by,paste0('mean ',column))
    return(result)}
median_aggr_csv<-function(url,sep,column,group_by) {
    df<-read.csv(url,header=TRUE,sep=sep)
    len<-dim(df)[1]
    group_list<-list(df[1:len,group_by])
    result<-aggregate(df[column],group_list,median)
    colnames(result)<-c(group_by,paste0('median ',column))
    return(result)}
sum_aggr_csv<-function(url,sep,column,group_by) {
    df<-read.csv(url,header=TRUE,sep=sep)
    len<-dim(df)[1]
    group_list<-list(df[1:len,group_by])
    result<-aggregate(df[column],group_list,sum) 
    colnames(result)<-c(group_by,paste0('sum ',column))
    return(result)}
url<-'https://olgabelitskaya.github.io/huge_cities.tsv'
sep='\t'; column<-'growth'; group_by<-'country'
mean_aggr_csv(url,sep,column,group_by)
"""))

Circle Drawing

xxxxxxxxxx
 
var('u'); R,r,n=12,6,24; x=r*cos(u); y=r*sin(u)
p1=sum([parametric_plot(
    (x-R*cos(2*i*pi/n),y-R*sin(4*i*pi/n)),
    (u,0,2*pi),color='#3636ff') for i in [0..n]])
p2=sum([parametric_plot(
    (y-R*sin(4*i*pi/n),x-R*cos(2*i*pi/n)),
    (u,0,2*pi),fill=True,fillalpha=.1,
    fillcolor=colormaps['cool'](cos(25.12*i/n)^2)[:3],
    color='#3636ff',plot_points=30) for i in [0..n]])
p3=sum([parametric_plot(
    (1.5*x-R*cos(2*i*pi/n),1.5*y-R*sin(2*i*pi/n)),
    (u,0,2*pi),color='slategray') for i in [0..n]])
(p1+p2+p3).show(figsize=(5,5),axes=False)

Interactive Subsets

xxxxxxxxxx
 
@interact
def f(n=(1,5,1)):
    pretty_print(n,'-element Subsets of the 5-element Set')
    S=Combinations(['🦅','🦁','🦀','🦋','🐋'],n).list()
    for i in range(len(S)):
        print([ascii_art(S[i][j]) for j in range(n)])