2d:null 2e:["$","title",null,{"children":"From an ensemble forecast to visualization | Andrew Singleton | Observable"}] 33:T5633,timeSeries = { // 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 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() ); // Show nothing const plumeTransTime = 1500; if (plotType === "invisible") { 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(".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(); } // 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 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" ? "#AEC1EE" : d.range === "q1090" ? "#7EA1CC" : "steelblue" ) .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(); }34: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); }35:[{"id":"ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","href":"https://static.observableusercontent.com/files/ddfdd5fb62465b0cae24f2339d436bc556927920c3f0fd457939988410c6d20d2dd634881fed94120b76660d26740500b912275162edb47ac139d2eb458ee55f","name":"boxplots_lie_example_data.json","type":"application/json","lastModified":1667376572748.851,"size":74275}] 31:{"id":"ab303b6b55ad90f7","slug":"from-an-ensemble-forecast-to-visualization","title":"From an ensemble forecast to visualization","thumbnail":"0b2348bc1504537bcb01cb08419cdf83abd3e14073a910b66e4e89166928776b","access_level":"public","create_time":"$D2022-11-02T08:09:32.748Z","update_time":"$D2022-11-02T08:46:20.555Z","view_time":null,"first_public_time":"$D2022-11-02T08:40:12.555Z","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":3,"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":923,"publish_version":null,"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":2,"collection":null,"type":"notebook","body":{"title":"From an ensemble forecast to visualization","cells":[{"id":0,"value":"md`# From an ensemble forecast to visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"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.\n\nIn 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.\n\nThe chart below shows how an ensemble of forecasts of air temperature could be presented for a single location in order for a user to get an idea of the uncertainty in the forecast, both for the time they are interested and as the forecast develops over time.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof plotType = radio({\n options: [\n { label: 'Nothing', value: 'invisible'},\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: 'invisible'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"viewof isCurve = Inputs.checkbox([\"Smooth\"], {value: [\"Smooth\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md`In the above visualization, choosing \"Animation\" shows how each member of the ensemble is forecasted through time, and what's known as a \"Spaghetti\" plot is a static image of that. \"Box plot\" and \"Plume\" are different methods of showing the same information - i.e the distribution of the ensemble members at each forecast time, with breaks in colour showing the interquartile range (25th - 75th percentile), the 10th - 90th percentile and the full range. \"Ordered\" shows a time series of each quantile of the distribution.\n\nBrushing on the chart will give dot plots of the minumum and maximum temperature from each ensemble member for the brushed time window. These show that the time series can hide important information about the uncertainty in the timing of events - in the case of the dot plots, the event is the temperature dropping below freezing.`","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":"$34","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":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"