drawCountry = gl.regl({
vert: `
precision mediump float;
attribute vec3 position;
uniform mat4 model, view, projection;
void main () {
gl_Position = projection * view * model * vec4(position, 1);
}
`,
frag: `
precision mediump float;
void main () {
gl_FragColor = vec4(0, 0, 0, 1);
}
`,
attributes: {
position: gl.regl.prop("position")
},
uniforms: {
model: gl.regl.prop("model"),
},
elements: gl.regl.prop("elements"),
})
setupCamera = gl.regl({
context: {
projection: (context, props) =>
mat4.perspective(
[],
Math.PI / 4,
context.viewportWidth / context.viewportHeight,
0.01,
0.92 * Math.sqrt(Math.pow(3 * Math.cos(props.time), 2) + Math.pow(3 * Math.sin(props.time), 2)),
),
view: (context, props) =>
mat4.lookAt(
[],
[
3 * Math.cos(props.time),
3 * Math.sin(props.time),
0,
],
[0, 0, 0],
[0, 0, 1],
)
},
uniforms: {
view: gl.regl.context('view'),
projection: gl.regl.context('projection')
}
})
function draw(time) {
gl.regl.clear({
color: [1, 1, 1, 1],
depth: 1,
})
setupCamera({ time }, () => {
const model = mat4.identity([])
const { position, elements } = features
drawCountry({
model,
position,
elements
})
// drawGraticule(graticule.map(points => ({
// model,
// position: points,
// count: points.length,
// })))
})
}
draw(now / 2000)
function polarToCartesian(lon0, lat0, R) {
const lat = lat0 * Math.PI / 180
const lon = lon0 * Math.PI / 180
const x = R * Math.cos(lat) * Math.cos(lon)
const y = R * Math.cos(lat) * Math.sin(lon)
const z = R * Math.sin(lat)
return [x, y, z];
}
drawGraticule = gl.regl({
vert: `
precision mediump float;
attribute vec3 position;
uniform mat4 model, view, projection;
void main () {
gl_Position = projection * view * model * vec4(position, 1);
}
`,
frag: `
precision mediump float;
void main () {
gl_FragColor = vec4(0, 0, 0, 0.1);
}
`,
attributes: {
position: gl.regl.prop("position")
},
uniforms: {
model: gl.regl.prop("model"),
view: gl.regl.context('view'),
projection: gl.regl.context('projection'),
},
primitive: 'line strip',
count: gl.regl.prop("count"),
})
countries = {
const world = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json")
.then(res => res.json())
return topojson.feature(world, world.objects.countries)
}
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.
