Published
Edited
May 2, 2020
colorBy = ({
waves: `
precision highp float;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(cos((0.5-vUv.y)*30.0), 0.0, 0.0, 1.0);
}
`,
constant: `
precision highp float;
void main() {
gl_FragColor = vec4(0.6, 0.0, 0.0, 1.0);
}
`,
uv: `
precision highp float;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv, 0.0, 1.0);
}
`,
distance: `
precision highp float;
varying vec3 distanceAlongPath;
void main() {
gl_FragColor = vec4(distanceAlongPath.z, 0.0, 0.0, 1.0);
}
`,
dash: `
precision highp float;
varying vec3 distanceAlongPath;
void main() {
float dash = mod(distanceAlongPath.y, 0.1) / 0.1;
vec3 color = dash > 0.5 ? vec3(.4, .2, .1) : vec3(.6, .2, .1);
gl_FragColor = vec4(color, 1.0);
}
`,
dashTransparent: `
precision highp float;
varying vec3 distanceAlongPath;
void main() {
float dash = mod(distanceAlongPath.y, 0.1) / 0.1;
if(dash < 0.5) discard;
gl_FragColor = vec4(vec3(0.0), 1.0);
}
`
})
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.
