2e:null 2f:["$","title",null,{"children":"Will the wind speed go above 25 ms-1 tonight? | Andrew Singleton | Observable"}] 34:T427,md`_"No forecast is complete without an estimation of the uncertainty"_ is a phrase that comes up a lot in forecasting. This is because a forecast accompanied by an estimate of the uncertainty is likely to aid decision making in a risk based environment. In weather forecasting, uncertainty estimates are made by running an ensemble of forecasts. In other words, for each point in time in the future several forecasts are made, each one with a slight tweak made to the forecasting model. These tweaks to the forecasting model attempt to account for the uncertainty that is inherent in both the atmosphere and the model itself. Forecasts for a location are then often presented as a time series using box plots or plumes that represent the range of forecasts made for each point in time. In the example below, a forecast of wind speed is shown using a box plot, with the wide box showing the interquartile range (the 25th to the 75th percentile), the narrower box showing the 10th to the 90th percentile and the whiskers showing the full range of the forecasts.`35:T5286,tscleimeSeries = { // plot dimensions and margins const _margins = { left: 100, top: 10, right: width / 4, bottom: 50 }; const _plotWidth = width - _margins.left - _margins.right; const _plotHeight = ((width / 2) | 0) - _margins.top - _margins.bottom; const dotRadius = (width / 136) | 0; d3.selectAll(".dot").remove(); d3.selectAll(".brush").remove(); // Data prep const _boxData = quantileData .map(d => ({ time: d.time, min: d.quantiles.min, max: d.quantiles.max, range: "q00100" })) .concat( quantileData.map(d => ({ time: d.time, min: d.quantiles.q10, max: d.quantiles.q90, range: "q1090" })) ) .concat( quantileData.map(d => ({ time: d.time, min: d.quantiles.q25, max: d.quantiles.q75, range: "q2575" })) ); const _medianData = quantileData.map(d => ({ time: d.time, med: d.quantiles.med, mean: d.quantiles.mean })); const _plumeData = d3 .groups(_boxData, d => d.range) .map(d => ({ range: d[0], timeseries: d[1] })); // Scales const _yScale = d3 .scaleLinear() .domain([ d3.min(quantileData.map(d => d.quantiles).map(d => d.min)), d3.max(quantileData.map(d => d.quantiles).map(d => d.max)) ]) .range([_plotHeight + _margins.top, _margins.top]) .nice(); const _xScale = d3 .scaleTime() .domain([ d3.min(quantileData, d => xAccessor(d)), d3.max(quantileData, d => xAccessor(d)) ]) .range([_margins.left, _plotWidth + _margins.left]); const box2575width = _plotWidth / quantileData.length - 5; const box1090width = box2575width / 2; const whiskerWidth = 1; // Set up brush event const brushed = event => { const brushedTimes = event.selection.map(d => _xScale.invert(d)); d3.selectAll(".dotAxis").remove(); const timeAccessor = (d, col) => d3.timeParse("%Y-%m-%d %H:%M:%S")(d[col]); const dotData = d3 .flatRollup( data.filter( d => xAccessor(d) >= d3.min(brushedTimes) && xAccessor(d) <= d3.max(brushedTimes) ), v => ({ min: d3.min(v.map(d => d.forecast)), max: d3.max(v.map(d => d.forecast)), mean: d3.mean(v.map(d => d.forecast)), timeMin: v[d3.minIndex(v.map(d => d.forecast))].time, timeMax: v[d3.maxIndex(v.map(d => d.forecast))].time }), d => d.member ) .map(d => { let a = d[1]; a.member = d[0]; return a; }); const threshBin = 0.5; const thresholds = dataToThresholds(data, "forecast", threshBin); const binDataMin = makeBinData(dotData, "min", 0.5, thresholds, 0); const binDataMax = makeBinData(dotData, "max", 0.5, thresholds, 0); const binDataMean = makeBinData(dotData, "mean", 0.5, thresholds, 0); const maxDotsY = dotData.length; const maxDotsX = thresholds.length; const dotPlotRangeX = [ _margins.left + _plotWidth + box2575width * 4, width - 20 ]; const dotPlotRangeY = [_margins.top + _plotHeight / 2 - 20, _margins.top]; const dotDiameter = d3.min([ (dotPlotRangeX[1] - dotPlotRangeX[0]) / maxDotsX, (dotPlotRangeY[0] - dotPlotRangeY[1]) / maxDotsY ]); const xScaleDots = d3 .scaleLinear() .domain(d3.extent(thresholds)) .range([ _margins.left + _plotWidth + box2575width * 4, _margins.left + _plotWidth + box2575width * 4 + thresholds.length * dotDiameter ]); const yScaleDotsMax = d3 .scaleLinear() .domain([0, maxDotsY * threshBin]) .range([ _margins.top + _plotHeight / 2 - 20, _margins.top + _plotHeight / 2 - 20 - maxDotsY * dotDiameter ]); const yScaleDotsMin = d3 .scaleLinear() .domain([0, maxDotsY * threshBin]) .range([ _margins.top + _plotHeight, _margins.top + _plotHeight - maxDotsY * dotDiameter ]); const xAxisDots = d3.axisBottom().scale(xScaleDots); const xAxisDotsMax = selectOrAppend("g", "xAxisDotsMax", svg) .call(xAxisDots) .attr("class", "dot dotAxis") .style( "transform", `translate(0px, ${_margins.top + _plotHeight / 2 - 20}px)` ) .style("color", "#999") .style("font-size", "11px"); const xAxisDotsMin = selectOrAppend("g", "xAxisDotsMin", svg) .call(xAxisDots) .attr("class", "dot dotAxis") .style("transform", `translate(0px, ${_margins.top + _plotHeight}px)`) .style("color", "#999") .style("font-size", "11px"); const xAxisDotsMaxLabel = selectOrAppend("g", "xAxisDotsMaxLabel", svg) .append("text") .attr("class", "dot dotAxis") .attr( "x", xScaleDots( thresholds[0] + (thresholds[thresholds.length - 1] - thresholds[0]) / 2 ) ) .attr("y", _margins.top + _plotHeight / 2 + 10) .style("fill", "#999") .style("font-size", "11px") .style("text-anchor", "middle") .text("Max Wind Speed"); const xAxisDotsMinLabel = selectOrAppend("g", "xAxisDotsMinLabel", svg) .append("text") .attr("class", "dot dotAxis") .attr( "x", xScaleDots( thresholds[0] + (thresholds[thresholds.length - 1] - thresholds[0]) / 2 ) ) .attr("y", _margins.top + _plotHeight + 30) .style("fill", "#999") .style("font-size", "11px") .style("text-anchor", "middle") .text("Min Wind Speed"); const dotPlotMax = selectOrAppend("g", "dotPlotMax", svg) .selectAll("circle") .data(binDataMax, d => d.member) .join( enter => enter .append("circle") .attr("class", "dot") .attr("cx", d => xScaleDots(d.x)) .attr("cy", d => yScaleDotsMax(d.y)) .attr("r", dotDiameter / 2) .attr("fill", d => (d.x < 25 ? "steelblue" : "tomato")) .selection(), update => update .attr("cx", d => xScaleDots(d.x)) .attr("cy", d => yScaleDotsMax(d.y)) .attr("fill", d => (d.x < 25 ? "steelblue" : "tomato")) .selection(), exit => exit.remove().selection() ); const dotPlotMin = selectOrAppend("g", "dotPlotMin", svg) .selectAll("circle") .data(binDataMin, d => d.member) .join( enter => enter .append("circle") .attr("class", "dot") .attr("cx", d => xScaleDots(d.x)) .attr("cy", d => yScaleDotsMin(d.y)) .attr("r", dotDiameter / 2) .attr("fill", d => (d.x < 25 ? "steelblue" : "tomato")) .selection(), update => update .attr("cx", d => xScaleDots(d.x)) .attr("cy", d => yScaleDotsMin(d.y)) .attr("fill", d => (d.x < 25 ? "steelblue" : "tomato")) .selection(), exit => exit.remove().selection() ); }; const brushStart = () => { d3.selectAll(".dot").attr("fill", "none"); d3.selectAll(".dotAxis").remove(); }; const _brush = d3 .brushX() .extent([ [_margins.left, _margins.top], [_margins.left + _plotWidth, _margins.top + _plotHeight] ]) .on("brush", brushed) .on("start", brushStart); // Set up SVG let svg = d3.select("#boxPlot"); if (svg.empty()) { svg = d3 .create("svg") .attr("id", "boxPlot") .attr("font-family", "sans-serif"); } svg .style("background-color", "#FFF") .style("height", _plotHeight + _margins.top + _margins.bottom) .style("width", _plotWidth + _margins.left + _margins.right); // Add brush const brush = selectOrAppend("g", "brush", svg).call(_brush); // Add axes const _yAxis = d3.axisLeft().scale(_yScale); const yAxis = selectOrAppend("g", "yAxis", svg) .call(_yAxis) .style( "transform", `translate(${_margins.left - box2575width * 1.5}px, 0px)` ) .style("color", "#999") .style("font-size", "11px"); const _xAxis = d3.axisBottom().scale(_xScale); const xAxis = selectOrAppend("g", "xAxis", svg) .call(_xAxis) .style("transform", `translate(0px, ${_margins.top + _plotHeight}px)`) .style("color", "#999") .style("font-size", "11px"); // Add border const border = selectOrAppend("g", "border", svg) .selectAll("rect") .data([ { x: _margins.left - box2575width * 1.5, y: _margins.top, width: _plotWidth + box2575width * 3, height: _plotHeight } ]) .join( enter => enter .append("rect") .style("fill", "none") .style("stroke", "#555") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .selection(), update => update .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .selection(), exit => exit.remove().selection() ); // Box plot if (plotType === "boxplot") { d3.selectAll(".plume") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".spaghetti") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".ordered") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".anim") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); const boxes = selectOrAppend("g", "boxes", svg) .selectAll("rect") .data(_boxData) .join( enter => enter .append("rect") .attr("class", "boxWhisker") .attr("x", d => d.range === "q00100" ? _xScale(xAccessor(d)) - whiskerWidth / 2 : d.range === "q1090" ? _xScale(xAccessor(d)) - box1090width / 2 : _xScale(xAccessor(d)) - box2575width / 2 ) .attr("y", d => _yScale(d.max)) .attr("width", d => d.range === "q00100" ? whiskerWidth : d.range === "q1090" ? box1090width : box2575width ) .attr("height", d => _yScale(d.min) - _yScale(d.max)) .attr("fill", d => d.range === "q00100" ? "#777" : d.range === "q1090" ? "#7EA1CC" : "steelblue" ) .attr("stroke", "none") .attr("opacity", 0) .transition() .duration(1000) .attr("opacity", 1) .selection(), update => update .attr("x", d => d.range === "q00100" ? _xScale(xAccessor(d)) - whiskerWidth / 2 : d.range === "q1090" ? _xScale(xAccessor(d)) - box1090width / 2 : _xScale(xAccessor(d)) - box2575width / 2 ) .attr("y", d => _yScale(d.max)) .attr("width", d => d.range === "q00100" ? whiskerWidth : d.range === "q1090" ? box1090width : box2575width ) .attr("height", d => _yScale(d.min) - _yScale(d.max)) .selection(), exit => exit.remove().selection() ); const medianCrossbar = selectOrAppend("g", "medianCrossbar", svg) .selectAll("path") .data(_medianData) .join( enter => enter .append("path") .attr("class", "boxWhisker") .attr("d", d => d3 .line() .x(dd => dd.x) .y(dd => dd.y)([ { x: _xScale(xAccessor(d)) - box2575width / 1.85, y: _yScale(d.med) }, { x: _xScale(xAccessor(d)) + box2575width / 1.85, y: _yScale(d.med) } ]) ) .attr("stroke", "#333") .attr("stroke-width", 3) .attr("stroke-linecap", "round") .attr("opacity", 0) .transition() .duration(1000) .attr("opacity", 1) .selection(), update => update .attr("d", d => d3 .line() .x(dd => dd.x) .y(dd => dd.y)([ { x: _xScale(xAccessor(d)) - box2575width / 1.85, y: _yScale(d.med) }, { x: _xScale(xAccessor(d)) + box2575width / 1.85, y: _yScale(d.med) } ]) ) .selection(), exit => exit.remove().selection() ); } const areaGenerator = d3 .area() .curve(isCurve ? d3.curveMonotoneX : d3.curveLinear) .x(d => _xScale(xAccessor(d))) .y0(d => _yScale(d.min)) .y1(d => _yScale(d.max)); const lineGenerator = d3 .line() .curve(isCurve ? d3.curveMonotoneX : d3.curveLinear) .x(d => _xScale(xAccessor(d))) .y(d => _yScale(d.med)); // plumes const plumeTransTime = 1500; if (plotType === "plume") { d3.selectAll(".boxWhisker") .transition() .delay(plumeTransTime) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".spaghetti") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".ordered") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".anim") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); const plumes = selectOrAppend("g", "plumes", svg) .selectAll("path") .data(_plumeData) .join( enter => enter .append("path") .attr("class", "plume") .attr("fill", d => d.range === "q00100" ? "lightseagreen" : d.range === "q1090" ? "mediumseagreen" : "seagreen" ) .attr("d", d => areaGenerator(d.timeseries)) .attr("opacity", 0) .transition() .duration(plumeTransTime) .attr("opacity", 0.5) .selection(), update => update.attr("d", d => areaGenerator(d.timeseries)).selection(), exit => exit.remove().selection() ); const plumeMedian = selectOrAppend("g", "plumeMedian", svg) .selectAll("path") .data([_medianData]) .join( enter => enter .append("path") .attr("class", "plume") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-width", 3) .attr("d", d => lineGenerator(d)) .attr("opacity", 0) .transition() .duration(plumeTransTime) .attr("opacity", 0.5) .selection(), update => update.attr("d", d => lineGenerator(d)).selection(), exit => exit.remove().selection() ); } const spagGenerator = d3 .line() .curve(isCurve ? d3.curveMonotoneX : d3.curveLinear) .x(d => _xScale(xAccessor(d))) .y(d => _yScale(d.forecast)); // Spaghetti if (plotType === "spaghetti" || plotType === "ordered") { d3.selectAll(".boxWhisker") .transition() .delay(plumeTransTime) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".plume") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".anim") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); const spag = selectOrAppend("g", "spag", svg) .selectAll("path") .data(memberData, d => d.member) .join( enter => enter .append("path") .attr("class", "spaghetti") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("d", d => spagGenerator(d.timeseries)) .attr("mix-blend-mode", "multiply") .attr("opacity", 0) .transition() .duration(plumeTransTime) .attr("opacity", 1) .selection(), update => update .transition() .duration(plumeTransTime) .delay((d, i) => i * 50) .attr("d", d => spagGenerator(d.timeseries)) .selection(), exit => exit.remove().selection() ); } // Animation const _pathTween = path => { const length = path.getTotalLength(); // Get the length of the path const r = d3.interpolate(0, length); //Set up interpolation from 0 to the path length return function(t) { const point = path.getPointAtLength(r(t)); // Get the next point along the path let fillColor = "steelblue"; if (_yScale.invert(point.y) >= 25) fillColor = "tomato"; // Change to blue if below freezing d3.select(this) // Select the circle .attr("cx", point.x) // Set the cx .attr("cy", point.y) // Set the cy .attr("fill", fillColor); }; }; const animDelay = ((100 * width) / 316.67) | 0; const animDuration = animDelay * 10; if (plotType === "anim") { d3.selectAll(".boxWhisker") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".plume") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".spaghetti") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); d3.selectAll(".anim") .transition() .delay(500) .duration(1000) .attr("opacity", 0) .remove(); // Invsible path used to control animations const pathInvisible = selectOrAppend("g", "invisible", svg) .attr("fill", "none") .attr("stroke", "none") .selectAll("path.invisible") .data(memberData) .join("path") .attr("class", "anim") .attr("d", d => spagGenerator(d.timeseries)); const pathReveal = selectOrAppend("g", "reveal", svg) .attr("fill", "none") .attr("stroke", "#ddd") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("g.reveal") .data(memberData) .join("path") .attr("class", "anim") .attr("d", d => spagGenerator(d.timeseries)) .style("mix-blend-mode", "multiply") .each(function(d, i) { const length = pathInvisible.nodes()[i].getTotalLength(); d3.select(this) .attr("stroke-dasharray", length + " " + length) .attr("stroke-dashoffset", length) .transition() .delay(i * animDelay + 1500) .duration(animDuration) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0); //.on("end", dotPlot); }); const circle = selectOrAppend("g", "circle", svg) .selectAll("circle") .data(memberData) .join("circle") .attr("class", "anim") .attr("fill", "none") .attr("r", dotRadius) .attr("cx", 0) .attr("cy", d => _yScale(d.timeseries[0].forecast)) .each(function(d, i) { d3.select(this) .transition() .attr("fill", "tomato") .delay(i * animDelay + 1500) .duration(animDuration) .ease(d3.easeLinear) .tween("pathTween", () => _pathTween(pathInvisible.nodes()[i])); }); } // Add 25 line const _zeroLine = [ { x: _margins.left - box2575width * 1.5, y: _yScale(25) }, { x: _margins.left + _plotWidth + box2575width * 1.5, y: _yScale(25) } ]; const zeroLine = selectOrAppend("g", "zeroLine", svg) .selectAll("path") .data([_zeroLine]) .join( enter => enter .append("path") .attr("d", d => d3 .line() .x(d => d.x) .y(d => d.y)(d) ) .attr("stroke", "#BBB") .attr("stroke-width", 3) .attr("stroke-dasharray", 7) .selection(), update => update .attr("d", d => d3 .line() .x(d => d.x) .y(d => d.y)(d) ) .selection(), exit => exit.remove().selection() ); return svg.node(); }36:Tc3b,

From the above box plot, it would be natural to assume that as the wind speed increases on the night of the 25th / 26th there is a low probability of the wind speed going above 25 ms^-1.

If you click on "Plume", the same data will be shown, but as plumes with the same quantile ranges. This is, in effect, painting in the gaps between each of the boxes of the box plot. A larger area above 25 ms^-1 may lead the viewer to think that there is a larger probability that the wind speed will actually go above 25 ms^-1.

However, both the dot plot and the plume hide the characteristics of the underlying data. By clicking on "Ordered" you will see an illustration of how your brain will naturally understand the underlying data. However, by clicking on "Spaghetti" you will see the actual underlying data as all of the ensemble members are shown in what is quite aptly known as a spaghetti plot. Now there is a hint that the box plot and the plumes may be hiding some useful information. It looks like many of the ensemble members go above 25 ms^-1 and return to a wind speed below that threshold at different times, suggesting that it is in fact an uncertainty in the timing of the wind speed going above 25 ms^-1 that is leading to low probabilities for each hour. Clicking "Animation" will show the evolution of each ensemble member, with the circle tracing the wind speed evolution being blue when the wind speed is below 25 ms^-1 and red when the wind speed is above 25 ms^-1. It now becomes somewhat clearer that in fact every ensemble member goes above 25 ms^-1 during the night. So, although there is considerable uncertainty in the timing, the forecast suggests that the wind speed will definitley go above 25 ms^-1 during the night night, it just cannot predict exactly when with much accuracy.

All of this means that there is a need to get more information from basic plots of time series of ensemble weather forecasts. This can be done by brushing on any of the forms of visualizing the ensemble, which will generate 2 dot plots to the right. The lower one shows the distribution of the minimum wind speed for each ensemble member between the brushed times and the upper one the same, but for the maximum wind speed between the brushed times. The dot plots are constructed by binning the minimum or maximum temperature between the brushed times for each ensemble member into 0.5 ms^-1 bins, displaying each binned member as a dot and stacking them for each bin. The dots are blue for wind speeds below 25 ms^-1 and red for wind speeds above 25 ms^-1. Brushing over the night of the 14th / 15th confirms that the wind speed goes above 25 ms^-1 for every ensemble member at some point during that time window, so in answer to the original question - the forecast suggests that the wind speed will definitely go above 25 ms^-1 at some point in the night, but there is considerable uncertainty about exactly when that will happen.

37:T582,makeBinData = (fcst, binBy, binSize, thresholds, threshold) => { const _dataToBins = (data, col, threshes) => { const binData = d3 .bin() .value(d => d[col]) .thresholds(threshes); return binData(data); }; const _getX = (x0, x1, bin, numBins, binSize) => { if (bin < numBins) { return x1 - binSize / 2; } else { return x0 + binSize / 2; } }; const _sortIndices = arr => Array.from(Array(arr.length).keys()).sort((a, b) => arr[a] < arr[b] ? -1 : (arr[b] < arr[a]) | 0 ); const _binsToPos = (data, binSize, col, threshold) => { let out = []; let counter = 0; for (let i = 0; i < data.length; i++) { const sortedIndices = _sortIndices(data[i]); data[i] = data[i].sort((x, y) => d3.ascending(x[col], y[col])); for (let j = 0; j < data[i].length; j++) { out.push({ x: _getX(data[i].x0, data[i].x1, i + 1, data.length, binSize), y: binSize / 2 + j * binSize, member: data[i][j].member, memberType: data[i][j].member === "mbr000" ? "control" : "perturbed", exceed: data[i][j][col] >= threshold ? "yes" : "no", threshold: threshold, value: data[i][j][col] }); counter++; } } return out; }; const out = _dataToBins(fcst, binBy, thresholds); return _binsToPos(out, binSize, binBy, threshold); }38:[{"id":"ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","href":"https://static.observableusercontent.com/files/ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","name":"boxplots_lie_example_data.json","type":"application/json","lastModified":1650871990056.707,"size":74275}] 32:{"id":"de5f46226f19eb6a","slug":"will-the-wind-speed-go-above-25-ms-1-tonight","title":"Will the wind speed go above 25 ms-1 tonight?","thumbnail":"a865ba155b88b4075eb578a15df8e6134ab6b20bfb44a8cd838f6fcf7ede3524","access_level":"public","create_time":"$D2022-04-25T07:33:10.056Z","update_time":"$D2022-04-25T08:42:18.854Z","view_time":null,"first_public_time":"$D2022-04-25T08:50:12.204Z","has_unpublished_edits":null,"fork":{"id":"046ec6f129f47a83","slug":"will-the-temperature-drop-below-freezing-tonight","title":"Will the temperature drop below freezing tonight?","owner":{"id":"5466a1b89a3b9cf8","login":"andrew-met","name":"Andrew Singleton"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5466a1b89a3b9cf8","login":"andrew-met","name":"Andrew Singleton","avatar_url":"https://avatars-next.observableusercontent.com/bfb80e3474383ea79cf357a96ac33c4ea92c310df6f16880bf4442eb889c4845","tier":"starter_2024"},"version":1024,"publish_version":1024,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c69c7a95ec920de","login":"andrew-met","name":"Andrew Singleton","avatar_url":"https://avatars-next.observableusercontent.com/bfb80e3474383ea79cf357a96ac33c4ea92c310df6f16880bf4442eb889c4845","tier":null}],"members":[{"type":"individual","id":"5c69c7a95ec920de","login":"andrew-met","name":"Andrew Singleton","avatar_url":"https://avatars-next.observableusercontent.com/bfb80e3474383ea79cf357a96ac33c4ea92c310df6f16880bf4442eb889c4845","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Will the wind speed go above 25 ms-1 tonight?","cells":[{"id":0,"value":"

Will the wind speed go above 25 ms^-1 tonight?

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof plotType = radio({\n options: [\n { label: 'Box plot', value: 'boxplot' },\n { label: 'Plume', value: 'plume' },\n { label: 'Ordered', value: 'ordered' },\n { label: 'Spaghetti', value: 'spaghetti' },\n { label: 'Animation', value: 'anim' }\n ],\n value: 'boxplot'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"viewof isCurve = checkbox([\"Smooth\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"dataIn = await FileAttachment(\"boxplots_lie_example_data.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"data = dataIn.map(d => ({time: d3.utcFormat(\"%Y-%m-%d %H:%M:%S\")(d3.utcMonth.offset(d3.utcDay.offset(d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(d.time), 11), 6)), member: d.member, forecast: d.forecast * -1 + 25}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"quantileData = d3\n .flatRollup(\n data,\n v => ({\n min: d3.min(v.map(d => d.forecast)),\n q10: d3.quantile(v.map(d => d.forecast), 0.1),\n q25: d3.quantile(v.map(d => d.forecast), 0.25),\n med: d3.quantile(v.map(d => d.forecast), 0.5),\n q75: d3.quantile(v.map(d => d.forecast), 0.75),\n q90: d3.quantile(v.map(d => d.forecast), 0.9),\n max: d3.max(v.map(d => d.forecast)),\n mean: d3.mean(v.map(d => d.forecast))\n }),\n d => d.time\n )\n .map(d => ({\n time: d[0],\n quantiles: d[1],\n whisker: [{ time: d[0], value: d[1].min }, { time: d[0], value: d[1].max }]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"memberData = {\n if (plotType === \"ordered\") {\n return d3.shuffle( \n d3.groups(\n d3.flatRollup(\n data, \n v => d3.sort(v, (a, b) => d3.ascending(a.forecast, b.forecast)),\n d => d.time\n ).map(d => d[1].map((m, i) => ({time: m.time, forecast: d[1][0].forecast + (i / d[1].length) * (d[1][d[1].length - 1].forecast - d[1][0].forecast), member: i < 9 ? \"mbr00\" + (i + 1) : \"mbr0\" + (i + 1)}))).flat(),\n d => d.member\n )\n ).map((d, i) => ({member: i < 9 ? \"mbr00\" + (i + 1) : \"mbr0\" + (i + 1), timeseries: d[1]})) \n }\n return d3.shuffle(\n d3.flatRollup(\n data,\n v => v.map(d => ({ time: d.time, forecast: d.forecast })),\n d => d.member\n )\n .map(d => ({ member: d[0], timeseries: d[1] }))\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"selectOrAppend = (elementType, className, parent) => {\n const selection = parent.select(\".\" + className);\n if (!selection.empty()) return selection;\n return parent.append(elementType).attr(\"class\", className);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"dataToThresholds = (fcst, binBy, binSize) => {\n const _roundUp = (value, step) => {\n step || (step = 1.0);\n const inv = 1.0 / step;\n return Math.ceil(value * inv) / inv;\n };\n\n const _roundDown = (value, step) => {\n step || (step = 1.0);\n const inv = 1.0 / step;\n return Math.floor(value * inv) / inv;\n };\n\n const rangeLow = _roundDown(d3.min(fcst, d => d[binBy]), binSize);\n const rangeHigh = _roundUp(d3.max(fcst, d => d[binBy]), binSize) + binSize;\n return d3.range(rangeLow, rangeHigh, binSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"xAccessor = d => d3.timeParse(\"%Y-%m-%d %H:%M:%S\")(d.time)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"import { button, radio, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"