2a:null 2b:["$","title",null,{"children":"Boundary between air masses | linard-y | Observable"}] 31:T7a7,A front is a boundary between two air masses. Air masses can control weather for a long time, from days to months. Most weather occurs along the periphery of these air masses at boundaries called fronts. There are four types of fronts, named according to the temperature of the advancing air relative to the temperature of the air it is replacing: * Warm Fronts * Cold Fronts * Stationary Fronts * Occluded Fronts An approaching front of any type always means changes to the weather are imminent. Each type of front brings its own general weather conditions; no two fronts are the same. However, generalized weather conditions associated with each type of front exist. Troughs are elongated regions of low atmospheric pressure that lead to rising air, cloud formation, and potential precipitation. Troughs and weather fronts are related meteorological features, but they serve distinct purposes and have different characteristics in the context of atmospheric circulation and weather patterns. Cold fronts commonly follow closely behind a trough. As a cold front approaches an area, it can create a trough of low pressure at the surface. This trough helps to lift warm, moist air ahead of the front, leading to the development of clouds and precipitation. Troughs are often linked to regions of atmospheric instability. This instability can result in the formation of thunderstorms, heavy rainfall, and other severe weather conditions when moisture-laden air interacts with the trough. In summary, troughs and weather fronts are related elements in the broader context of atmospheric circulation and weather systems. Troughs are areas of low pressure that can interact with weather fronts, particularly cold fronts, to influence weather patterns and the development of various weather conditions. Understanding the dynamics between these features is crucial for meteorologists and weather forecasters when predicting and explaining weather changes.32:Ta77,map = { const width = 960; const height = 500; const mercator = d3.geoMercator() .center([-100, 45]) .translate([width / 2, height / 2]) .scale(400); const path = d3.geoPath().projection(mercator); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const graticule = d3.geoGraticule(); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const background = svg.append("g").attr("id", "background") const overlay = svg.append("g").attr("id", "overlay") function zoomed(event) { const {transform} = event; background.attr("transform", transform); overlay.attr("transform", transform); } background.append("path") .datum(d3.geoGraticule().step([5, 5])()) .attr('stroke', '#000000') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr("d", path); background.append("path") .datum(topojson.feature(world, world.objects.countries)) .attr("id", "countries") .attr("fill", "#eee") .attr("stroke", "#eee") .attr("d", path); COLDFronts.map(d => overlay.call(drawColdFront, d, mercator, {size: settings.size, padding: settings.padding, opacity:1})); WARMFronts.map(d => overlay.call(drawWarmFront, d, mercator, {size: settings.size, padding: settings.padding, opacity:1})); OCCLUDEDFronts.map(d => overlay.call(drawOccludedFront, d, mercator, {size: settings.size, padding: settings.padding, opacity:1})); STATIONARYFronts.map(d => overlay.call(drawStationaryFront, d, mercator, {size: settings.size, padding: settings.padding, opacity:1})); SURFACETroughs.map(d => overlay.call(drawSurfaceTrough, d, mercator, {size: settings.size/2, padding: settings.padding/2, opacity:1})); overlay.selectAll("text.centers") .data(pressureCenters.features) .enter().append("text") .attr("class", function (d) { return "centers " + (d.properties.type ? 'low' : 'high') }) .attr("transform", function(d) { return "translate(" + mercator(d.geometry.coordinates) + ")" }) .style("font", "normal 1.5em Arial") .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("text-shadow", "0px 0px 2px rgba(255,255,255, 0.5)") .attr("fill", d => d.properties.type ? 'tomato' : 'blue') .text( function (d) { return (d.properties.type ? 'L' : 'H') } ) .append("tspan") .attr("class","pressure") .attr("x","0") .attr("dy","1em") .style("font-size", "30%") .style("font-weight", "bold") .text(function (d) { return d.properties.pressure }) svg.call(zoom); return svg.node(); }33:T4ef,function relativeOffsets(pts, length=1, k=1) { if (typeof length !== 'function') { const constant = length; length = () => constant; } const len = pts.length; const result = []; const distance = []; const offsets = []; for (let i = 0; i < len; i++) { const pt = pts[i], prev = pts[Math.max(i-1, 0)], curr = pts[Math.min(i , len - 2)], next = pts[Math.min(i+1, len - 1)], prevNormal = [(prev === curr ? next : curr)[1] - prev[1] , -((prev === curr ? next : curr)[0] - prev[0] )], nextNormal = [next[1] - curr[1], -(next[0] - curr[0])] ;[prevNormal, nextNormal].forEach(normal => { const hypot = Math.hypot(normal[0], normal[1]) normal[0] /= hypot normal[1] /= hypot }) const dist = length(pt, i, pts) distance.push(dist); const offset = [prevNormal[0] + nextNormal[0], prevNormal[1] + nextNormal[1]]; const hypot = Math.hypot(offset[0], offset[1]) offset[0] *= k*dist / hypot offset[1] *= k*dist / hypot offsets.push(offset); result.push([pts[i][0]+offset[0], pts[i][1]+offset[1], pts[i][2]]) } return {points:result, distance, offsets, vectors:result.map((d,i) => [[pts[i][0], pts[i][1]], [d[0], d[1]] ])} }34:T453,distribute = (getPoint, size) => { // Euclidean distance let distance = (pointA, pointB) => { return Math.sqrt( Math.pow(pointA[0] - pointB[0], 2) + Math.pow(pointA[1] - pointB[1], 2) ); }; // The Bolzano algorith to return the solution point on the path let bolzano = (t0, dist) => { let t, point0 = getPoint(t0), point, s0 = t0, s1 = 1.0, diff = 1, i = 0; while (Math.abs(diff) > 1e-1 && i < 100) { t = (s0 + s1) / 2; point = getPoint(t); diff = distance(point0, point) - dist; if (diff > 0) { s1 = t; } else if (diff < 0) { s0 = t; } i += 1; } return t; }; // Start with the path origin point // Start with the path origin p let t = 0; let point = getPoint(t); let endPoint = getPoint(1); let results = [point]; // Repeat while the circles distance still fits between the current point and the endPoint while (distance(point, endPoint) >= size) { t = bolzano(t, size); point = getPoint(t); results.push(point); } return results; };35:T695,drawFrontBase = (svg, datapath, proj, opts={}) => { const pieced = opts?.pieced ? opts.pieced:true; const frontColor = opts?.color ? opts.color:['black']; const size = opts?.size ? opts.size:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const path = geoCurvePath(lineCurve, proj); const path2 = d3.line().curve(d3.curveLinear); const ghost = svg.append("g") .append("path") .attr("stroke", frontColor[0]) .attr("fill", "none") .style('stroke-width', lineWidth) .style('stroke-opacity', 0) .attr("d", path(datapath)); const pathNode = ghost.node(); const pathLength = pathNode.getTotalLength(); const interpolator = d3.interpolate(0, pathLength); const getPoint = (t) => { const SVGPt = pathNode.getPointAtLength(interpolator(t)); return [SVGPt.x, SVGPt.y, t] } const tSize = size/pathLength; const centers = distribute(getPoint, size); if (pieced) { const assembly = svg.append("g"); centers.map((d,i, arr) => { const t1 = i==0 ? 0 : d[2]-tSize/2; const t2 = i==centers.length-1 ? 1 : arr[i+1][2]-tSize/2; const points = d3.range(0,11).map(k => getPoint(t1+k*(t2-t1)/10)); assembly.append("path") .attr("stroke", frontColor[i%2==0?0:1]) .attr("fill", "none") .style('stroke-width', lineWidth) .style('stroke-opacity', opacity) .attr("d", path2(points.map(d => [d[0], d[1]]))); }) } else { ghost.style('stroke-opacity', opacity) } return {length:pathLength, getPoint, centers} }36:T50b,drawColdFront = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['blue','blue','blue']; const size = opts?.size ? opts.size:8; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const triangles = offsets.map((d,i) => buildGeoTriangle(proj, d, getPoint, tSize)); svg.selectAll(`path.tri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(triangles) .enter().append("path") .attr("class", `tri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path2({type:"Feature", geometry:{type:"Polygon", coordinates: [d]}})); }37:T4de,drawWarmFront = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['tomato','tomato','tomato']; const size = opts?.size ? opts.size:8; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const halfEllipses = offsets.map((d,i) => buildGeoHalfEllipse(proj, d, getPoint, tSize, size)); svg.selectAll(`path.hEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(halfEllipses) .enter().append("path") .attr("class", `hEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => d); }38:T73b,drawOccludedFront = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['purple','purple','purple']; const size = opts?.size ? opts.size:8; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const halfEllipses = offsets.map((d,i) => buildGeoHalfEllipse(proj, d, getPoint, tSize, size)); const triangles = offsets.map((d,i) => buildGeoTriangle(proj, d, getPoint, tSize)); svg.selectAll(`path.hEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(halfEllipses.filter((d,i)=> (i%2==0))) .enter().append("path") .attr("class", `hEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => d); svg.selectAll(`path.tri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(triangles.filter((d,i)=> (i%2!=0))) .enter().append("path") .attr("class", `tri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path2({type:"Feature", geometry:{type:"Polygon", coordinates: [d]}})); }39:T77e,drawStationaryFront = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['tomato','blue','tomato','blue']; const size = opts?.size ? opts.size:8; const hSize = opts?.hSize ? opts.hSize:opts.size; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const halfEllipses = offsets.map((d,i) => buildGeoHalfEllipse(proj, d, getPoint, size, hSize, 1)); const triangles = offsets.map((d,i) => buildGeoTriangle(proj, d, getPoint, tSize)); svg.selectAll(`path.stahEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(halfEllipses.filter((d,i)=> (i%2==0))) .enter().append("path") .attr("class", `stahEll_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => d); svg.selectAll(`path.statri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(triangles.filter((d,i)=> (i%2!=0))) .enter().append("path") .attr("class", `statri_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[3]) .style('stroke-width', 1) .attr("opacity", opacity) .attr("fill", frontColor[3]) .attr("d", d => path2({type:"Feature", geometry:{type:"Polygon", coordinates: [d]}})); }3a:T552,drawNormal = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['maroon','maroon','maroon']; const size = opts?.size ? opts.size:8; const hSize = opts?.hSize ? opts.hSize:opts.size; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const decoWidth = opts?.decoWidth ? opts.decoWidth:1; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const vectors = dataOffsets.vectors; svg.selectAll(`path.norm_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(vectors) .enter().append("path") .attr("class", `norm_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', decoWidth) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path2({type:"Feature", geometry:{type:"LineString", coordinates: d}})); }3b:T562,drawAntiNormal = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['maroon','maroon','maroon']; const size = opts?.size ? opts.size:8; const hSize = opts?.hSize ? opts.hSize:opts.size; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const decoWidth = opts?.decoWidth ? opts.decoWidth:1; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size, -1); const offsets = dataOffsets.points; const vectors = dataOffsets.vectors; svg.selectAll(`path.antinorm_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(vectors) .enter().append("path") .attr("class", `antinorm_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', decoWidth) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path2({type:"Feature", geometry:{type:"LineString", coordinates: d}})); }3c:T5e6,drawEllipse = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['green','green','green']; const size = opts?.size ? opts.size:8; const hSize = opts?.hSize ? opts.hSize:opts.size; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const decoWidth = opts?.decoWidth ? opts.decoWidth:1; const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding, pieced:false}); const path2 = geoCurvePath(d3.curveLinear, proj); const tSize = 100*size/length; const dataOffsets = relativeOffsets(centers, size); const offsets = dataOffsets.points; const ellipses = offsets.map((d,i) => buildGeoEllipse(proj, d, getPoint, size, hSize)); svg.selectAll(`path.ellipse_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .data(ellipses) .enter().append("ellipse") .attr("class", `ellipse_${datapath.properties?.uuid?datapath.properties?.uuid:'unknown'}`) .attr("stroke", frontColor[2]) .style('stroke-width', decoWidth) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("transform", d => `rotate(${d.phi} ${d.cx} ${d.cy})`) .attr("cx", d => d.cx) .attr("cy", d => d.cy) .attr("rx", d => d.rx) .attr("ry", d => d.ry); }3d:Te9d,drawBreakedLine = (svg, datapath, proj, opts={}) => { const frontColor = opts?.color ? opts.color:['maroon','maroon','maroon']; const size = opts?.size ? opts.size:8; const hSize = opts?.hSize ? opts.hSize:opts.size; const padding = opts?.padding ? opts.padding:8; const opacity = opts?.opacity ? opts.opacity:0.5; const lineWidth = opts?.lineWidth ? opts.lineWidth:2; const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear; const decoWidth = opts?.decoWidth ? opts.decoWidth:2; const split = opts?.split ? opts.split:6; const hSizeVariability = opts?.hSizeVariability ? opts.hSizeVariability:50; const pathPoints = datapath.geometry.coordinates; var rest = pathPoints.length; var n0 = 0; var n = 0; var dn = 0; var dn0 = 0; var index = -1; const segments = []; var tmp_hSize = 0; var lastPoint = pathPoints[0]; while (rest>0) { index += 1; n0 = n; dn0 = rest<=3 ? rest: d3.randomInt(3, split)(); rest = Math.max(rest - dn0, 0); if (rest<3) { dn=dn0+rest; rest = 0; } else { dn = dn0 } n = Math.min(n0+dn, pathPoints.length-1); const coord = [lastPoint, ...relativeOffsets([...pathPoints.slice(n0, n), pathPoints[n]], tmp_hSize, Math.random() < 0.5 ? -1:1).points.map(d =>[d[0], d[1]]).slice(1)]; const partialData = {type: "Feature", properties:{uuid:index}, geometry: {type: "LineString", coordinates: coord}}; const path = geoCurvePath(lineCurve, proj); const path2 = d3.line().curve(d3.curveLinear); const ghost = svg.append("g") .append("path") .attr("stroke", frontColor[0]) .attr("fill", "none") .style('stroke-width', lineWidth) .style('stroke-opacity', opacity) .attr("d", path(partialData)); const pathNode = ghost.node(); const pathLength = pathNode.getTotalLength(); const interpolator = d3.interpolate(0, pathLength); const getPoint = (t) => { const SVGPt = pathNode.getPointAtLength(interpolator(t)); return [SVGPt.x, SVGPt.y, t] } const tSize = size/pathLength; const centers1 = [...distribute(getPoint, 50), getPoint(1)]; const centers2 = [...distribute(getPoint, 35), getPoint(1)]; const path3 = geoCurvePath(d3.curveLinear, proj); const dataOffsets1 = relativeOffsets(centers1, d3.randomUniform(hSizeVariability/4, hSizeVariability), 1); const offsets1 = dataOffsets1.points; const vectors1 = dataOffsets1.vectors.slice(1); const dataOffsets2 = relativeOffsets(centers2, d3.randomUniform(hSizeVariability/4, hSizeVariability), -1); const offsets2 = dataOffsets2.points; const vectors2 = dataOffsets2.vectors.slice(1); tmp_hSize = dataOffsets2.distance[dataOffsets2.distance.length-1]; lastPoint = Math.random() < 0.5 ? dataOffsets1.vectors[dataOffsets1.vectors.length-1][1] : dataOffsets2.vectors[dataOffsets2.vectors.length-1][1]; svg.selectAll(`path.norm_${index}`) .data(vectors1) .enter().append("path") .attr("class", `norm_${index}`) .attr("stroke", frontColor[2]) .style('stroke-width', decoWidth) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path3({type:"Feature", geometry:{type:"LineString", coordinates: d}})); svg.selectAll(`path.antinorm_${index}`) .data(vectors2) .enter().append("path") .attr("class", `antinorm_${index}`) .attr("stroke", frontColor[2]) .style('stroke-width', decoWidth) .attr("opacity", opacity) .attr("fill", frontColor[2]) .attr("d", d => path3({type:"Feature", geometry:{type:"LineString", coordinates: d}})); } return segments }3e:[] 2e:{"id":"0a3233a3c6cca4d5","slug":"boundary-between-air-masses","title":"Boundary between air masses","thumbnail":"cff3db787c3c6809f5a20e67cbdf07bccc06c17c17ebc41ca5698aebe38d0081","access_level":"public","create_time":"$D2026-06-23T13:20:13.845Z","update_time":"$D2026-06-30T06:50:51.802Z","view_time":null,"first_public_time":"$D2026-06-25T19:26:49.866Z","fork":{"id":"06cc063b9706e59c","slug":"lines","title":"Lines","owner":{"id":"4f7ede1f16226bd8","login":"tristramg","name":"Tristram Gräbener"}},"stars":8,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":1642,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Boundary between air masses","cells":[{"id":0,"value":"# Boundary between air masses\n\n_Inspired by the questions raised in [Ken Martin's notebook: **Surface Front Visualization Experiment**](https://observablehq.com/@kpmartinatgarmin/surface-front-visualization-experiment)_","pinned":false,"hidden":false,"mode":"md"},{"id":1372,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"viewof timeslot = Inputs.range([0, data.length-1], {step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"viewof settings = Inputs.form(\n {\n size: Inputs.range([5, 50], {value: 8, step: 1, label: \"Size\"}),\n padding: Inputs.range([0, 30], {value: 8, step: 1, label: \"Padding\"}),\n },\n {\n template: (inputs) => htl.html`

\n ${inputs.size} ${inputs.padding}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"(_Below a function based on [Amit Sch' notebook: **Offset Path**](https://observablehq.com/@meetamit/offset-path#relativeOffsets)_)","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"(_Below a function based on [C. Xanthopoulakis' notebook: **Tangent circles along a curved path**](https://observablehq.com/@infographeo/tangent-circles-along-a-path#lineup)_)","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"viewof curveMethod = Inputs.form(\n {\n interpolation: Inputs.select(methods, {label: \"Interpolation\", format: x => x.name, value: methods.find(t => t.name === \"CatmullRom\")}),\n tension: Inputs.range([0, 1], {value: 0, step: 0.05, label: \"Tension (for Cardinal)\"}),\n α: Inputs.range([0, 1], {value: 1, step: 0.05, label: \"α (for CatmullRom)\"})\n },\n {\n template: (inputs) => htl.html`

\n ${inputs.interpolation} ${inputs.tension} ${inputs.α}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"curve = {\n var base_curve = d3[curveMethod.interpolation.value];\n var chosen_curve = base_curve;\n if ([\"curveCardinal\", \"curveCardinalOpen\", \"curveCardinalClosed\"].includes(curveMethod.interpolation.value)) {\n chosen_curve = chosen_curve.tension(curveMethod.tension)\n }\n if ([\"curveCatmullRom\", \"curveCatmullRomOpen\", \"curveCatmullRomClosed\"].includes(curveMethod.interpolation.value)) {\n chosen_curve = chosen_curve.alpha(curveMethod.α)\n }\n if ([\"curveBundle\"].includes(curveMethod.interpolation.value)) {\n chosen_curve = chosen_curve.beta(curveMethod.β)\n }\n return chosen_curve\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`## COLD FRONT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"buildGeoTriangle = (proj, po, getPointAt, dt) => {\n\n const start = po[2]==0 ? 0 : -0.5;\n const end = 0.5;\n const base = d3.range(start,end,0.1).map(i => getPointAt(po[2]+i*(dt/100))).map(d=>proj.invert([d[0], d[1]]));\n \n return [base[0], proj.invert([po[0], po[1]]),...base.reverse()];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg.call(drawColdFront, data2, d3.geoIdentity(), {size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"md`## WARM FRONT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"buildGeoHalfEllipse = (proj, po, getPointAt, dt, size, turn=0) => {\n const p = getPointAt(po[2]);\n const phi = -vectorAngle([po[0]-p[0], po[1]-p[1]], [po[0]-p[0], -p[1]]);\n\n const deg = (rad) => { return rad * 180 / Math.PI }\n\n const ellipse = {cx:p[0], cy:p[1], rx:size/2, ry:size, phi:phi};\n\n\n const { x1, y1, x2, y2, fa, fs } = getEndpointParameters(\n ellipse.cx,\n ellipse.cy,\n ellipse.rx,\n ellipse.ry,\n ellipse.phi,\n (turn+1)*Math.PI,\n Math.PI\n );\n\n const { cx, cy, theta, dTheta } = getCenterParameters(\n x1,\n y1,\n x2,\n y2,\n fa,\n fs,\n ellipse.rx,\n ellipse.ry,\n ellipse.phi\n );\n\n return `M ${p[0]} ${p[1]} L ${x1} ${y1} A ${ellipse.rx} ${ellipse.ry} ${deg(ellipse.phi)} ${fa} ${fs} ${x2} ${y2} Z`\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawWarmFront, data2, d3.geoIdentity(),{size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"md`## OCCLUDED FRONT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawOccludedFront, data2, d3.geoIdentity(),{size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"md`## STATIONARY FRONT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawStationaryFront, data2, d3.geoIdentity(), {size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"md`## SURFACE TROUGH`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"drawSurfaceTrough = (svg, datapath, proj, opts={}) => {\n\n const frontColor = opts?.color ? opts.color:['orange','transparent'];\n const size = opts?.size ? opts.size:8;\n const padding = opts?.padding ? opts.padding:8;\n const opacity = opts?.opacity ? opts.opacity:0.5;\n const lineWidth = opts?.lineWidth ? opts.lineWidth:2;\n const lineCurve = opts?.lineCurve ? opts.lineCurve:d3.curveLinear;\n \n const {length, getPoint, centers} = drawFrontBase(svg, datapath, proj, {color:frontColor, opacity, lineWidth, lineCurve, size:size+padding});\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawSurfaceTrough, data2, d3.geoIdentity(),{size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"md`## NORMALS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawNormal, data2, d3.geoIdentity(),{size: settings.size, padding: settings.padding, lineCurve:curve})\n .call(drawAntiNormal, data2, d3.geoIdentity(),{size: settings.size, padding: settings.padding, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"md`## ELLIPSES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"buildGeoEllipse = (proj, po, getPointAt, dt, size) => {\n const p = getPointAt(po[2]);\n const phi = -vectorAngle([po[0]-p[0], po[1]-p[1]], [po[0]-p[0], -p[1]]);\n\n const deg = (rad) => { return rad * 180 / Math.PI }\n\n const ellipse = {cx:p[0], cy:p[1], rx:dt, ry:size, phi:deg(phi)};\n\n return ellipse;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg\n .call(drawNormal, data2, d3.geoIdentity(),{size: settings.size, hSize:2*settings.size, padding: 40, lineCurve:curve})\n .call(drawAntiNormal, data2, d3.geoIdentity(),{size: settings.size, hSize:2*settings.size, padding: 40, lineCurve:curve})\n .call(drawEllipse, data2, d3.geoIdentity(),{size: settings.size, hSize:2*settings.size, padding: 40, lineCurve:curve});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"## TEST on progress...","pinned":false,"hidden":false,"mode":"md"},{"id":1438,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"{\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 300]);\n svg.call(drawBreakedLine, data2, d3.geoIdentity(), {lineCurve:curve})\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"data = d3.json(\"https://gist.githubusercontent.com/kpmartinatgarmin/0cbdb165aa92d7e06f72134bb88ede4f/raw/4aa244f7b08258e17608a1157cacb95b40565220/weatherfront.json\").then(function(d){\n return d.WeatherGenericGetAllResponse.Format.DataList[0].SurfaceFrontForecast.SurfaceFrontForecastDataList;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"fronts = Object({\n \"type\": \"FeatureCollection\",\n \"features\": data[timeslot].SurfaceFrontList.map((front,i) => {\n return {\n \"type\": \"Feature\",\n \"properties\": {type: front.type, intensity: front.intensity, uuid:uuid()},\n \"geometry\": {\n \"type\": \"LineString\",\n \"coordinates\": front.Points.PointList.map(point => [point.lon, point.lat])\n }\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"pressureCenters = {\n\n var out = {\n \"type\": \"FeatureCollection\",\n \"features\": []\n }\n\n data[timeslot].PressureCenterList.forEach(function(c){\n var tmp = {\n \"type\": \"Feature\",\n \"properties\": {},\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": []\n }\n }\n tmp.properties.type = c.type\n tmp.properties.pressure = c.pressure\n tmp.geometry.coordinates = [c.Location.lon, c.Location.lat]\n\n out.features.push(tmp)\n })\n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"COLDFronts = fronts.features.filter(d => d.properties.type==0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"WARMFronts = fronts.features.filter(d => d.properties.type==4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"OCCLUDEDFronts = fronts.features.filter(d => d.properties.type==1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"STATIONARYFronts = fronts.features.filter(d => d.properties.type==2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"SURFACETroughs = fronts.features.filter(d => d.properties.type==3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"firstLine = [\n [71, 165],\n [143, 87],\n [194, 155],\n [242, 172],\n [278, 168],\n [316, 69],\n [344, 50],\n [404, 66],\n [486, 145],\n [548, 170],\n [596, 164],\n [632, 116],\n [702, 70],\n [774, 97],\n [816, 98]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"data2 = Object({type: \"Feature\", geometry: {type: \"LineString\", coordinates: firstLine}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"import {getEndpointParameters, getEllipsePointForAngle, getCenterParameters, vectorAngle} from \"@toja/ellipse-and-elliptical-arc-conversion\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"uuid = function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"methods = [\n {name: \"Cardinal\", value: \"curveCardinal\"},\n {name: \"Linear\", value: \"curveLinear\"},\n {name: \"Basis\", value: \"curveBasis\"},\n {name: \"Natural\", value: \"curveNatural\"},\n {name: \"MonotoneX\", value: \"curveMonotoneX\"},\n {name: \"MonotoneY\", value: \"curveMonotoneY\"},\n {name: \"CatmullRom\", value: \"curveCatmullRom\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"geoCurvePath = (curve, projection, context) => {\n \n const curveContext = (curve, close=false) => {\n return {\n moveTo(x, y) {\n curve.lineStart();\n curve.point(x, y);\n },\n lineTo(x, y) {\n curve.point(x, y);\n },\n closePath() {\n curve.lineEnd();\n }\n };\n }\n \n return object => {\n const pathContext = context === undefined ? d3.path() : context;\n d3.geoPath(projection, curveContext(curve(pathContext)))(object);\n return context === undefined ? pathContext + \"\" : undefined;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 2f:"$2e:body"