2f: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(); }30: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 }31: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); } } }32: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 }33: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 }34: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; }35: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; }36:[{"id":"85f85d5479db125e1513672eaf3c7a1e1e45e858b7aa8e8728dfc3e64eef7289b07feb3d146f459fbe870a1d22addd00e1989c61182758ea8ff6d49675e243a5","href":"https://static.observableusercontent.com/files/85f85d5479db125e1513672eaf3c7a1e1e45e858b7aa8e8728dfc3e64eef7289b07feb3d146f459fbe870a1d22addd00e1989c61182758ea8ff6d49675e243a5","name":"wind_24092015_tformed.csv","type":"text/csv","lastModified":1686371201033.535,"size":3491981},{"id":"e8529653b21909fa842c715b82797991d720ba3ab59fbdd677ebc544ea4b91015c4f1bd5cb2ef275e0a36236982be3a64f1979bb40f4cb6f6992df9777311865","href":"https://static.observableusercontent.com/files/e8529653b21909fa842c715b82797991d720ba3ab59fbdd677ebc544ea4b91015c4f1bd5cb2ef275e0a36236982be3a64f1979bb40f4cb6f6992df9777311865","name":"current-wind-surface-level-gfs-1.0.json","type":"application/json","lastModified":1685964203820.415,"size":713591},{"id":"c2678d0f62d7a3ac72db198e286b812da7f6f4634b2574151e71a5e99705ffd63b8a4dd66363529b8f0591a6968942a5eb8e59b750375503adfdac9363cb36eb","href":"https://static.observableusercontent.com/files/c2678d0f62d7a3ac72db198e286b812da7f6f4634b2574151e71a5e99705ffd63b8a4dd66363529b8f0591a6968942a5eb8e59b750375503adfdac9363cb36eb","name":"ne_110m_extra_light.json","type":"application/json","lastModified":1685964203820.415,"size":51613},{"id":"2ec88eabaece9ce36fe3decb60773942311287812bca4c27549c00b37caa30307ec24b682e01d72c4259a5e2aacf6f9336d1d4aace6ee4c389533a99f43850c9","href":"https://static.observableusercontent.com/files/2ec88eabaece9ce36fe3decb60773942311287812bca4c27549c00b37caa30307ec24b682e01d72c4259a5e2aacf6f9336d1d4aace6ee4c389533a99f43850c9","name":"ne_110m.json","type":"application/json","lastModified":1685964203820.415,"size":86641},{"id":"306000d0f53e5b68e8b3735b2bc90c1b8f0a756599f285300271680dc0fca92a9e1543c2dca566a6a80378b2baed712ff2c3965f4fd7d329c6cca93a1df7c248","href":"https://static.observableusercontent.com/files/306000d0f53e5b68e8b3735b2bc90c1b8f0a756599f285300271680dc0fca92a9e1543c2dca566a6a80378b2baed712ff2c3965f4fd7d329c6cca93a1df7c248","name":"ne_50m_extra_light@1.json","type":"application/json","lastModified":1685964203820.415,"size":696685},{"id":"a88a9b1765e511c0a8e7747a287ce118391f70d511666786f51a7de0482cc11b81a078b36cd28db8aff804042bad9033d5065863c64ff3b661e1c01293ba7998","href":"https://static.observableusercontent.com/files/a88a9b1765e511c0a8e7747a287ce118391f70d511666786f51a7de0482cc11b81a078b36cd28db8aff804042bad9033d5065863c64ff3b661e1c01293ba7998","name":"ne_50m.json","type":"application/json","lastModified":1685964203820.415,"size":1380263},{"id":"aabe16156eacdf3258669494df0fc2d70ba5f55a77d8755caf2169bff10aa4c7330e3047ca2c7be6ec7d68c2f7f22b81035ecd8452126c3432c91be5bec49adc","href":"https://static.observableusercontent.com/files/aabe16156eacdf3258669494df0fc2d70ba5f55a77d8755caf2169bff10aa4c7330e3047ca2c7be6ec7d68c2f7f22b81035ecd8452126c3432c91be5bec49adc","name":"wind_24092015_filled.csv","type":"text/csv","lastModified":1686373749679.669,"size":3542315},{"id":"57c1549474b78ad9c972d5eb4c9c748bd51064f3b075bc1a0f4fb6603ebbfa3f80cfddaa051831e5c7bf55fd889532b0092c04767fc2f91b70c034c73afb1d1f","href":"https://static.observableusercontent.com/files/57c1549474b78ad9c972d5eb4c9c748bd51064f3b075bc1a0f4fb6603ebbfa3f80cfddaa051831e5c7bf55fd889532b0092c04767fc2f91b70c034c73afb1d1f","name":"wind_24092015_filled2.csv","type":"text/csv","lastModified":1686374625285.106,"size":3641353},{"id":"d7013c077ca804a5522786b72a9b215860a8615cd189a310fbf016d9cab705ce384a3244d2bce6bac8bd530243e3f5ce188798b636d6e464bb352f09efc00eca","href":"https://static.observableusercontent.com/files/d7013c077ca804a5522786b72a9b215860a8615cd189a310fbf016d9cab705ce384a3244d2bce6bac8bd530243e3f5ce188798b636d6e464bb352f09efc00eca","name":"wind_14102015_tformed.csv","type":"text/csv","lastModified":1686298072749.111,"size":988177},{"id":"bbd8d2a69d2a7404a1ec109a9e6dd76895618cb47d72ad6fa43fd2453bb82096bae0c42057601bb4429f202f8009ba87e0aa19f2407588bff73fa88b41d1eb53","href":"https://static.observableusercontent.com/files/bbd8d2a69d2a7404a1ec109a9e6dd76895618cb47d72ad6fa43fd2453bb82096bae0c42057601bb4429f202f8009ba87e0aa19f2407588bff73fa88b41d1eb53","name":"wind_14102015_tformed@1.csv","type":"text/csv","lastModified":1686300470245.726,"size":61346}] 2d:{"title":"Global Wind Map Animated","cells":[{"id":0,"value":"md`# Global Wind Map Animated\n\nThis project was forked from [Animated Wind Map](https://observablehq.com/@oskarkocol/animated-wind-map)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"legend({\n color: wind_color_scale,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1691,"value":"md`# Wind particles`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1710,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"md`# Wind Overlay`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"wind_color_scale = wind_color_scale_accurate","pinned":false,"hidden":false,"mode":"ojs"},{"id":1701,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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 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\n return {'red': parseInt(match[1]), \n 'green' : parseInt(match[2]), \n 'blue' : parseInt(match[3])\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"md`#### Wind color scale efficient`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"legend({\n color: wind_color_scale_efficient,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1323,"value":"md`#### Wind color scale accurate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"legend({\n color: wind_color_scale_accurate,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1222,"value":"function sin2(t) {\n return Math.sin(Math.PI * t) ** 2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"md`#### Wind color scale simple`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"legend({\n color: wind_color_scale_simple,\n title: \"Wind Speed (m/s)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":924,"value":"md`### Generate wind overlay`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"md`### WebGL functions`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":1510,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":927,"value":"md`# Define dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"projection = d3.geoOrthographic().precision(0.1).rotate([-initial_longitude, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":140,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"dataOld = {\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"},{"id":514,"value":"raw_data = FileAttachment(\"current-wind-surface-level-gfs-1.0.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":2886,"value":"earth_topography_110m_extra_light = await(FileAttachment(\"ne_110m_extra_light.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"earth_topography_110m = await(FileAttachment(\"ne_110m.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2907,"value":"earth_topography_50m_extra_light = await(FileAttachment(\"ne_50m_extra_light@1.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2748,"value":"earth_topography_50m = await(FileAttachment(\"ne_50m.json\").json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2956,"value":"### Custom","pinned":false,"hidden":false,"mode":"md"},{"id":2958,"value":"windTformedRaw = FileAttachment(\"wind_24092015_filled2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2961,"value":"data = {\n let data_object = new Object()\n let lat = 90\n let long = 0\n\n windTformedRaw.forEach(d => {\n const { u, v, longitude, latitude, } = d\n const wind_strength = Number(Math.sqrt(u*u + v*v).toFixed(2))\n long = longitude\n lat = latitude\n\n if (!(long in data_object)){\n data_object[long] = new Object()\n }\n\n data_object[long][lat] = { u, v, 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\n data_object[-180] = data_object[180]\n return data_object\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3007,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2857,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}