Full Stack Software Engineer at Alteryx in Boston, MA
Published
Edited
Dec 14, 2019
{
// const width = 300;
const height = width;
const context = DOM.context2d(width, height);
context.fillStyle = "black";
context.fillRect(0, 0, width, height);
context.beginPath()
const radius = 20;
const padding = 2;
const offset = radius;
for (let j = 0 ; j < 30 ; j++) {
for (let i = 0; i < 30; i++){
const x = i*2*radius + j%2*radius + Math.random()*radius
const y = j*2*radius + j%2*radius + Math.random()*radius
context.moveTo(x, y)
context.arc(x,y,radius-padding,0,2*Math.PI);
}
}
context.clip();
context.beginPath()
for (let j = 0 ; j < 30 ; j++) {
for (let i = 0; i < 30; i++){
const x = i*2*radius + offset + j%2*10 + Math.random()*radius
const y = j*2*radius + offset + Math.random()*radius
context.moveTo(x, y)
context.arc(x,y,radius-padding,0,2*Math.PI);
}
}
context.fillStyle = "white"
context.fill()
return context.canvas
}
{
const width = 300;
const height = 400;
const context = DOM.context2d(width, height);
context.fillStyle = "black";
context.fillRect(0, 0, width, height);
for (let j = 0 ; j < 5 ; j++) {
context.beginPath()
for (let i = 0; i < 30; i++){
context.arc(i*40,(j*2)*40,18,0,2*Math.PI);
}
context.fillStyle = "white";
context.fill()
context.beginPath()
for (let i = 0; i < 30; i++){
context.arc(i*40+20,(j*2 + 1)*40,18,0,2*Math.PI);
}
context.fill()
}
return context.canvas
}
{
const width = 300;
const height = 400;
const context = DOM.context2d(width, height);
context.beginPath()
context.moveTo(60, 60)
context.arc( 60, 60, 40, 0, 2*Math.PI)
context.moveTo(140, 60)
context.arc(140, 60, 40, 0, 2*Math.PI)
context.moveTo(60, 150)
context.arc( 60, 150, 40, 0, 2*Math.PI)
context.clip();
context.beginPath()
context.arc(80, 80, 100, 0, 2*Math.PI)
// context.arc(160, 80, 40, 0, 2*Math.PI)
context.fillStyle = "red"
context.fill()
return context.canvas
}
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.
