2e:null 2f:["$","title",null,{"children":"The road towards new methods for visualizing ensemble weather forecasts that combine weather parameters | Andrew Singleton | Observable"}] 34:T1826,{ const svg = d3.select(boxWhiskerPlots); const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); selectOrCreate("g", "whiskerLines", chart) .selectAll("path") .data(quantileData.data) .join( enter => enter .append("path") .attr("d", d => lineGenerator(d.whisker)) .style("stroke", "#777") .style("fill", "none") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("d", d => lineGenerator(d.whisker)) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "p90Box", chart) .selectAll("rect") .data(quantileData.data) .join( enter => enter .append("rect") .attr("x", d => d.x1) .attr("y", d => d.y90) .attr("width", d => d.xWidth1) .attr("height", d => d.yHeight1) .style("fill", "#7EA1CC") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("x", d => d.x1) .attr("y", d => d.y90) .attr("width", d => d.xWidth1) .attr("height", d => d.yHeight1) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "iqBox", chart) .selectAll("rect") .data(quantileData.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.y75) .attr("width", d => d.xWidth2) .attr("height", d => d.yHeight2) .style("fill", "steelblue") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("x", d => d.x2) .attr("y", d => d.y75) .attr("width", d => d.xWidth2) .attr("height", d => d.yHeight2) .selection(), exit => exit.remove().selection() ); if (showPoints === "yes") { selectOrCreate("g", "members", chart) .selectAll("circle") .data(memberData.data) .join( enter => enter .append("circle") .attr( "cx", d => d.x - iqBoxWidth / 4 + (Math.random() * iqBoxWidth) / 2 ) .attr("cy", d => d.y) .attr("r", 2.5) .style("stroke", "#F77") .style("fill", "none") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr( "cx", d => d.x - iqBoxWidth / 4 + (Math.random() * iqBoxWidth) / 2 ) .attr("cy", d => d.y) .selection(), exit => exit.remove().selection() ); } else { chart.select(".members").remove(); } // panel borders selectOrCreate("g", "plotBorder", chart) .selectAll("rect") .data(quantileData.border) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .style("stroke", "black") .style("fill", "none"); // Temperature axes const yAxisTemperature = d3.axisLeft().scale(quantileData.scales[0].yScale); const xAxis = d3 .axisBottom() .scale(quantileData.scales[0].xScale) .tickFormat(""); const xAxisWithLabels = d3.axisBottom().scale(quantileData.scales[0].xScale); selectOrCreate("g", "yAxisT2m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisTemperature) .style("color", "#555") .style("font-size", "11px"); let selection = chart.select(".xAxisT2m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisT2m") .call(xAxis) .style( "transform", `translate(0px, ${panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Wind speed axes const yAxisWindSpeed = d3.axisLeft().scale(quantileData.scales[1].yScale); selectOrCreate("g", "yAxisS10m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisWindSpeed) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisS10m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisS10m") .call(xAxis) .style( "transform", `translate(0px, ${2 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Precip axes const yAxisPrecip = d3.axisLeft().scale(quantileData.scales[2].yScale); selectOrCreate("g", "yAxisPcp", chart) //.transition() //.duration(1000 + 2400) .call(yAxisPrecip) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisPcp"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisPcp") .call(xAxis) .style( "transform", `translate(0px, ${3 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Cloud axes const yAxisCloud = d3.axisLeft().scale(quantileData.scales[3].yScale); selectOrCreate("g", "yAxisCAF", chart) //.transition() //.duration(1000 + 2400) .call(yAxisCloud) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisCAF"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisCAF") .call(xAxisWithLabels) .style( "transform", `translate(0px, ${4 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } selectOrCreate("g", "panelTitle", chart) .selectAll("text") .data(quantileData.param) .join("text") .text(d => d.name) .attr("x", 0) .attr("y", d => d.y - 5); }35:T1664,{ const svg = d3.select(ribbonPlots); const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); selectOrCreate("g", "fullRange", chart) .selectAll("path") .data(ribbonData) .join( enter => enter .append("path") .attr("d", d => areaGeneratorFull(d)) .style("stroke", "none") .style("fill", "steelblue") .style("opacity", 0.2) .selection(), update => update .transition() .duration(2400) .attr("d", d => areaGeneratorFull(d)) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "p90Range", chart) .selectAll("path") .data(ribbonData) .join( enter => enter .append("path") .attr("d", d => areaGenerator90(d)) .style("stroke", "none") .style("fill", "steelblue") .style("opacity", 0.5) .selection(), update => update .transition() .duration(2400) .attr("d", d => areaGenerator90(d)) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "iqRange", chart) .selectAll("path") .data(ribbonData) .join( enter => enter .append("path") .attr("d", d => areaGeneratorIq(d)) .style("stroke", "none") .style("fill", "steelblue") .selection(), update => update .transition() .duration(2400) .attr("d", d => areaGeneratorIq(d)) .selection(), exit => exit.remove().selection() ); if (showPoints === "yes") { selectOrCreate("g", "members", chart) .selectAll("circle") .data(memberData.data) .join( enter => enter .append("circle") .attr( "cx", d => d.x - iqBoxWidth / 4 + (Math.random() * iqBoxWidth) / 2 ) .attr("cy", d => d.y) .attr("r", 2.5) .style("stroke", "#F77") .style("fill", "none") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr( "cx", d => d.x - iqBoxWidth / 4 + (Math.random() * iqBoxWidth) / 2 ) .attr("cy", d => d.y) .selection(), exit => exit.remove().selection() ); } else { chart.select(".members").remove(); } selectOrCreate("g", "plotBorder", chart) .selectAll("rect") .data(quantileData.border) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .style("stroke", "black") .style("fill", "none"); // Temperature axes const yAxisTemperature = d3.axisLeft().scale(quantileData.scales[0].yScale); const xAxis = d3 .axisBottom() .scale(quantileData.scales[0].xScale) .tickFormat(""); const xAxisWithLabels = d3.axisBottom().scale(quantileData.scales[0].xScale); selectOrCreate("g", "yAxisT2m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisTemperature) .style("color", "#555") .style("font-size", "11px"); let selection = chart.select(".xAxisT2m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisT2m") .call(xAxis) .style( "transform", `translate(0px, ${panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Wind speed axes const yAxisWindSpeed = d3.axisLeft().scale(quantileData.scales[1].yScale); selectOrCreate("g", "yAxisS10m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisWindSpeed) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisS10m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisS10m") .call(xAxis) .style( "transform", `translate(0px, ${2 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Precip axes const yAxisPrecip = d3.axisLeft().scale(quantileData.scales[2].yScale); selectOrCreate("g", "yAxisPcp", chart) //.transition() //.duration(1000 + 2400) .call(yAxisPrecip) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisPcp"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisPcp") .call(xAxis) .style( "transform", `translate(0px, ${3 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Cloud axes const yAxisCloud = d3.axisLeft().scale(quantileData.scales[3].yScale); selectOrCreate("g", "yAxisCAF", chart) //.transition() //.duration(1000 + 2400) .call(yAxisCloud) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisCAF"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisCAF") .call(xAxisWithLabels) .style( "transform", `translate(0px, ${4 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } selectOrCreate("g", "panelTitle", chart) .selectAll("text") .data(quantileData.param) .join("text") .text(d => d.name) .attr("x", 0) .attr("y", d => d.y - 5); }36:T1b1c,{ const precip = boxWhisker( data.filter(d => d.lead_time < 25), selectedStation, "Pcp", width, height, panelMargins.left, panelHeight * 0 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 3 + margins.bottom + panelMargins.bottom ); const svg = d3.select(stackedProbPlot); const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); selectOrCreate("g", "q100Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.yMax) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMax ) .style("fill", "#F1EEF6") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.yMax) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMax ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q90Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.y90) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y90 ) .style("fill", "#D0D1E6") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.y90) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y90 ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q75Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.y75) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y75 ) .style("fill", "#A6BDDB") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.y75) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y75 ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q50Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.yMed) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMed ) .style("fill", "#74A9CF") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.yMed) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMed ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q25Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.y25) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y25 ) .style("fill", "#3690C0") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.y25) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y25 ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q10Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.y10) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y10 ) .style("fill", "#0570B0") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.y10) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.y10 ) .selection(), exit => exit.remove().selection() ); selectOrCreate("g", "q0Box", chart) .selectAll("rect") .data(precip.data) .join( enter => enter .append("rect") .attr("x", d => d.x2) .attr("y", d => d.yMin) .attr("width", d => d.xWidth2) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMin ) .style("fill", "#034E7B") .selection(), update => update .transition() .duration(1000) .delay((d, i) => (i % 24) * 100) .attr("y", d => d.yMin) .attr( "height", d => precip.panel[0].height + precip.panel[0].y - d.yMin ) .selection(), exit => exit.remove().selection() ); // panel borders selectOrCreate("g", "plotBorder", chart) .selectAll("rect") .data(quantileData.border) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .style("stroke", "black") .style("fill", "none"); // Axes const yAxis = d3.axisLeft().scale(precip.scales[0].yScale); const xAxis = d3.axisBottom().scale(precip.scales[0].xScale); selectOrCreate("g", "yAxisPreceip", chart) .call(yAxis) .style("color", "#555") .style("font-size", "11px"); chart .append("g") .call(xAxis) .style( "transform", `translate(0px, ${panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); // Title selectOrCreate("g", "panelTitle", chart) .selectAll("text") .data(precip.param) .join("text") .text(d => d.name) .attr("x", 0) .attr("y", d => d.y - 5); }37:Tf56,spag = { let svg = d3.select(".spag"); if (svg.empty()) { svg = d3 .create("svg") .attr("class", "spag") .attr("viewBox", [0, 0, width, height + margins.top]) .attr("font-family", "sans-serif") .attr("font-size", 16); } const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); const lines = selectOrCreate("g", "lines", chart) .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("mix-blend-mode", "multiply") .style("fill", "none") .selectAll("path") .data(memberTimeSeries) .join("path") .attr("d", d => lineGeneratorMember(d)); // panel borders selectOrCreate("g", "plotBorder", chart) .selectAll("rect") .data(quantileData.border) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .style("stroke", "black") .style("fill", "none"); // Temperature axes const yAxisTemperature = d3.axisLeft().scale(quantileData.scales[0].yScale); const xAxis = d3 .axisBottom() .scale(quantileData.scales[0].xScale) .tickFormat(""); const xAxisWithLabels = d3.axisBottom().scale(quantileData.scales[0].xScale); selectOrCreate("g", "yAxisT2m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisTemperature) .style("color", "#555") .style("font-size", "11px"); let selection = chart.select(".xAxisT2m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisT2m") .call(xAxis) .style( "transform", `translate(0px, ${panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Wind speed axes const yAxisWindSpeed = d3.axisLeft().scale(quantileData.scales[1].yScale); selectOrCreate("g", "yAxisS10m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisWindSpeed) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisS10m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisS10m") .call(xAxis) .style( "transform", `translate(0px, ${2 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Precip axes const yAxisPrecip = d3.axisLeft().scale(quantileData.scales[2].yScale); selectOrCreate("g", "yAxisPcp", chart) //.transition() //.duration(1000 + 2400) .call(yAxisPrecip) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisPcp"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisPcp") .call(xAxis) .style( "transform", `translate(0px, ${3 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Cloud axes const yAxisCloud = d3.axisLeft().scale(quantileData.scales[3].yScale); selectOrCreate("g", "yAxisCAF", chart) //.transition() //.duration(1000 + 2400) .call(yAxisCloud) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisCAF"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisCAF") .call(xAxisWithLabels) .style( "transform", `translate(0px, ${4 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } selectOrCreate("g", "panelTitle", chart) .selectAll("text") .data(quantileData.param) .join("text") .text(d => d.name) .attr("x", 0) .attr("y", d => d.y - 5); svg.call(hover, lines); return svg.node(); }38:T11f2,{ const svg = d3.select(hopPlots); const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); const lines = selectOrCreate("g", "lines", chart) .selectAll("path") .data( memberTimeSeries .map(d => d.filter( d => d.member === hopMember && (d.param === "Temperature" || d.param === "Wind Speed") ) ) .filter(d => d.length > 0) ) .join("path") .attr("d", d => lineGeneratorMember(d)) .style("stroke", "steelblue") .style("stroke-width", 3) .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("fill", "none"); const bars = selectOrCreate("g", "bars", chart) .selectAll("rect") .data( memberTimeSeries .reduce((a, b) => a.concat(b)) .filter( d => d.member === hopMember && (d.param === "1-hour Precipitation" || d.param === "Cloud Area Fraction") ) ) .join("rect") .attr("x", d => d.x - iqBoxWidth / 2) .attr("y", d => d.y) .attr("width", iqBoxWidth) .attr("height", d => d.param === "1-hour Precipitation" ? memberData.border[2].y + memberData.border[2].height - d.y : memberData.border[3].y + memberData.border[3].height - d.y ) .style("fill", "steelblue") .style("stroke", "none") .style("opacity", 0.5); // panel borders selectOrCreate("g", "plotBorder", chart) .selectAll("rect") .data(quantileData.border) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .style("stroke", "black") .style("fill", "none"); // Temperature axes const yAxisTemperature = d3.axisLeft().scale(quantileData.scales[0].yScale); const xAxis = d3 .axisBottom() .scale(quantileData.scales[0].xScale) .tickFormat(""); const xAxisWithLabels = d3.axisBottom().scale(quantileData.scales[0].xScale); selectOrCreate("g", "yAxisT2m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisTemperature) .style("color", "#555") .style("font-size", "11px"); let selection = chart.select(".xAxisT2m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisT2m") .call(xAxis) .style( "transform", `translate(0px, ${panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Wind speed axes const yAxisWindSpeed = d3.axisLeft().scale(quantileData.scales[1].yScale); selectOrCreate("g", "yAxisS10m", chart) //.transition() //.duration(1000 + 2400) .call(yAxisWindSpeed) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisS10m"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisS10m") .call(xAxis) .style( "transform", `translate(0px, ${2 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Precip axes const yAxisPrecip = d3.axisLeft().scale(quantileData.scales[2].yScale); selectOrCreate("g", "yAxisPcp", chart) //.transition() //.duration(1000 + 2400) .call(yAxisPrecip) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisPcp"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisPcp") .call(xAxis) .style( "transform", `translate(0px, ${3 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } // Cloud axes const yAxisCloud = d3.axisLeft().scale(quantileData.scales[3].yScale); selectOrCreate("g", "yAxisCAF", chart) //.transition() //.duration(1000 + 2400) .call(yAxisCloud) .style("color", "#555") .style("font-size", "11px"); selection = chart.select(".xAxisCAF"); if (selection.empty()) { chart .append("g") .attr("class", "xAxisCAF") .call(xAxisWithLabels) .style( "transform", `translate(0px, ${4 * panelHeight - panelMargins.bottom}px)` ) .style("color", "#555") .style("font-size", "11px"); } selectOrCreate("g", "panelTitle", chart) .selectAll("text") .data(quantileData.param) .join("text") .text(d => d.name) .attr("x", 0) .attr("y", d => d.y - 5); }39:Te28,{ const svg = d3.select(dotPlots); const chart = selectOrCreate("g", "chart", svg).style( "transform", `translate(${margins.left}px, ${margins.top}px)` ); const _xScale = d3 .scaleLinear() .domain(d3.extent(thresholds)) .range([0, dotRadius * 2 * thresholds.length]); const _yScale = d3 .scaleLinear() .domain([0, fcst.length * binSize]) .range([ dotPlotHeight - margins.bottom, dotPlotHeight - margins.bottom - dotRadius * 2 * fcst.length ]); const _cScale = colourBy === "T2m" ? d3 .scaleSequential(d3.interpolateTurbo) .domain(d3.extent(dotData, d => d.colour)) : d3 .scaleSequential(d3.interpolateViridis) .domain(d3.extent(dotData, d => d.colour)); const dots = selectOrCreate("g", "dots", chart) .selectAll("circle") .data(dotData, d => d.member) .attr("r", dotRadius) .attr("opacity", d => (d.exceed === "yes" ? 0.5 : 0.1)) .join( enter => enter .append("circle") .attr("cx", d => _xScale(d.x)) .attr("cy", d => _yScale(d.y)) .attr("fill", d => colourBy === "Nothing" ? "#180074" : _cScale(d.colour) ) .selection(), update => update .transition() .duration(1000) .delay((d, i) => i * 0) .attr("cx", d => _xScale(d.x)) .attr("cy", d => _yScale(d.y)) .attr("fill", d => colourBy === "Nothing" ? "#180074" : _cScale(d.colour) ) .selection(), exit => exit.remove().selection() ); const dateTextGroup = selectOrCreate("g", "dateTextGroup", chart); selectOrCreate("text", "dateText", dateTextGroup) .attr("x", 0) .attr("y", dotPlotHeight + margins.bottom) .text( animateDots === "no" ? selectedStation + ": " + dotDate : selectedStation + ": " + dotAnimationDate ); if (showSymbols === "yes") { const symbols = selectOrCreate("g", "symbols", chart) .selectAll("image") .data(dotData, d => d.member) .join( enter => enter .append("image") .attr("width", dotRadius * 1.5) .attr("height", dotRadius * 1.5) .attr("opacity", d => (d.exceed === "yes" ? 1 : 0.5)) .attr("href", d => weatherSymbols[[d.symbol]]) .attr("x", d => _xScale(d.x) - (dotRadius * 1.5) / 2) .attr("y", d => _yScale(d.y) - (dotRadius * 1.5) / 2) .selection(), update => update .transition() .duration(1000) .delay((d, i) => i * 0) .attr("x", d => _xScale(d.x) - (dotRadius * 1.5) / 2) .attr("y", d => _yScale(d.y) - (dotRadius * 1.5) / 2) .selection(), exit => exit.remove().selection() ); } else { d3.selectAll(".symbols").remove(); } const _tickFmt = binSize => { const binSizeString = binSize.toString(); let decimalIndex = binSizeString.indexOf("."); if (decimalIndex === -1) { return ".0f"; } else { return "." + binSizeString.substr(decimalIndex + 1).length + "f"; } }; const _xAxisGenerator = d3 .axisBottom() .scale(_xScale) //.tickValues(thresholds) .tickFormat(d3.format(_tickFmt(binSize))); const xAxis = selectOrCreate("g", "xAxis", chart) .transition() .duration(1000) .call(_xAxisGenerator) .style("transform", `translate(0px, ${dotPlotHeight - margins.bottom}px)`) .style("color", "#555") .style("font-size", "11px"); }3a:T63a,makeBoxWhiskerData = () => { const temperature = boxWhisker( data.filter(d => d.lead_time < 25), selectedStation, "T2m", width, height, panelMargins.left, panelHeight * 0 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 3 + margins.bottom + panelMargins.bottom ); const windSpeed = boxWhisker( data.filter(d => d.lead_time < 25), selectedStation, "S10m", width, height, panelMargins.left, panelHeight * 1 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 2 + margins.bottom + panelMargins.bottom ); const precip = boxWhisker( data.filter(d => d.lead_time < 25), selectedStation, "Pcp", width, height, panelMargins.left, panelHeight * 2 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 1 + margins.bottom + panelMargins.bottom ); const cloud = boxWhisker( data.filter(d => d.lead_time < 25), selectedStation, "CAF", width, height, panelMargins.left, panelHeight * 3 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 0 + margins.bottom + panelMargins.bottom ); return { data: temperature.data.concat(windSpeed.data, precip.data, cloud.data), border: temperature.panel.concat( windSpeed.panel, precip.panel, cloud.panel ), scales: temperature.scales.concat( windSpeed.scales, precip.scales, cloud.scales ), param: temperature.param.concat(windSpeed.param, precip.param, cloud.param) }; }3b:T940,boxWhisker = ( data, station, param, width, height, marginLeft, marginTop, marginRight, marginBottom ) => { // Returns an array of the x-y locations eeded for a box plots // The whisker is at x, yMax to yMin // The top left of the 10-90th percentile box is at x1, y90 with a width of xWidth1 and height of yHeight1 // The top left of the interquartile range box is at x2, y75 with a width of xWidth2 and height of yHeight2 const fcst = makeQuantiles(data.filter(d => d.name === station)).filter( d => d.parameter === param ); let paramName = param; switch (param) { case "T2m": paramName = "Temperature"; break; case "S10m": paramName = "Wind Speed"; break; case "Pcp": paramName = "1-hour Precipitation"; break; case "CAF": paramName = "Cloud Area Fraction"; break; } const xScale = xScaleFun(fcst, width, marginLeft, marginRight); const yScale = yScaleFun(fcst, height, marginTop, marginBottom); const makeBox = d => { return { param: param, x: xScale(xAccessor(d)), x1: xScale(xAccessor(d)) - pc90RangeBoxWidth / 2, x2: xScale(xAccessor(d)) - iqBoxWidth / 2, xWidth1: pc90RangeBoxWidth, xWidth2: iqBoxWidth, yMax: yScale(yAccessor(d, "maxFcst")), y90: yScale(yAccessor(d, "q90Fcst")), y75: yScale(yAccessor(d, "q75Fcst")), yMed: yScale(yAccessor(d, "medFcst")), y25: yScale(yAccessor(d, "q25Fcst")), y10: yScale(yAccessor(d, "q10Fcst")), yMin: yScale(yAccessor(d, "minFcst")), yMean: yScale(yAccessor(d, "meanFcst")), yHeight1: yScale(yAccessor(d, "q10Fcst")) - yScale(yAccessor(d, "q90Fcst")), yHeight2: yScale(yAccessor(d, "q25Fcst")) - yScale(yAccessor(d, "q75Fcst")), whisker: [ { x: xScale(xAccessor(d)), y: yScale(yAccessor(d, "maxFcst")) }, { x: xScale(xAccessor(d)), y: yScale(yAccessor(d, "minFcst")) } ] }; }; return { param: [ { name: paramName, y: marginTop } ], panel: [ { x: 0, y: marginTop, width: width - margins.right, height: height - marginBottom - marginTop } ], scales: [ { xScale: xScale, yScale: yScale } ], data: fcst.map(d => makeBox(d)) }; }3c:T5a3,memberPoints = ( data, station, param, width, height, marginLeft, marginTop, marginRight, marginBottom ) => { // Returns an array of the x-y locations for members for a panel in a plot const fcst = tidy( data, pivotLonger({ cols: ["T2m", "S10m", "CAF", "Pcp"], namesTo: "parameter", valuesTo: "forecast" }) ).filter(d => d.parameter === param && d.name === selectedStation); let paramName = param; switch (param) { case "T2m": paramName = "Temperature"; break; case "S10m": paramName = "Wind Speed"; break; case "Pcp": paramName = "1-hour Precipitation"; break; case "CAF": paramName = "Cloud Area Fraction"; break; } const xScale = xScaleFun(fcst, width, marginLeft, marginRight); const yScale = yScaleMemberFun(fcst, height, marginTop, marginBottom); const makePoints = d => { return { param: paramName, member: d.member, x: xScale(xAccessor(d)), y: yScale(yAccessor(d, "forecast")) }; }; return { param: [ { name: paramName, y: marginTop } ], panel: [ { x: 0, y: marginTop, width: width - margins.right, height: height - marginBottom - marginTop } ], scales: [ { xScale: xScale, yScale: yScale } ], data: fcst.map(d => makePoints(d)) }; }3d:T63b,makeMemberData = () => { const temperature = memberPoints( data.filter(d => d.lead_time < 25), selectedStation, "T2m", width, height, panelMargins.left, panelHeight * 0 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 3 + margins.bottom + panelMargins.bottom ); const windSpeed = memberPoints( data.filter(d => d.lead_time < 25), selectedStation, "S10m", width, height, panelMargins.left, panelHeight * 1 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 2 + margins.bottom + panelMargins.bottom ); const precip = memberPoints( data.filter(d => d.lead_time < 25), selectedStation, "Pcp", width, height, panelMargins.left, panelHeight * 2 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 1 + margins.bottom + panelMargins.bottom ); const cloud = memberPoints( data.filter(d => d.lead_time < 25), selectedStation, "CAF", width, height, panelMargins.left, panelHeight * 3 + panelMargins.top, panelMargins.right + margins.right, panelHeight * 0 + margins.bottom + panelMargins.bottom ); return { data: temperature.data.concat(windSpeed.data, precip.data, cloud.data), border: temperature.panel.concat( windSpeed.panel, precip.panel, cloud.panel ), scales: temperature.scales.concat( windSpeed.scales, precip.scales, cloud.scales ), param: temperature.param.concat(windSpeed.param, precip.param, cloud.param) }; }3e:T584,makeBinData = () => { 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, symbol: data[i][j].img_code, colour: data[i][j][colourBy] }); counter++; } } return out; }; const out = _dataToBins(fcst, binBy, thresholds); return _binsToPos(out, binSize, binBy, threshold); }3f:T535,function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = pointer[0] - margins.left; const ym = pointer[1] - margins.top; const i = d3.bisectCenter(memberTimeSeries[0].map(d => d.x), xm); const s = d3.least(memberTimeSeries, d => Math.abs(d[i].y - ym)); console.log(i); path .attr("stroke", d => unique(d.map(d => d.member))[0] === unique(s.map(d => d.member))[0] ? null : "#ddd" ) .attr("stroke-width", d => unique(d.map(d => d.member))[0] === unique(s.map(d => d.member))[0] ? 3 : null ) .filter( d => unique(d.map(d => d.member))[0] === unique(s.map(d => d.member))[0] ) .raise(); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); } function left() { path .style("mix-blend-mode", "multiply") .attr("stroke", null) .attr("stroke-width", null); } }40:T79d,weatherSymbols = ({ "01d": await FileAttachment("01d.svg").url(), "02d": await FileAttachment("02d.svg").url(), "03d": await FileAttachment("03d.svg").url(), "04": await FileAttachment("04.svg").url(), "40d": await FileAttachment("40d.svg").url(), "05d": await FileAttachment("05d.svg").url(), "41d": await FileAttachment("41d.svg").url(), "24d": await FileAttachment("24d.svg").url(), "06d": await FileAttachment("06d.svg").url(), "25d": await FileAttachment("25d.svg").url(), "42d": await FileAttachment("42d.svg").url(), "07d": await FileAttachment("07d.svg").url(), "43d": await FileAttachment("43d.svg").url(), "26d": await FileAttachment("26d.svg").url(), "20d": await FileAttachment("20d.svg").url(), "27d": await FileAttachment("27d.svg").url(), "44d": await FileAttachment("44d.svg").url(), "08d": await FileAttachment("08d.svg").url(), "45d": await FileAttachment("45d.svg").url(), "28d": await FileAttachment("28d.svg").url(), "21d": await FileAttachment("21d.svg").url(), "29d": await FileAttachment("29d.svg").url(), "46": await FileAttachment("46.svg").url(), "09": await FileAttachment("09.svg").url(), "10": await FileAttachment("10.svg").url(), "30": await FileAttachment("30.svg").url(), "22": await FileAttachment("22.svg").url(), "11": await FileAttachment("11.svg").url(), "47": await FileAttachment("47.svg").url(), "12": await FileAttachment("12.svg").url(), "48": await FileAttachment("48.svg").url(), "31": await FileAttachment("31.svg").url(), "23": await FileAttachment("23.svg").url(), "32": await FileAttachment("32.svg").url(), "49": await FileAttachment("49.svg").url(), "13": await FileAttachment("13.svg").url(), "50": await FileAttachment("50.svg").url(), "33": await FileAttachment("33.svg").url(), "14": await FileAttachment("14.svg").url(), "34": await FileAttachment("34.svg").url(), "15": await FileAttachment("15.svg").url() })41:[{"id":"4c286192c9ae0f028434ba0e1b37cd3c7f7f9a974e14064da45f0afb742d7814bab0a0d915bf1b6e96c315f8b7b150e39aefcd64e32e151966b6726ac2dec65c","href":"https://static.observableusercontent.com/files/4c286192c9ae0f028434ba0e1b37cd3c7f7f9a974e14064da45f0afb742d7814bab0a0d915bf1b6e96c315f8b7b150e39aefcd64e32e151966b6726ac2dec65c","name":"05d.svg","type":"image/svg+xml","lastModified":1622106758353.115,"size":3511},{"id":"2fc5c513fe458b95a0e8c6dcd136a2368db3eac1349d63ba02b2dbbcd46c9782497dadc68cecb3292cac6bd8df2dcd92ddb7dd78e5be524149dc75c8d9f53451","href":"https://static.observableusercontent.com/files/2fc5c513fe458b95a0e8c6dcd136a2368db3eac1349d63ba02b2dbbcd46c9782497dadc68cecb3292cac6bd8df2dcd92ddb7dd78e5be524149dc75c8d9f53451","name":"26d.svg","type":"image/svg+xml","lastModified":1622106759095.416,"size":4395},{"id":"a5e1606b22552c2397cd18d462a1a86b8a87fbd9c304b150513ec9dc15800402940d3890ab78da8474d00bff0617aad3411146755e7df356f02d4687bdf68233","href":"https://static.observableusercontent.com/files/a5e1606b22552c2397cd18d462a1a86b8a87fbd9c304b150513ec9dc15800402940d3890ab78da8474d00bff0617aad3411146755e7df356f02d4687bdf68233","name":"21d.svg","type":"image/svg+xml","lastModified":1622106758942.114,"size":4351},{"id":"373c8291e9d955eeb9fa043dcf6107c3526e4ffd417af79c08eddb0dc95f72b644341d4bcd518e576e634abef86f6327c4ae6bd7e839ebed832213beb2262bb5","href":"https://static.observableusercontent.com/files/373c8291e9d955eeb9fa043dcf6107c3526e4ffd417af79c08eddb0dc95f72b644341d4bcd518e576e634abef86f6327c4ae6bd7e839ebed832213beb2262bb5","name":"46.svg","type":"image/svg+xml","lastModified":1622106758785.413,"size":1770},{"id":"f632c5a46a236596254ce059712fb6cd783b90681f591b22c0fdd0fb20b49e59e30a0e8f11911407fd7da5f4f3c942de7f065d736e3c730e388c6fe2e0095655","href":"https://static.observableusercontent.com/files/f632c5a46a236596254ce059712fb6cd783b90681f591b22c0fdd0fb20b49e59e30a0e8f11911407fd7da5f4f3c942de7f065d736e3c730e388c6fe2e0095655","name":"49.svg","type":"image/svg+xml","lastModified":1622106758783.074,"size":1979},{"id":"40b7506787d454ef581a002e7673ee039862d219df59fdf89e144b655cb0c949c410f01e6308a1b86473a5076804d1b271207515cd592e136cef159a765762bb","href":"https://static.observableusercontent.com/files/40b7506787d454ef581a002e7673ee039862d219df59fdf89e144b655cb0c949c410f01e6308a1b86473a5076804d1b271207515cd592e136cef159a765762bb","name":"20d.svg","type":"image/svg+xml","lastModified":1622106758410.609,"size":4512},{"id":"61c4bc6fbf262f87e61f5c6178757d7002806950c5c155dd67b539b801b5565d05ff5e9b45f55b7398568e23a43bc8915131e7144f485ddbddf64c45ae67b2a9","href":"https://static.observableusercontent.com/files/61c4bc6fbf262f87e61f5c6178757d7002806950c5c155dd67b539b801b5565d05ff5e9b45f55b7398568e23a43bc8915131e7144f485ddbddf64c45ae67b2a9","name":"22.svg","type":"image/svg+xml","lastModified":1622106758409.324,"size":2535},{"id":"ab284a48944cdedad228b1abcc47557a587a324e1217ec0ce80625d2ad2f4d6db2fc58928ebe8f1d6b49f1765f02b39b512d6301b353033ef622dd960915c9e5","href":"https://static.observableusercontent.com/files/ab284a48944cdedad228b1abcc47557a587a324e1217ec0ce80625d2ad2f4d6db2fc58928ebe8f1d6b49f1765f02b39b512d6301b353033ef622dd960915c9e5","name":"43d.svg","type":"image/svg+xml","lastModified":1622106759694.117,"size":4117},{"id":"35ed3a453c4c08fe94b6f2efd980bacf2b944b639e507f741fc7031dc4955c401c591e6527ba85cc3865e1affa4f4cd6dda406742d76930d2900b887a25ceacd","href":"https://static.observableusercontent.com/files/35ed3a453c4c08fe94b6f2efd980bacf2b944b639e507f741fc7031dc4955c401c591e6527ba85cc3865e1affa4f4cd6dda406742d76930d2900b887a25ceacd","name":"44d.svg","type":"image/svg+xml","lastModified":1622106759503.256,"size":3603},{"id":"7dc01aad3dfd41eed517f7c61e2fa2864375ed55f643fcd95724f0f10de70f8b3b8e3e7b83d00ab12684480b191ba27006c318789cb6bb36b1b8b4fecedd0d75","href":"https://static.observableusercontent.com/files/7dc01aad3dfd41eed517f7c61e2fa2864375ed55f643fcd95724f0f10de70f8b3b8e3e7b83d00ab12684480b191ba27006c318789cb6bb36b1b8b4fecedd0d75","name":"40d.svg","type":"image/svg+xml","lastModified":1622106759016.135,"size":3394},{"id":"5201ba88e53094915cdca6bad0ba3a00df9c63b097594e9e2873c82d505f3a9a6cc643a844e72b3d736e66e844925f9760a6ec250f8a57a64a46bb53b64c55f0","href":"https://static.observableusercontent.com/files/5201ba88e53094915cdca6bad0ba3a00df9c63b097594e9e2873c82d505f3a9a6cc643a844e72b3d736e66e844925f9760a6ec250f8a57a64a46bb53b64c55f0","name":"30.svg","type":"image/svg+xml","lastModified":1622106759140.087,"size":2418},{"id":"f70d756ea18eb41e2a335101ff028ba4e9b8fb16ce064cb10a6de016c1f5e4b9081f94fa958733c46f0655ea2643e7e0bfd3b01192081aac96937310a6e04f93","href":"https://static.observableusercontent.com/files/f70d756ea18eb41e2a335101ff028ba4e9b8fb16ce064cb10a6de016c1f5e4b9081f94fa958733c46f0655ea2643e7e0bfd3b01192081aac96937310a6e04f93","name":"25d.svg","type":"image/svg+xml","lastModified":1622106759102.117,"size":4375},{"id":"c2f40e78b0e6b05b555d4388449fec22d9c6bc764349a3341fb2dfbdd01a5f22c4dd18b63715cb581310304a83c832df8dd52ffc2ea38dc1552d5edfb0811105","href":"https://static.observableusercontent.com/files/c2f40e78b0e6b05b555d4388449fec22d9c6bc764349a3341fb2dfbdd01a5f22c4dd18b63715cb581310304a83c832df8dd52ffc2ea38dc1552d5edfb0811105","name":"45d.svg","type":"image/svg+xml","lastModified":1622106758882.126,"size":3957},{"id":"6cf7fb6ed79d6f65d0bb55b7175a0b4f423cf8119f83ca970382195295a60945a979eda272cbd0a5a8ece7c2d0dba7c55d551f6aedd0a523c35649f321a8420c","href":"https://static.observableusercontent.com/files/6cf7fb6ed79d6f65d0bb55b7175a0b4f423cf8119f83ca970382195295a60945a979eda272cbd0a5a8ece7c2d0dba7c55d551f6aedd0a523c35649f321a8420c","name":"32.svg","type":"image/svg+xml","lastModified":1622106758412.027,"size":3141},{"id":"e383dfc4a13168341341cc093cd2909313c7e73e52fda72c27e250ceab76edaeb6245b82dba05d85792794b010af88b05d60fbfbcba156329ee5bd1b8bacda71","href":"https://static.observableusercontent.com/files/e383dfc4a13168341341cc093cd2909313c7e73e52fda72c27e250ceab76edaeb6245b82dba05d85792794b010af88b05d60fbfbcba156329ee5bd1b8bacda71","name":"08d.svg","type":"image/svg+xml","lastModified":1622106758402.046,"size":3721},{"id":"3ad56cf22e3ecbad11e54b919809fcd773c707559200b78505e8574c865cd97db5cf9cab52b4e96cf1fc95b139d006e3625291492c16029d378f16310fa2e461","href":"https://static.observableusercontent.com/files/3ad56cf22e3ecbad11e54b919809fcd773c707559200b78505e8574c865cd97db5cf9cab52b4e96cf1fc95b139d006e3625291492c16029d378f16310fa2e461","name":"06d.svg","type":"image/svg+xml","lastModified":1622106758347.627,"size":4141},{"id":"8730659612234beb3ab5f517dbf7a22411f8c259d7fbd05c7441c485214ff279a56bf1e9fe5bdb408ce706f9d4dc4c0bf7ae297725e72c94d039836662f5fc01","href":"https://static.observableusercontent.com/files/8730659612234beb3ab5f517dbf7a22411f8c259d7fbd05c7441c485214ff279a56bf1e9fe5bdb408ce706f9d4dc4c0bf7ae297725e72c94d039836662f5fc01","name":"48.svg","type":"image/svg+xml","lastModified":1622106758435.15,"size":2493},{"id":"dd05d63235607ee528b47985a8a317a0081aa0b9461a6e53b92484a90fea779640ee52097834bc8d3d4168c7cb178ad8aa088b610bc0eeda166fda88b2d99db6","href":"https://static.observableusercontent.com/files/dd05d63235607ee528b47985a8a317a0081aa0b9461a6e53b92484a90fea779640ee52097834bc8d3d4168c7cb178ad8aa088b610bc0eeda166fda88b2d99db6","name":"01d.svg","type":"image/svg+xml","lastModified":1622106758349.156,"size":1402},{"id":"680f0a945d1ea5377a4889eac41293f5151da4af0b3ca26302fd3204085e371fb411c0c35269024167397344cf9f2e7fa98e2b76df07466a98a09ec200b781e1","href":"https://static.observableusercontent.com/files/680f0a945d1ea5377a4889eac41293f5151da4af0b3ca26302fd3204085e371fb411c0c35269024167397344cf9f2e7fa98e2b76df07466a98a09ec200b781e1","name":"14.svg","type":"image/svg+xml","lastModified":1622106758478.114,"size":2745},{"id":"c1feb929ba85aa83b3e737e9d530f128aec0ef14b35198cfe77170993d4bc6e80c0b5093229ad2821f2c2a9e99a3dbcea5816e267eaa059af527460cb82b0579","href":"https://static.observableusercontent.com/files/c1feb929ba85aa83b3e737e9d530f128aec0ef14b35198cfe77170993d4bc6e80c0b5093229ad2821f2c2a9e99a3dbcea5816e267eaa059af527460cb82b0579","name":"11.svg","type":"image/svg+xml","lastModified":1622106758500.499,"size":2769},{"id":"1747d88cf538b63a5afa81558e399fc6e31e4bb56d338728b9af2649983b22513a8bd5986cb7335b1753639482b4263119786cbd17b278cdb04d57d6069f5200","href":"https://static.observableusercontent.com/files/1747d88cf538b63a5afa81558e399fc6e31e4bb56d338728b9af2649983b22513a8bd5986cb7335b1753639482b4263119786cbd17b278cdb04d57d6069f5200","name":"47.svg","type":"image/svg+xml","lastModified":1622106758519.152,"size":2141},{"id":"22c981b8a4b5198a9f8f4004441e6f1d8a71d7d2a18087ab17e95509dc0050ff4a839113827b0fe47542732c5f836d09497c85c7159cbdb11d7c937d0067b21d","href":"https://static.observableusercontent.com/files/22c981b8a4b5198a9f8f4004441e6f1d8a71d7d2a18087ab17e95509dc0050ff4a839113827b0fe47542732c5f836d09497c85c7159cbdb11d7c937d0067b21d","name":"03d.svg","type":"image/svg+xml","lastModified":1622106758351.737,"size":2997},{"id":"b27452c9756b8ac4a3562e31945dd5916e34ba83bdcafa1caace64c049023363ff179e7d1fb432f9a4af1e661493c737354a94bf9020a163fcd4dc82849cd6c0","href":"https://static.observableusercontent.com/files/b27452c9756b8ac4a3562e31945dd5916e34ba83bdcafa1caace64c049023363ff179e7d1fb432f9a4af1e661493c737354a94bf9020a163fcd4dc82849cd6c0","name":"12.svg","type":"image/svg+xml","lastModified":1622106758402.128,"size":2258},{"id":"793b59eedf98defc9576708ae0fbc96916ab54116fa8abd90b943141ea86bbdd5e3292a317daa7cbfad770c6f5e68a1388af0ca99400eea33cb91ca8e6354192","href":"https://static.observableusercontent.com/files/793b59eedf98defc9576708ae0fbc96916ab54116fa8abd90b943141ea86bbdd5e3292a317daa7cbfad770c6f5e68a1388af0ca99400eea33cb91ca8e6354192","name":"09.svg","type":"image/svg+xml","lastModified":1622106758374.039,"size":1887},{"id":"b056dc35818365adc37bbcb3d5ce73007df5ea576230a9928d30a370f6cdc4507b82c49df1247e5b79c793ace232041326d6a35aad6bcc18cf18b4247b94c346","href":"https://static.observableusercontent.com/files/b056dc35818365adc37bbcb3d5ce73007df5ea576230a9928d30a370f6cdc4507b82c49df1247e5b79c793ace232041326d6a35aad6bcc18cf18b4247b94c346","name":"27d.svg","type":"image/svg+xml","lastModified":1622106758899.79,"size":4747},{"id":"9dc0274b6e7fc22c56e34175e530f43fe9390e99dd79cc987f778c817b74b10eb6f7c491b393d2bcfa66991588143300efe5ac6fc323b9f5e7c3e95e7ac86c3d","href":"https://static.observableusercontent.com/files/9dc0274b6e7fc22c56e34175e530f43fe9390e99dd79cc987f778c817b74b10eb6f7c491b393d2bcfa66991588143300efe5ac6fc323b9f5e7c3e95e7ac86c3d","name":"07d.svg","type":"image/svg+xml","lastModified":1622106758354.647,"size":3882},{"id":"869fe215d3706457e2975d1354ba6dd9cb65dad72e0259563fc2ed4b9e0565eccab39c8efacbb23170cc305f225dd0ca024c6214ca3ebaaca2ffbeb091487ea3","href":"https://static.observableusercontent.com/files/869fe215d3706457e2975d1354ba6dd9cb65dad72e0259563fc2ed4b9e0565eccab39c8efacbb23170cc305f225dd0ca024c6214ca3ebaaca2ffbeb091487ea3","name":"15.svg","type":"image/svg+xml","lastModified":1622106758914.114,"size":1894},{"id":"d152489091c5929521e81055848664af8762fe90a6dd899f1c7d1fc32cf49534ac2ce58746fd7332a2fbbf99448d487912d39344680e8f653681b12f666d94ee","href":"https://static.observableusercontent.com/files/d152489091c5929521e81055848664af8762fe90a6dd899f1c7d1fc32cf49534ac2ce58746fd7332a2fbbf99448d487912d39344680e8f653681b12f666d94ee","name":"04.svg","type":"image/svg+xml","lastModified":1622106759054.131,"size":1373},{"id":"d597e4e94a38b033fe0bc122712178af6711d70e86a61b5668d64bc9eb9effeddc525d56fe3ce748f1f2134efc3ed007d343f3ac1cd136cdf3fe622c65a4b775","href":"https://static.observableusercontent.com/files/d597e4e94a38b033fe0bc122712178af6711d70e86a61b5668d64bc9eb9effeddc525d56fe3ce748f1f2134efc3ed007d343f3ac1cd136cdf3fe622c65a4b775","name":"50.svg","type":"image/svg+xml","lastModified":1622106758874.338,"size":2333},{"id":"3e5d4f0414534293175af0b2a41e92410fece142ed40e2314de40ff02c4206d7a1cdb67a47541e3920c5ad8147bbe4731a3385899a4b4634621919404e01f929","href":"https://static.observableusercontent.com/files/3e5d4f0414534293175af0b2a41e92410fece142ed40e2314de40ff02c4206d7a1cdb67a47541e3920c5ad8147bbe4731a3385899a4b4634621919404e01f929","name":"23.svg","type":"image/svg+xml","lastModified":1622106758470.122,"size":2906},{"id":"23a5895adbb968ba286ed912ed9a6c57d8be687846590706be9f93733109596ee331cc39825ff4629faf225e3e03a0b4cec0e7a5a592083fac6e01a365d07214","href":"https://static.observableusercontent.com/files/23a5895adbb968ba286ed912ed9a6c57d8be687846590706be9f93733109596ee331cc39825ff4629faf225e3e03a0b4cec0e7a5a592083fac6e01a365d07214","name":"28d.svg","type":"image/svg+xml","lastModified":1622106758400.801,"size":4233},{"id":"6609ff2c4de49c4f22cea2b2d6b83bc2a6383e9a5a81e3d9d0eb014ad74790c0d2404b5490b46bc1d8f8fdad10938a0d08ed5de5635dcd6db838e112aefff3a7","href":"https://static.observableusercontent.com/files/6609ff2c4de49c4f22cea2b2d6b83bc2a6383e9a5a81e3d9d0eb014ad74790c0d2404b5490b46bc1d8f8fdad10938a0d08ed5de5635dcd6db838e112aefff3a7","name":"31.svg","type":"image/svg+xml","lastModified":1622106759620.555,"size":2789},{"id":"23e1c56b0932737308483fb811c88d867a3d3222a75bd991a6a075c990043aee9d45d30ded6fdc585211693b1ca330e066de1ad5a2a552c2f7a9d61756c687b0","href":"https://static.observableusercontent.com/files/23e1c56b0932737308483fb811c88d867a3d3222a75bd991a6a075c990043aee9d45d30ded6fdc585211693b1ca330e066de1ad5a2a552c2f7a9d61756c687b0","name":"02d.svg","type":"image/svg+xml","lastModified":1622106758879.986,"size":2914},{"id":"9350384941c15a7b6ea3aa22ff9b846d4346c7fd3cc0b343b1087da5dfd3931adc311fac8e57cc0daa3be70e2cd2caa863ebf98b942e6be0a55f5babae803636","href":"https://static.observableusercontent.com/files/9350384941c15a7b6ea3aa22ff9b846d4346c7fd3cc0b343b1087da5dfd3931adc311fac8e57cc0daa3be70e2cd2caa863ebf98b942e6be0a55f5babae803636","name":"41d.svg","type":"image/svg+xml","lastModified":1622106759058.973,"size":3745},{"id":"9d0f784730f6f33051f3edbf4cf63a1da44ccc14251ae79980eb44b07dbd2c735fe59cc3932debda584cf4e9c7b114c13c1e3634d7ee29d82c7b8cae7410a2a0","href":"https://static.observableusercontent.com/files/9d0f784730f6f33051f3edbf4cf63a1da44ccc14251ae79980eb44b07dbd2c735fe59cc3932debda584cf4e9c7b114c13c1e3634d7ee29d82c7b8cae7410a2a0","name":"33.svg","type":"image/svg+xml","lastModified":1622106759458.695,"size":2627},{"id":"a6e756664a13645864333c3218e3b8df2731b2dcfac66ee2f6d1ee3d37f58623bf071d9254e3a3658990218746065bf212a761352acfd46dd234135292409baa","href":"https://static.observableusercontent.com/files/a6e756664a13645864333c3218e3b8df2731b2dcfac66ee2f6d1ee3d37f58623bf071d9254e3a3658990218746065bf212a761352acfd46dd234135292409baa","name":"10.svg","type":"image/svg+xml","lastModified":1622106759146.271,"size":2121},{"id":"8acf37bafd8e00db3fd308b4b87f009c1ba91dc79ae9a58226a59b3ff9a3a2130e27b5a17e8eda2512df3a92fdcdff7299caa51d8e91563f8901a9f60a480d41","href":"https://static.observableusercontent.com/files/8acf37bafd8e00db3fd308b4b87f009c1ba91dc79ae9a58226a59b3ff9a3a2130e27b5a17e8eda2512df3a92fdcdff7299caa51d8e91563f8901a9f60a480d41","name":"24d.svg","type":"image/svg+xml","lastModified":1622106758739.828,"size":4024},{"id":"c5008df3790da282e62a18de60dc0d97e32d90bc8ece36724336638afed420a0f67aca3a4139a2bae9fd9701e0cee63167aca598aa1b41ef153008cae4d98771","href":"https://static.observableusercontent.com/files/c5008df3790da282e62a18de60dc0d97e32d90bc8ece36724336638afed420a0f67aca3a4139a2bae9fd9701e0cee63167aca598aa1b41ef153008cae4d98771","name":"29d.svg","type":"image/svg+xml","lastModified":1622106759486.108,"size":4587},{"id":"7398b0fb49295cbc962868007c2cb56110ca5514c271e0b323c6141a8c617d33b6d1fe0a7646870c54b1d2c453915ad7ed2844212f58f38cc86a328f3da19cd9","href":"https://static.observableusercontent.com/files/7398b0fb49295cbc962868007c2cb56110ca5514c271e0b323c6141a8c617d33b6d1fe0a7646870c54b1d2c453915ad7ed2844212f58f38cc86a328f3da19cd9","name":"34.svg","type":"image/svg+xml","lastModified":1622106759788.881,"size":2981},{"id":"ee4220a5021d01e7b979473fa0211ca6393fdd24327f13a54bba286af907dd5b7ee9ab20e1ae9a273954a875a6efda124c8115c87770730647446a790c904cc9","href":"https://static.observableusercontent.com/files/ee4220a5021d01e7b979473fa0211ca6393fdd24327f13a54bba286af907dd5b7ee9ab20e1ae9a273954a875a6efda124c8115c87770730647446a790c904cc9","name":"42d.svg","type":"image/svg+xml","lastModified":1622106759852.358,"size":3765},{"id":"fc42b85e293ef8771f0c5472c20e6dea726f2f97d237dbfbcaf1027b8cfa4e48d583d95231980aeb2a30531095b24cf486ad1be241d8a960db44a315c4f5fdd4","href":"https://static.observableusercontent.com/files/fc42b85e293ef8771f0c5472c20e6dea726f2f97d237dbfbcaf1027b8cfa4e48d583d95231980aeb2a30531095b24cf486ad1be241d8a960db44a315c4f5fdd4","name":"meps_major_cities_2021040700@1.json","type":"application/json","lastModified":1622193731807.855,"size":6890201},{"id":"4acedee57cc186f8e6e7d035936959a565b5b29509081ca6a14c474f4573a95f7058edac2442d5cf3bd62c8d039df9f4daf5790bb6d5537d97221fad8946ff54","href":"https://static.observableusercontent.com/files/4acedee57cc186f8e6e7d035936959a565b5b29509081ca6a14c474f4573a95f7058edac2442d5cf3bd62c8d039df9f4daf5790bb6d5537d97221fad8946ff54","name":"13.svg","type":"image/svg+xml","lastModified":1622106759842.12,"size":2097}] 32:{"id":"d3d9238dd4d7a7b4","slug":"the-road-towards-new-methods-for-visualizing-ensemble-weat","title":"The road towards new methods for visualizing ensemble weather forecasts that combine weather parameters","thumbnail":"35bf9163c7d4636c932f35d2e101f3417d8b8fd8d453f6573b5944d322bbce7a","access_level":"public","create_time":"$D2021-05-27T08:43:34.038Z","update_time":"$D2026-01-29T08:26:06.482Z","view_time":null,"first_public_time":"$D2021-05-31T07:52:18.917Z","has_unpublished_edits":null,"fork":false,"stars":13,"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":1416,"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"},{"type":"team","id":"5466a1b89a3b9cf8","login":"andrew-met","name":"Andrew Singleton","avatar_url":"https://avatars-next.observableusercontent.com/bfb80e3474383ea79cf357a96ac33c4ea92c310df6f16880bf4442eb889c4845","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"6d4c044c625efa08","slug":"uncertainty-visualization","title":"Uncertainty visualization","owner":{"id":"5466a1b89a3b9cf8","login":"andrew-met","name":"Andrew Singleton"}},"type":"notebook","body":{"title":"The road towards new methods for visualizing ensemble weather forecasts that combine weather parameters","cells":[{"id":0,"value":"md`# The road towards new methods for visualizing ensemble weather forecasts that combine weather parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`Ensemble weather forecasts are typically visualized as time series with a separate panel for each weather parameter. The uncertainty is typically inferred from the vertical position of a component, whether that be box plots, plume or ribbon plots, or spaghetti plots. While such visualizations show the evolution of each parameter and their uncerainties over time, any relationship between the parameters is lost. Furthermore, it takes some work to estimate probabilities of particular thresholds occurring and it is impossible to infer the the probabilities of thresholds from a range of parameters occuring together.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`This notebook illustrates the typical ways of presenting ensemble weather forecasts and proposes some new visualizations, using weather forecasts from the MEPS model used by the Norwegian Meteorological Institute for a few locations in Norway. MEPS is an ensemble prediction system (EPS) that computes 30 forecasts for each hour - the uncertainty of the forecast can be inferred from the variability between the 30 forecasts and probabilities of thresholds being exceeded can be estimated from the number of forecasts that exceed that threshold.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Box plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"md`For each hour, the wide box shows the interquartile range (the 25th to the 75th percentile), the narrow box shows the 10th to the 90th percentile, and the line (or whisker) shows the full range of the forecast.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"viewof selectedStation = selectDropDown({\n title: \"Location\",\n options: stationNames.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"boxWhiskerPlots = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height + margins.top])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"viewof showPoints = selectDropDown({\n title: \"Show Points\",\n options: [\"no\", \"yes\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"md`The Location selector controls the location for all plots. You can drag the selector up and down the notebook by clicking and dragging on the three dots to the left of the selector.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`## Ribbon plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`Ribbon plots (or plume plots) show the same information as box plots, except they are interpolated between the hours. Research has shown that users who do not have a background in science or statistics find ribbon plots easier to interpret for unconstrained variables like temperature. However, for variables such as preciptation and cloud cover box plots tend to be easier to interpret.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"ribbonPlots = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height + margins.top])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"md`## Stacked probabilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"md`For weather variables that accumulate from zero, the stacked probability plot may be more useful. Here, rather than the quantiles beling centred around the median, they shown from bottom to top. This gives the probability that the accumulation is greater than the value on the y-axis and helps to infer what the actual probability of precipitation is. May also be useful for cloud cover and visibility.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"stackedProbPlot = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, panelHeight + margins.top + margins.bottom])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`## Spaghetti plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"md`Spaghetti plots show each individual forecast of the time series as a line. They can be quite confusing as there is so much shown on a single plot, but relationships between parameters can be inferred by highlighting individual members. However, spaghetti plots do not lend themselves towards variables that are constrained and will cluster around discrete values such as 0 in the case of precipitation and 0 and 1 in the case of cloud cover.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md`## HOPs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"md`HOPs, or Hypothetical Outcome Plots animate through each reliasation of a simulation. For ensemble weather forecasts they animate through each individual forecast of a time series. They are effective in allowing the viewer to experience the uncertainty and to see the relationship between weather parameters, but are less useful in decision making based on probabilties of threshold exceedence since it is difficult to extract any numerical information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"hopPlots = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height + margins.top])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"hopMember","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"md`## Binned dot plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"md`Dot plots show the distribution of the forecast for a fixed point in time. Many weather parameters can be combined in a single plot - for example the horizontal could show temperature, with dots stacked on top of each other to show the number of ensemble members within each range of temperatures (or bins), the colour of the dots could represent wind speed and the symbol inside the dots denotes the type of weather. Probabilities of threshold exceedence are estimated by simply counting the dots. The probabilities are thus framed as frequencies making them easier to understand.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"md`The disadvantage of dot plots is that they are less effective in showing the development of the weather over time. They can also become inconveniently tall when the forecast is very certain placing the vast majority of ensemble members into the same bin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"dotPlots = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, dotPlotHeight + margins.top + margins.bottom])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 16)\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"viewof threshold = slider({\n title: \"Threshold\",\n min: d3.min(thresholds),\n max: d3.max(thresholds),\n step: parseFloat(binSize)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"viewof dotDate = selectDropDown({\n title: \"Date and Time\",\n options: dates.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"viewof animateDots = selectDropDown({\n title: \"Animate dates\",\n options: [\"no\", \"yes\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"viewof binSizeSelect = selectDropDown({\n title: \"Bin Size\",\n options: [0.25, 0.5, 1, 2],\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"viewof binBySelect = selectDropDown({\n title: \"Bin By\",\n options: [\"Temperature\", \"Wind Speed\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"viewof colourBySelect = selectDropDown({\n title: \"Colour By\",\n options: [\"Nothing\", \"Temperature\", \"Wind Speed\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"viewof showSymbols = selectDropDown({\n title: \"Show Weather Type\",\n options: [\"no\", \"yes\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Plot Area and constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"margins = ({\n left: 40,\n top: 25,\n right: 50,\n bottom: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"panelMargins = ({\n left: iqBoxWidth / 2 + 5,\n right: iqBoxWidth / 2 + 5,\n top: 20,\n bottom: 15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"panelHeight = (height - margins.bottom) / 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"iqBoxWidth = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"pc90RangeBoxWidth = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"dotRadius = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"dotPlotHeight = dotRadius * 2 * 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Data manipulation functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"unique = arr => {\n return [...new Set(arr)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"makeQuantiles = fcst => {\n return tidy(\n fcst,\n pivotLonger({\n cols: [\"T2m\", \"S10m\", \"CAF\", \"Pcp\"],\n namesTo: \"parameter\",\n valuesTo: \"forecast\"\n }),\n groupBy(\n [\"validdate\", \"parameter\"],\n [\n summarize({\n meanFcst: mean(\"forecast\"),\n minFcst: min(\"forecast\"),\n maxFcst: max(\"forecast\"),\n medFcst: d => d3.quantile(d, 0.5, d => d.forecast),\n q10Fcst: d => d3.quantile(d, 0.1, d => d.forecast),\n q25Fcst: d => d3.quantile(d, 0.25, d => d.forecast),\n q75Fcst: d => d3.quantile(d, 0.75, d => d.forecast),\n q90Fcst: d => d3.quantile(d, 0.9, d => d.forecast)\n })\n ]\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"dataToThresholds = fcst => {\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":103,"value":"md`## Accessor, scale and plot interaction functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"xAccessor = d => d3.timeParse(\"%Y-%m-%d %H:%M:%S\")(d.validdate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"yAccessor = (d, col) => {\n return d[col];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"xScaleFun = (data, width, marginLeft, marginRight) =>\n d3\n .scaleTime()\n .domain([d3.min(data, d => xAccessor(d)), d3.max(data, d => xAccessor(d))])\n .range([marginLeft, width - marginRight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"yScaleFun = (data, height, marginTop, marginBottom) =>\n d3\n .scaleLinear()\n .domain([\n d3.min(data, d => yAccessor(d, \"minFcst\")),\n d3.max(data, d => yAccessor(d, \"maxFcst\"))\n ])\n .range([height - marginBottom, marginTop])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"yScaleMemberFun = (data, height, marginTop, marginBottom) =>\n d3\n .scaleLinear()\n .domain([\n d3.min(data, d => yAccessor(d, \"forecast\")),\n d3.max(data, d => yAccessor(d, \"forecast\"))\n ])\n .range([height - marginBottom, marginTop])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"selectOrCreate = (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":360,"value":"lineGenerator = d3\n .line()\n .x(d => d.x)\n .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"lineGeneratorMember = d3\n .line()\n .curve(d3.curveMonotoneX)\n .x(d => d.x)\n .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"areaGeneratorFull = d3\n .area()\n .curve(d3.curveMonotoneX)\n .x(d => d.x)\n .y0(d => d.yMax)\n .y1(d => d.yMin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"areaGenerator90 = d3\n .area()\n .curve(d3.curveMonotoneX)\n .x(d => d.x)\n .y0(d => d.y90)\n .y1(d => d.y10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"areaGeneratorIq = d3\n .area()\n .curve(d3.curveMonotoneX)\n .x(d => d.x)\n .y0(d => d.y75)\n .y1(d => d.y25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = await FileAttachment(\"meps_major_cities_2021040700@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"d3.groups(data, (d) => d.SID)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"stationNames = unique(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"dates = unique(data.map(d => d.validdate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"quantileData = makeBoxWhiskerData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"ribbonData = unique(quantileData.data.map(d => d.param)).map(d =>\n quantileData.data.filter(e => e.param === d)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"memberData = makeMemberData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"memberTimeSeries = unique(\n memberData.data.map(d => d.param + \",\" + d.member)\n).map(d =>\n memberData.data.filter(\n e =>\n e.param === d.substr(0, d.indexOf(\",\")) &&\n e.member === d.substr(d.indexOf(\",\") + 1, d.length - 1)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"hopMember = {\n let i = 0;\n while (true) {\n yield Promises.delay(100, \"mbr\" + String(i).padStart(3, \"0\"));\n i >= 29 ? (i = 0) : i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"dotAnimationDate = {\n let i = 0;\n while (true) {\n let delay = 1500;\n i === 0 ? (delay = 4000) : null;\n yield Promises.delay(delay, dates[i]);\n i === dates.length - 1 ? (i = 0) : i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"fcst = data\n .filter(d =>\n animateDots === \"no\"\n ? d.validdate === dotDate\n : d.validdate === dotAnimationDate\n )\n .filter(d => d.name === selectedStation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"thresholds = dataToThresholds(data.filter(d => d.name === selectedStation))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"dotData = makeBinData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"binBy = binBySelect === \"Temperature\" ? \"T2m\" : \"S10m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"colourBy = colourBySelect === \"Nothing\"\n ? colourBySelect\n : colourBySelect === \"Temperature\"\n ? \"T2m\"\n : \"S10m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"binSize = parseFloat(binSizeSelect)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Weather symbols`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Weather symbols are taken from [yr.no](https://github.com/nrkno/yr-weather-symbols), a collaboration between the Norwegian Meteorological Institute (MET Norway) and the Norwegian state broadcaster (NRK).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Externals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import {\n tidy,\n pivotLonger,\n groupBy,\n mutateWithSummary,\n arrange,\n summarize,\n n,\n sum,\n min,\n max,\n mean,\n total\n} from '@pbeshai/tidyjs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"import { select as selectDropDown } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 33:"$32:body"