Random Parametric Plotting

function_plotting_js.ipynb

from IPython.display import HTML

HTML("""<style>

text {fill:#fff; font-size:135%;} 

.grid line,.grid path {stroke:#fff; stroke-opacity:0.7; shape-rendering:crispEdges;}

</style>

<script src='https://d3js.org/d3.v4.min.js'></script>

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

<script>

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

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

    width=600-margin.left-margin.right,height=600-margin.top-margin.bottom; 

function make_x_gridlines() {return d3.axisBottom(xScale).ticks(11).tickFormat('')};

function make_y_gridlines() {return d3.axisLeft(yScale).ticks(11).tickFormat('')}; 

function get_int(xmin,xmax) {return Math.floor(Math.random()*(xmax-xmin+1))+xmin;};

function get_color(k) {var r=get_int(10*k,255),g=get_int(10*k,255),b=get_int(10*k,255);

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

var a=get_int(7,15),b=get_int(10,24),l=get_int(3,12);              

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

    return {'x':k*(Math.cos(0.01*t)+Math.cos(a*0.01*t)/2+Math.sin((a+b)*0.01*t)/3),

            'y':k*(Math.sin(0.01*t)+Math.sin(a*0.01*t)/2+Math.cos((a+b)*0.01*t)/3)} });};

var xScale=d3.scaleLinear().domain([-1.8*l,1.8*l]).range([0,width]);

var yScale=d3.scaleLinear().domain([-1.8*l,1.8*l]).range([height,0]);

var svg=d3.select('#svg').attr('width',width+margin.left+margin.right)

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

          .append('g').attr('transform','translate('+margin.left+','+margin.top+')');

svg.append('g').attr('class','x axis').call(d3.axisBottom(xScale).tickSize(0.5))

               .attr('transform','translate(0,'+height+')'); 

svg.append('g').attr('class','y axis').call(d3.axisLeft(yScale).tickSize(0.5));    

svg.append('g').attr('class','grid').attr('transform','translate(0,'+height+')')

               .call(make_x_gridlines().tickSize(-height));

svg.append('g').attr('class','grid').call(make_y_gridlines().tickSize(-width));

var line=d3.line().curve(d3.curveMonotoneX).x(function(d) {return xScale(d.x);})

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

for (i=1; i<l+1; i++) {var data=make_data(i); var col=get_color(i);

                       svg.append('path').datum(data).attr('class','line').attr('d',line)

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

svg.append('text').attr('transform','translate('+(width/2-50)+','+-5+')')

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

</script>""")