27:null 28:["$","title",null,{"children":"Will the temperature drop below freezing tonight? | inanimatedObjects | Observable"}] 2d:T425,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 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 temperature 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.`2e:T1218,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", "cornflowerblue")2f:T5368,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", "yellow") .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 Temperature"); 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 Temperature"); 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 < 0 ? "steelblue" : "tomato")) .selection(), (update) => update .attr("cx", (d) => xScaleDots(d.x)) .attr("cy", (d) => yScaleDotsMax(d.y)) .attr("fill", (d) => (d.x < 0 ? "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 < 0 ? "steelblue" : "tomato")) .selection(), (update) => update .attr("cx", (d) => xScaleDots(d.x)) .attr("cy", (d) => yScaleDotsMin(d.y)) .attr("fill", (d) => (d.x < 0 ? "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 = "tomato"; if (_yScale.invert(point.y) <= 0) fillColor = "steelblue"; // 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 zero line const _zeroLine = [ { x: _margins.left - box2575width * 1.5, y: _yScale(0) }, { x: _margins.left + _plotWidth + box2575width * 1.5, y: _yScale(0) } ]; 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(); }30:Tab5,md`From the above box plot, it would be natural to assume that as the temperature drops on the night of the 14th / 15th there is a low probability of the temperature dropping below zero. 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 below 0° may lead the viewer to think that there is a larger probability that the temperature will actually drop below 0°. However, both the dot plot and the plume hide the characteristics of the underlying data. By clicking on "Spaghetti", 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 drop below 0° and return to a temperature above freezing at different times, suggesting that it is in fact an uncertainty in the timing of the drop below 0° that is leading to low probabilities for each hour. Clicking "Animation" will show the evolution of each ensemble member, with the circle tracing the temperature evolution being red when the temperature is above 0° and blue when the temperature is below 0°. It now becomes somewhat clearer that in fact every ensemble member drops below 0° during the night. So, although there is considerable uncertainty in the timing, the forecast suggests that the temperature will definitley drop below 0° over 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 temperature for each ensemble member between the brushed times and the upper one the same, but for the maximum temperature 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° bins, displaying each binned member as a dot and stacking them for each bin. The dots are red for temperatures above 0° and blue for temperatures below 0°. Brushing over the night of the 14th / 15th confirms that the temperature drops below 0° for every ensemble member at some point during that time window, so in answer to the original question - __the forecast suggests that the temperature will definitely drop below freezing at some point in the night, but there is considerable uncertainty about exactly when that will happen.__`31: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); }32:[{"id":"ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","href":"https://static.observableusercontent.com/files/ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","name":"boxplots_lie_example_data.json","type":"application/json","lastModified":1742410290559.155,"size":74275}] 2b:{"id":"9ab2cd53f13ff311","slug":null,"title":"Will the temperature drop below freezing tonight?","thumbnail":"ff9561b24e71350ea27bc2979f062224a37730f376e3ed0403334a22e652fab6","access_level":"public","create_time":"$D2025-03-19T18:51:30.559Z","update_time":"$D2025-03-19T20:15:17.466Z","view_time":null,"first_public_time":"$D2025-03-19T19:11:50.699Z","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":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":922,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"},{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Will the temperature drop below freezing tonight?","cells":[{"id":0,"value":"md`# Will the temperature drop below freezing tonight?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2d","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":917,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$2f","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":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"data = await FileAttachment(\"boxplots_lie_example_data.json\").json()","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":"$31","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":914,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2c:"$2b:body"