D3.js for Plotting with Random Coefficients

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

xxxxxxxxxx

 

1

%%html

2

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

3

<script>

4

var n=6400,m=6,d=.001,margin={top:m,right:m,bottom:m,left:m},

5

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

6

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

7

    tr='translate('+margin.left+','+margin.top+')'; 

8

function fx(t,a,b,k){

9

    return Math.cos(d*t+k*Math.PI/6)+

10

           Math.cos(a*d*t)/2+Math.sin((a+b)*d*t)/3};

11

function fy(t,a,b,k){

12

    return Math.sin(d*t+k*Math.PI/6)+

13

           Math.sin(a*d*t)/2+Math.cos((a+b)*d*t)/3};

14

function randi(xmin,xmax){

15

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

16

function rcolor(i){

17

    var r=randi(i,255),g=randi(i,50),b=randi(i,255);

18

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

19

var a=randi(7,15),b=randi(10,48);

20

function make_data(k){return d3.range(1,n).map(function(t){

21

    return {'x':fx(t,a,b,k),

22

            'y':fy(t,a,b,k)}});};    

23

var xScale=d3.scaleLinear()

24

             .domain([-2,2]).range([0,width+10]),

25

    yScale=d3.scaleLinear()

26

             .domain([-2,2]).range([height+10,0]); 

27

var svg=d3.select('#d303')

28

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

29

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

30

          .attr('transform',tr);

31

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

32

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

33

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

34

for (var i=1; i<m; i++) {var data=make_data(i),col=rcolor(i);

35

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

36

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

37

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

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

---

Messages