30:T6f5,map = { const div = d3.select(html`

`); 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(); }31:T82c,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 }32:T4ca,// 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} }33:[{"id":"d97e9c7b9b3f1ca42fb32b36a37aa4d3ce1c6eceb136e3b37f01a0686bd1533f450ef755cbb46451a472d0d0a9bbe6532b6eb3054225be44c0fc44d778e34355","href":"https://static.observableusercontent.com/files/d97e9c7b9b3f1ca42fb32b36a37aa4d3ce1c6eceb136e3b37f01a0686bd1533f450ef755cbb46451a472d0d0a9bbe6532b6eb3054225be44c0fc44d778e34355","name":"data_20200111_0000.json","type":"application/json","lastModified":1584705739844.454,"size":913504}] 2e:{"title":"Wind + PIREP","cells":[{"id":0,"value":"md`# Wind + PIREP\n\n* This has better wind performance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"viewof restart = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"html`

${z}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"fps(particles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"mutable z = \"Mouse over the map for pilot reports\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`### Wind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"import { wind } from \"ebfa7e41b9f79697\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"import {pireps, colors} from \"4469272e75aefcc8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"height = Math.round(width * 600 / 960);","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"dc = [-77.0369, 38.9072]","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"bilinear(dc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"bilinear([0, 90]) // [lon, lat] = [0, 90] should return {i: 0, j: 0}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"bilinear([-180, 0]) // [lon, lat] = [-180, 0] should return {i: 90, j: 180}","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"extent = d3.extent(d3.merge(d3.merge(data)));","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"data = FileAttachment(\"data_20200111_0000.json\").json()\n// data = FileAttachment(\"data_LAND_velocity.json\").json() // USE THIS FOR TESTING","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"mapWidth = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"mapHeight = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"// WARNING: make sure this is consistent with the shared map\nprojection = d3.geoAlbers().scale(1280).translate([mapWidth / 2, mapHeight / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"// import {viewof point } from \"@pbogden/my-u-s-map-canvas\"\nimport { states, d3 } from \"d7ee2573091b5d13\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"import {fps} from '@zzzev/fps-counter'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}