Website Building with Projects. Question by Question.: December 2019

Thursday, December 19, 2019

📑 D3 Workout 01. Chart Building

d3_01.html

📑 Chart Building 01: Line Charts with Transition.

<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>

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>

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