fps(particles)
map = {
const div = d3.select(html`<div>`);
const context = DOM.context2d(width, height);
const canvas = context.canvas;
const scale = width / mapWidth;
context.scale(scale, scale);
// div.append(() => wind);
div.append(() => canvas)
const path = d3.geoPath(projection);
// Add the map as an SVG overlay
div.style('position', 'relative')
.style('width', '100%')
.style('height', height + 'px')
.append(() => states)
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.selectAll("path.interior")
.style("fill", "none")
.style("stroke", "none");
const map = d3.select(states);
map.selectAll('path.nation')
.style('stroke', '#333')
map.selectAll("path.mesh")
.style("fill", "none")
.style("stroke", "#aaa");
// Put a dot on BWI
const bwi = [-76.6684, 39.1774];
map.append('path')
.attr('d', path({"type": "Point", "coordinates": bwi }))
.attr('fill', 'steelblue');
// Put a dot on Newark
const newark = [-74.1745, 40.6895];
map.append('path')
.attr('d', path({"type": "Point", "coordinates": newark }))
.attr('fill', 'steelblue');
// Add PIREPs
map.selectAll("path.pirep")
.data(pireps)
.join("path")
.classed('pirep', true)
.attr("x", (d, i) => i * 16)
.attr("d", d => path({"type": "Point", "coordinates": d}))
.attr('fill', d => colors[d[3]])
.attr('fill-opacity', 0.5)
.on('mouseover', function(d) { if (d[4]) mutable z = d[4]; d3.select(this).attr('stroke', 'black') })
.on('mouseout', function() { mutable z = "Mouse over the map for pilot reports"; d3.select(this).attr('stroke', null) })
invalidation.then(() => div.remove());
yield div.node();
}
mutable z = "Mouse over the map for pilot reports"
particles = {
restart
const canvas = d3.select(map).select('canvas').node();
const context = canvas.getContext('2d'); // DOM.context2d(width, height);
context.lineJoin = "round";
context.lineCap = "round";
const MAX_AGE = 25; // Each generation of particles lasts MAX_AGE milliseconds before disappearing
const N_GENERATIONS = 20; // Total duration of animation
const N = 150; // Total # of particles: N * N
const DURATION = N * N_GENERATIONS;
const scale = d3.scaleLinear().domain(extent).range([-2, 2]);
const path = d3.geoPath(projection, context);
// Initialize things with a circle on DC
context.clearRect(0, 0, mapWidth, mapHeight)
context.strokeStyle = "rgb(200,200,200)";
context.beginPath(), path({type: "Point", coordinates: dc}), context.stroke();
// Create a bunch of particles (n * n) on an almost uniform grid
let particles = [];
const n = N;
const eps = 1;
// const dx = canvas.width / n;
// const dy = canvas.height / n;
const dx = mapWidth / n;
const dy = mapHeight / n;
for (let i = 0; i < n + 1; i++) {
for (let j = 0; j < n + 1; j++) {
let x0 = (i + eps * (Math.random() - .5)) * dx; // uniform grid with a little jiggle
let y0 = (j + eps * (Math.random() - .5)) * dy; // ditto
particles.push({ x0: x0, y0: y0, x: x0, y: y0, age: Math.round(MAX_AGE * Math.random()) });
}
}
// Animate the vectors
let i = 0;
// while (i < DURATION) {
while (true) {
context.beginPath();
particles.forEach(advanceParticle);
context.stroke();
context.fillStyle = 'rgba(255,255,255,.05)';
context.fillRect(0, 0, mapWidth, mapHeight);
yield i++;
}
function advanceParticle(d) {
if (d.age++ > MAX_AGE) { d.x = d.x0; d.y = d.y0; d.age = 0; };
const coordinates = projection.invert([d.x, d.y]);
if (isNaN(coordinates[0]) | isNaN(coordinates[1])) return;
const u = bilinear(coordinates).velocity
context.moveTo(d.x, d.y)
d.x += scale(u[0]);
d.y -= scale(u[1]);
context.lineTo(d.x, d.y);
}
return particles
}
import {pireps, colors} from "4469272e75aefcc8"
bilinear(dc)
bilinear([0, 90]) // [lon, lat] = [0, 90] should return {i: 0, j: 0}
bilinear([-180, 0]) // [lon, lat] = [-180, 0] should return {i: 90, j: 180}
// Bilinear interpolation from 1-degree global grid to an arbitrary loc = [lon, lat]
// data[0,0] is [0 E, 90 N]
// lat = 90 - (i + y)
// lon += (lon < 0) ? 360 : 0
// lon = j + x
bilinear = function(loc) {
let lon = loc[0] + ((loc[0] < 0) ? 360 : 0);
let lat = loc[1];
let i = Math.floor(90 - lat);
let j = Math.floor(lon);
let y = 90 - lat - i;
let x = lon - j;
// define: f(x,y) = a + b*y + c*x + d*x*y
//
// then a = f(0,0)
// b = f(0,1) - a
// c = f(1,0) - a
// d = f(1,1) - a - b - c
//
// where f(x,y) is related to data[i][j] as follows:
//
// f(0,0) = data[i][j] -- x -- data[i][j+1] = f(1,0)
// |
// y
// |
// f(0,1) = data[i+1][j] ---- data[i+1][j+1] = f(1,1)
let ip1 = (i < 180) ? i + 1 : i;
let jp1 = (j < 359) ? j + 1 : j;
const velocity = new Array(2);
for (let k = 0; k < 2; k++) {
let a = data[k][i][j];
let b = data[k][ip1][j] - a;
let c = data[k][i][jp1] - a;
let d = data[k][ip1][jp1] - a - b - c;
velocity[k] = a + (b * y) + (c * x) + (d * x * y);
}
return { i: i, j: j, x: x, y: y, lon: lon, lat: lat, loc0: loc[0], loc1: loc[1], velocity}
}
extent = d3.extent(d3.merge(d3.merge(data)));
data = FileAttachment("data_20200111_0000.json").json()
// data = FileAttachment("data_LAND_velocity.json").json() // USE THIS FOR TESTING
mapWidth = 960
mapHeight = 600
// WARNING: make sure this is consistent with the shared map
projection = d3.geoAlbers().scale(1280).translate([mapWidth / 2, mapHeight / 2])
// import {viewof point } from "@pbogden/my-u-s-map-canvas"
import { states, d3 } from "d7ee2573091b5d13"
import {fps} from '@zzzev/fps-counter'
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.