Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
videoElement = html`<video style="display: block; height: 150px;" crossorigin=anonymous controls autoplay muted loop>
<source src="https://observable-demo-misc.s3-us-west-1.amazonaws.com/videos/Australia_fires_smoke-1080p-opt-frames.mp4"/>
</video>`
html`<style>
input[type=button] {
font-size: 16px;
}
.legend {
text-align: center;
}
.legend svg {
margin: 0 auto -8px;
}
.legend svg:last-child {
margin-bottom: 0;
padding-bottom: 5px;
}
.legend text {
font-size: 12px;
font-weight: 500;
}
.legend .tick text {
font-size: 11px;
text-anchor: end;
}
.legend .tick:first-child text {
text-anchor: start;
}
.legend .tick line {
stroke: none;
}
</style>`
function aerosolLegend(title, c0, c1, c2, ticks) {
return legend({
color: d3.scaleSequential(
d3
.scaleLinear()
.domain([0, 0.5, 1])
.range([c0, c1, c2])
.interpolate(d3.interpolateHcl)
),
ticks: ticks ? 1 : 0,
tickSize: 0,
title,
tickFormat: d => (d ? "More" : "Less")
});
}
timeScale = d3.scaleLinear()
.domain([0, video.duration])
.range([new Date("2019-11-01T12:00:00Z"), new Date("2020-01-14T16:00:00Z")])
jumpToAustralia = {
aus;
if (this) {
mutable rotation = [4.3, -0.27];
viewof spin.input.checked = false;
viewof spin.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
return true;
}
time = {
while (true) {
yield timeScale(video.currentTime);
await Promises.tick(200);
}
}
formatTime = d3.timeFormat("%B %d, %Y")
spinner = {
spin;
if (viewof spin.input.checked) {
while (true) {
const [x, y] = mutable rotation;
yield (mutable rotation = [x - 0.003, y]);
}
}
}
restarter = {
restart;
video.currentTime = 0;
}
totalFrames = Math.ceil(video.duration * 30)
video = {
let resolve;
const promise = new Promise(_ => (resolve = _)).then(() => {
videoElement.play();
return videoElement;
});
videoElement.addEventListener("canplay", resolve);
return promise;
}
mutable rotation = [-10.1, 0.13]
w = Math.min(width, 720)
init = {
gl.useProgram(program);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(u_translate, viewof gl.width / 2, viewof gl.height / 2);
gl.uniform1f(u_scale, viewof gl.height / 2 - 1);
gl.viewport(0, 0, viewof gl.width, viewof gl.height);
}
videoWidth = 1920
videoHeight = 960
videoCanvas = {
const ctx = DOM.context2d(2048, 1024);
ctx.canvas.style.width = "1px";
while (true) {
ctx.drawImage(video, 0, 0, 2048, 1024);
yield ctx.canvas;
await Promises.delay(33.3);
}
}
draw = {
init;
gl.uniform2fv(u_rotate, rotation);
const tex = texture(videoCanvas);
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
invalidation.then(() => gl.deleteTexture(tex));
}
projection = d3.geoOrthographic().precision(0.1)
projection
function drag(projection) {
let x0, y0;
function dragstarted() {
x0 = d3.event.x;
y0 = d3.event.y;
}
function dragged() {
const dx = (d3.event.x - x0) / 500;
const dy = (d3.event.y - y0) / 500;
const [x, y] = mutable rotation;
mutable rotation = [x - dx, y + dy];
x0 = d3.event.x;
y0 = d3.event.y;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged);
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, `
precision highp float;
uniform sampler2D u_image;
uniform vec2 u_translate;
uniform float u_scale;
uniform vec2 u_rotate;
const float c_pi = 3.14159265358979323846264;
const float c_halfPi = c_pi * 0.5;
const float c_twoPi = c_pi * 2.0;
float cosphi0 = cos(u_rotate.y);
float sinphi0 = sin(u_rotate.y);
void main(void) {
float x = (gl_FragCoord.x - u_translate.x) / u_scale;
float y = (u_translate.y - gl_FragCoord.y) / u_scale;
// inverse orthographic projection
float rho = sqrt(x * x + y * y);
if (rho > 1.0) return;
float c = asin(rho);
float sinc = sin(c);
float cosc = cos(c);
float lambda = atan(x * sinc, rho * cosc);
float phi = asin(y * sinc / rho);
// inverse rotation
float cosphi = cos(phi);
float x1 = cos(lambda) * cosphi;
float y1 = sin(lambda) * cosphi;
float z1 = sin(phi);
lambda = atan(y1, x1 * cosphi0 + z1 * sinphi0) + u_rotate.x;
phi = asin(z1 * cosphi0 - x1 * sinphi0);
gl_FragColor = texture2D(u_image, vec2((lambda + c_pi) / c_twoPi, (phi + c_halfPi) / c_pi));
}
`);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, `
attribute vec2 a_vertex;
void main(void) {
gl_Position = vec4(a_vertex, 0.0, 1.0);
}
`);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
vertexBuffer = {
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);
return buffer;
}
function texture(canvas) {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
return texture;
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
return program;
}
a_vertex = gl.getAttribLocation(program, "a_vertex")
u_translate = gl.getUniformLocation(program, "u_translate")
u_scale = gl.getUniformLocation(program, "u_scale")
u_rotate = gl.getUniformLocation(program, "u_rotate")
height = width
import { slider, button, checkbox } from "@jashkenas/inputs"
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.