@import 'https://fonts.googleapis.com/css?family=Ewert';
.grid2 line,.grid2 path {
stroke-opacity:.5; shape-rendering:crispEdges;}
<svg id='d3ch2'/><script>
var m=30,x1=-7,x2=7,y1=-7,y2=7,margin={top:m,right:m,bottom:m,left:m},
width=600-margin.left-margin.right,
height=600-margin.top-margin.bottom;
function randi(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;};
var r=randi(100+i,255),gb=randi(10+i,100);
return '#'+r.toString(16)+gb.toString(16)+gb.toString(16);};
function make_x_gridlines(){
return d3.axisBottom(xScale).ticks(11).tickFormat('')};
function make_y_gridlines(){
return d3.axisLeft(yScale).ticks(10).tickFormat('')};
var xScale=d3.scaleLinear().domain([x1,x2]).range([0,width]),
yScale=d3.scaleLinear().domain([y1,y2]).range([height,0]);
var ttr1='translate('+margin.left+','+margin.top+')',
ttr2='translate(0,'+height+')';
var svg=d3.select('#d3ch2')
.attr('width',width+margin.left+margin.right)
.attr('height',height+margin.top+margin.bottom)
.append('g').attr('transform',ttr1);
svg.append('g').attr('class','x axis')
.call(d3.axisBottom(xScale).tickSize(.5)).attr('transform',ttr2);
svg.append('g').attr('class','y axis')
.call(d3.axisLeft(yScale).tickSize(.5));
svg.append('g').attr('class','grid2').attr('transform',ttr2)
.call(make_x_gridlines().tickSize(-height));
svg.append('g').attr('class','grid2')
.call(make_y_gridlines().tickSize(-width));
function fx(a,b,c,d,e,q,n,t,k) {
var x1=Math.cos(Math.PI*t/n+k*Math.PI/q)+
Math.cos(a*Math.PI*t/n+k*Math.PI/q),
x2=Math.cos(b*Math.PI*t/n+k*Math.PI/q)+
Math.cos(c*Math.PI*t/n+k*Math.PI/q),
x3=Math.cos(d*Math.PI*t/n+k*Math.PI/q)+
Math.cos(e*Math.PI*t/n+k*Math.PI/q);
function fy(a,b,c,d,e,q,n,t,k) {
var y1=Math.sin(Math.PI*t/n+k*Math.PI/q)+
Math.sin(a*Math.PI*t/n+k*Math.PI/q),
y2=Math.sin(b*Math.PI*t/n+k*Math.PI/q)+
Math.sin(c*Math.PI*t/n+k*Math.PI/q),
y3=Math.sin(d*Math.PI*t/n+k*Math.PI/q)+
Math.sin(e*Math.PI*t/n+k*Math.PI/q);
function make_data(a,b,c,d,e,q,n,k) {
return d3.range(0,2*n+1).map(function(t) {
return {'x':fx(a,b,c,d,e,q,n,t,k),
'y':fy(a,b,c,d,e,q,n,t,k)}; }) }
var a=randi(5,9),b=randi(10,14),c=randi(15,19),
d=randi(20,36),e=randi(37,81),q=randi(3,12),n=randi(3,15);
var line=d3.line().curve(d3.curveMonotoneX)
.x(function(d){return xScale(d.x);})
.y(function(d){return yScale(d.y);});
for (var i=1; i<2*(q+n+1); i++) {
var data=make_data(a,b,c,d,e,q,n,i),col=randcolR(i);
svg.append('path').datum(data).attr('class','line').attr('d',line)
.attr('stroke',col).attr('stroke-width',.3)