29:null 2a:["$","title",null,{"children":"Animated Wind Map | vizqing | Observable"}] 2f:T9ff,md`# Animated Wind Map It is tempting to start the title of this article with something like "Top 10 lessons" or "5 easy steps". We, people working with Data, love following some kind of framework or experimentally tested recipe. But coming up with one for Data Visualization would be a big stretch. Development of a complex data visualization is not a process with a start and an end connected together by a number of standardized steps. It is more of a repeated, rapid prototyping process where the intermediary steps will not be known until you finish. This characteristic of Data Visualization might be very demotivating, especially for people who like to have a detailed plan to follow. If you get wrapped in yet-another unexpected bug that seems like a yet-another setback, think of creating the data visualization as of boat sailing ... [read more on Medium](https://medium.com/@oscr/dont-over-plan-your-data-visualization-737c7330d80f). #### Shoutouts This visualization was heavily inpired by [the earth.nullschool.net Wind Map](https://earth.nullschool.net/) created by [Cameron Beccario](https://twitter.com/cambecc) - Link to Beccario's Wind Map [Github repo](https://github.com/cambecc/earth). This Notebook reuses parts of the code from the following notebooks: * [Sinebow](https://observablehq.com/@jobleonard/linear-sinebow) by [@jobleonard](https://observablehq.com/@jobleonard) * [Sliders](https://observablehq.com/@jashkenas/inputs) by [@jashkenas](https://observablehq.com/@jashkenas) * [Color Legends](https://observablehq.com/@d3/color-legend) by [@mbostock](https://observablehq.com/@mbostock) * [Raster Reprojection using WebGL](https://observablehq.com/@mbostock/raster-reprojection-ii) by [@mbostock](https://observablehq.com/@mbostock) * [Versor Dragging](https://observablehq.com/@d3/versor-dragging) by [@mbostock](https://observablehq.com/@mbostock) * [Versor Zooming](https://observablehq.com/@d3/versor-zooming) by [@mbostock](https://observablehq.com/@mbostock) GeoJsons come from the [Natural Earth](https://www.naturalearthdata.com/) and were edited with [Mapshaper](https://mapshaper.org/). Wind Data comes from [(this Github repo)](https://github.com/cambecc/earth). The original wind data comes from Global Forecast System (GFS) on the [NOAA website](https://www.ncdc.noaa.gov/data-access/model-data/model-datasets/global-forcast-system-gfs). More about GRIB file format [on Wikipedia](https://en.wikipedia.org/wiki/GRIB). [GRIB formats used by NOAA](https://www.nco.ncep.noaa.gov/pmb/docs/on388/tableb.html) `30:T21e2,chart_svg_d3 = { let v0, q0, r0, frame, resize_flag, animation_flag let animation_play = false let particles = [] let N = number_of_particles const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]) .attr("fill", "black") .attr('preserveAspectRatio', 'xMinYMid') projection.fitSize([width, height], d3.geoGraticule10()) const path = d3.geoPath(projection) const graticule = d3.geoGraticule10() //contains all elements that are draggable const map = svg.append("g") .attr("id", "map") .attr("width", width) .attr("height", height) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragend)) .call(d3.zoom() .scaleExtent([200, 1400]) .on("start", zoomstarted) .on("zoom", zoomed) .on("end", zoomend)) addEventListener('resize', function(){ if(resize_flag){ clearTimeout(resize_flag) } resizestarted() resize_flag = setTimeout(() => resizeend(), 100)}) map.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#000005") map.append("path") .attr("class", "outline") .attr("stroke", "#000") .attr("fill", "#none") .attr("stroke-width", 1) .attr("d", path(sphere)) map.append("path") .attr("class", "graticule") .attr("stroke", "#ffffff") .attr("stroke-width", 0.2) .attr("d", path(graticule)) map.append("path") .attr("class", "coastline") .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("fill", "none") .attr("d", path(land50)) // Wind overlay const foreignObject = map.append('foreignObject') .attr("x", 0) .attr("y", 0) .attr('width', width) .attr('height', height); const foreignBody = foreignObject.append("xhtml:body") .style("margin", "0px") .style("padding", "0px") .style("background-color", "none") .style("width", width + "px") .style("height", height + "px") const canvas_wind_overlay = foreignBody.append("canvas") .attr("id", "canvas-wind-overlay") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("position", "absolute") //Raster reprojection with WebGL const gl = canvas_wind_overlay.node().getContext('webgl', { alpha: true }); const vertexShader = createVertexShader(gl) const fragmentShader = createFragmentShader(gl) const vertexBuffer = createVertexBuffer(gl) const texture = createTexture(gl, wind_overlay) const program = createProgram(gl, vertexShader, fragmentShader) const a_vertex = gl.getAttribLocation(program, "a_vertex") const u_translate = gl.getUniformLocation(program, "u_translate") const u_scale = gl.getUniformLocation(program, "u_scale") const u_rotate = gl.getUniformLocation(program, "u_rotate") const init = defineInit(gl, program, texture, a_vertex, u_translate, u_scale, u_rotate) var current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) //Wind particles const canvas_wind_particles = foreignBody.append("canvas") .attr("id", "canvas-wind-particles") .attr("y", 0) .attr("width", width) .attr("height", height) .style("position", "absolute") var context_wind_particles = canvas_wind_particles.node().getContext('2d') start_animation() // Drag behavior function dragstarted() { animation_play = false; cancelAnimationFrame(frame); context_wind_particles.clearRect(0, 0, width, height); v0 = versor.cartesian(projection.invert([d3.event.x, d3.event.y])); q0 = versor(r0 = projection.rotate()); } function dragged() { animation_play = false cancelAnimationFrame(frame) const v1 = versor.cartesian(projection.rotate(r0).invert([d3.event.x, d3.event.y])); const q1 = versor.multiply(q0, versor.delta(v0, v1)); //shift_vector = Euler rotation angles [λ, φ, γ]. Always keep γ = 0 for clarity const shift_vector = versor.rotation(q1) const shift_vector_adjusted = [shift_vector[0], shift_vector[1], 0] projection.rotate(shift_vector_adjusted); current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) map.selectAll(".coastline") .attr("d", path(land110)) map.selectAll(".graticule") .attr("d", path(graticule)) } function dragend() { current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) map.selectAll(".coastline") .attr("d", path(land50)) start_animation() } // Zoom behavior function zoomstarted() { animation_play = false cancelAnimationFrame(frame) context_wind_particles.clearRect(0, 0, width, height) } function zoomed() { clearTimeout(animation_flag) animation_play = false; cancelAnimationFrame(frame); projection.scale(d3.event.transform.k); map.selectAll(".outline") .attr("d", path(sphere)) map.selectAll(".coastline") .attr("d", path(land110)) map.selectAll(".graticule") .attr("d", path(graticule)) gl.uniform1f(u_scale, get_radius_and_center().r) current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) } function zoomend() { map.selectAll(".coastline") .attr("d", path(land50)) map.selectAll(".graticule") .attr("d", path(graticule)) gl.uniform1f(u_scale, get_radius_and_center().r) current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) start_animation() } function resizestarted(){ animation_play = false cancelAnimationFrame(frame); context_wind_particles.clearRect(0, 0, width, height) } function resizeend(){ map.selectAll(".outline") .attr("d", path(sphere)) map.selectAll(".coastline") .attr("d", path(land110)) map.selectAll(".graticule") .attr("d", path(graticule)) gl.uniform1f(u_scale, get_radius_and_center().r) current_rotation = projection.rotate().map(x => to_radians(x)) draw(gl, init, u_rotate, [current_rotation[0], current_rotation[1]]) start_animation(); } function start_animation(){ let wait_time, current_frame_rate const frame_rate = 30 //const frame_rate_slow = 25 const frame_rate_time = 1000/frame_rate const radius_and_center = get_radius_and_center() particles = generate_particles(particles, N, radius_and_center) animation_play = true function tick(t) { if (!animation_play){ return; } context_wind_particles.beginPath(); context_wind_particles.strokeStyle = 'rgba(210,210,210,0.7)'; particles.forEach((p) => advance_particle(p, context_wind_particles, radius_and_center, projection)); context_wind_particles.stroke(); context_wind_particles.globalAlpha=alpha_decay context_wind_particles.globalCompositeOperation='copy' context_wind_particles.drawImage(context_wind_particles.canvas, 0, 0) context_wind_particles.globalAlpha=1.0; context_wind_particles.globalCompositeOperation='source-over'; wait_time = frame_rate_time - (performance.now() - t) // this is code implementing variable framerate adjusting to slow browsers // if (wait_time < 0 ){ // N = N * 0.9 // console.log("Could not achieve target framerate. Decreased number of particles to ", N) // frame = requestAnimationFrame(tick) // } animation_flag = setTimeout(() => frame = requestAnimationFrame(tick), wait_time) } tick(performance.now()); //setTimeout(() => cancelAnimationFrame(frame), 1000) } function get_radius_and_center(){ let output = new Object() if (d3.select('.outline').node()){ output.r = d3.select('.outline').node().getBBox().width/2 output.x0 = d3.select('.outline').node().getBBox().x + d3.select('.outline').node().getBBox().width/2 output.y0 = d3.select('.outline').node().getBBox().y + d3.select('.outline').node().getBBox().height/2 return output; } else { output.r = width/2 output.x0 = width/2 output.y0 = height/2 return output; } } return svg.node(); }31:T418,generate_particles = function(particles, n, radius_and_center){ // Create n particles on an almost uniform grid const radius = radius_and_center.r - 1 let x0, y0, coord0 particles.length = 0 for (let i = 0; i < n; i++) { if (radius*2 > 1.41421 * width){ x0 = Math.random() * (width - 1) y0 = Math.random() * (height - 1) } else { const random_angle = Math.random() * 2 * Math.PI const random_radius_sqrt = Math.random() * radius * radius x0 = Math.sqrt(random_radius_sqrt) * Math.cos(random_angle) + width/2 y0 = Math.sqrt(random_radius_sqrt) * Math.sin(random_angle) + height/2 } coord0 = projection.invert([x0, y0]) if (coord0[0] > 180){ coord0[0] = -180 + (coord0[0] - 180) } particles.push({ x0: x0, y0: y0, long0: coord0[0], lat0: coord0[1], x: x0, y: y0, long: coord0[0], lat: coord0[1], age: Math.round(MAX_AGE * Math.random()), visible: true}); } return particles }32:T641,function advance_particle(p, ctx, radius_and_center, pr) { if (p.age++ > MAX_AGE) { p.x = p.x0; p.y = p.y0; p.long = p.long0, p.lat = p.lat0, p.age = 0; p.visible = true; }; if (p.visible){ const long_1deg_to_m = (Math.PI/180) * 6378137 * Math.cos(p.lat*(Math.PI/180)) const lat_1deg_to_m = 111000 let u = bilinear_interpolation(p.long, p.lat, "u") let v = bilinear_interpolation(p.long, p.lat, "v") const long_delta_dist = u * T const lat_delta_dist = v * T const long_delta_deg = long_delta_dist/long_1deg_to_m const lat_delta_deg = lat_delta_dist/lat_1deg_to_m let long_new = p.long + long_delta_deg let lat_new = p.lat + lat_delta_deg //handle edge cases for long if (long_new > 180){ long_new -= 360 } else if (long_new < -180){ long_new += 360 } //handle edge cases for latitude if (lat_new > 90){ p.visible = false } else if (lat_new < -90){ p.visible = false } p.long = long_new p.lat = lat_new const xy = projection([p.long, p.lat]) ctx.moveTo(p.x, p.y) p.x = xy[0] p.y = xy[1] const term1 = (p.x - radius_and_center.x0) * (p.x - radius_and_center.x0) const term2 = (p.y - radius_and_center.y0) * (p.y - radius_and_center.y0) if (term1 + term2 >= radius_and_center.r*radius_and_center.r){ p.visible = false}; if (Math.abs(p.lat) > 90 || Math.abs(p.long) > 180){ p.visible = false}; if (p.visible){ ctx.lineTo(p.x, p.y); } } }33:T469,bilinear_interpolation = function(long, lat, field_name){ let G1, G2, G3, G4 var interpolated_value; const i = long const j = lat const f_i = Math.floor(i) const c_i = Math.ceil(i) const f_j = Math.floor(j) const c_j = Math.ceil(j) try{ G1 = data[f_i][f_j][field_name] G2 = data[c_i][f_j][field_name] G3 = data[f_i][c_j][field_name] G4 = data[c_i][c_j][field_name] } catch(err){ console.log(long, lat, field_name) } const grid_delta_i = 1 const grid_delta_j = 1 var interpolation_a var interpolation_b if (f_i == c_i) { interpolation_a = G1 interpolation_b = G3 } else { interpolation_a = (G1 * (c_i - i)/grid_delta_i) + (G2 * (i - f_i) / grid_delta_i) interpolation_b = (G3 * (c_i - i)/grid_delta_i) + (G4 * (i - f_i) / grid_delta_i) } if (f_j == c_j) { interpolated_value = (interpolation_a + interpolation_b)/2 } else { interpolated_value = (interpolation_a * (c_j - j)/grid_delta_j) + (interpolation_b * (j - f_j)/grid_delta_j) } return interpolated_value }34:T426,// Adapted from https://observablehq.com/@jobleonard/linear-sinebow function interpolate_wind_sinebow(t) { const end_of_sinebow_scale = 0.3 const shift_constant = 0.82 const s = d3.scaleLinear() .domain([0, end_of_sinebow_scale]) .range([0, shift_constant]) const end_of_sinebow_scale_color = d3.hsl(d3.rgb( 255 * sin2(shift_constant + s(end_of_sinebow_scale) + 0 / 3), 255 * sin2(shift_constant + s(end_of_sinebow_scale) + 1 / 3), 255 * sin2(shift_constant + s(end_of_sinebow_scale) + 2 / 3) )) const l_scale = d3.scaleLinear() .domain([end_of_sinebow_scale, 1]) .range([end_of_sinebow_scale_color.l, 1]) var parameter = shift_constant + s(t) var interpolated_color = d3.rgb( 255 * sin2(parameter + 0 / 3), 255 * sin2(parameter + 1 / 3), 255 * sin2(parameter + 2 / 3) ); if (t > end_of_sinebow_scale){ interpolated_color = d3.hsl(end_of_sinebow_scale_color.h, end_of_sinebow_scale_color.s, l_scale(t)) + "" } return interpolated_color }35:T535,wind_overlay = { const lightness = 0.75 const image_width = 4096/4 const image_height = 2048/4 const array_size = 4 * image_width * image_height const projection_overlay = d3.geoEquirectangular() .precision(0.1) .fitSize([image_width, image_height], d3.geoGraticule10()) //TODO var overlay_array = new Uint8ClampedArray(array_size) var x = 0 var y = 0 for(var i = 0; i < array_size; i=i+4){ const coords = projection_overlay.invert([x, y]) if (Math.abs(coords[1]) > 90){ console.log(x, y, coords, i, array_size) } const color = get_color(coords[0], coords[1]) overlay_array[i] = color['red'] * lightness overlay_array[i+1] = color['green'] * lightness overlay_array[i+2] = color['blue'] * lightness overlay_array[i+3] = 200 //move to the next pixel if (x < image_width-1){ x = x+1 } else{ x = 0 y = y+1 } } var overlay_graphics = new ImageData(overlay_array, image_width) const context = DOM.context2d(image_width, image_height, 1); var imageData = new ImageData(overlay_array, image_width, image_height); createImageBitmap(imageData) .then(result => context.drawImage(result, 0, 0, image_width, image_height)) return context.canvas; }36:T518,createFragmentShader = function(gl){ 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; }37:[{"id":"e8529653b21909fa842c715b82797991d720ba3ab59fbdd677ebc544ea4b91015c4f1bd5cb2ef275e0a36236982be3a64f1979bb40f4cb6f6992df9777311865","href":"https://static.observableusercontent.com/files/e8529653b21909fa842c715b82797991d720ba3ab59fbdd677ebc544ea4b91015c4f1bd5cb2ef275e0a36236982be3a64f1979bb40f4cb6f6992df9777311865","name":"current-wind-surface-level-gfs-1.0.json","type":"application/json","lastModified":1696031445203.31,"size":713591},{"id":"c2678d0f62d7a3ac72db198e286b812da7f6f4634b2574151e71a5e99705ffd63b8a4dd66363529b8f0591a6968942a5eb8e59b750375503adfdac9363cb36eb","href":"https://static.observableusercontent.com/files/c2678d0f62d7a3ac72db198e286b812da7f6f4634b2574151e71a5e99705ffd63b8a4dd66363529b8f0591a6968942a5eb8e59b750375503adfdac9363cb36eb","name":"ne_110m_extra_light.json","type":"application/json","lastModified":1696031445203.31,"size":51613},{"id":"2ec88eabaece9ce36fe3decb60773942311287812bca4c27549c00b37caa30307ec24b682e01d72c4259a5e2aacf6f9336d1d4aace6ee4c389533a99f43850c9","href":"https://static.observableusercontent.com/files/2ec88eabaece9ce36fe3decb60773942311287812bca4c27549c00b37caa30307ec24b682e01d72c4259a5e2aacf6f9336d1d4aace6ee4c389533a99f43850c9","name":"ne_110m.json","type":"application/json","lastModified":1696031445203.31,"size":86641},{"id":"306000d0f53e5b68e8b3735b2bc90c1b8f0a756599f285300271680dc0fca92a9e1543c2dca566a6a80378b2baed712ff2c3965f4fd7d329c6cca93a1df7c248","href":"https://static.observableusercontent.com/files/306000d0f53e5b68e8b3735b2bc90c1b8f0a756599f285300271680dc0fca92a9e1543c2dca566a6a80378b2baed712ff2c3965f4fd7d329c6cca93a1df7c248","name":"ne_50m_extra_light@1.json","type":"application/json","lastModified":1696031445203.31,"size":696685},{"id":"a88a9b1765e511c0a8e7747a287ce118391f70d511666786f51a7de0482cc11b81a078b36cd28db8aff804042bad9033d5065863c64ff3b661e1c01293ba7998","href":"https://static.observableusercontent.com/files/a88a9b1765e511c0a8e7747a287ce118391f70d511666786f51a7de0482cc11b81a078b36cd28db8aff804042bad9033d5065863c64ff3b661e1c01293ba7998","name":"ne_50m.json","type":"application/json","lastModified":1696031445203.31,"size":1380263}] 2d:{"id":"f0bc33b558831078","slug":null,"title":"Animated Wind Map","thumbnail":"ca4a3ce608052617fb250131f65a5a250dd747e5c73ca77086baf2222e26d39b","access_level":"public","create_time":"$D2023-09-29T23:50:45.203Z","update_time":"$D2023-09-29T23:50:45.203Z","view_time":null,"first_public_time":"$D2023-09-29T23:50:45.203Z","fork":{"id":"94548d743b8f6c75","slug":"animated-wind-map","title":"Animated Wind Map","owner":{"id":"b8807525f27e4242","login":"oskarkocol","name":"Oskar Kocol"}},"stars":1,"starred":false,"owner":{"type":"team","id":"008f123a7234eb35","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":"starter_2024"},"version":2947,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null}],"members":[{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Animated Wind Map","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"legend({\n color: wind_color_scale,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"md`# Wind particles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2567,"value":"viewof T = slider({\n min: 0,\n max: 4000,\n step: 500,\n value: 1500,\n description:\n \"Determine how fast particles travel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2855,"value":"viewof alpha_decay = slider({\n min: 0.8,\n max: 1.0,\n step: 0.01,\n value: 0.95,\n description:\n \"Determine how fast the the particle's trace decays\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"viewof number_of_particles = slider({\n min: 0,\n max: 5000,\n step: 500,\n value: 3500,\n description:\n \"Determine the number of particles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"//MAX_AGE = 25\nviewof MAX_AGE = slider({\n min: 10,\n max: 100,\n step: 5,\n value: 35,\n description:\n \"Define Max Age of particles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"viewof initial_longitude = slider({\n min: -180,\n max: 180,\n step: 1,\n value: 151,\n description:\n \"Initial longitude\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1915,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"md`# Wind Overlay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"wind_color_scale = wind_color_scale_accurate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"get_color = function(long, lat){\n //interpolate wind_strength using https://en.wikipedia.org/wiki/Bilinear_interpolation\n var wind_strength;\n if ((long in data) && (lat in data[long])){\n wind_strength = data[Math.floor(long)][Math.floor(lat)][\"wind_strength\"]\n }\n else {\n wind_strength = bilinear_interpolation(long, lat, \"wind_strength\")\n \n }\n \n const color = wind_color_scale(wind_strength)\n const matchColors = /rgb\$(\\d{1,3}), (\\d{1,3}), (\\d{1,3})\$/\n const match = matchColors.exec(color);\n return {'red': parseInt(match[1]), \n 'green' : parseInt(match[2]), \n 'blue' : parseInt(match[3])\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"md`#### Wind color scale efficient`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"legend({\n color: wind_color_scale_efficient,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"interpolate_wind_efficient = function (wind_speed){\n wind_speed = 200 * wind_speed;\n var h;\n const scale_blue_to_green = d3.scaleLinear()\n .domain([0, 35])\n .range([240, 120])\n \n const scale_green_to_red = d3.scaleLinear()\n .domain([30, 70])\n .range([120, 0])\n \n const scale_red_to_pink = d3.scaleLinear()\n .domain([70, 100])\n .range([360, 300])\n \n const scale_pink_to_white = d3.scaleLinear()\n .domain([100, 200])\n .range([0.5, 1])\n \n switch (true) {\n case (wind_speed < 35):\n h = scale_blue_to_green(wind_speed)\n return d3.hsl(h, 1, 0.5) + \"\"\n case (wind_speed < 70):\n h = scale_green_to_red(wind_speed)\n return d3.hsl(h, 1, 0.5) + \"\"\n case (wind_speed < 100):\n h = scale_red_to_pink(wind_speed)\n return d3.hsl(h, 1, 0.5) + \"\"\n default:\n const l = scale_pink_to_white(wind_speed)\n return d3.hsl(300, 1, l)+\"\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"wind_color_scale_efficient = {\n const scale = d3.scaleSequential()\n .domain([0, 200])\n .interpolator(interpolate_wind_efficient)\n return scale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"md`#### Wind color scale accurate`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"legend({\n color: wind_color_scale_accurate,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"//takes 4.7 to render\nwind_color_scale_accurate = {\n const scale = d3.scaleSequential()\n .domain([0, 200])\n .interpolator(interpolate_wind_sinebow)\n return scale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"function sin2(t) {\n return Math.sin(Math.PI * t) ** 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"md`#### Wind color scale simple`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"legend({\n color: wind_color_scale_simple,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"///https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic\n// takes 2.8s to render\nwind_color_scale_simple = {\n const scale = d3.scaleSequential()\n .domain([-25, 50])\n .interpolator(d3.interpolateSinebow)\n \n //flip the scale\n const interpolator = scale.interpolator()\n const mirror = t => interpolator(1 - t)\n scale.interpolator(mirror)\n \n return scale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md`### Generate wind overlay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"md`### WebGL functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"draw = function(gl, init, u_rotate, rotate_angle) {\n init;\n gl.uniform2fv(u_rotate, rotate_angle);\n gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"defineInit = function(gl, program, texture, a_vertex, u_translate, u_scale, u_rotate) {\n gl.useProgram(program);\n gl.enableVertexAttribArray(a_vertex);\n gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);\n gl.uniform2f(u_translate, width / 2, height / 2);\n \n gl.uniform1f(u_scale, height/2 - 1);\n \n gl.viewport(0, 0, width, height);\n \n gl.bindTexture(gl.TEXTURE_2D, texture);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"createVertexShader = function(gl) {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, `\nattribute vec2 a_vertex;\n\nvoid main(void) {\n gl_Position = vec4(a_vertex, 0.0, 1.0);\n}\n`);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"createVertexBuffer = function(gl) {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"createProgram = function(gl, vertexShader, fragmentShader){\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));\n return program;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"createTexture = function(gl, image_object) {\n const texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image_object);\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1527,"value":"to_radians = function(d){\n if (d < 0){\n return Math.abs(d) * Math.PI / 180\n }\n return Math.PI + (180-d) * Math.PI / 180\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"md`# Define dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"projection = d3.geoOrthographic().precision(0.1).rotate([-initial_longitude, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"data = {\n var data_object = new Object()\n var lat = 90\n var long = 0\n for (var i = 0; i < raw_data[0].data.length; i++){\n var u = raw_data[0].data[i]\n var v = raw_data[1].data[i]\n var wind_strength = Number(Math.sqrt(u*u + v*v).toFixed(2))\n \n if (!(long in data_object)){\n data_object[long] = new Object()\n }\n data_object[long][lat] = {\"u\" : u,\n \"v\" : v,\n \"wind_strength\" : wind_strength}\n \n //go to next row\n if (long == 180){\n long = -179\n }\n else if (long == -1) {\n lat = lat - 1\n long = 0\n }\n else {\n long = long + 1\n }\n }\n data_object[-180] = data_object[180]\n return data_object\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"raw_data = FileAttachment(\"current-wind-surface-level-gfs-1.0.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2888,"value":"land110 = topojson.feature(earth_topography_110m_extra_light, earth_topography_110m_extra_light.objects.ne_110m_coastline)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2776,"value":"land50 = topojson.feature(earth_topography_50m_extra_light, earth_topography_50m_extra_light.objects.earth_topo_50m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2886,"value":"earth_topography_110m_extra_light = await(FileAttachment(\"ne_110m_extra_light.json\").json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2750,"value":"earth_topography_110m = await(FileAttachment(\"ne_110m.json\").json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2907,"value":"earth_topography_50m_extra_light = await(FileAttachment(\"ne_50m_extra_light@1.json\").json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2748,"value":"earth_topography_50m = await(FileAttachment(\"ne_50m.json\").json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2857,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"