2b:null 2c:["$","title",null,{"children":"Interactive ensemble weather forecasts | Andrew Singleton | Observable"}] 31:Tf7b,probChart = { let svg = d3.select("#prob"); const chartHeight = height / 3; const chartWidth = width; if (svg.empty()) { svg = d3 .create("svg") .attr("id", "prob") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("font-family", "sans-serif"); } const probFcst = d3.flatRollup( currentFcst, (v) => 100 * d3.mean(v.map((d) => (d.T2m >= thresh ? 1 : 0))), (d) => d.validdate ); const margins = { top: 15, right: 40, bottom: 30, left: 40 }; const bounds = selectOrAppend("g", "bounds", svg).attr( "transform", `translate(${margins.left},${margins.top})` ); const x = d3 .scaleTime() .domain(d3.extent(probFcst.map((d) => localTimeParser(d[0])))) .range([0, chartWidth - margins.left - margins.right]); const y = d3 .scaleLinear() .domain([0, 100]) .range([chartHeight - margins.top - margins.bottom, 0]); const c = d3.scaleSequential(d3.interpolateRdYlGn).domain([100, 0]); const barWidths = x(localTimeParser(probFcst[1][0])) - x(localTimeParser(probFcst[0][0])); const tooltip = d3 .select("body") .append("div") .attr("class", "d3-tooltip") .style("position", "absolute") .style("z-index", "10") .style("opacity", 0) .style("padding", "10px") .style("background", "#FFF") .style("border-radius", "8px") .attr("color", "#333") .style("border-style", "solid") .style("border-color", "#C33") .style("font-family", "sans-serif") .style("font-size", "0.75em") .text("a simple tooltip"); const tooltipReveal = (event, d) => { probBars.attr("opacity", (b) => (b[0] === d[0] ? 1 : 0.5)); const xPos = x(d[0]); tooltip .html( `

${timeFormatter( localTimeParser(d[0]) )}

P(temperature ≥ ${thresh}): ${Math.round( d[1] )}%

` ) .style("opacity", 0.8) .style("border-color", c(d[1])); }; const tooltipHide = () => { probBars.attr("opacity", 1); tooltip.style("opacity", 0).html(""); }; const tooltipMove = (event, d) => { console.log(x(localTimeParser(d[0])) > chartWidth); const xOffset = x(localTimeParser(d[0])) > chartWidth - 220 ? -230 : 10; tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + xOffset + "px"); }; const probBars = selectOrAppend("g", "probBars", bounds) .selectAll("rect") .data(probFcst) .join("rect") .attr("x", (d) => x(localTimeParser(d[0])) - barWidths / 2 + 1) .attr("y", (d) => y(d[1])) .attr("width", barWidths - 2) .attr("height", (d) => chartHeight - margins.bottom - margins.top - y(d[1])) .attr("fill", (d) => c(d[1])) .attr("stroke-width", 0) .attr("opacity", 1); const probBarsForTooltip = selectOrAppend("g", "probBarsForToolTip", bounds) .selectAll("rect") .data(probFcst) .join("rect") //.attr("class", "tooltipRect") .attr("x", (d) => x(localTimeParser(d[0])) - barWidths / 2) .attr("y", (d) => y(d[1])) .attr("width", barWidths) .attr("height", (d) => chartHeight - margins.bottom - margins.top - y(d[1])) .attr("fill", "yellow") .attr("opacity", 0) .attr("stroke-width", 0) .on("mouseenter", tooltipReveal) .on("mouseleave", tooltipHide) .on("mousemove", tooltipMove); const xAxis = selectOrAppend("g", "xAxis", bounds) .style("font-size", 10) .attr( "transform", `translate(0, ${chartHeight - margins.bottom - margins.top})` ) .attr("color", "#999") .call( d3.axisBottom(x).tickFormat(d3.utcFormat("%H")).ticks(d3.utcHour.every(6)) ); const yAxis = selectOrAppend("g", "yAxis", bounds) .style("font-size", 10) .attr("transform", `translate(-${barWidths / 2}, 0)`) .attr("color", "#999") .call(d3.axisLeft(y).ticks(3)); return svg.node(); }32:T28f0,class plume { constructor(parent) { this._parent = parent; this._width = 800; this._height = 400; this._margins = { top: 10, right: 30, bottom: 30, left: 30 }; this._utcTime = false; this._timeFormat = "%Y-%m-%d %H:%M:%S"; this._validTimeKey = "validdate"; this._data = null; this._paramKey = null; this._plumeColours = { inner: "seagreen", middle: "mediumseagreen", outer: "lightseagreen" }; this._bg = "#FFF"; this._minY = null; this._maxY = null; this._textColour = "#000"; this._testVal = null; this._threshold = null; } size(w, h) { this._width = w; this._height = h; return this; } margins(t, r, b, l) { this._margins = { top: t, right: r, bottom: b, left: l }; return this; } colours(i, m, o) { this._plumeColours = {inner: i, middle: m, outer: o}; return this; } bg(c) { this._bg = c; return this; } textColour(c) { this._textColour = c; return this; } utcTime(utc) { this._utcTime = utc; return this; } timeFormat(t) { this._timeFormat = t; return this; } validTimeKey(k) { this._validTimeKey = k; return this; } data(data) { this._data = data; return this; } threshold(t) { this._threshold = t; return this; } paramKey(k) { this._paramKey = k; return this; } ylim(l, h) { const yLims = [l, h].sort(); this._minY = yLims[0]; this._maxY = yLims[1]; return this; } test() { this._testVal = this._toQuantiles(); //this._testVal = this._toDays(); return this; } render() { this._drawPlume(); return this; } // _toQuantiles() { return d3.flatRollup( this._data, (v) => ({ q00: d3.min(v.map((d) => d[this._paramKey])), q10: d3.quantile( v.map((d) => d[this._paramKey]), 0.1 ), q25: d3.quantile( v.map((d) => d[this._paramKey]), 0.25 ), q50: d3.quantile( v.map((d) => d[this._paramKey]), 0.5 ), q75: d3.quantile( v.map((d) => d[this._paramKey]), 0.75 ), q90: d3.quantile( v.map((d) => d[this._paramKey]), 0.9 ), q100: d3.max(v.map((d) => d[this._paramKey])), mean: d3.mean(v.map((d) => d[this._paramKey])), control: v.filter(d => d.member === "mbr000")[0][this._paramKey], prob: d3.mean(v.map(d => d[this._paramKey] >= this._threshold ? 1 : 0)) }), (d) => d[this._validTimeKey] ); } _toPlumes() { const quantileData = this._toQuantiles(); return d3.groups( quantileData .map((d) => ({ time: d[0], min: d[1].q00, max: d[1].q100, range: "q00q100" })) .concat( quantileData.map((d) => ({ time: d[0], min: d[1].q10, max: d[1].q90, range: "q10q90" })) ) .concat( quantileData.map((d) => ({ time: d[0], min: d[1].q25, max: d[1].q75, range: "q25q75" })) ), (d) => d.range ); } _toDays() { return [...new Set( this._data.filter(d => d3.utcFormat("%H")(this._timeParser(d.validdate)) == "00").map(d => d.validdate) )].map( d => ({ data: [ {time:this._timeParser(d), y: 0}, {time: this._timeParser(d), y: this._height - this._margins.bottom - this._margins.top} ], text: d3.utcFormat("%a %d %b")(this._timeParser(d)), }) ) } _timeParser(t) { return this._utcTime ? d3.utcParse(this._timeFormat)(t) : d3.timeParse(this._timeFormat)(t); } _drawPlume() { this._parent.style("background-color", `${this._bg}`); const selectOrAppend = (elementType, className, parent) => { const selection = parent.select("." + className); if (!selection.empty()) return selection; return parent.append(elementType).attr("class", className); }; const x = d3 .scaleTime() .domain( d3.extent( this._data.map((d) => this._timeParser(d[this._validTimeKey])) ) ) .range([0, this._width - this._margins.left - this._margins.right]); const minY = this._minY ? this._minY : d3.min(this._data, (d) => d[this._paramKey]); const maxY = this._maxY ? this._maxY : d3.max(this._data, (d) => d[this._paramKey]); const y = d3 .scaleLinear() .domain([minY, maxY]) .range([this._height - this._margins.bottom - this._margins.top, 0]) .nice(); const areaGenerator = d3 .area() .curve(d3.curveMonotoneX) .x((d) => x(this._timeParser(d.time))) .y0((d) => y(d.min)) .y1((d) => y(d.max)); const lineGenerator = d3 .line() .curve(d3.curveMonotoneX) .x((d) => x(this._timeParser(d.time))) .y((d) => y(d)); const dayLineGenerator = d3.line() .x(d => x(d.time)) .y(d => d.y); const bounds = selectOrAppend("g", "bounds", this._parent).attr( "transform", `translate(${this._margins.left},${this._margins.top})` ); const plumes = selectOrAppend("g", "plumes", bounds) .selectAll("path") .data(this._toPlumes()) .join("path") .attr("fill", (d) => d[0] === "q00q100" ? this._plumeColours.outer : d[0] === "q10q90" ? this._plumeColours.middle : this._plumeColours.inner ) .attr("d", (d) => areaGenerator(d[1])); const xAxis = selectOrAppend("g", "xAxis", bounds) .style("font-size", 10) .attr("transform", `translate(0, ${this._height - this._margins.bottom - this._margins.top})`) .attr("color", `${this._textColour}`) .call(d3.axisBottom(x).tickFormat(d3.utcFormat("%H")).ticks(d3.utcHour.every(6))); const yAxis = selectOrAppend("g", "yAxis", bounds) .style("font-size", 10) .attr("color", `${this._textColour}`) .call(d3.axisLeft(y).ticks(5)) const dayLines = selectOrAppend("g", "dayLines", bounds) .selectAll("path") .data(this._toDays()) .join("path") .attr("fill", "none") .attr("stroke", `${this._textColour}`) .attr("stroke-width", 0.5) .attr("opacity", 0.5) .attr("d", d => dayLineGenerator(d.data)) const dayText = selectOrAppend("g", "dayText", bounds) .selectAll("text") .data(this._toDays()) .join("text") .attr("fill", `${this._textColour}`) .attr("x", d => x(d.data[0].time)) .attr("y", d => 0 - this._margins.top * 0.1) .attr("font-size", 10) .text(d => d.text) const validTimes = d3.groups(this._data, d => d[this._validTimeKey]) const barWidths = x(this._timeParser(validTimes[1][0])) - x(this._timeParser(validTimes[0][0])) const tooltip = d3 .select('body') .append('div') .attr('class', 'd3-tooltip') .style('position', 'absolute') .style('z-index', '10') .style('opacity', 0) .style('padding', '10px') .style('background', '#FFF') .style('border-radius', '4px') .style('color', '#333') .style("border-style", "solid") .style("border-color", "#C33") .style("font-family", "sans-serif") .text('a simple tooltip'); const tooltipReveal = (event, d) => { tooltipBars.attr("opacity", b => b[0] === d[0] ? 0.5 : 0) const xPos = x(d[0]) const dataNow = this._data.filter(dd => dd[this._validTimeKey] === d[0]) const totalMembers = dataNow.length const exceedenceMembers = dataNow.filter(dd => dd[this._paramKey] >= this._threshold).length tooltip .html(`` ) .style('opacity', 0.8); new dotPlot("plume-tooltip") .data(dataNow) .paramKey(this._paramKey) .threshold(this._threshold) .colours(this._plumeColours.inner, this._plumeColours.outer) .render() } const tooltipHide = () => { tooltipBars.attr("opacity", 0) tooltip.style("opacity", 0).html("") } const tooltipMove = (event, d) => { const xPos = x(this._timeParser(d[0])) > (this._width - this._margins.left - 158) ? -178 : 10; tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + xPos + 'px'); } const tooltipBars = selectOrAppend("g", "tooltipBars", bounds) .selectAll("rect") .data(this._toQuantiles()) .join("rect") .attr("stroke-width", 0) .attr("fill", "#CCC") .attr("opacity", 0) .attr("x", d => x(this._timeParser(d[0])) - barWidths / 2) .attr("y", 0) .attr("width", barWidths) .attr("height", this._height - this._margins.top - this._margins.bottom) .on("mouseenter", tooltipReveal) .on("mouseleave", tooltipHide) .on("mousemove", tooltipMove) if (this._threshold) { d3.select("#threshLine").remove() d3.select("#threshText").remove() const yVal = y(this._threshold) < -1 | y(this._threshold) > (this._height - this._margins.top - this._margins.bottom) ? null : y(this._threshold) const threshData = [ {x: 0, y: yVal}, {x: this._width - this._margins.left - this._margins.right / 2, y: yVal} ]; if (yVal) { const threshLine = selectOrAppend("g", "threshLine", bounds) .append("path") .attr("id", "threshLine") .attr("stroke-width", 1.5) .attr("stroke", this._textColour) .attr("d", d3.line().x(d => d.x).y(d => d.y)(threshData)) const threshText = selectOrAppend("g", "threshText", bounds) .append("text") .attr("id", "threshText") .attr("fill", this._textColour) .attr("x", this._width - this._margins.left - this._margins.right + 2) .attr("y", yVal - 2) .html(`${this._threshold}℃`) } } }; }33:T1bea,class dotPlot { constructor(id) { this._id = id ? id[0] === "#" ? id : "#" + id : id; this._width = 120; this._height = 120; this._margins = { top: 1, right: 5, bottom: 20, left: 5 }; this._utcTime = false; this._timeFormat = "%Y-%m-%d %H:%M:%S"; this._validTimeKey = "validdate"; this._data = null; this._paramKey = null; this._dotColours = { above: "#C33", below: "#33C" }; this._bg = "#FFF"; this._threshold = null; this._step = 1; this._forceStep = false; this._maxSteps = null; } size(w, h) { this._width = w; this._height = h; return this; } margins(t, r, b, l) { this._margins = { top: t, right: r, bottom: b, left: l }; return this; } colours(a, b) { this._dotColours = {above: a, below: b}; return this; } bg(c) { this._bg = c; return this; } textColour(c) { this._textColour = c; return this; } utcTime(utc) { this._utcTime = utc; return this; } timeFormat(t) { this._timeFormat = t; return this; } validTimeKey(k) { this._validTimeKey = k; return this; } paramKey(k) { this._paramKey = k; return this; } data(data) { this._data = data; this._maxSteps = Math.ceil(data.length / 2); return this; } threshold(t) { this._threshold = t; return this; } step(s) { this._step = s; return this; } force(f) { this._forceStep = f; return this; } test() { return this._calc(); } render() { this._drawDots(); return this; } _calc() { let ll = this._maxSteps + 1; let step = this._step / 2; let thresholds; while (ll > this._maxSteps) { step = step * 2; thresholds = this._dataToThresholds(this._data, step, this._paramKey) if (this._forceStep) { ll = 0; } else { ll = thresholds.length } } let tooMany = true; let res while (tooMany) { res = this._makeBinData(this._data, this._paramKey, thresholds, step); if (this._forceStep) { tooMany = false; } else { step = step / 2 thresholds = this._dataToThresholds(this._data, step, this._paramKey) tooMany = d3.groups(res, d => d.x).some(d => d[1].length > this._maxSteps) } } return res; } _dataToThresholds (fcst, step, col) { const _roundUp = (value, step) => { step || (step = 1.0); const inv = 1.0 / step; return Math.ceil(value * inv) / inv; }; const _roundDown = (value, step) => { step || (step = 1.0); const inv = 1.0 / step; return Math.floor(value * inv) / inv; }; const rangeLow = _roundDown(d3.min(fcst, d => d[col]), step); const rangeHigh = _roundUp(d3.max(fcst, d => d[col]), step) + step; return d3.range(rangeLow, rangeHigh, step); } _makeBinData (fcst, col, thresh, step) { 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 ? true : false, threshold: threshold, symbol: data[i][j].img_code //, //colour: data[i][j][colourBy] }); counter++; } } return out; }; const out = _dataToBins(fcst, col, thresh); //return out; return _binsToPos(out, step, col, this._threshold); } render () { const chartData = this._calc() const selectOrAppend = (elementType, className, parent) => { const selection = parent.select("." + className); if (!selection.empty()) return selection; return parent.append(elementType).attr("class", className); }; const shortestSide = d3.min([ this._width - this._margins.left - this._margins.right, this._height - this._margins.top - this._margins.bottom ]) const chartWidth = shortestSide const chartHeight = shortestSide const marginsDot = { top: this._margins.top, right: this._width - this._margins.left - shortestSide, bottom: this._height - this._margins.top - shortestSide, left: this._margins.left } const dotPlotsDiv = d3.select(this._id) const dotPlots = selectOrAppend("svg", "svg", dotPlotsDiv) .attr("width", this._width) .attr("height", this._height) .node() const svg = d3.select(dotPlots) const chart = selectOrAppend("g", "chart", svg).style( "transform", `translate(${marginsDot.left}px, ${marginsDot.top}px)` ); const stepSize = d3.min(chartData, d => d.y) * 2 const dataSteps = 1 + d3.extent(chartData, d => d.x).reduce((a, b) => b - a) / stepSize const maxSteps = this._maxSteps const minX = d3.min(chartData, d => d.x) - stepSize * Math.floor((maxSteps - dataSteps) / 2) - stepSize / 2 const maxX = d3.max(chartData, d => d.x) + stepSize * Math.ceil((maxSteps - dataSteps) / 2) + stepSize / 2 const x = d3.scaleLinear() .domain([minX, maxX]) .range([0, chartWidth]) const y = d3.scaleLinear() .domain([0, maxSteps * stepSize]) .range([chartHeight, 0]) const dotRadius = y(0) - y(d3.min(chartData, d => d.y)) const dots = selectOrAppend("g", "dots", chart) .selectAll("circle") .data(chartData) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", dotRadius) .attr("fill", d => d.exceed ? this._dotColours.above : this._dotColours.below) const xAxis = selectOrAppend("g", "xAxis", chart) .style("font-size", 10) .attr("transform", `translate(0, ${chartHeight})`) .attr("color", "#999") .call(d3.axisBottom(x).scale(x)); return { x: [... new Set(chartData.map(d => d.x).sort((a, b) => a - b))], xlim: d3.extent(chartData, d => d.x), stepSize: stepSize, nsteps: dataSteps, minX: minX, maxX: maxX, test: 1 + ((maxX - stepSize / 2) - (minX + stepSize / 2)) / stepSize, radius: dotRadius, dim: shortestSide, mar: marginsDot } } } 34:[{"id":"f796d32717214d0dd69abdf276d78605dc69ca337ee9fae28b04967b3430e03aeb410073add354f5bf826f7f985b2663b53a75be014405b4152cc37357343a4f","href":"https://static.observableusercontent.com/files/f796d32717214d0dd69abdf276d78605dc69ca337ee9fae28b04967b3430e03aeb410073add354f5bf826f7f985b2663b53a75be014405b4152cc37357343a4f","name":"meps_major_cities_2022081500_1600@1.json","type":"application/json","lastModified":1668595203393.402,"size":34483025}] 2f:{"id":"20615f84558f5ce5","slug":null,"title":"Interactive ensemble weather forecasts","thumbnail":"dde64a5def7d6af86c385b25bd49b64ac14ce70ad80ff25cc05020891ae03406","access_level":"public","create_time":"$D2022-11-16T09:48:23.268Z","update_time":"$D2025-03-27T15:43:42.951Z","view_time":null,"first_public_time":"$D2022-11-21T14:56:53.624Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":1203,"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":0,"collection":null,"type":"notebook","body":{"title":"Interactive ensemble weather forecasts","cells":[{"id":0,"value":"# Interactive ensemble weather forecasts\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"viewof location = Inputs.select(unique(fcst.map(d => d.name)).sort(), {label: \"Location\", value: \"OSLO-BLINDERN\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof fcstStart = Inputs.select(\n unique(fcst.map(d => d.fcdate)).map(d => timeParser(d)).sort().map(d => timeFormatter(d)),\n {label: \"Forecast Start Time (UTC)\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof fcstLength = Inputs.select([\"24\", \"36\", \"48\", \"Max\"], {label: \"Forecast length (hours)\", value: \"Max\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"viewof thresh = Inputs.range([-20, 30], {\n step: 1,\n value: 0,\n label: \"Threshold\"\n})\n//thresh = {\n// let i = 17;\n// while (true) {\n// yield Promises.delay(10, i);\n// i >= 30 ? (i = 17) : i++;\n// }\n//}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"plumeChart = {\n let svg = d3.select(\"#plume\");\n\n if (svg.empty()) {\n svg = d3\n .create(\"svg\")\n .attr(\"id\", \"plume\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"font-family\", \"sans-serif\");\n }\n\n new plume(svg)\n .data(currentFcst)\n .size(width, height)\n .paramKey(\"T2m\")\n .margins(15, 40, 20, 40)\n .colours(\n d3.interpolateBlues(0.8),\n d3.interpolateBlues(0.5),\n d3.interpolateBlues(0.2)\n )\n .bg(\"#FFF\")\n .textColour(\"#999\")\n .threshold(thresh)\n .render();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Data\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"fcst = FileAttachment(\"meps_major_cities_2022081500_1600@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"currentFcst = {\n const fcstMax = Number(fcstLength) ? Number(fcstLength) : 1000\n return fcst.filter(d => d.fcdate === d3.utcFormat(\"%Y-%m-%d %H:%M:%S\")(formatedTimeParser(fcstStart))).filter(d => d.name === location && d.lead_time <= fcstMax)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"currentFcst.forEach((d) => (d.RH2m = d.RH2m * 100))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"## Classes for plotting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"## Set up the plot area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"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":17,"value":"timeParser = d => d3.utcParse(\"%Y-%m-%d %H:%M:%S\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"localTimeParser = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"timeFormatter = d => d3.utcFormat(\"%H:%M %a %d %b %Y\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"formatedTimeParser = d => d3.utcParse(\"%H:%M %a %d %b %Y\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"unique = arr => [...new Set(arr)];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"## For making binned dot plots - to be added as a tooltip later","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":920,"value":"mydots = new dotPlot(\"#poop\").data(currentFcst.filter(d => d.lead_time === 18)).paramKey(\"T2m\").threshold(thresh).size(200, 200).render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"{\n const a = \"myID\"\n return a.length\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"3 / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"d3.quantile([4, 5, 6, 7, 8, 9, 10, 11], 1)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"[-3, 2].map(Math.abs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"