md`# 📑 Random Plotting 4`
html`<style>
@import 'https://fonts.googleapis.com/css?family=Akronim|Ewert';
h1 {color:#36ffff; font-size:200%; font-family:Ewert;}
</style>`
function randi(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;}
function f(a,b,c,d,e,q,n,t,k) {
var x1=a+.1*b*Math.cos(c*Math.PI*t/n+k*Math.PI/q),
x2=.1*a+.01*d*Math.cos(e*Math.PI*t/n+k*Math.PI/q),
x3=1+Math.sin(Math.PI*t/n+k*Math.PI/q);
return x1*x2*x3};
function fx(a,b,c,d,e,q,n,t,k) {
return f(a,b,c,d,e,q,n,t,k)*Math.cos(Math.PI*t/n+k*Math.PI/q)}
function fy(a,b,c,d,e,q,n,t,k) {
return f(a,b,c,d,e,q,n,t,k)*Math.sin(Math.PI*t/n+k*Math.PI/q)}
function make_data(a,b,c,d,e,q,n,k) {
return d3.range(1,2*n+2).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)}; }); }
function randcolGB(i) {
var g=randi(i,255),b=randi(i,255);
return '#00'+g.toString(16)+b.toString(16);}
function RandomPlot() {
const m=20;
var margin={top:m,right:m,bottom:m,left:m},
width=800-margin.left-margin.right,
height=600-margin.top-margin.bottom;
var a=randi(3,11),b=randi(3,25),c=randi(8,16),
d=randi(5,9),e=randi(200,300),
q=randi(2,10),n=randi(30,300);
var xScale=d3.scaleLinear().domain([-1.5*(a+.1*b),1.5*(a+.1*b)])
.range([0,width-12]),
yScale=d3.scaleLinear().domain([-.5*(a+.1*b),2*(a+.1*b)])
.range([height-15,0]);
const svg=d3.select(DOM.svg(width,height))
.attr('style','background:whitesmoke');
var line=d3.line().curve(d3.curveMonotoneX)
.x(function(d){return xScale(d.x);})
.y(function(d){return yScale(d.y);});
svg.append('path').datum(make_data(a,b,c,d,e,q,n,1))
.attr('class','line').attr('d',line)
.attr('stroke',randcolGB(1))
.attr('stroke-width',.3)
.attr('fill','none');
function addLine(i) {
var data=make_data(a,b,c,d,e,q,n,i),
col=randcolGB(i);
svg.append('path').datum(data)
.attr('class','line').attr('d',line)
.attr('stroke',col).attr('stroke-width',.5)
.attr('fill','none');};
svg.append('text').text('[a,b,c,d,e,q,n]='+[a,b,c,d,e,q,n])
.attr('x',width/2).attr('y',2*m);
svg.append('text').text('<<< add a new line')
.attr('x',3*m).attr('y',2*m);
svg.append('circle')
.attr('cx',2*m).attr('cy',2*m)
.attr('r',15).attr('fill','#3699ff')
.on('click',function() {
var randK=Math.floor((2*q+2)*Math.random())
addLine(randK);})
return svg.node();}
RandomPlot()
d3=require('d3@6')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
