30:T817,md` ### What causes an avalanche? In simple terms, an avalanche is a mass of snow moving downhill. While there are many factors at play in the conditions that lead to an avalanche, the basics elements are: - A mass of cohesive snow - Underneath that mass of snow, a weaker layer - Something to slide on. This can be another layer of snow or the ground. - Sufficient slope angle Given the preceding conditions an avalanche can occur, sometimes naturally or at other times with help from outside influence like a skier or a snowmobile. ### Layers A snowpack is made up of layers of differing snow. These layers are a main factor in avalanches. What forms a layer within a snowpack? Weather conditions such as temperature and wind at the time of deposition contribute to layering. For example, light, crystalized snow falling during a very cold night will differ greatly from rounded graupel falling on a relatively warm day. Layers can also be formed within an existing snowpack post deposition. Under the right conditions, snow crystals can change their shape and characteristics even when deep inside the snowpack. This is called **snow metamorphosis** and the following graphics will explore this topic in depth. ### Snow structure The shape and structure of snow is the determines how well that snow bonds together. As discussed above, a layer of snow made up of particles that bond well to each other will form cohesive, strong snow. Conversely, snow made up of particles that do not bond well together will be weak. Put strong snow above a layer of weak, uncohesive snow and you have a recipe for an avalanche. At a microscopic level, snow is made up of crystals and the shape of these crystals determine its strength and cohesiveness. Strong snow is generally made up of small, rounded particles as they pack together densely and have more surface area to stick together (also known as sintering). Large crystals however, do not stick together well. If you have ever tried to make a snowball out of fresh, fluffy powder you have experienced this first-hand. `31:T4cc,md`### Faceted snow When snow recrystallizes within the snowpack and forms large, angular crystals it's called faceting. Faceting can turn previously strong, stable snow into a weak layer that persists for a relatively long time. Faceting is a major contributor to avalanches. ### Temperature gradients What causes faceting? A large difference in temperature between the ground and the snow's surface creates a temperature gradient. If this gradient is larger than one degree per 10cm, faceting can occur. Conversely, a weak temperature gradient will round the snow crystals and strengthen them. | Temperature Gradient | Value | Outcome | |---------------|------------------|------------------------| | Subcritical | < Δ 0.5°C / 10cm | Rounding/strengthening | | Critical | < Δ 1°C / 10cm | Little or no change | | Supercritical | > Δ 1°C / 10cm | Faceting/weakening |
Given a sufficient layer of insulating snow, the ground temperature consistently maintain ~0°C. The surface however can get much colder, even colder than the air temperature because of cold air pooling at the surface. Let's examine the relationship between surface temperature, snow depth and temperature gradient below. `32:T1c6c,gradientMap = { const gutter = 35; const gradWidth = 0.5 * outerWidth - gutter / 2; const localWidth = 0.5 * outerWidth - gutter / 2; const SVG = d3.select(DOM.svg(width, outerHeight)); const colors = ["#B5BF11", "#73032C"] //get depth at a given threshold function thresholdToDepth(thresh) { return ((groundTemp - surfaceTemp) / thresh) * 10; } const facetingThreshold = 1; const strengtheningThreshold = 0.5; var svg = SVG.append("g").attr( "transform", "translate(" + margin.left + "," + margin.top + ")" ); const tempScale = d3 .scaleLinear() .domain([surfaceTemp, groundTemp]) .range([0, localWidth - (margin.right + margin.left)]); const areaGenerator = d3 .area() .x(function(d) { return tempScale(d[0]); }) .y0(function(d) { return yScale(0); }) .y1(function(d) { return yScale(d[1]); }); const gradLineContainer = svg .append("g") .attr("transform", `translate(${gradWidth + gutter}, 0)`); const outline = gradLineContainer .append('rect') .attr('width', localWidth - (margin.right + margin.left)) .attr('height', chartHeight) .style('fill', colors[0]) .style("fill-opacity", 0.3) .style('stroke', '#ccc'); // no-change zone gradLineContainer .append("path") .data([[[surfaceTemp, thresholdToDepth(strengtheningThreshold)], [0, 0]]]) .attr("class", "area") .attr("d", areaGenerator) .attr("class", "gradient-area") .style("fill", "#f0f5ed"); // faceting zone gradLineContainer .append("path") .data([[[surfaceTemp, thresholdToDepth(facetingThreshold)], [0, 0]]]) .attr("class", "area") .attr("d", areaGenerator) .attr("class", "gradient-area") .style("fill-opacity", 0.3) .style("fill", colors[1]); //gradient indicator const gradLine = gradLineContainer .append("line") .attr("x1", tempScale(surfaceTemp)) .attr("x2", tempScale(groundTemp)) .attr("y1", yScale(snowDepth)) .attr("y2", yScale(0)) .style("stroke-width", 2) .style("stroke", "black"); //faceting indicator const facetLine = gradLineContainer .append("line") .attr("x1", tempScale(surfaceTemp)) .attr("x2", tempScale(groundTemp)) .attr("y1", yScale(thresholdToDepth(facetingThreshold))) .attr("y2", yScale(0)) .attr("stroke-dasharray", "4 1") .style("stroke-width", 1) .style("stroke", colors[1]); //strengthening indicator const strengthLine = gradLineContainer .append("line") .attr("x1", tempScale(surfaceTemp)) .attr("x2", tempScale(groundTemp)) .attr("y1", yScale(thresholdToDepth(strengtheningThreshold))) .attr("y2", yScale(0)) .attr("stroke-dasharray", "4 1") .style("stroke-width", 1) .style("stroke", colors[0]); const labelY = d => { const ypos = -(yScale(thresholdToDepth(d))/tempScale(groundTemp)) * (tempScale(groundTemp)/2) + yScale(thresholdToDepth(d)) return ypos + 180 } const getAngle = d => { return 180 - (Math.atan2(yScale(thresholdToDepth(d)) - yScale(0), tempScale(groundTemp)-tempScale(surfaceTemp)) * (180 / Math.PI)) + 180; }; const facetLabel = gradLineContainer .append("text") .attr("transform", `translate(${tempScale(groundTemp)/2}, ${labelY(facetingThreshold) + 5}) rotate(${getAngle(facetingThreshold) })`) .style("font", "small var(--sans-serif)") .style("text-anchor", "middle") .attr("visibility", surfaceTemp < -4 ? "visible" : "hidden") .text("FACETING"); const strengthLabel = gradLineContainer .append("text") .attr("transform", `translate(${tempScale(groundTemp)/2}, ${labelY(strengtheningThreshold) - 15}) rotate(${getAngle(strengtheningThreshold) })`) .style("font", "small var(--sans-serif)") .style("text-anchor", "middle") .text("ROUNDING"); // depth axis (X) const xAxis = d3.axisBottom(tempScale).ticks(5); gradLineContainer .append("g") .attr('transform', `translate(0,${chartHeight})`) .call(xAxis); const glYAxis = d3.axisLeft(yScale) .ticks(10) .tickFormat(x => "") gradLineContainer.append("g") .call(glYAxis); // temp axis label gradLineContainer .append('text') .text('Temp (°C)') .attr('y', chartHeight + 30) .attr('x', tempScale(groundTemp)/2) .style("font", "small var(--sans-serif)") .style("font-size", "12px") .style('text-anchor', 'middle'); gradLineContainer .append('text') .text('Depth (cm)') .attr('y', chartHeight + 30) .attr('x', tempScale(surfaceTemp) - 10) .style("font", "small var(--sans-serif)") .style("font-size", "12px") .style('text-anchor', 'middle'); // add foreign object to svg const fObGroup = svg .append("g") .attr("transform", `translate(0,${yScale(snowDepth)})`) const foreignObject = fObGroup .append("foreignObject") .attr("width", gradWidth) .attr("height", chartHeight); // add embedded body to foreign object const foBody = foreignObject .append("xhtml:body") .style("margin", "0px") .style("padding", "0px") .style("background-color", "none") .style("width", gradWidth + "px") .style("height", chartHeight + "px"); let canvas = DOM.canvas(gradWidth, snowDepth); foBody.node().appendChild(canvas); const context = canvas.getContext("2d"); const colorScale = d3.scaleSequential(d3.interpolateRdBu).domain([0, -20]); //get temp from depth const tScale = d3 .scaleLinear() .domain([0, snowDepth]) .range([0, surfaceTemp]); //get depth from pixel const pixelScale = d3 .scaleLinear() .domain([0, Math.floor(chartHeight - yScale(snowDepth))]) .range([0, snowDepth]); const pixelSize = Math.floor(chartHeight - yScale(snowDepth)); for (var i = 0; i < pixelSize; i++) { console.log(); context.beginPath(); context.rect(1, pixelSize - i, gradWidth, 1); context.fillStyle = colorScale(tScale(pixelScale(i))); context.fill(); } const yTempAxisScale = d3.scaleLinear().domain([0, surfaceTemp]).range([yScale(0),yScale(snowDepth)]); // axes const yAxis = d3.axisRight(yScale).ticks(10); svg.append("g") .attr("transform", `translate(${localWidth},0)`) .call(yAxis); const yTempAxis = d3.axisLeft(yTempAxisScale).ticks(Math.floor(snowDepth / 40)); svg.append("g") .call(yTempAxis); //ground label svg .append('text') .text(`Ground: 0°C`) .attr('x', localWidth/ 2) .attr('y', yScale(0) + 15) .style("font", "small var(--sans-serif)") .style("font-size", "14px") .style('text-anchor', 'middle'); //surface label svg .append('text') .text(`Snow surface: ${surfaceTemp}°C`) .attr('x', localWidth/ 2) .attr('y', yScale(snowDepth) - 5) .style("font", "small var(--sans-serif)") .style("font-size", "14px") .style('text-anchor', 'middle'); // axis label svg .append('text') .text('Temp (°C)') .attr("transform", `translate(-30,${chartHeight/2}) rotate(-90)`) .style("font", "small var(--sans-serif)") .style("font-size", "12px") .style('text-anchor', 'middle'); return SVG.node(); }33:T549,vaporPressure = { let context = DOM.context2d(W, H); context.canvas.width = W; context.canvas.height = H; const particles = 300; for (let i = 0; i < particles; i++) { let radius = (Math.random() * 3) + 1; let x = Math.random() * W * 0.8 + radius; let y = Math.random() * H; let xVelocity = (Math.random() - 0.5) * 2; let yVelocity = d3.randomUniform(-4, -particles / 90)(); let hide = Math.random() * H; vaporArray.push( new Vapor(context, x, y, xVelocity, yVelocity, radius, hide) ); } const shadowScale = d3.scaleSequential(d3.interpolateRdBu).domain([5, 12]); function animate() { requestAnimationFrame(animate); context.clearRect(0, 0, context.canvas.width, context.canvas.height); nodes.forEach(poly => { const lineString = line( ngon(poly.sides, poly.coords[0], poly.coords[1], 15, poly.rotation) ); context.rotate(Math.random * (Math.PI * 2)); const p = new Path2D(lineString); context.fillStyle = d3.interpolateBlues(poly.sides / n); // Shadow context.shadowColor = shadowScale(poly.sides); context.shadowBlur = 8; context.fill(p); }); vaporArray.forEach(vp => { vp.update(); }); } visibility().then(function() { animate(); }); context.canvas.id = "canvas"; return context; }34:T80c,// Based on https://www.jasondavies.com/poisson-disc/ function poissonDiscSampler(width, height, radius) { var k = 30, // maximum number of samples before rejection radius2 = radius * radius, R = 3 * radius2, cellSize = radius * Math.SQRT1_2, gridWidth = Math.ceil(width / cellSize), gridHeight = Math.ceil(height / cellSize), grid = new Array(gridWidth * gridHeight), queue = [], queueSize = 0, sampleSize = 0; return function() { if (!sampleSize) return sample(Math.random() * width, Math.random() * height); // Pick a random existing sample and remove it from the queue. while (queueSize) { var i = (Math.random() * queueSize) | 0, s = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (var j = 0; j < k; ++j) { var a = 2 * Math.PI * Math.random(), r = Math.sqrt(Math.random() * R + radius2), x = s[0] + r * Math.cos(a), y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent, // or closer than 2 * radius to any existing sample. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y); } queue[i] = queue[--queueSize]; queue.length = queueSize; } }; function far(x, y) { var i = (x / cellSize) | 0, j = (y / cellSize) | 0, i0 = Math.max(i - 2, 0), j0 = Math.max(j - 2, 0), i1 = Math.min(i + 3, gridWidth), j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { var o = j * gridWidth; for (i = i0; i < i1; ++i) { if ((s = grid[o + i])) { var s, dx = s[0] - x, dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y) { var s = [x, y]; queue.push(s); grid[gridWidth * ((y / cellSize) | 0) + ((x / cellSize) | 0)] = s; ++sampleSize; ++queueSize; return s; } } 35:[] 2e:{"title":"Faceted Snow","cells":[{"id":0,"value":"md`# Faceted Snow\n#### *How strong temperature gradients lead to dangerous avalanche conditions.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"html`\n

\"Rounded\" — Avalanche crown. Source: Utah Avalanche Center

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"html`\n

Snow crystals under a scanning electron microscope. Source: http://emu.arsusda.gov/

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof surfaceTemp = slider({\n min: -20,\n max: -1,\n step: 1,\n value: -15,\n title: \"Surface temp (°C)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof snowDepth = slider({\n min: 40,\n max: maxDepth,\n step: 1,\n value: 300,\n title: \"Snow depth (cm)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"html`\nΔ ${d3.format(\".2f\")(gradient)}°C / 10cm (${status()})\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`\nNotice the black line on the right-most graphic. Its slope represents the average temperature gradient in the snowpack as it slopes from the surface to the ground (the depth axis is shared between both graphics). A shallower slope will denote a steeper gradient. The thresholds for rounding and faceting are also displayed.\n\n### Vapor pressure gradients\n\nWhy do temperature gradients form facets? Warmer air at the bottom holds more water vapor. This creates what's called a **vapor pressure gradient** as the higher pressure, warmer air at the bottom wants to move upward to equalize. As the water vapor moves upward, it's deposited and crystalizes on grains of snow along the way, forming facets.\n\nBelow is a simulated view of the process. Change the gradient slider to transition from faceting and rounding conditions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"viewof vaporGradient = slider({\n min: 0,\n max: 3,\n step: .1,\n value: 1,\n title: \"Temperature gradient\",\n display: v => `${v}°C / 10cm`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"{\n let output;\n let color;\n if (vaporGradient >= 1.5) {\n output = \"Faceting\";\n color = 'red';\n } else if (vaporGradient <= 0.5) {\n output = \"Rounding\";\n color = 'green';\n } else {\n output = \"No change\";\n color = 'gray';\n }\n return html`${output}`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"viewof canvas = vaporPressure.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"html`\n

${vpKey.canvas}

Water vapor

${roundKey.canvas}

Rounded snow

${facetKey.canvas}

Faceted snow

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"viewof reset = button({value: \"Reset\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md` Notice that it takes much longer for facets to become rounded than it does for them to form. In reality, rounding can take weeks to occur while faceting can happen in only a day or two. This is due to the strength of the gradient. Faceting occurs under a strong gradient which moves much more vapor. Rounding occurs under much weaker conditions and therefore takes longer.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"md`*Much of the information presented here was sourced from [Staying Alive in Avalanche Terrain: Bruce Tremper](https://www.mountaineers.org/books/books/staying-alive-in-avalanche-terrain-3rd-edition)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"tick = {\n reset;\n let i = 0;\n\n while (true) {\n yield Promises.delay(40, i++);\n const yThresh = H - H * (i / 300);\n\n nodes.forEach(node => {\n if (vaporGradient >= 1.5) {\n if (node.coords[1] > yThresh) {\n node.sides -=\n Math.random() > 1 - vaporGradient / 10 && node.sides > 5 ? 1 : 0;\n }\n }\n if (vaporGradient <= 0.5) {\n node.sides += Math.random() > .99 && node.sides < 12 ? 1 : 0;\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"n = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"yScale = d3\n .scaleLinear()\n .domain([0, maxDepth])\n .range([chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":" function status() {\n if (gradient <= 0.5) {\n return \"Rounding\";\n } else if (gradient >= 1) {\n return \"Faceting\";\n } else {\n return \"No change\";\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"gradient = (groundTemp - surfaceTemp) / (snowDepth / 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"groundTemp = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"maxDepth = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"roundKey = {\n const pWidth = 100;\n const pHeight = 50;\n let context = DOM.context2d(pWidth, pHeight);\n context.canvas.width = pWidth;\n context.canvas.height = pHeight;\n \n \n const lineString = line(\n ngon(12, pWidth/2, pHeight/2, 15, 0)\n );\n const p = new Path2D(lineString);\n context.fillStyle = d3.interpolateBlues(12 / n);\n\n context.fill(p);\n \n context.canvas.id = \"round-key\";\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"facetKey = {\n const pWidth = 100;\n const pHeight = 50;\n let context = DOM.context2d(pWidth, pHeight);\n context.canvas.width = pWidth;\n context.canvas.height = pHeight;\n \n \n const lineString = line(\n ngon(5, pWidth/2, pHeight/2, 15, 0)\n );\n const p = new Path2D(lineString);\n context.fillStyle = d3.interpolateBlues(5 / n);\n\n context.fill(p);\n \n context.canvas.id = \"facet-key\";\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"vpKey = {\n const pWidth = 100;\n const pHeight = 50;\n let context = DOM.context2d(pWidth, pHeight);\n context.canvas.width = pWidth;\n context.canvas.height = pHeight;\n\n for(let i=0; i < 20; i++){\n context.beginPath();\n context.arc(Math.random() * pWidth, Math.random() * pHeight, Math.random() * 5, 50, 0, 2 * Math.PI);\n context.fillStyle = 'rgba(9,42,96,0.5)';\n context.fill()\n \n }\n context.canvas.id = \"vp-key\";\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"line = d3\n .line()\n .x(function(d) {\n return d[0];\n })\n .y(function(d) {\n return d[1];\n })\n .curve(d3.curveLinearClosed);","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"function ngon(sides, cx, cy, radius, rotation) {\n const r = ((12 - sides) / 12 + 1) * radius;\n const x = a => cx + r * Math.cos(a);\n const y = a => cy + r * Math.sin(a);\n\n const points = d3.range(0, sides).map(d => {\n const angle = d * ((Math.PI * 2) / sides) + rotation;\n return [x(angle), y(angle)];\n });\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"Vapor = {\n class Vapor {\n constructor(context, x, y, xVelocity, yVelocity, radius, hide) {\n this.x = x;\n this.y = y;\n this.radius = radius;\n this.xVelocity = xVelocity;\n this.yVelocity = yVelocity;\n this.radius = radius;\n this.color = 'rgba(9,42,96,0.5)';\n this.minRadius = radius;\n this.hide = hide;\n\n this.draw = function() {\n if (this.hide < this.y) {\n context.beginPath();\n context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);\n context.fillStyle = this.color;\n context.shadowColor = \"transparent\";\n context.fill();\n }\n };\n\n this.update = function() {\n if (this.y - this.radius < 0) {\n this.y = context.canvas.height;\n }\n this.x += this.xVelocity;\n this.y += this.yVelocity;\n \n\n this.draw();\n };\n }\n }\n return Vapor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"vaporArray = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"nodes = {\n const p = [];\n for (var i = 0; i < 2000; ++i) {\n var s = sample();\n if (s)\n p.push({\n coords: s,\n sides: n,\n rotation: Math.random() * 15\n });\n if (!s) {\n break;\n }\n }\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"sample = poissonDiscSampler(W, H, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"{\n reset;\n nodes.forEach(node => {\n node.sides = n;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = ({top: 20, right: 20, bottom: 40, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"outerHeight = 400\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"outerWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"W = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":838,"value":"H = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"chartWidth = outerWidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"chartHeight = outerHeight - margin.top - margin.bottom;\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { slider , button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}