md`# 📑 Random Plotting 5`
html`<style>
@import 'https://fonts.googleapis.com/css?family=Akronim';
h1 {color:#36ffff; font-size:200%; font-family:Akronim;}
#date_time_button {background-color:silver; color:#36ffff; border:double #36ffff;
text-align:center; font-family:Akronim; font-size:200%;
border-radius:15px; padding:10px; width:450px;
transition:all 0.7s; cursor:pointer; margin:2px;}
#date_time_button span {cursor:pointer; display:inline-block;
position:relative; transition:0.8s;}
#date_time_p {color:silver; font-family:Akronim; font-size:130%;}
</style>
<button type='button' id='date_time_button'
onclick="document.getElementById('date_time_p').innerHTML=Date()">
Current Date and Time</button><p id='date_time_p'></p>`
function randi(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;}
function fx(a,b,c,d,e,f,t) {
var x1=Math.sin(t/d),
x2=(-1)**f*a*Math.sin(b*t)*Math.cos(t),
x3=(-1)**f*c*Math.sin(e*b*t);
return x1+x2+x3}
function fy(a,b,c,d,e,f,t) {
var y1=Math.cos(t/d),
y2=(-1)**f*a*Math.sin(b*t)*Math.sin(t),
y3=(-1)**f*c*Math.cos(e*b*t);
return y1+y2+y3}
function make_data() {
const a=randi(5,15)/10,b=randi(6,12),c=randi(1,100)/10**3,
d=randi(5,7),e=randi(14,18),f=randi(1,2);
var data=d3.range(1,10**4+1).map(function(k) {
return {'x':fx(a,b,c,d,e,f,k*b*e*Math.PI/10**4),
'y':fy(a,b,c,d,e,f,k*b*e*Math.PI/10**4)}; });
return [data,[a,b,c,d,e,f]]}
function randcol() {
var g=randi(50,200),b=randi(50,200);
return '#00'+g.toString(16)+b.toString(16);}
function RandomPlot(data,coef,col) {
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(data)
.transition().duration(10000)
.attr('class','line').attr('d',line)
.attr('stroke',col).attr('stroke-width',.2)
.attr('fill',col).attr('fill-opacity',.2);
svg.append('text').attr('id','plot_text')
.text('[a,b,c,d,e,f]='+coef)
.attr('x',width/2).attr('y',40)
.attr('fill',col);
return svg.node();}
margin=({top:20,right:20,bottom:20,left:20})
width=600-margin.left-margin.right
height=600-margin.top-margin.bottom
xScale=d3.scaleLinear().domain([-3,3])
.range([0,width])
yScale=d3.scaleLinear().domain([-3,3])
.range([height,0]);
svg=d3.select(DOM.svg(width,height))
.attr('style','background:silver');
svg.append('text').text('<<< add a random line')
.attr('x',65).attr('y',45).attr('fill','#36ffff')
.attr('style','font-family:Akronim; font-size:120%');
svg.append('circle')
.attr('cx',40).attr('cy',40)
.attr('r',20).attr('fill','silver')
.attr('stroke','#36ffff').attr('stroke-width',5)
.on('click',function() {
d3.selectAll('#plot_text').transition().duration(3000).remove();
d3.selectAll('path').transition().duration(3000).remove();
var array=make_data(),col=randcol();
RandomPlot(array[0],array[1],col);})
svg.node()
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.
