📑 D3 Workout 01. Random Curves

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=Akronim';

4

</style>

5

<svg id='d301svg02' style='background-color:silver;'/><br/><br/>

6

<script>

7

m=20,margin2={top:m,right:m,bottom:m,left:m},

8

width2=600-margin2.left-margin2.right,

9

height2=600-margin2.top-margin2.bottom;

10

function randi(min,max) {

11

    return Math.floor(Math.random()*(max-min+1))+min;};

12

function randcol() {

13

    var g=randi(50,200),b=randi(50,200);

14

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

15

function fx(a,b,c,d,e,f,t) {

16

    var x1=Math.sin(t/d),

17

        x2=(-1)**f*a*Math.sin(b*t)*Math.cos(t),

18

        x3=(-1)**f*c*Math.sin(e*b*t);

19

    return x1+x2+x3};

20

function fy(a,b,c,d,e,f,t) {

21

     var y1=Math.cos(t/d),

22

         y2=(-1)**f*a*Math.sin(b*t)*Math.sin(t),

23

         y3=(-1)**f*c*Math.cos(e*b*t);

24

     return y1+y2+y3};

25

function make_data() {

26

    const a=randi(5,15)/10,b=randi(6,12),c=randi(1,100)/10**3,

27

          d=randi(5,7),e=randi(14,18),f=randi(1,2);

28

    var data=d3.range(1,10**3+1).map(function(k) {

29

        return {'x':fx(a,b,c,d,e,f,k*b*e*Math.PI/10**3),

30

                'y':fy(a,b,c,d,e,f,k*b*e*Math.PI/10**3)}; });

31

    return [data,[a,b,c,d,e,f]]};

32

function RandomPlot(data,coef,col) {

33

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

34

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

35

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

36

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

37

        .transition().duration(10000)

38

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

39

        .attr('stroke',col).attr('stroke-width',.5)

40

        .attr('fill',col).attr('fill-opacity',.1);

41

    svg2.append('text').attr('id','plot_text')

42

        .text('[a,b,c,d,e,f]='+coef)

43

        .attr('x',width2/2).attr('y',40)

44

        .attr('fill',col);};

45

xScale2=d3.scaleLinear().domain([-3,3]).range([0,width2]);

46

yScale2=d3.scaleLinear().domain([-3,3]).range([height2,0]);

47

svg2=d3.select('#d301svg02')

48

       .attr('width',width2+margin2.left+margin2.right)

49

       .attr('height',height2+margin2.top+margin2.bottom)

50

       .attr('transform',

51

             'translate('+margin2.left+','+margin2.top+')');

52

svg2.append('text').text('<<< add a random line')

53

    .attr('x',60).attr('y',40).attr('fill','#36ffff')

54

    .attr('style','font-family:Akronim; font-size:120%'); 

55

svg2.append('circle')

56

    .attr('cx',40).attr('cy',40)

57

    .attr('r',20).attr('fill','#36ffff')

58

    .attr('stroke','silver').attr('stroke-width',5)

59

    .on('click',function() {

60

        d3.selectAll('#plot_text')

61

          .transition().duration(3000).remove();

62

        d3.selectAll('path')

63

          .transition().duration(3000).remove();

64

        var array=make_data(),col=randcol();

65

        RandomPlot(array[0],array[1],col);});

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

---

Messages