Computer Graphics & Visualization @ufrj.br
viewof tam = Inputs.range([100,300])
viewof cor = Inputs.color({value:"#ffff00"})
desenho = {
let r = (tam / (0.5*Math.sqrt(2)+1));
let x = 100+2*tam - r;
let y = 100 + r;
let circulos = "";
for (let i = 0; i < 200; i += 30) {
circulos += `<circle r=10 cx=200 cy=${i+100} />`
}
return html`<svg width=600 height=400 style="border:1px solid gray">
<rect x=100 y=100 width=${2*tam} height=${2*tam} fill=cyan />
<circle cx=${x} cy=${y} r=${r} fill=${cor} />
${circulos}
<line x1=100 x2=${100+2*tam} y1=100 y2=${100+2*tam} stroke="black" stroke-width="1"/>
</svg>`
}
viewof animar = Inputs.toggle({ label: "animar" })
{
if (animar) {
let r = desenho.querySelector("rect");
for (let ang = 0; ; ang += 0.1) {
let x = Math.sin(ang) * 50 + 100;
r.setAttribute("x", x);
yield x;
}
}
}
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.
