Public
Edited
Mar 4, 2023
plt=Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
{
// Plot.plot return the svg element,
//after plot is shown, get the class by ".className.baseVal"
let svg=d3.select("."+plt.className.baseVal)
svg.append('text').attr('x',300).attr('y',30).text('welcome')
}
P5 = require('https://unpkg.com/p5@0.6.0/lib/p5.js')
p5plot=p5(s => {
let i=100;
let width=400;
s.setup = function() {
s.createCanvas(width, 320);
s.fill('#DC3F74');
s.arc(75, 75, 50, 50, 0, Math.PI*2);
d3_draw.apply(this)
};
s.draw=()=>{
s.text(new Date(),10,10)
//draw is called repeatly,and will erase the content.
//use noloop() to stop
s.noloop()
}
s.mousePressed = s.mouseDragged = function() {
s.circle(s.mouseX, s.mouseY, 20 * 2);
};
})
function d3_draw(){
//sketch object has canvas property.
const canvas =this.canvas
const ctx = canvas.getContext('2d')
ctx.strokeRect(50, 50, 50, 50);
return canvas
}
p5plot.children[0].id
btn=p5(s => {
let width=600,height=400
s.setup = function() {
s.createCanvas(width, height);
s.fill('#DC3F74');
let button=s.createButton('press')
button.mousePressed(drawPoints)
};
function drawPoints() {
s.fill('#DC3F74');
let margin={left:30,right:30,top:30,bottom:30}
let data=[{x:1,y:8},{x:2,y:3},{x:3,y:2},{x:4,y:6},{x:5,y:7}]
let X=d3.scaleLinear().domain(d3.extent(data,d=>d.x)).range([0,width*0.9/2])
let Y=d3.scaleLinear().domain(d3.extent(data,d=>d.y)).range([height*0.9/2,0])
data.forEach(d=>{
s.rect(margin.left+X(d.x),margin.top+Y(d.y),30,height/2-Y(d.y))
s.text(d.y,margin.left+X(d.x)+10,margin.top+Y(d.y)-10)
})
}
})
d3.range(1000).fo
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.
