Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
canvas = DOM.canvas(width, 460)
regl.frame(() => {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
});
drawTriangle();
})
drawTriangle = regl({
vert: `
precision mediump float;
uniform float tick;
attribute vec2 position;
attribute vec3 color;
varying vec3 fcolor;
void main () {
fcolor = color;
float scale = cos(0.01 * tick);
gl_Position = vec4(scale * position, 0, 1);
}
`,
frag: `
precision mediump float;
varying vec3 fcolor;
void main () {
gl_FragColor = vec4(sqrt(fcolor), 1);
}
`,
attributes: {
position: [
[1, 0],
[0, 1],
[-1, -1]
],
color: [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
},
// regl.context('tick')은 현재 렌더링된 프레임의 수를 반환 (prop도 되고 context 도 됨)
uniforms: {
tick: regl.context('tick')
},
count: 3
})
regl = (await import("https://cdn.skypack.dev/regl@2")).default({ 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.
