NOAA's National Weather Service Forecast Data

31:T6254,xmlString = ` NOAA's National Weather Service Forecast Data meteorological forecast

2022-01-10T16:58:22Z

https://graphical.weather.gov/xml/

Meteorological Development LaboratoryProduct Generation Branch

http://www.nws.noaa.gov/disclaimer.html https://www.weather.gov/

https://www.weather.gov/logorequest

https://www.weather.gov/contact

point1

point2

point3

point4

point5

point6

point7

point8

point9

https://forecast-v3.weather.gov/point/41.42,-74.16 https://forecast-v3.weather.gov/point/41.55,-74.13 https://forecast-v3.weather.gov/point/41.68,-74.11 https://forecast-v3.weather.gov/point/41.40,-73.99 https://forecast-v3.weather.gov/point/41.53,-73.96 https://forecast-v3.weather.gov/point/41.66,-73.93 https://forecast-v3.weather.gov/point/41.38,-73.82 https://forecast-v3.weather.gov/point/41.51,-73.79 https://forecast-v3.weather.gov/point/41.64,-73.76

k-p3h-n35-1

2022-01-10T13:00:00-05:00

2022-01-10T16:00:00-05:00

2022-01-10T19:00:00-05:00

2022-01-10T22:00:00-05:00

2022-01-11T01:00:00-05:00

2022-01-11T04:00:00-05:00

2022-01-11T07:00:00-05:00

2022-01-11T10:00:00-05:00

2022-01-11T13:00:00-05:00

2022-01-11T16:00:00-05:00

2022-01-11T19:00:00-05:00

2022-01-11T22:00:00-05:00

2022-01-12T01:00:00-05:00

2022-01-12T04:00:00-05:00

2022-01-12T07:00:00-05:00

2022-01-12T10:00:00-05:00

2022-01-12T13:00:00-05:00

2022-01-12T16:00:00-05:00

2022-01-12T19:00:00-05:00

2022-01-13T01:00:00-05:00

2022-01-13T07:00:00-05:00

2022-01-13T13:00:00-05:00

2022-01-13T19:00:00-05:00

2022-01-14T01:00:00-05:00

2022-01-14T07:00:00-05:00

2022-01-14T13:00:00-05:00

2022-01-14T19:00:00-05:00

2022-01-15T01:00:00-05:00

2022-01-15T07:00:00-05:00

2022-01-15T13:00:00-05:00

2022-01-15T19:00:00-05:00

2022-01-16T01:00:00-05:00

2022-01-16T07:00:00-05:00

2022-01-16T13:00:00-05:00

2022-01-16T19:00:00-05:00

Wind Speed 11 10 8 9 11 10 10 10 9 7 4 1 3 5 6 10 9 9 4 3 3 5 3 5 5 7 6 6 4 5 5 6 6 7 6

Wind Direction 290 280 280 280 300 310 310 320 320 310 310 210 180 200 210 210 220 220 220 230 250 290 320 0 0 0 10 10 20 30 20 20 10 10 0

Wind Speed 12 11 9 10 12 11 11 10 8 6 5 2 2 5 7 10 10 9 5 3 2 5 3 5 6 7 6 6 4 5 5 6 6 8 6

Wind Direction 290 280 280 280 300 310 310 330 320 310 320 200 190 200 210 210 220 210 210 230 240 280 330 0 10 10 10 10 20 30 20 20 10 10 0

Wind Speed 10 8 7 9 9 10 7 9 7 5 2 3 3 6 8 9 10 8 5 4 2 3 2 4 5 7 7 7 6 5 5 5 6 7 5

Wind Direction 290 280 270 280 300 310 330 330 330 320 260 210 190 200 200 210 210 210 210 230 240 260 340 0 10 10 10 10 20 20 20 20 10 0 350

Wind Speed 12 10 9 10 12 13 12 12 10 7 6 2 3 6 7 11 10 9 6 5 4 5 4 7 9 9 9 9 6 6 6 8 8 9 9

Wind Direction 300 290 290 290 310 310 320 320 320 320 320 210 180 190 200 210 220 210 210 230 250 290 340 0 0 0 0 0 10 20 20 20 10 0 350

Wind Speed 10 9 7 9 10 9 7 9 8 6 2 2 3 6 6 9 10 7 5 3 2 4 2 5 5 8 8 7 6 5 5 5 6 7 6

Wind Direction 290 280 270 280 300 320 330 330 320 320 270 210 190 190 200 210 210 210 210 220 240 290 10 0 0 10 10 0 10 10 30 20 10 0 0

Wind Speed 10 8 6 8 9 9 7 9 7 5 2 2 3 5 6 9 9 6 4 2 2 3 2 4 5 8 7 7 5 5 4 5 5 7 5

Wind Direction 290 270 270 280 300 320 330 330 330 320 190 180 160 190 200 210 210 210 210 210 230 260 10 0 10 10 10 0 10 10 30 20 10 0 0

Wind Speed 11 9 7 9 10 10 11 11 10 6 4 2 3 4 6 10 10 9 5 4 3 5 4 6 7 9 8 7 6 6 4 6 7 9 8

Wind Direction 290 280 280 290 300 310 320 330 320 320 320 280 180 190 200 210 220 220 220 230 260 290 350 350 0 350 350 0 0 10 30 20 10 0 350

Wind Speed 11 10 9 10 12 11 10 11 10 8 4 4 5 8 9 12 12 9 7 5 3 4 4 7 8 9 10 10 7 7 7 8 8 9 9

Wind Direction 290 280 280 290 300 320 330 320 330 320 310 220 190 190 200 210 210 210 210 220 250 280 10 0 0 360 360 0 10 10 30 30 30 10 350

Wind Speed 10 9 8 10 10 10 8 11 9 6 3 3 3 6 7 10 11 7 5 3 2 4 2 5 5 8 8 7 6 6 5 6 6 8 6

Wind Direction 280 270 280 280 300 310 330 320 320 320 0 170 170 190 200 200 210 210 210 210 230 280 20 0 0 360 0 0 10 10 30 40 30 10 0 `32:T406,function domToMap(node) { if (node.children.length === 0) return node.innerHTML; const counts = childCounts(node); const map = new Map(); for (const child of node.children) { const { localName } = child; //console.log("child", child.localName, { child }); // const lat = child.attributes.latitude.nodeValue; // const lng = child.attributes.longitude.nodeValue; // Had to modify our XML parser a bit to look in the right spot // for the latitude and longitude attributes on a point const lat = +child.getAttribute("latitude"); const lng = +child.getAttribute("longitude"); const latlng = [lat, lng]; if (counts[localName] > 1) { const array = map.get(localName) || []; array.push(domToMap(child)); if (localName === "point") { map.set(localName, latlng); } else map.set(localName, array); } else { if (localName === "point") { map.set(localName, latlng); } else map.set(localName, domToMap(child)); } } return map; }33:T526,{ let ctx = DOM.context2d(mapWidth, mapHeight); ctx.canvas.width = mapWidth; ctx.canvas.height = mapHeight; ctx.canvas.style.width = mapWidth + "px"; ctx.canvas.style.height = mapHeight + "px"; let projection = d3 .geoAlbersUsa() .fitSize([mapWidth - 50, mapHeight - 50], nationShape); let path = d3.geoPath(projection).context(ctx); ctx.fillStyle = "white"; ctx.fillRect(0, 0, mapWidth, mapHeight); let r = 1; ctx.strokeStyle = "#111"; ctx.lineWidth = 2; ctx.globalAlpha = 1; // Draw nation ctx.beginPath(); path(nationShape); ctx.stroke(); // Draw counties countyShapes.forEach((d) => { ctx.strokeStyle = "#ddd"; ctx.lineWidth = 0.5; ctx.globalAlpha = 1; ctx.beginPath(); path(d); ctx.stroke(); const fillColor = d3.color("red"); //fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); }); // Draw wind points windPoints.forEach((d) => { const fillColor = d3.color("red"); // fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); let c = projection([d.latlng[1], d.latlng[0]]); // latlng but backwards if (!c) return false; ctx.fillRect(c[0], c[1], 2, 2); }); ctx.fillStyle = "#111"; ctx.beginPath(); ctx.font = "24px Helvetica"; ctx.fill(); return ctx.canvas; }34:T52a,{ let ctx = DOM.context2d(mapWidth, mapHeight); ctx.canvas.width = mapWidth; ctx.canvas.height = mapHeight; ctx.canvas.style.width = mapWidth + "px"; ctx.canvas.style.height = mapHeight + "px"; let projection = d3 .geoAlbersUsa() .fitSize([mapWidth - 50, mapHeight - 50], stateShapes[32]); let path = d3.geoPath(projection).context(ctx); ctx.fillStyle = "white"; ctx.fillRect(0, 0, mapWidth, mapHeight); let r = 1; ctx.strokeStyle = "#111"; ctx.lineWidth = 2; ctx.globalAlpha = 1; // Draw nation ctx.beginPath(); path(nationShape); ctx.stroke(); // Draw counties countyShapes.forEach((d) => { ctx.strokeStyle = "#ddd"; ctx.lineWidth = 0.5; ctx.globalAlpha = 1; ctx.beginPath(); path(d); ctx.stroke(); const fillColor = d3.color("red"); //fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); }); // Draw wind points windPoints.forEach((d) => { const fillColor = d3.color("red"); // fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); let c = projection([d.latlng[1], d.latlng[0]]); // latlng but backwards if (!c) return false; ctx.fillRect(c[0], c[1], 2, 2); }); ctx.fillStyle = "#111"; ctx.beginPath(); ctx.font = "24px Helvetica"; ctx.fill(); return ctx.canvas; }35:Tc14,{ let ctx = DOM.context2d(mapWidth, mapHeight); ctx.canvas.width = mapWidth * window.devicePixelRatio; ctx.canvas.height = mapHeight * window.devicePixelRatio; // ctx.canvas.width = mapWidth; // ctx.canvas.height = mapHeight; ctx.canvas.style.width = mapWidth + "px"; ctx.canvas.style.height = mapHeight + "px"; // Arrow helpers function draw(x, y, origin) { var endPoint = { x, y }, arrowData = getArrowData([origin, endPoint]); arrowPath([origin, endPoint]); arrowPath([endPoint, arrowData.left]); arrowPath([endPoint, arrowData.right]); } function arrowPath(data) { ctx.beginPath(); ctx.moveTo(data[0].x, data[0].y); data.slice(1).forEach(function (d) { ctx.lineTo(d.x, d.y); }); ctx.stroke(); ctx.closePath(); } const pointShape = turf.feature( turf.multiPoint( windPoints.map((p) => { return p.latlng; }) ) ); console.log({ nationShape }, { pointShape }); let projection = d3 .geoAlbersUsa() .fitSize([ctx.canvas.width - 50, ctx.canvas.height - 50], stateShapes[32]); let path = d3.geoPath(projection).context(ctx); ctx.fillStyle = "white"; ctx.fillRect(0, 0, mapWidth, mapHeight); // let r = 0.5; let r = 1; ctx.strokeStyle = "#111"; ctx.lineWidth = 2; ctx.globalAlpha = 1; // Draw nation ctx.beginPath(); path(nationShape); ctx.stroke(); // Draw counties countyShapes.forEach((d) => { ctx.strokeStyle = "#ddd"; ctx.lineWidth = 0.5; ctx.globalAlpha = 1; ctx.beginPath(); path(d); ctx.stroke(); const fillColor = d3.color("red"); //fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); // For filling a county with dots for dot-density viz /* if (d.points && d.points.features) { d.points.features.forEach((feature) => { const { geometry: { coordinates: [x, y] } } = feature; let c = projection([x, y]); if (!c) return; ctx.fillRect(c[0], c[1], r, r); }); } */ }); ctx.font = "12px Helvetica"; // Draw wind points // windPoints.forEach((d) => { // real data fakePointData.forEach((d) => { const fillColor = d3.color("red"); // fillColor.opacity = 0.25; ctx.fillStyle = fillColor.toString(); ctx.strokeStyle = fillColor.toString(); let c = projection([d.latlng[1], d.latlng[0]]); // latlng but backwards if (!c) return false; // Draw a little box at the wind point origin // ctx.fillRect(c[0], c[1], 2, 2); const origin = { x: c[0], y: c[1] }; const a = truncateVector( [ origin, { x: c[0] + d.windSpeed * windMag, y: c[1] + d.windSpeed * windMag } ], 0.8 )[1]; draw(a.x, a.y, origin); // Label the wind speed ctx.fillText(d.windSpeed, c[0], c[1] - 1); // Label the wind direction at the end of the line // ctx.font = "9px Helvetica"; // ctx.fillStyle = "black"; //ctx.fillText(d.windDirection, c[0] + dx + 1, c[1] - dy + 1); }); return ctx.canvas; }36:T48a,init = { resetSim; config.startTime = false; config.ticks = 0; cancelAnimationFrame(config.animReqId); const nodesToAdd = []; for (let i = 0; i < windNodeCount; i++) { const fakePoint = JSON.parse(JSON.stringify(chance.pickone(fakePointData))); const projectedPoint = projection([ fakePoint.latlng[1], fakePoint.latlng[0] ]); fakePoint.id = Math.random(); fakePoint.delay = (i - 1) * 0.1 * delayBetweenNodes; fakePoint.x = projectedPoint[0] + chance.floating({ min: -offsetPx, max: offsetPx }); fakePoint.y = projectedPoint[1] + chance.floating({ min: -offsetPx, max: offsetPx }); if (chance.bool()) fakePoint.targetX = fakePoint.x + chance.integer({ min: -100, max: 800 }); if (chance.bool()) fakePoint.targetY = fakePoint.y + chance.integer({ min: 100, max: 800 }); fakePoint.r = windNodeR; nodesToAdd.push(fakePoint); } forceSim.nodes([]).stop(); // for (let i = 0; i < 130; i++) { // forceSim.tick(); // } renderNodes(forceMap.getContext("2d")); config.animReqId = requestAnimationFrame((t) => animate(t, nodesToAdd)); return nodesToAdd; }37:[{"id":"930005281439b378abab57c9b0502baa552810607d0bc6055d4b3b4c1aea63d0b9b1332ca61147416a19dbbb78ad5f3834cd2d376441df5b17c2a526c54fae6e","href":"https://static.observableusercontent.com/files/930005281439b378abab57c9b0502baa552810607d0bc6055d4b3b4c1aea63d0b9b1332ca61147416a19dbbb78ad5f3834cd2d376441df5b17c2a526c54fae6e","name":"weather_sample2.xml","type":"application/xml","lastModified":1641829769808.296,"size":64365}] 2f:{"title":"EJ Fox + Earthrise Wind Visualization","cells":[{"id":0,"value":"# EJ Fox + Earthrise Wind Visualization ","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"## Getting Wind Data\n\nThe NDFD has a [web interface](https://graphical.weather.gov/xml/sample_products/browser_interface/ndfdXML.htm) that lets you play with different parameters, including wind speed and direction, for a particular latitude and longitude. \n\nUnfortunately the API only returns XML in response to SOAP requests, which makes it kind of hard to work with through Observable.\n\nSo to start, we are just going to save off a sample query off as a static file and upload it here to explore. \n\nIn the future, these requests could be made by a proxy server or automated for our specified points through GitHub or deploy actions. \n\nWhen making the request, we ask for the variables `Wind Speed` and `Wind Direction` for `NDFD Data For Subgrid (Central Point)` which lets us specify a point to get subgrid data back for.\n\nWe can also set `Distance Lat` and `Distance Lon` to specify how big the grid is. \n\nWe can also set the `Resolution` to determine how many subgrid points to retrieve.","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"Web interface: ","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"Example query URL: \n\nExample query saved as XML: ","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"FileAttachment(\"weather_sample2.xml\").xml()","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"Except that Observable doesn't want to parse the XML because it uses a custom schema / XML derivative. So we will just parse it ourselves from a string for now.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"timeIndex = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"locationData = xmlToMap(xmlString)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"parser = new DOMParser()","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"xmlToMap = (src) => domToMap(parser.parseFromString(src, \"application/xml\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"childCounts = (node) => {\n const counts = {};\n for (const { localName } of node.children)\n counts[localName] = (counts[localName] || 0) + 1;\n return counts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"Now we get back a list of locations:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"pointData = locationData.get(\"dwml\").get(\"data\").get(\"location\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"Which we can then simplify a bit:","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"windData = locationData.get(\"dwml\").get(\"data\").get(\"parameters\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"windPoints = pointData.map((p, i) => {\n return {\n id: p.get(\"location-key\"),\n latlng: p.get(\"point\"),\n windSpeed: windData[i].get(\"wind-speed\").get(\"value\")[timeIndex], // Wind speed in knots\n windDirection: windData[i].get(\"direction\").get(\"value\")[timeIndex] // Wind direction bearing in degrees\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"fakePointData = pointData.map((p, i) => {\n return {\n //id: p.get(\"location-key\"),\n latlng: p.get(\"point\"),\n windSpeed: chance.integer({ min: 2, max: 50 }), // Randomized wind speed in knots\n windDirection: chance.integer({ min: 0, max: 360 }) // Randomized wind direction bearing in degrees\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"Now we have all of the point data converted from the XML to a JSON format that is more usable. Let's pull in some topojson for the US so that we can make a map in canvas. Canvas is more performant that SVG, particularly for animation like the wind particles we want to do later.","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"usShapes = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"nationShape = topojson.feature(usShapes, usShapes.objects.nation).features[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"stateShapes = topojson\n .feature(usShapes, usShapes.objects.states)\n .features.sort((a, b) => +a.id - +b.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"countyShapes = topojson\n .feature(usShapes, usShapes.objects.counties)\n .features.sort((a, b) => +a.id - +b.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"mapWidth = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"mapHeight = mapWidth * 0.72","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"## Hello Wind Map\nNow we have a basic map which shows the points that were provided for our wind data as red blocks. ","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"---\n\n## Visualizing Wind Data\n\nBut instead of just red dots, what if we showed arrows that visualized the strength and directionality of the wind as provided in our data?","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"viewof windMag = slider({\n value: 2,\n min: 0,\n max: 10,\n step: 1,\n description: \"Modify arrow size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"#### Helpers to make arrows \nFrom ","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"function truncateVector(data, c) {\n var x0 = data[0].x, y0 = data[0].y,\n x1 = data[1].x, y1 = data[1].y,\n endPoint = {\n x: x0 + (x1-x0)*c,\n y: y0 + (y1-y0)*c\n };\n return [data[0], endPoint];\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"function getArrowData(data) {\n let arrowLength = 10;\n var data = data.slice(-2),\n x0 = data[0].x,\n y0 = data[0].y,\n x1 = data[1].x,\n y1 = data[1].y,\n t = Math.atan2(y1 - y0, x1 - x0),\n dt = Math.PI * (3 / 4);\n return {\n right: {\n x: arrowLength * Math.cos(t + dt) + x1,\n y: arrowLength * Math.sin(t + dt) + y1\n },\n left: {\n x: arrowLength * Math.cos(t - dt) + x1,\n y: arrowLength * Math.sin(t - dt) + y1\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"## Canvas map + Force Layout\n\nFor our final product, it would be nice to have an animation with particles that represent the pollution from an origin point being spread by the wind. One way to accomplish this is with a force layout.","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"forceSim = {\n return (\n d3\n .forceSimulation([])\n //.force(\"charge\", d3.forceManyBody().strength(0.1))\n // .force(\n // \"center\",\n // d3.forceCenter(mapWidth / 2, mapHeight / 2).strength(0.000001)\n // )\n .force(\n \"collision\",\n d3\n .forceCollide()\n .radius((d) => d.r * 2.5)\n .strength(collisionStrength)\n )\n .force(\n \"x\",\n d3\n .forceX()\n .strength(targetForceStrength)\n .x((d) => d.targetX)\n )\n .force(\n \"y\",\n d3\n .forceY()\n .strength(targetForceStrength)\n .y((d) => d.targetY)\n )\n .alpha(0.02)\n .alphaDecay(alphaDecay)\n .alphaMin(0.025)\n .velocityDecay(0.6)\n .stop()\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"targetForceStrength = 0.005","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"viewof collisionStrength = slider({\n value: 0.25,\n min: 0,\n max: 10,\n step: 0.25,\n description: \"Strength of collision on nodes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"viewof duration = slider({\n value: 10,\n min: 1,\n max: 21,\n step: 1,\n description: \"Animation duration (in seconds)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"viewof windNodeCount = slider({\n value: 1000,\n min: 4,\n max: 10000,\n step: 100,\n description: \"Number of wind nodes to simulate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"viewof windNodeR = slider({\n value: 1,\n min: 0.1,\n max: 20,\n step: 0.5,\n description: \"Radius of simulated wind nodes (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"viewof bgOpacity = slider({\n value: 0.01,\n min: 0,\n max: 0.4,\n step: 0.01,\n description: \"Background opacity on animation render (affects trail length)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"viewof nodeOpacity = slider({\n min: 0.01,\n max: 0.5,\n step: 0.01,\n value: 0.2,\n description: \"Node opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"viewof alphaDecay = slider({\n value: 0.6,\n min: 0.001,\n max: 1,\n description: \"Alpha decay - how slowly the simulation moves\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"viewof offsetPx = slider({\n value: 2,\n min: 0,\n max: 20,\n step: 1,\n description:\n \"The amount of random jitter (in px) to add to wind data starting locations\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof delayBetweenNodes = slider({\n value: 250,\n min: 1,\n max: 1000,\n step: 10,\n description: \"The time in ms between adding nodes to the simulation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"viewof resetSim = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"forceMap = {\n resetSim;\n const canvas = d3\n .create(\"canvas\")\n .attr(\"width\", mapWidth)\n .attr(\"height\", mapHeight)\n .node();\n canvas.width = mapWidth;\n canvas.height = mapHeight;\n let ctx = canvas.getContext(\"2d\");\n scaleCanvas(canvas, ctx);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"viewof maxTicks = slider({\n min: 100,\n max: 5000,\n step: 100,\n value: 1000,\n description: \"Maximum number of ticks to run the visualization\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"## Up next: demographic data\n\nBecause the demographic data is so large, this is probably a good point to split into a [second notebook](https://observablehq.com/d/ac5313d729ad01e7) that focuses specifically on visualizing demographic data for New York, as a prototype.","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"projection = d3.geoAlbersUsa().fitSize([mapWidth, mapHeight], stateShapes[32])","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"function animate(time, nodesToAdd) {\n console.log(\"animate\", time);\n if (!config.startTime) {\n config.startTime = time;\n }\n\n const progress = time - config.startTime;\n const nodes = renderNodes(forceMap.getContext(\"2d\"));\n const newNodes = [];\n\n for (let i = 0; i < nodesToAdd.length; i++) {\n const node = nodesToAdd[i];\n if (node.delay < progress) {\n newNodes.push(node);\n nodesToAdd.splice(i, 1);\n i--;\n }\n }\n\n forceSim.nodes(nodes.concat(newNodes)).alpha(1).tick();\n\n config.ticks++;\n\n if (config.ticks < maxTicks || nodesToAdd.length > 0) {\n config.animReqId = requestAnimationFrame((t) => animate(t, nodesToAdd));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"function renderNodes(ctx) {\n let path = d3.geoPath(projection).context(ctx);\n //console.log(\"drawing\");\n ctx.fillStyle = `rgba(255, 255, 255, ${bgOpacity})`;\n ctx.fillRect(0, 0, mapWidth, mapHeight);\n\n ctx.strokeStyle = \"#111\";\n ctx.lineWidth = 2;\n ctx.globalAlpha = 1;\n\n // Draw nation\n ctx.beginPath();\n path(nationShape);\n ctx.stroke();\n\n // windPoints.forEach((d) => { // real data\n forceSim.nodes().forEach((d) => {\n const fillColor = d3.color(\"red\");\n fillColor.opacity = +nodeOpacity;\n ctx.fillStyle = fillColor.toString();\n ctx.beginPath();\n ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);\n //ctx.arc(d.x, d.y, 20, 0, Math.PI * 2);\n\n ctx.fill();\n });\n\n return forceSim.nodes();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"config = ({\n startTime: false,\n ticks: 0,\n animReqId: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"## Demographic Data: NHGIS\n\n### Research using NHGIS data should cite it as:\nSteven Manson, Jonathan Schroeder, David Van Riper, Tracy Kugler, and Steven Ruggles. IPUMS National Historical Geographic Information System: Version 16.0 [dataset]. Minneapolis, MN: IPUMS. 2021. http://doi.org/10.18128/D050.V16.0\n\nFor policy briefs or articles in the popular press, we recommend that you cite the use of NHGIS data as follows:\nIPUMS NHGIS, University of Minnesota, www.nhgis.org","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"#### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"Chance = require('chance')","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"chance = new Chance()","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"import { scaleCanvas } from \"@john-guerra/canvas-retina-display\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}