Zooming of Function Plots 2

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

xxxxxxxxxx

 

1

%%html

2

<svg id='svg10_02' style='background-color:ghostwhite;'></svg>

3

<script>

4

var n=640,m=30; var i,j,k,xmax,xmin;

5

var margin={top:m,right:m,bottom:m,left:m},

6

    width=580-margin.left-margin.right,

7

    height=600-margin.top-margin.bottom; 

8

function randi(xmin,xmax){

9

    return Math.floor(Math.random()*(xmax-xmin+1))+xmin;};

10

function gcolor(i){var r=randi(20*i,255),

11

                       g=randi(20*i,255),

12

                       b=randi(20*i,255);

13

    return '#'+r.toString(16)+g.toString(16)+b.toString(16);}

14

var a=randi(7,15),b=randi(10,24),p=.01;          

15

function make_data(j){return d3.range(0,n).map(function(i) {

16

    return {'x':4*j*(Math.cos(p*i)+Math.cos(a*p*i)/2+

17

                     Math.sin((a+b)*p*i)/3),

18

            'y':4*j*(Math.sin(p*i)+Math.sin(a*p*i)/2+

19

                     Math.cos((a+b)*p*i)/3)}});};

20

var xScale=d3.scaleLinear().domain([-24,24]).range([0,width+2*m]),

21

    yScale=d3.scaleLinear().domain([-24,24]).range([height+2*m,0]);

22

var ttr1='translate('+margin.left+','+margin.top+')',

23

    ttr2='translate('+20+','+40+')';

24

var svg2=d3.select('#svg10_02')

25

           .attr('width',width+margin.left+margin.right)

26

           .attr('height',height+margin.top+margin.bottom)

27

           .attr('transform',ttr1);

28

var line=d3.line().curve(d3.curveMonotoneX)

29

           .x(function(d){return xScale(d.x);})

30

           .y(function(d){return yScale(d.y);});

31

for (k=1; k<4; k++) {var data=make_data(k);

32

    svg2.append('path').datum(data)

33

        .attr('class','line').attr('d',line)

34

        .attr('fill','none').attr('stroke-width',2)

35

        .transition().duration(10000)

36

        .styleTween('stroke',function(){

37

            var col1=gcolor(k),col2=gcolor(k); 

38

            return d3.interpolate(col1,col2);});};

39

svg2.append('text').attr(ttr2)

40

    .style('fill','#aaa').text('a='+a+'; b='+b);

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

---

Messages