2d:null 2e:["$","title",null,{"children":"Visualizing weather type in ensembles | Andrew Singleton | Observable"}] 33:T587,stackLegend = { const colourTable = tidy( stackData, transmute({ conditions: d => d.key }), innerJoin(colourScheme) ).map((d, i) => ((d.x = i), d)); const colourScale = d3 .scaleOrdinal() .domain(colourTable.map(d => d.conditions)) .range(colourTable.map(d => d.colour)); const plotWidth = 800; const boxWidth = d3.min([50, plotWidth / colourTable.length]); const boxHeight = boxWidth / 2.67; const symbolSize = d3.max([boxWidth - 20, 30]); const plotHeight = 50; let svg = d3.select("#stackChartLegend"); if (svg.empty()) { svg = d3 .create("svg") .attr("id", "stackChartLegend") .attr("width", plotWidth) .attr("height", plotHeight) .attr("font-family", "sans-serif"); } const rects = selectOrAppend("g", "LegendCol", svg) .selectAll("rect") .data(colourTable) .join("rect") .attr("fill", d => colourScale(d.conditions)) .attr("width", boxWidth - 2) .attr("height", boxHeight) .attr("x", d => d.x * boxWidth + 2) .attr("y", 0); const symbols = selectOrAppend("g", "LegendSym", svg) .selectAll("image") .data(colourTable) .join("image") .attr("width", symbolSize) .attr("height", symbolSize) .attr("x", d => d.x * boxWidth + boxWidth / 2 - symbolSize / 2) .attr("y", d => boxHeight) .attr("href", d => weatherSymbols[[d.symbol_code]]); return svg.node(); }34:Ta15,stackedColChart = { const plotWidth = towerWidth + towerMargins.left + towerMargins.right; const plotHeight = towerHeight + towerMargins.top + towerMargins.bottom; const _timeParser = d => d3.utcParse("%Y-%m-%d %H:%M:%S")(d); const _yScale = d3 .scaleLinear() .domain([0, d3.max(stackData, d => d3.max(d, d => d[1]))]) .range([towerHeight + towerMargins.bottom, towerMargins.top]); const _xScale = d3 .scaleUtc() .domain([ _timeParser( d3.min(stackData.map(d => d.map(e => e.data))[1].map(d => d.validdate)) ), _timeParser( d3.max(stackData.map(d => d.map(e => e.data))[1].map(d => d.validdate)) ) ]) .range([towerMargins.left, towerMargins.left + towerWidth]); const _colourTable = tidy( stackData, transmute({ conditions: d => d.key }), innerJoin(colourScheme) ); const _colourScale = d3 .scaleOrdinal() .domain(_colourTable.map(d => d.conditions)) .range(_colourTable.map(d => d.colour)); let svg = d3.select("#stackChart"); if (svg.empty()) { svg = d3 .create("svg") .attr("id", "stackChart") //.attr("viewBox", [0, 0, plotWidth, plotHeight]) .attr("font-family", "sans-serif"); } svg .style("background-color", "#FFF") .style("height", plotHeight) .style("width", plotWidth); const xAxis = selectOrAppend("g", "xAxis", svg) .style("font-size", 10) .attr("transform", `translate(0, ${towerHeight + towerMargins.bottom})`) .call(d3.axisBottom(_xScale).tickFormat(d3.utcFormat("%H:%M %a %d %b"))) .select(".domain").remove() const symbols = selectOrAppend("g", "col", svg) .selectAll("g") .data(stackData) .join("g") .attr("fill", d => _colourScale(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("width", colWidth) .attr("height", d => _yScale(d[0]) - _yScale(d[1])) .attr("x", (d, i) => _xScale(_timeParser(d.data.validdate)) - colWidth / 2) .attr("y", d => _yScale(d[1])) .attr("href", d => weatherSymbols[[d.img_code]]); //const text = selectOrAppend("g", "text", svg) //.selectAll("text") //.data( // towerDateTimes.map(d => Object.fromEntries(new Map([["validdate", d]]))) //) //.join("text") //.style("text-anchor", "middle") //.style("font-size", 18) //.style("fill", "#888") //.attr("x", (d, i) => _xScale(_timeParser(d.validdate))) //.attr("y", towerHeight + towerMargins.top + towerMargins.bottom / 1.5) //.text(d => d.validdate.substring(11, 13)); return svg.node(); }35:Tbeb,towerChart = { const plotWidth = towerWidth + towerMargins.left + towerMargins.right; const plotHeight = towerHeight + towerMargins.top + towerMargins.bottom; const _xAccessor = d => d3.utcParse("%Y-%m-%d %H:%M:%S")(d.validdate); const _yScale = d3 .scaleBand() .domain(towerData.map(d => d.member)) .range([towerHeight + towerMargins.bottom, towerMargins.top]); const _xScale = d3 .scaleUtc() .domain([ d3.min(towerData, d => _xAccessor(d)), d3.max(towerData, d => _xAccessor(d)) ]) .range([towerMargins.left, plotWidth - towerMargins.right]); let svg = d3.select("#towerChart"); if (svg.empty()) { svg = d3.create("svg").attr("id", "towerChart"); } svg .style("background-color", "#FCFCFE") .style("height", plotHeight) .style("width", plotWidth); //.attr("font-family", "sans-serif"); const xAxis = selectOrAppend("g", "xAxis", svg) .style("font-size", 10) .attr("transform", `translate(0, ${towerHeight + towerMargins.top})`) .call(d3.axisBottom(_xScale).tickFormat(d3.utcFormat("%H:%M %a %d %b"))) .select(".domain").remove() const symbols = selectOrAppend("g", "symbol", svg) .selectAll("image") .data(towerData, d => d.id) .join("image") .attr("width", towerSymbolSize) .attr("height", towerSymbolSize) .attr("x", d => _xScale(_xAccessor(d)) - towerSymbolSize / 2) .attr("y", d => d.y) .attr("href", d => weatherSymbols[[d.img_code]]) .on("mouseover", (e, d) => highlight(e, d)) .on("mouseout", (e, d) => restore(e, d, true)); //const dateTimeText = selectOrAppend("g", "date-time-text", svg) //.selectAll("text") //.data( // towerDateTimes.map(d => Object.fromEntries(new Map([["validdate", d]]))) //) //.join("text") //.style("text-anchor", "middle") //.style("font-size", 18) //.style("fill", "#888") //.attr("x", d => _xScale(_xAccessor(d)) + towerSymbolSize / 2) //.attr("y", towerHeight + towerMargins.top + 18) //.text(d => d.validdate.substring(11, 13)); const frequencyText = selectOrAppend("g", "frequency-text", svg) .selectAll("text") .data(symbolFrequency) .join("text") .style("text-anchor", "middle") .style("font-size", 22) .attr("fill", d => d.frequency < numMembers / 3 ? "green" : d.frequency > (2 * numMembers) / 3 ? "red" : "orange" ) .attr("opacity", 0) .attr("x", d => _xScale(_xAccessor(d)) + towerSymbolSize / 2) .attr("y", (plotHeight - towerMargins.bottom / 4) | 0) .html(d => `${d.frequency}⁄${numMembers}`); const highlight = (e, d, restore) => { symbols .filter(s => s.img_code !== d.img_code) .transition() .duration(300) .attr("opacity", restore ? 1 : 0.2); frequencyText .filter(s => s.img_code === d.img_code) .transition() .duration(300) .attr("opacity", restore ? 0 : 1); }; const restore = (e, d, restore) => highlight(e, d, restore); return svg.node(); }36:T1cc6,sankeyChart = { let svg = d3.select("#sankeyChart"); if (svg.empty()) { svg = d3.create("svg").attr("id", "sankeyChart"); } svg .style("background-color", "none") .style("width", width) .style("height", 500); const { nodes, links } = sankey(sankeyData); const symbolNodes = nodes.filter(d => d.depth === 0); const timeNodes = nodes.filter(d => d.depth === 1); const xAxis = selectOrAppend("g", "xAxis", svg) .style("font-size", 9) .attr("transform", `translate(0, ${sankeyHeight + sankeyMargins.top})`) .call(d3.axisBottom(xAxisScale).tickFormat(d3.utcFormat("%H:%M %a %d %b"))) .select(".domain").remove() const node = selectOrAppend("g", "nodes", svg) .selectAll("rect") .data(nodes, d => d.name) .join( enter => enter .append("rect") .attr("x", d => d.y0) .attr("y", d => d.x0) .attr("width", d => d.y1 - d.y0) .attr("height", d => d.x1 - d.x0) .attr("fill", d => d.col) .attr("opacity", 0) .transition() .duration(1500) .attr("opacity", 0.9) .selection(), update => update .transition() .duration(1500) .attr("x", d => d.y0) .attr("y", d => d.x0) .attr("width", d => d.y1 - d.y0) .attr("height", d => d.x1 - d.x0) .attr("fill", d => d.col) .selection(), exit => exit .transition() .duration(1500) .attr("opacity", 0) .remove() .selection() ) .on("mouseover", (e, d) => highlight(e, d)) .on("mouseout", (e, d) => restore(e, d, true)); const link = selectOrAppend("g", "links", svg) .selectAll("path") .data(links) .join( enter => enter .append("path") .style("fill", "none") .attr("mix-blend-mode", "multiply") .attr("d", d => sankeyLinkVertical(d)) .attr("stroke", d => d.col) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0) .transition() .duration(sankeyTransitionTime) .attr("stroke-opacity", 0.4) .selection(), update => update .transition() .duration(sankeyTransitionTime) .attr("d", d => sankeyLinkVertical(d)) .attr("stroke", d => d.col) .attr("stroke-width", d => Math.max(1, d.width)) .selection(), exit => exit .transition() .duration(sankeyTransitionTime) .attr("stroke-opacity", 0) .remove() .selection() ); const symbol = selectOrAppend("g", "symbols", svg) .selectAll("image") .data(symbolNodes, d => d.name) .join( enter => enter .append("image") .attr("width", sankeySymbolSize) .attr("height", sankeySymbolSize) .attr("x", d => sankeySymbolSize < d.y1 - d.y0 ? d.y0 : d.y0 - sankeySymbolSize / 2 + (d.y1 - d.y0) / 2 ) .attr("y", d => d.x0 - (sankeySymbolSize + 3)) .attr("opacity", d => (sankeySymbolSize < d.y1 - d.y0 ? 1 : 0)) .attr("href", d => weatherSymbols[[d.name]]) .selection(), update => update .transition() .duration(sankeyTransitionTime) .attr("x", d => sankeySymbolSize < d.y1 - d.y0 ? d.y0 : d.y0 - sankeySymbolSize / 2 + (d.y1 - d.y0) / 2 ) .attr("y", d => d.x0 - (sankeySymbolSize + 3)) .attr("width", sankeySymbolSize) .attr("height", sankeySymbolSize) .selection(), exit => exit .transition() .duration(sankeyTransitionTime) .attr("opacity", 0) .remove() .selection() ); //const text = selectOrAppend("g", "text", svg) //.selectAll("text") //.style("font-size", 22) //.style("font-family", "sans-serif") //.attr("fill", "#888") //.data(timeNodes) //.join("text") //.attr("x", d => d.y0 + (d.y1 - d.y0) / 2) //.attr("y", d => d.x1 + 15) //.attr("text-anchor", "middle") //.text(d => d.name.substring(11, 13)); const highlight = (e, d, restore) => { const nodeData = tidy(nodes, select(["name", "x0", "x1", "y0", "y1"])); let probVals = linkedNodes(d) .map(n => n.sourceLinks) .filter(l => l.length > 0) .flatMap(l => l.filter(n => d.depth === 1 ? n.target.name === d.name : n.source.name === d.name ) ); probVals = tidy( probVals, mutate({ name: n => (d.depth === 1 ? n.source.name : n.target.name), symbol: n => n.source.name }), select(["name", "value", "symbol"]), innerJoin(nodeData) ); if (restore) { let probText = d3.selectAll(".probText"); probText = probText.remove(); } else { const probText = svg .append("g") .selectAll(".probText") .data(probVals) .join("text") .attr("class", "probText") .attr("x", dd => (d.depth === 0 ? dd.y0 + (dd.y1 - dd.y0) / 2 : dd.y0)) .attr("y", dd => d.depth === 0 ? dd.x1 + 35 : dd.x0 - (sankeySymbolSize + 5) ) .attr("text-anchor", dd => (d.depth === 0 ? "middle" : "start")) .attr("font-size", 17) .attr("fill", d => Math.round(d.value * numMembers) < numMembers / 3 ? "green" : Math.round(d.value * numMembers) > (2 * numMembers) / 3 ? "red" : "orange" ) .html( d => `${Math.round(d.value * 30).toString()}⁄${numMembers}` ); } link .filter(l => l.source !== d && l.target !== d) .transition() .duration(hoverTransitionTime) .attr("stroke-opacity", restore ? 0.4 : 0.025); link .filter(l => l.source === d || l.target === d) .transition() .duration(hoverTransitionTime) .attr("stroke-opacity", restore ? 0.4 : 0.9); node .transition() .duration(hoverTransitionTime) .attr("opacity", n => restore || linkedNodes(d).some(ln => n === ln) ? 0.9 : 0.3 ); //text //.transition() //.duration(hoverTransitionTime) //.attr("opacity", n => // restore || linkedNodes(d).some(ln => n === ln) ? 1 : 0.3 //) //.attr("font-size", n => // restore || linkedNodes(d).some(ln => n !== ln) ? 14 : 10 //); symbol .transition() .duration(hoverTransitionTime) .attr("opacity", n => restore ? sankeySymbolSize < n.y1 - n.y0 ? 1 : 0 : probVals.flatMap(d => d.symbol).includes(n.name) ? 1 : sankeySymbolSize < n.y1 - n.y0 ? 0.2 : 0 ); console.log(probVals.flatMap(d => d.symbol)); }; const restore = (e, d) => { highlight(e, d, true); }; const linkedNodes = n => { return Array.from( new Set( links .flatMap(d => d.source === n || d.target === n ? [d.source, d.target] : null ) .filter(d => d !== null) ) ); }; return svg.node(); }37:T462,stackData = { const filteredData = tidy( data.filter( d => d.name === location && d.validdate >= dateTimeStart && d.validdate <= dateTimeEnd ), innerJoin(tidy(colourScheme, rename({ symbol_code: "img_code" }))) ); const wideData = tidy( filteredData, groupBy(["validdate", "conditions"], [summarize({ freq: n() })]), pivotWider({ namesFrom: "conditions", valuesFrom: "freq", valuesFill: 0 }) ); const forecastedConditions = tidy( colourScheme, innerJoin(tidy(filteredData, select("conditions"), distinct("conditions"))), arrange(colStacking === "Dry from bottom" ? "order" : desc("order")) ); const stackKeys = forecastedConditions.map(d => d.conditions); return d3 .stack() .keys(stackKeys) .order( colStacking === "Frequency" ? d3.stackOrderDescending : colStacking === "Reverse frequency" ? d3.stackOrderAscending : colStacking === "Inside out" ? d3.stackOrderInsideOut : d3.stackOrderNone )(wideData) .map(d => (d.forEach(v => (v.conditions = d.key)), d)); }38:T6e3,sankeyData = { const probData = tidy( towerData, groupBy( ["validdate", "lead_time", "img_code"], [summarize({ count: n() })] ), groupBy(["lead_time"], [mutateWithSummary({ numMem: sum("count") })]), mutate({ prob: d => d.count / d.numMem }), select(["validdate", "lead_time", "img_code", "prob"]) ); const maxProbs = tidy( probData, groupBy("validdate", [mutateWithSummary({ maxProb: max("prob") })]), arrange(["validdate", desc("maxProb"), "img_code"]), filter(d => d.prob === d.maxProb), transmute({ name: d => d.validdate, symbol_code: d => d.img_code }), innerJoin(colourScheme), rename({ colour: "col" }), groupBy("name", [summarize({ col: first("col") })]) ); let colours = tidy( colourScheme, rename({ symbol_code: "name", colour: "col" }) ); let nodes = tidy( probData, rename({ img_code: "name" }), groupBy("name", [summarize({ freq: sum("prob") })]), innerJoin(colours), arrange( nodeOrder === "Dry to Wet" ? "order" : nodeOrder === "Wet to Dry" ? desc("order") : nodeOrder === "Most Frequent" ? desc("freq") : "freq" ) ); const targetNodes = tidy( probData, transmute({ name: d => d.validdate }), distinct("name"), innerJoin(maxProbs), arrange("name") ); nodes.push(...targetNodes); colours = tidy( colourScheme, rename({ symbol_code: "source", colour: "col" }) ); const links = tidy( probData, transmute({ source: d => d.img_code, target: d => d.validdate, value: d => d.prob }), innerJoin(colours), arrange(["target", desc("value")]) ); return { nodes, links }; }39: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() })3a:[{"id":"4acedee57cc186f8e6e7d035936959a565b5b29509081ca6a14c474f4573a95f7058edac2442d5cf3bd62c8d039df9f4daf5790bb6d5537d97221fad8946ff54","href":"https://static.observableusercontent.com/files/4acedee57cc186f8e6e7d035936959a565b5b29509081ca6a14c474f4573a95f7058edac2442d5cf3bd62c8d039df9f4daf5790bb6d5537d97221fad8946ff54","name":"13.svg","type":"image/svg+xml","lastModified":1632217161409.201,"size":2097},{"id":"c5008df3790da282e62a18de60dc0d97e32d90bc8ece36724336638afed420a0f67aca3a4139a2bae9fd9701e0cee63167aca598aa1b41ef153008cae4d98771","href":"https://static.observableusercontent.com/files/c5008df3790da282e62a18de60dc0d97e32d90bc8ece36724336638afed420a0f67aca3a4139a2bae9fd9701e0cee63167aca598aa1b41ef153008cae4d98771","name":"29d.svg","type":"image/svg+xml","lastModified":1632217161457.02,"size":4587},{"id":"6cf7fb6ed79d6f65d0bb55b7175a0b4f423cf8119f83ca970382195295a60945a979eda272cbd0a5a8ece7c2d0dba7c55d551f6aedd0a523c35649f321a8420c","href":"https://static.observableusercontent.com/files/6cf7fb6ed79d6f65d0bb55b7175a0b4f423cf8119f83ca970382195295a60945a979eda272cbd0a5a8ece7c2d0dba7c55d551f6aedd0a523c35649f321a8420c","name":"32.svg","type":"image/svg+xml","lastModified":1632217161463.802,"size":3141},{"id":"61c4bc6fbf262f87e61f5c6178757d7002806950c5c155dd67b539b801b5565d05ff5e9b45f55b7398568e23a43bc8915131e7144f485ddbddf64c45ae67b2a9","href":"https://static.observableusercontent.com/files/61c4bc6fbf262f87e61f5c6178757d7002806950c5c155dd67b539b801b5565d05ff5e9b45f55b7398568e23a43bc8915131e7144f485ddbddf64c45ae67b2a9","name":"22.svg","type":"image/svg+xml","lastModified":1632217161461.557,"size":2535},{"id":"7398b0fb49295cbc962868007c2cb56110ca5514c271e0b323c6141a8c617d33b6d1fe0a7646870c54b1d2c453915ad7ed2844212f58f38cc86a328f3da19cd9","href":"https://static.observableusercontent.com/files/7398b0fb49295cbc962868007c2cb56110ca5514c271e0b323c6141a8c617d33b6d1fe0a7646870c54b1d2c453915ad7ed2844212f58f38cc86a328f3da19cd9","name":"34.svg","type":"image/svg+xml","lastModified":1632217160925.54,"size":2981},{"id":"d597e4e94a38b033fe0bc122712178af6711d70e86a61b5668d64bc9eb9effeddc525d56fe3ce748f1f2134efc3ed007d343f3ac1cd136cdf3fe622c65a4b775","href":"https://static.observableusercontent.com/files/d597e4e94a38b033fe0bc122712178af6711d70e86a61b5668d64bc9eb9effeddc525d56fe3ce748f1f2134efc3ed007d343f3ac1cd136cdf3fe622c65a4b775","name":"50.svg","type":"image/svg+xml","lastModified":1632217160938.629,"size":2333},{"id":"e383dfc4a13168341341cc093cd2909313c7e73e52fda72c27e250ceab76edaeb6245b82dba05d85792794b010af88b05d60fbfbcba156329ee5bd1b8bacda71","href":"https://static.observableusercontent.com/files/e383dfc4a13168341341cc093cd2909313c7e73e52fda72c27e250ceab76edaeb6245b82dba05d85792794b010af88b05d60fbfbcba156329ee5bd1b8bacda71","name":"08d.svg","type":"image/svg+xml","lastModified":1632217160824.291,"size":3721},{"id":"c1feb929ba85aa83b3e737e9d530f128aec0ef14b35198cfe77170993d4bc6e80c0b5093229ad2821f2c2a9e99a3dbcea5816e267eaa059af527460cb82b0579","href":"https://static.observableusercontent.com/files/c1feb929ba85aa83b3e737e9d530f128aec0ef14b35198cfe77170993d4bc6e80c0b5093229ad2821f2c2a9e99a3dbcea5816e267eaa059af527460cb82b0579","name":"11.svg","type":"image/svg+xml","lastModified":1632217160818.676,"size":2769},{"id":"22c981b8a4b5198a9f8f4004441e6f1d8a71d7d2a18087ab17e95509dc0050ff4a839113827b0fe47542732c5f836d09497c85c7159cbdb11d7c937d0067b21d","href":"https://static.observableusercontent.com/files/22c981b8a4b5198a9f8f4004441e6f1d8a71d7d2a18087ab17e95509dc0050ff4a839113827b0fe47542732c5f836d09497c85c7159cbdb11d7c937d0067b21d","name":"03d.svg","type":"image/svg+xml","lastModified":1632217160785.204,"size":2997},{"id":"23e1c56b0932737308483fb811c88d867a3d3222a75bd991a6a075c990043aee9d45d30ded6fdc585211693b1ca330e066de1ad5a2a552c2f7a9d61756c687b0","href":"https://static.observableusercontent.com/files/23e1c56b0932737308483fb811c88d867a3d3222a75bd991a6a075c990043aee9d45d30ded6fdc585211693b1ca330e066de1ad5a2a552c2f7a9d61756c687b0","name":"02d.svg","type":"image/svg+xml","lastModified":1632217160759.178,"size":2914},{"id":"dd05d63235607ee528b47985a8a317a0081aa0b9461a6e53b92484a90fea779640ee52097834bc8d3d4168c7cb178ad8aa088b610bc0eeda166fda88b2d99db6","href":"https://static.observableusercontent.com/files/dd05d63235607ee528b47985a8a317a0081aa0b9461a6e53b92484a90fea779640ee52097834bc8d3d4168c7cb178ad8aa088b610bc0eeda166fda88b2d99db6","name":"01d.svg","type":"image/svg+xml","lastModified":1632217160717.808,"size":1402},{"id":"d15217b5e98b711ab3a25c4f587cf8e5f664244966714c041982a68ff7a86cb0c026e96c259c429eb2e28c895d2bc662a266cbca143f77a0a129fb5b0c0a8cd0","href":"https://static.observableusercontent.com/files/d15217b5e98b711ab3a25c4f587cf8e5f664244966714c041982a68ff7a86cb0c026e96c259c429eb2e28c895d2bc662a266cbca143f77a0a129fb5b0c0a8cd0","name":"meps_forecast_2021040700.json","type":"application/json","lastModified":1632217044689.725,"size":5976417},{"id":"983d81c187a15a36340bd102568bf97a61b82f6e3778a7fc13edf367d2e148922c518042fcf74c40d850633daf325cf5e4dd4dce83bac9b176abf6aad0b1cdba","href":"https://static.observableusercontent.com/files/983d81c187a15a36340bd102568bf97a61b82f6e3778a7fc13edf367d2e148922c518042fcf74c40d850633daf325cf5e4dd4dce83bac9b176abf6aad0b1cdba","name":"symbolColours.json","type":"application/json","lastModified":1632217043836.182,"size":3420},{"id":"680f0a945d1ea5377a4889eac41293f5151da4af0b3ca26302fd3204085e371fb411c0c35269024167397344cf9f2e7fa98e2b76df07466a98a09ec200b781e1","href":"https://static.observableusercontent.com/files/680f0a945d1ea5377a4889eac41293f5151da4af0b3ca26302fd3204085e371fb411c0c35269024167397344cf9f2e7fa98e2b76df07466a98a09ec200b781e1","name":"14.svg","type":"image/svg+xml","lastModified":1632217161024.276,"size":2745},{"id":"b056dc35818365adc37bbcb3d5ce73007df5ea576230a9928d30a370f6cdc4507b82c49df1247e5b79c793ace232041326d6a35aad6bcc18cf18b4247b94c346","href":"https://static.observableusercontent.com/files/b056dc35818365adc37bbcb3d5ce73007df5ea576230a9928d30a370f6cdc4507b82c49df1247e5b79c793ace232041326d6a35aad6bcc18cf18b4247b94c346","name":"27d.svg","type":"image/svg+xml","lastModified":1632217160919.686,"size":4747},{"id":"a5e1606b22552c2397cd18d462a1a86b8a87fbd9c304b150513ec9dc15800402940d3890ab78da8474d00bff0617aad3411146755e7df356f02d4687bdf68233","href":"https://static.observableusercontent.com/files/a5e1606b22552c2397cd18d462a1a86b8a87fbd9c304b150513ec9dc15800402940d3890ab78da8474d00bff0617aad3411146755e7df356f02d4687bdf68233","name":"21d.svg","type":"image/svg+xml","lastModified":1632217161397.489,"size":4351},{"id":"8acf37bafd8e00db3fd308b4b87f009c1ba91dc79ae9a58226a59b3ff9a3a2130e27b5a17e8eda2512df3a92fdcdff7299caa51d8e91563f8901a9f60a480d41","href":"https://static.observableusercontent.com/files/8acf37bafd8e00db3fd308b4b87f009c1ba91dc79ae9a58226a59b3ff9a3a2130e27b5a17e8eda2512df3a92fdcdff7299caa51d8e91563f8901a9f60a480d41","name":"24d.svg","type":"image/svg+xml","lastModified":1632217161270.851,"size":4024},{"id":"373c8291e9d955eeb9fa043dcf6107c3526e4ffd417af79c08eddb0dc95f72b644341d4bcd518e576e634abef86f6327c4ae6bd7e839ebed832213beb2262bb5","href":"https://static.observableusercontent.com/files/373c8291e9d955eeb9fa043dcf6107c3526e4ffd417af79c08eddb0dc95f72b644341d4bcd518e576e634abef86f6327c4ae6bd7e839ebed832213beb2262bb5","name":"46.svg","type":"image/svg+xml","lastModified":1632217161025.597,"size":1770},{"id":"40b7506787d454ef581a002e7673ee039862d219df59fdf89e144b655cb0c949c410f01e6308a1b86473a5076804d1b271207515cd592e136cef159a765762bb","href":"https://static.observableusercontent.com/files/40b7506787d454ef581a002e7673ee039862d219df59fdf89e144b655cb0c949c410f01e6308a1b86473a5076804d1b271207515cd592e136cef159a765762bb","name":"20d.svg","type":"image/svg+xml","lastModified":1632217160924.441,"size":4512},{"id":"3ad56cf22e3ecbad11e54b919809fcd773c707559200b78505e8574c865cd97db5cf9cab52b4e96cf1fc95b139d006e3625291492c16029d378f16310fa2e461","href":"https://static.observableusercontent.com/files/3ad56cf22e3ecbad11e54b919809fcd773c707559200b78505e8574c865cd97db5cf9cab52b4e96cf1fc95b139d006e3625291492c16029d378f16310fa2e461","name":"06d.svg","type":"image/svg+xml","lastModified":1632217160989.702,"size":4141},{"id":"d152489091c5929521e81055848664af8762fe90a6dd899f1c7d1fc32cf49534ac2ce58746fd7332a2fbbf99448d487912d39344680e8f653681b12f666d94ee","href":"https://static.observableusercontent.com/files/d152489091c5929521e81055848664af8762fe90a6dd899f1c7d1fc32cf49534ac2ce58746fd7332a2fbbf99448d487912d39344680e8f653681b12f666d94ee","name":"04.svg","type":"image/svg+xml","lastModified":1632217160835.913,"size":1373},{"id":"4c286192c9ae0f028434ba0e1b37cd3c7f7f9a974e14064da45f0afb742d7814bab0a0d915bf1b6e96c315f8b7b150e39aefcd64e32e151966b6726ac2dec65c","href":"https://static.observableusercontent.com/files/4c286192c9ae0f028434ba0e1b37cd3c7f7f9a974e14064da45f0afb742d7814bab0a0d915bf1b6e96c315f8b7b150e39aefcd64e32e151966b6726ac2dec65c","name":"05d.svg","type":"image/svg+xml","lastModified":1632217160837.392,"size":3511},{"id":"9350384941c15a7b6ea3aa22ff9b846d4346c7fd3cc0b343b1087da5dfd3931adc311fac8e57cc0daa3be70e2cd2caa863ebf98b942e6be0a55f5babae803636","href":"https://static.observableusercontent.com/files/9350384941c15a7b6ea3aa22ff9b846d4346c7fd3cc0b343b1087da5dfd3931adc311fac8e57cc0daa3be70e2cd2caa863ebf98b942e6be0a55f5babae803636","name":"41d.svg","type":"image/svg+xml","lastModified":1632217161007.025,"size":3745},{"id":"3e5d4f0414534293175af0b2a41e92410fece142ed40e2314de40ff02c4206d7a1cdb67a47541e3920c5ad8147bbe4731a3385899a4b4634621919404e01f929","href":"https://static.observableusercontent.com/files/3e5d4f0414534293175af0b2a41e92410fece142ed40e2314de40ff02c4206d7a1cdb67a47541e3920c5ad8147bbe4731a3385899a4b4634621919404e01f929","name":"23.svg","type":"image/svg+xml","lastModified":1632217161014.867,"size":2906},{"id":"7dc01aad3dfd41eed517f7c61e2fa2864375ed55f643fcd95724f0f10de70f8b3b8e3e7b83d00ab12684480b191ba27006c318789cb6bb36b1b8b4fecedd0d75","href":"https://static.observableusercontent.com/files/7dc01aad3dfd41eed517f7c61e2fa2864375ed55f643fcd95724f0f10de70f8b3b8e3e7b83d00ab12684480b191ba27006c318789cb6bb36b1b8b4fecedd0d75","name":"40d.svg","type":"image/svg+xml","lastModified":1632217161075.685,"size":3394},{"id":"793b59eedf98defc9576708ae0fbc96916ab54116fa8abd90b943141ea86bbdd5e3292a317daa7cbfad770c6f5e68a1388af0ca99400eea33cb91ca8e6354192","href":"https://static.observableusercontent.com/files/793b59eedf98defc9576708ae0fbc96916ab54116fa8abd90b943141ea86bbdd5e3292a317daa7cbfad770c6f5e68a1388af0ca99400eea33cb91ca8e6354192","name":"09.svg","type":"image/svg+xml","lastModified":1632217160924.636,"size":1887},{"id":"f632c5a46a236596254ce059712fb6cd783b90681f591b22c0fdd0fb20b49e59e30a0e8f11911407fd7da5f4f3c942de7f065d736e3c730e388c6fe2e0095655","href":"https://static.observableusercontent.com/files/f632c5a46a236596254ce059712fb6cd783b90681f591b22c0fdd0fb20b49e59e30a0e8f11911407fd7da5f4f3c942de7f065d736e3c730e388c6fe2e0095655","name":"49.svg","type":"image/svg+xml","lastModified":1632217161300.21,"size":1979},{"id":"ab284a48944cdedad228b1abcc47557a587a324e1217ec0ce80625d2ad2f4d6db2fc58928ebe8f1d6b49f1765f02b39b512d6301b353033ef622dd960915c9e5","href":"https://static.observableusercontent.com/files/ab284a48944cdedad228b1abcc47557a587a324e1217ec0ce80625d2ad2f4d6db2fc58928ebe8f1d6b49f1765f02b39b512d6301b353033ef622dd960915c9e5","name":"43d.svg","type":"image/svg+xml","lastModified":1632217161195.544,"size":4117},{"id":"a6e756664a13645864333c3218e3b8df2731b2dcfac66ee2f6d1ee3d37f58623bf071d9254e3a3658990218746065bf212a761352acfd46dd234135292409baa","href":"https://static.observableusercontent.com/files/a6e756664a13645864333c3218e3b8df2731b2dcfac66ee2f6d1ee3d37f58623bf071d9254e3a3658990218746065bf212a761352acfd46dd234135292409baa","name":"10.svg","type":"image/svg+xml","lastModified":1632217161280.737,"size":2121},{"id":"35ed3a453c4c08fe94b6f2efd980bacf2b944b639e507f741fc7031dc4955c401c591e6527ba85cc3865e1affa4f4cd6dda406742d76930d2900b887a25ceacd","href":"https://static.observableusercontent.com/files/35ed3a453c4c08fe94b6f2efd980bacf2b944b639e507f741fc7031dc4955c401c591e6527ba85cc3865e1affa4f4cd6dda406742d76930d2900b887a25ceacd","name":"44d.svg","type":"image/svg+xml","lastModified":1632217161224.193,"size":3603},{"id":"8730659612234beb3ab5f517dbf7a22411f8c259d7fbd05c7441c485214ff279a56bf1e9fe5bdb408ce706f9d4dc4c0bf7ae297725e72c94d039836662f5fc01","href":"https://static.observableusercontent.com/files/8730659612234beb3ab5f517dbf7a22411f8c259d7fbd05c7441c485214ff279a56bf1e9fe5bdb408ce706f9d4dc4c0bf7ae297725e72c94d039836662f5fc01","name":"48.svg","type":"image/svg+xml","lastModified":1632217161213.797,"size":2493},{"id":"9d0f784730f6f33051f3edbf4cf63a1da44ccc14251ae79980eb44b07dbd2c735fe59cc3932debda584cf4e9c7b114c13c1e3634d7ee29d82c7b8cae7410a2a0","href":"https://static.observableusercontent.com/files/9d0f784730f6f33051f3edbf4cf63a1da44ccc14251ae79980eb44b07dbd2c735fe59cc3932debda584cf4e9c7b114c13c1e3634d7ee29d82c7b8cae7410a2a0","name":"33.svg","type":"image/svg+xml","lastModified":1632217161192.215,"size":2627},{"id":"6609ff2c4de49c4f22cea2b2d6b83bc2a6383e9a5a81e3d9d0eb014ad74790c0d2404b5490b46bc1d8f8fdad10938a0d08ed5de5635dcd6db838e112aefff3a7","href":"https://static.observableusercontent.com/files/6609ff2c4de49c4f22cea2b2d6b83bc2a6383e9a5a81e3d9d0eb014ad74790c0d2404b5490b46bc1d8f8fdad10938a0d08ed5de5635dcd6db838e112aefff3a7","name":"31.svg","type":"image/svg+xml","lastModified":1632217161156.042,"size":2789},{"id":"23a5895adbb968ba286ed912ed9a6c57d8be687846590706be9f93733109596ee331cc39825ff4629faf225e3e03a0b4cec0e7a5a592083fac6e01a365d07214","href":"https://static.observableusercontent.com/files/23a5895adbb968ba286ed912ed9a6c57d8be687846590706be9f93733109596ee331cc39825ff4629faf225e3e03a0b4cec0e7a5a592083fac6e01a365d07214","name":"28d.svg","type":"image/svg+xml","lastModified":1632217161128.604,"size":4233},{"id":"f70d756ea18eb41e2a335101ff028ba4e9b8fb16ce064cb10a6de016c1f5e4b9081f94fa958733c46f0655ea2643e7e0bfd3b01192081aac96937310a6e04f93","href":"https://static.observableusercontent.com/files/f70d756ea18eb41e2a335101ff028ba4e9b8fb16ce064cb10a6de016c1f5e4b9081f94fa958733c46f0655ea2643e7e0bfd3b01192081aac96937310a6e04f93","name":"25d.svg","type":"image/svg+xml","lastModified":1632217160913.611,"size":4375},{"id":"9dc0274b6e7fc22c56e34175e530f43fe9390e99dd79cc987f778c817b74b10eb6f7c491b393d2bcfa66991588143300efe5ac6fc323b9f5e7c3e95e7ac86c3d","href":"https://static.observableusercontent.com/files/9dc0274b6e7fc22c56e34175e530f43fe9390e99dd79cc987f778c817b74b10eb6f7c491b393d2bcfa66991588143300efe5ac6fc323b9f5e7c3e95e7ac86c3d","name":"07d.svg","type":"image/svg+xml","lastModified":1632217160921.803,"size":3882},{"id":"869fe215d3706457e2975d1354ba6dd9cb65dad72e0259563fc2ed4b9e0565eccab39c8efacbb23170cc305f225dd0ca024c6214ca3ebaaca2ffbeb091487ea3","href":"https://static.observableusercontent.com/files/869fe215d3706457e2975d1354ba6dd9cb65dad72e0259563fc2ed4b9e0565eccab39c8efacbb23170cc305f225dd0ca024c6214ca3ebaaca2ffbeb091487ea3","name":"15.svg","type":"image/svg+xml","lastModified":1632217161102.927,"size":1894},{"id":"c2f40e78b0e6b05b555d4388449fec22d9c6bc764349a3341fb2dfbdd01a5f22c4dd18b63715cb581310304a83c832df8dd52ffc2ea38dc1552d5edfb0811105","href":"https://static.observableusercontent.com/files/c2f40e78b0e6b05b555d4388449fec22d9c6bc764349a3341fb2dfbdd01a5f22c4dd18b63715cb581310304a83c832df8dd52ffc2ea38dc1552d5edfb0811105","name":"45d.svg","type":"image/svg+xml","lastModified":1632217160947.398,"size":3957},{"id":"ee4220a5021d01e7b979473fa0211ca6393fdd24327f13a54bba286af907dd5b7ee9ab20e1ae9a273954a875a6efda124c8115c87770730647446a790c904cc9","href":"https://static.observableusercontent.com/files/ee4220a5021d01e7b979473fa0211ca6393fdd24327f13a54bba286af907dd5b7ee9ab20e1ae9a273954a875a6efda124c8115c87770730647446a790c904cc9","name":"42d.svg","type":"image/svg+xml","lastModified":1632217161484.847,"size":3765},{"id":"1747d88cf538b63a5afa81558e399fc6e31e4bb56d338728b9af2649983b22513a8bd5986cb7335b1753639482b4263119786cbd17b278cdb04d57d6069f5200","href":"https://static.observableusercontent.com/files/1747d88cf538b63a5afa81558e399fc6e31e4bb56d338728b9af2649983b22513a8bd5986cb7335b1753639482b4263119786cbd17b278cdb04d57d6069f5200","name":"47.svg","type":"image/svg+xml","lastModified":1632217161488.77,"size":2141},{"id":"2fc5c513fe458b95a0e8c6dcd136a2368db3eac1349d63ba02b2dbbcd46c9782497dadc68cecb3292cac6bd8df2dcd92ddb7dd78e5be524149dc75c8d9f53451","href":"https://static.observableusercontent.com/files/2fc5c513fe458b95a0e8c6dcd136a2368db3eac1349d63ba02b2dbbcd46c9782497dadc68cecb3292cac6bd8df2dcd92ddb7dd78e5be524149dc75c8d9f53451","name":"26d.svg","type":"image/svg+xml","lastModified":1632217161463.611,"size":4395},{"id":"b27452c9756b8ac4a3562e31945dd5916e34ba83bdcafa1caace64c049023363ff179e7d1fb432f9a4af1e661493c737354a94bf9020a163fcd4dc82849cd6c0","href":"https://static.observableusercontent.com/files/b27452c9756b8ac4a3562e31945dd5916e34ba83bdcafa1caace64c049023363ff179e7d1fb432f9a4af1e661493c737354a94bf9020a163fcd4dc82849cd6c0","name":"12.svg","type":"image/svg+xml","lastModified":1632217161316.213,"size":2258},{"id":"5201ba88e53094915cdca6bad0ba3a00df9c63b097594e9e2873c82d505f3a9a6cc643a844e72b3d736e66e844925f9760a6ec250f8a57a64a46bb53b64c55f0","href":"https://static.observableusercontent.com/files/5201ba88e53094915cdca6bad0ba3a00df9c63b097594e9e2873c82d505f3a9a6cc643a844e72b3d736e66e844925f9760a6ec250f8a57a64a46bb53b64c55f0","name":"30.svg","type":"image/svg+xml","lastModified":1632217161415.199,"size":2418}] 31:{"id":"e3bee50a1ddbf1bc","slug":"weather-symbols-in-ensembles","title":"Visualizing weather type in ensembles","thumbnail":"01cb89806fb6981f85074bba4ffa56d8674325ee00ab1778fc38b1545e55429e","access_level":"public","create_time":"$D2021-09-21T08:53:34.583Z","update_time":"$D2024-10-25T08:18:49.262Z","view_time":null,"first_public_time":"$D2021-09-22T14:40:09.043Z","has_unpublished_edits":null,"fork":false,"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":1343,"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":3,"collection":{"id":"6d4c044c625efa08","slug":"uncertainty-visualization","title":"Uncertainty visualization","owner":{"id":"5466a1b89a3b9cf8","login":"andrew-met","name":"Andrew Singleton"}},"type":"notebook","body":{"title":"Visualizing weather type in ensembles","cells":[{"id":0,"value":"md`# Visualizing weather type in ensembles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`When presenting ensemble forecasts, it is common to show ther distributions of weather parameters such as tempertature, wind speed and precipitation in some form or other. However, weather symbols for forecasts are often chosen by which is the most likely based on the ensemble. This gives the user no information about what the other side of the coin, or other faces of the dice are. In this notebook, a number of ways of showing the distribution of weather symbols in a forecast are explored.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof location = selectDropDown({\n title: \"Location\",\n options: locations,\n value: \"OSLO-BLINDERN\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`# Visualizations with a time component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`## Stacked columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`The stacked column visualization shows the proportion of each weather symbol based on the full height of the chart. The order of the weather condtions can be chosen as wet to dry, dry to wet, frequency based on the total amount in the period with the most common either at the top, bottom or in the middle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof colStacking = selectDropDown({\n title: \"Stacking Order\",\n options: [\n \"Dry from bottom\",\n \"Wet from bottom\",\n \"Frequency\",\n \"Reverse frequency\",\n \"Inside out\"\n ],\n value: \"Frequency\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`## Symbol Matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`The symbol matrix stacks weather symbols on top of each other for each forecast time. In this example they can be stacked from dry to wet, wet to dry, in order of the ensemble member number or in order of frequency of each symbol at each time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof matrixStacking = selectDropDown({\n title: \"Stacking order\",\n options: [\n \"Member Number\",\n \"Dry from bottom\",\n \"Wet from bottom\",\n \"Frequency\",\n \"Reverse frequency\"\n ],\n value: \"Member Number\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"md`## Weather Sankey`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`Sankey diagrams are designed to visulaize the volume of flow from one entity to the next. This could, for example, be the flow of money between different branches of an industry, or the flow of electricity from different prudction sources into the grid and to different user sectors. We can use this idea to consider the \"flow\" of a weather symbol from different ensemble members to different times in the weather forecast.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof nodeOrder = selectDropDown({\n title: \"Order By\",\n options: [\"Dry to Wet\", \"Wet to Dry\", \"Most Frequent\", \"Least Frequent\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"## Heat Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1201,"value":"See [here](https://observablehq.com/@andrew-met/weather-symbol-heat-map)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1211,"value":"## Visualization for single point in time\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"viewof dateTime = Inputs.select(dateTimes.map(d => d3.utcFormat(\"%H:%M %a %d %b\")(d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(d))), {label: \"Time\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"viewof animateChoice = Inputs.radio([\"On\", \"Off\"], {label: \"Animation\", value: \"Off\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"viewof sortChoice = Inputs.radio(new Map([[\"Most to Least Likely\", 2], [\"Least to Most Likely\", 3], [\"Dry to Wet\", 0], [\"Wet to Dry\", 1]]), {value: 2, label: \"Sorting Order\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"barChart = {\n let svg = d3.select(\"#barChart\");\n\n const h = 300;\n const w = 900;\n\n if (svg.empty()) {\n svg = d3.create(\"svg\").attr(\"id\", \"barChart\");\n }\n\n svg.style(\"background-color\", \"#FEFEFC\").attr(\"viewBox\", [0, 0, w, h]);\n\n new weatherSymbolBars(svg)\n .sort(sortChoice)\n .barWidth(20)\n .barPadding(2)\n .size(w, h)\n .margins(40, 14, 0, 0)\n .symbols(weatherSymbols)\n .symbolSize(20)\n .fontSize(9)\n .transitionDuration(animFrameTime / 3)\n .symbolKeyData(\"img_code\")\n .render(barData);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"viewof animFrameTime = Inputs.range([100, 2000], {step: 100, value: 750, label: \"Frame time [ms]\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"data = await FileAttachment(\"meps_forecast_2021040700.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"locations = tidy(data, select(\"name\"), distinct(\"name\"), arrange(\"name\"), map((d) => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"dateTimeStart = \"2021-04-07 01:00:00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"dateTimeEnd = \"2021-04-08 00:00:00\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"dateTimes = tidy(\n data, \n select(\"validdate\"), \n distinct(\"validdate\"), \n arrange(\"validdate\"),\n map(d => d.validdate)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"endDateTimes = dateTimes.filter(d => d > dateTimeStart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"numMembers = tidy(data, select(\"member\"), distinct(\"member\"), map(d => d.member)).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"towerData = tidy(\n data.filter(\n d =>\n d.name === location &&\n d.validdate >= dateTimeStart &&\n d.validdate <= dateTimeEnd\n ),\n mutate({\n id: d => d.lead_time + \"_\" + d.member\n }),\n innerJoin(tidy(colourScheme, rename({ symbol_code: \"img_code\" }))),\n groupBy([\"validdate\", \"img_code\"], [mutateWithSummary({ sym_freq: n() })]),\n arrange([\n \"validdate\",\n matrixStacking === \"Member Number\"\n ? \"member\"\n : matrixStacking === \"Dry from bottom\"\n ? desc(\"order\")\n : matrixStacking === \"Wet from bottom\"\n ? \"order\"\n : matrixStacking === \"Frequency\"\n ? \"sym_freq\"\n : desc(\"sym_freq\")\n ]),\n groupBy(\"validdate\", [\n mutateWithSummary({\n yScale: d =>\n d3\n .scaleBand()\n .domain(d.map(e => e.member))\n .range([towerMargins.top, towerHeight + towerMargins.top])\n })\n ]),\n mutate({ y: d => d.yScale(d.member) })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"selectedDateTime = animateChoice === \"On\" ? dateTimeAnimation : dateTime\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"dateTimeAnimation = {\n animateChoice;\n location;\n let i = 0;\n while (true) {\n let delay = animFrameTime;\n i === 0 ? (delay = animFrameTime * 2.5) : null;\n yield Promises.delay(delay, d3.utcFormat(\"%H:%M %a %d %b\")(d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(dateTimes[i])));\n i === dateTimes.length - 1 ? (i = 0) : i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"barData = data.filter(\n d => d.name === location && d3.utcFormat(\"%H:%M %a %d %b\")(d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(d.validdate)) === selectedDateTime\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"symbolFrequency = tidy(\n towerData,\n groupBy([\"validdate\", \"img_code\"], [summarize({ frequency: n() })])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"colourScheme = await FileAttachment(\"symbolColours.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`## Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"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":68,"value":"timeParse = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"sankey = {\n const sankey = d3\n .sankey()\n .nodeId(d => d.name)\n .nodeAlign(d3.sankeyLeft)\n .nodeWidth(sankeyNodeHeight)\n .nodePadding(5)\n .nodeSort(null)\n .linkSort(null)\n .extent([\n [sankeyMargins.top, sankeyMargins.left],\n [sankeyHeight + sankeyMargins.top, sankeyWidth - sankeyMargins.right]\n ]);\n return ({ nodes, links }) =>\n sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"xAxisScale = d3.scaleUtc()\n .range([timeNodeWidth / 2 + sankeyMargins.left, sankeyWidth - timeNodeWidth / 2 - sankeyMargins.right])\n .domain(d3.extent(towerDateTimes, d => d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(d)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"timeNodeWidth = {\n const dat = sankey(sankeyData).nodes.filter(d => d.depth === 1)[0]\n return dat.y1 - dat.y0\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"sankey(sankeyData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"sankeyLinkVertical = {\n return d3\n .linkVertical()\n .source(verticalSource)\n .target(verticalTarget);\n\n function verticalSource(d) {\n return [d.y0, d.source.x1];\n }\n\n function verticalTarget(d) {\n return [d.y1, d.target.x0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`## Plot dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"towerDateTimes = dateTimes.filter(d => d >= dateTimeStart && d <= dateTimeEnd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"towerSymbolSize = Math.min(\n towerWidth / towerDateTimes.length - 2 * towerSymbolMarginRatio,\n towerHeight / numMembers - 2 * towerSymbolMarginRatio\n) | 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"towerSymbolMarginRatio = 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"towerSymbolMargin = ((towerSymbolMarginRatio * towerSymbolSize) / 2) | 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"towerWidth = width - towerMargins.left - towerMargins.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"towerHeight = 500 //(height - towerMargins.top - towerMargins.bottom) | 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"towerMargins = ({\n top: 40,\n bottom: 60,\n left: 40,\n right: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"sankeyHeight = Math.min(height, width * 0.5) -\n sankeyMargins.top -\n sankeyMargins.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"sankeyWidth = width - sankeyMargins.left - sankeyMargins.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"sankeyMargins = ({\n top: 75,\n bottom: 75,\n left: 40,\n right: 80\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"sankeySymbolSize = (sankeyWidth / 32) | 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"sankeyNodeHeight = 17","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"sankeyTransitionTime = 1500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"hoverTransitionTime = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"colWidth = (towerWidth / towerDateTimes.length - 2 * towerSymbolMarginRatio) | 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"import {weatherSymbolBars} from \"@andrew-met/weather-symbol-bars\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import { select as selectDropDown} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {\n tidy,\n pivotLonger,\n pivotWider,\n groupBy,\n innerJoin,\n mutate,\n transmute,\n mutateWithSummary,\n filter,\n first,\n select,\n rename,\n everything,\n arrange,\n desc,\n distinct,\n map,\n summarize,\n n,\n sum,\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":754,"value":"import { height } from \"@fil/height\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"d3 = require(\"d3@^6.1\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`# Acknowledgments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"md`__Weather Symbols__ are taken from [yr.no](https://yr.no/en), a joint service by the Norwegian Meteorological Institute and the Norwegian Broadcasting Corporation, via [Github](https://github.com/nrkno/yr-weather-symbols). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"md`The __Weather Sankey__ is inspired by [a notebook](https://observablehq.com/@analyzer2004/sunny-day-rainy-day-in-seattle) by [Eric Lo](https://observablehq.com/@analyzer2004) and uses a modified version of that code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"