I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
Jan 27, 2022
10 forks
2 stars
{
const width = 600,
height = 300,
maxR = 50;
const ctx = DOM.context2d(width, height);
for (let i = 0; i < 20; i++) {
// block scope
const x = Math.random() * width,
y = Math.random() * height,
r = Math.random() * maxR;
ctx.moveTo(x + r, y);
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.stroke();
}
return ctx.canvas;
}
{
const width = 600,
height = 300,
maxR = 50;
const genElement = function () {
return {
x: Math.random() * width,
y: Math.random() * height,
r: Math.random() * maxR
};
};
const myData = Array.from({ length: 20 }).map(genElement);
return vl
.markPoint()
.data(myData)
.encode(vl.x().fieldQ("x"), vl.y().fieldQ("y"), vl.size().fieldQ("r"))
.width(width)
.height(height)
.render();
}
html`
<p>I'm a paragraph with <strong> bold</strong> thoughts</p>
<button>I'm a button</button>
`
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.
