31:T80a,{ const embeddedLines = d3.merge(exampleDataEmbed.map(d => d.embed.map((v, i) => ({[vField]: v, t: d.t - E + i + 1, tOffset: -E+1+i, baseT: d.t})))) const focusLine = exampleDataEmbed.find(d => d.t == te).embed .map((v, i) => ({[vField]: v, t: te - E + i + 1, tOffset: -E+1+i})) const color = "green" const tsPlot = Plot.plot({ width: 360, height: 280, marginLeft: 50, marginBottom:30, marks: [ Plot.line(exampleData, {x: "t", y: vField, stroke: "dimgrey"}), Plot.line(focusLine, {x: "t", y: vField, stroke: color, strokeWidth: 3, }), //Plot.dot(focusLine, {x: "t", y: vField, stroke: "purple", r: 3, fill: "white"}), Plot.dot([exampleData.find(d => d.t == te)], {x: "t", y: vField, fill: color, r: 4}), ] }) const neighborLines = d3.merge(exampleNeighbors.map(nn => nn.embed .map((v, i) => ({[vField]: v, t: te - E + i + 1, tOffset: -E+1+i, baseT: nn.t})))) const embedPlot = Plot.plot({ width: 200, height: 280, marginLeft: 50, marginBottom: 30, marks: [ //Plot.line(exampleData, {x: "t", y: vField, stroke: "dimgrey"}), //Plot.line(focusLine, {x: "t", y: vField, stroke: "purple", strokeWidth: 3, }), Plot.line(embeddedLines, {x: "tOffset", y: vField, stroke: "lightgrey", z: "baseT"}), // Plot.line(neighborLines, // {x: "tOffset", y: vField, stroke: "red", z: "baseT", strokeWidth: 3}), Plot.line(embeddedLines.filter(d => d.baseT == te), {x: "tOffset", y: vField, stroke: color, z: "baseT", strokeWidth: 3}), Plot.dot(embeddedLines.filter(d => d.baseT == te && d.tOffset == 0), {x: "tOffset", y: vField, fill: color, z: "baseT", r: 4}), ] }) const div = document.createElement("div") div.style.display = "flex" div.style["column-gap"] = "10px" //div.style["justify-content"] = "space-between" tsPlot.style.display = "inline-block" embedPlot.style.display = "inline-block" div.append(tsPlot) div.append(embedPlot) return div }32:T7e5,{ const t = tnn const embeddedLines = d3.merge(exampleDataEmbed.map(d => d.embed.map((v, i) => ({[vField]: v, t: d.t - E + i + 1, tOffset: -E+1+i, baseT: d.t})))) const focusLine = exampleDataEmbed.find(d => d.t == t).embed .map((v, i) => ({[vField]: v, t: t - E + i + 1, tOffset: -E+1+i})) const color = "purple" const tsPlot = Plot.plot({ width: 360, height: 280, marginLeft: 50, marginBottom:30, marks: [ Plot.line(exampleData, {x: "t", y: vField, stroke: "lightgrey"}), Plot.line(exampleData.filter(d => d.t < tnn), {x: "t", y: vField, stroke: "dimgrey"}), Plot.line(focusLine, {x: "t", y: vField, stroke: color, strokeWidth: 3, }), Plot.dot([exampleData.find(d => d.t == t)], {x: "t", y: vField, fill: color, r: 4}), Plot.dot(exampleNeighbors, {x: "t", y: vField, fill: "red"}), ] }) const neighborLines = d3.merge(exampleNeighbors.map(nn => nn.embed .map((v, i) => ({[vField]: v, t: t - E + i + 1, tOffset: -E+1+i, baseT: nn.t})))) const embedPlot = Plot.plot({ width: 200, height: 280, marginLeft: 50, marginBottom: 30, y: { domain: d3.extent(exampleData, d => d[vField]) }, marks: [ Plot.line(embeddedLines.filter(d => d.baseT <= tnn), {x: "tOffset", y: vField, stroke: "lightgrey", z: "baseT"}), Plot.line(neighborLines, {x: "tOffset", y: vField, stroke: "red", z: "baseT", strokeWidth: 3}), Plot.line(embeddedLines.filter(d => d.baseT == t), {x: "tOffset", y: vField, stroke: color, z: "baseT", strokeWidth: 3}), Plot.dot(embeddedLines.filter(d => d.baseT == t && d.tOffset == 0), {x: "tOffset", y: vField, fill: color, z: "baseT", r: 4}), ] }) const div = document.createElement("div") div.style.display = "flex" div.style["column-gap"] = "10px" tsPlot.style.display = "inline-block" embedPlot.style.display = "inline-block" div.append(tsPlot) div.append(embedPlot) return div }33:T608,{ //const state = function test() { //plots.simplexPlot.state.plotT = 50 let input = viewof E input.value = 6 //input.dispatchEvent(new Event("input")) input = viewof nn input.value = 6 //input.dispatchEvent(new Event("input")) input = viewof kw input.value = 1.0 input = viewof tnn input.value = 78 input.dispatchEvent(new Event("input")) // const input = viewof range // input.value = 6 // input.dispatchEvent(new Event("input")) } const link = html`this example` link.addEventListener("click", test) const body = html`

Shaded Forecast Summary

The point forecasts are sometimes a poor summary of the EDM method's workings. See ${link} (assuming you are still using the example data). Notice that the EDM method identifies two potential places in the past which are similar to the present, and each one has a different future behaviour. The point forecasts fall in the middle of each of these futures, and the information about the two identified possibiliteis is lost. One way in which we combat this is by generating a shaded forecasting area, which summarises the EDM information in a more detailed way than point forecasts. Enable the "Show Shading" checkbox below to see the shaded forecast summary in the two interactive plots above. In short, the higher opacity parts of the shaded forecast summary correpsond to places in the plot which are closer to the offset futures of higher weighted neighbors.

` return body }34:T45d,{ kernelWidth const embedDiv = html`

` const embedPlot = new fc.EmbedPlot(embedDiv, exampleData, exampleForecasts, vField, { state: plots.simplexPlot.state, // TODO: Change showShading: true, width: 340, height: 340, margin: {left: 60, right: 30, top: 35, bottom: 30} }) const kernelDiv = html`

` const kernelPlot = new KernelPlot(kernelDiv, forecast, vField, {weightColorScale: weightColorScale, margin: {left: 60, right: 30, bottom: 30, top:30}}) const kernelDomain = kernelPlot.scaleY.domain() const scaleX = embedPlot.scaleX const scaleY = embedPlot.scaleY const base = embedPlot.nodes.base const outline = base.append("g") outline.append("rect") .attr("x", scaleX(plotTp-1)) .attr("y", scaleY(kernelDomain[1])) .attr("width", scaleX(1)-scaleX(0)) .attr("height", scaleY(kernelDomain[0])-scaleY(kernelDomain[1])) .attr("stroke", "red") .attr("fill", "none") const div = document.createElement("div") div.style.display = "flex" div.style["column-gap"] = "0px" div.append(embedDiv) div.append(kernelDiv) return div }35:T408,// TODO: Delete function kde(XW, opts={}) { opts = Object.assign({kernelWidth: null, n: 80, c: 0.0000001}, opts) let {kernelWidth, n, c} = opts if (kernelWidth == null) { kernelWidth = Math.max(d3.deviation(XW, d => d[0]), 0.000001)*2 } const norm = gaussian(0, 1) const vRange = d3.extent(XW, d => d[0]) //const domain = [vRange[0]-kernelWidth*0.5, vRange[1]+kernelWidth*0.5] const domain = [vRange[0]-kernelWidth*0.5, vRange[1]+kernelWidth*0.5] console.log(domain) const step = (domain[1] - domain[0])/n const s = 1 / (norm.pdf(0)*XW.length) const h = Math.sqrt((-2/kernelWidth**2)*Math.log(c*Math.sqrt(2*Math.PI))) const points = [] const kernelPoints = [] for (let a = domain[0]; a <= domain[1]; a += step) { console.log(a) let totalP = 0 for (const [i, [x,w]] of XW.entries()) { const p = s * w * norm.pdf(h*(a-x)) totalP += p kernelPoints.push({v: a, p, k:i}) } points.push({v: a, p: totalP}) } return {ps: points, kernelPs: kernelPoints} }36:Te8f,class KernelPlot extends fc.Plot { constructor(element, forecast, vField, opts={}) { super(element, opts, { weightColorScale: () => "red", shadeThickness: 20,//420, width: 400, height: 320 }) this.vField = vField this.forecast = forecast this.plot() this.element.append(this.nodes.base.node()) } plot() { const kdeRes = this.forecast.kdeRes this.nodes.base .attr("width", this.width) .attr("height", this.height) this.nodes.grid = this.nodes.base.append("g") this.nodes.axisX = this.nodes.base.append("g") this.nodes.axisY = this.nodes.base.append("g") this.scaleX = d3.scaleLinear() //.domain(d3.extent(kdeRes.vs, d => d.y)) .domain(d3.extent(kdeRes.ps, d => d.p)) .range([this.margin.left, this.width - this.margin.right]) //.nice() this.scaleY = d3.scaleLinear() .domain(d3.extent(kdeRes.kernelPs, d => d.v)) .range([this.height - this.margin.bottom, this.margin.top]) .nice() this.createGrid(this.nodes.grid, this.scaleX, this.scaleY) this.createAxisBottom(this.nodes.axisX, this.scaleX, "v", {tickFilter: (d, i) => i % 2 == 0}) this.createAxisLeft(this.nodes.axisY, this.scaleY, "deaths", {tickOffset: 25}) const line = d3.line() .x(d => this.scaleX(d.p)) .y(d => this.scaleY(d.v)) this.nodes.kernelLines = this.nodes.base.append("g") .attr("stroke-width", 1.5) .attr("fill", "none") this.nodes.mainLine = this.nodes.base.append("g") .attr("stroke-width", 2) .attr("fill", "none") this.nodes.mainLineBack = this.nodes.base.append("g") .attr("stroke-width", 10) .attr("fill", "none") .style("stroke-linejoin", "round") this.nodes.kernelLines.selectAll("path") .data([...d3.group(kdeRes.kernelPs, d => d.k).values()]) .join("path") .attr("d",line) .attr("stroke", d => this.weightColorScale(this.forecast.nexts[d[0].k].w)) this.nodes.mainLine.selectAll("path") .data([kdeRes.ps]) .join("path") .attr("d",line) .attr("stroke", "black") this.nodes.mainLineBack.selectAll("path") .data([kdeRes.ps]) .join("path") .attr("d",line) .attr("stroke", `url(#gradient)`)//"black") this.nodes.dots = this.nodes.base.append("g") .selectAll("circle") .data(this.forecast.nexts) .join("circle") //.attr("cx", d => this.scaleX(d[this.vField])) .attr("cx", this.scaleX.range()[0]) .attr("cy", d => this.scaleY(d[this.vField])) .attr("r", 3) .attr("fill", d => this.weightColorScale(d.w)) .attr("stroke", "red") .attr("stroke-width", .5) this.nodes.shade = this.nodes.base.append("g") const shadeOffset = 0 const shadeX = this.margin.left - 25 + shadeOffset//+ this.shadeThickness const gradient = this.nodes.shade.append("linearGradient") .attr("id", `gradient`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("x2", 0) .attr("y1", this.height - this.margin.bottom) .attr("y2", this.margin.top) this.nodes.shade.append("rect") .attr("width", this.shadeThickness) .attr("height", this.height - this.margin.bottom - this.margin.top) .attr("x", shadeX) .attr("y", this.margin.top) .attr("fill", `url(#gradient)`) const domainSize = Math.abs(this.scaleY.domain()[1] - this.scaleY.domain()[0]) gradient.selectAll("stop") .data(kdeRes.ps) .join("stop") .attr("offset", d => (d.v - this.scaleY.domain()[0]) / domainSize) .attr("stop-color", d => `rgb(169, 76, 212, ${d.p})`) } }37:[{"id":"4dd15f74ec1a0412eca17609971cf3ac5e9b98cbb484cbb789818401457de13b3b66fd5d117949cbdb7b7d8ab0ce93a01688d867019f1a653a0588e4a6368ec1","href":"https://static.observableusercontent.com/files/4dd15f74ec1a0412eca17609971cf3ac5e9b98cbb484cbb789818401457de13b3b66fd5d117949cbdb7b7d8ab0ce93a01688d867019f1a653a0588e4a6368ec1","name":"mortality_us.json","type":"application/json","lastModified":1647620052247.75,"size":39604}] 2f:{"title":"Interpretable, non-mechanistic forecasting using empirical dynamic modeling and interactive visualization","cells":[{"id":0,"value":"# Interpretable, non-mechanistic forecasting using empirical dynamic modeling and interactive visualization\nThis notebook is an accompaniment to our paper: [**Interpretable, non-mechanistic forecasting using empirical dynamic modeling and interactive visualization**](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0277149). Here, we will provide interactive explanations of the some of the concepts covered in the paper. The main forecasting tool is found at: https://episphere.github.io/forecast/ ","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`In this example, we'll be using US all cause mortality data from the CDC. We've combined two datasets to cover all cause mortality from 2014 to the present. [[2014-2019]](https://data.cdc.gov/NCHS/Weekly-Counts-of-Deaths-by-State-and-Select-Causes/3yf8-kanr)[[2020-2021]](https://data.cdc.gov/NCHS/Weekly-Provisional-Counts-of-Deaths-by-State-and-S/muzy-jte6)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"data = {\n const data = (await FileAttachment(\"mortality_us.json\").json()).slice(0, -6)\n data.forEach(d => d.date = new Date(d.date))\n return data \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"vField = \"all_cause\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"Plot.plot({\n grid:true,\n marginLeft: 50,\n height: 320,\n width: 480,\n marks: [\n Plot.line(data, {x: \"date\", y: vField, stroke: \"DimGrey\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"## Emperical Dynamic Modelling\nWe have chosen emperical dynamic modelling (EDM) as the forecasting technique to use in our tool due to its flexibility, simplicity, and because it provides multiple useful bits of information to visualize. For more information on EDM see this excellent [introductory paper](https://link.springer.com/article/10.1007/s11284-017-1469-9).\n\n### Embedding\nIn EDM, the first step is to embed each value with the E-1 values which precede it. E is a configurable value. To keep this example simple, we will work with a small subset of the data (two years: 2014-15). ","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"exampleData = data.filter(d => d.date < new Date(\"2016\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"exampleDataEmbed = fc.delayEmbed(exampleData, vField, E)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof E = Inputs.range([1, 16], {label: \"E\", step: 1, value: 6 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof te = Inputs.range(d3.extent(exampleDataEmbed, d => d.t), {step: 1, value: E, label: \"t (example 1)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"### Finding the Neighbors\nThe embedded vectors form an ```E``` dimensional space: the embedded space. The next step is to find the nearest neighbors. The nearest neighbors are just the embedded vectors which have the least [Euclidean distance](https://en.wikipedia.org/wiki/Euclidean_distance) to the current embedded vector in the embedded space. Because we will be using these neighbors to forecast, they must occur before the current point (otherwise we'd be using the future to predict the future!). Use the slider below to select the corresponding neighbors.\n\n_***NOTE:*** In a later step, the immediate future of each neighbor will be used to produce forecasts. Because of this, we only look for neighbors in the part of the data where the future will not extend past the current point. How much of each future is used is determined by the tp parameter, which you can configure in the next section. Now ```tp=```${tp}, so we only look for neighbors up to timestep ```t = t-tp = ${tnn}-${tp} = ${tnn-tp}```_","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"viewof tnn = Inputs.range(d3.extent(exampleDataEmbed, d => d.t), {step: 1, label: \"t (example 2)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof nn = Inputs.range([0, 8], {label: \"nn\", step: 1, value: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"exampleNeighbors = fc.findNeighbors(exampleDataEmbed.filter(d => d.t < tnn - tp), exampleDataEmbed.find(d => d.t == tnn), nn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`### Weighting the neighbors\nA weight is assigned to each neighbor. These weights will be used to determine how much influence each neighbor has when producing the point forecasts and the shaded forecasting summary (the next two sections). The closer the neighbor is to the current point, the greater it's weight. The formula is as follows:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"w_i = e^{-\\theta \\cdot d_i / \\overline d}","pinned":false,"hidden":false,"mode":"tex"},{"id":479,"value":"Where ${tex`d_i`} is the Euclidean distance between neighbor ${tex`i`} and the current embedded vector, ${tex`\\overline d`} is the mean distance between all neighbors to the current embedded vector, and ${tex`\\theta`} is a configurable hyperparameter (see the diagram below).","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"weightedNeighbors = fc.weightNeighbors(exampleNeighbors, exTheta)","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"viewof exTheta = {\n const input = Inputs.range([0, 2], {label: \"θ\"})\n input.onchange = event => {\n event.currentTarget.dispatchEvent(new Event(\"input\"))\n //mutable zBuffer = \"yessir\"\n mutable thetaRb = input.value\n }\n return input\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"{\n const neighbors = weightedNeighbors\n const distances = neighbors.map(d => d.distance)\n const mean = d3.mean(distances)\n \n const range = [0, - mean * Math.log(0.01) / 1]\n const step = (range[1] - range[0]) / 40\n \n const ps = []\n for (let d = 0; d < range[1]; d += step) {\n ps.push({distance: d, w: Math.exp(-exTheta * (d/mean))})\n }\n return Plot.plot({\n width: 400,\n height: 300,\n color: {\n scheme: \"reds\",\n domain: [0, 1]\n },\n y: {\n domain: [0, 1]\n },\n marks: [\n Plot.line(ps, {x: \"distance\", y: \"w\"}),\n Plot.dot(neighbors, {x: \"distance\", y: \"w\", fill: \"w\", r: 4}),\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"### Forecasting\nNow it is time for the actual forecasting! To do this, the immediate future of each neighbor is retrieved. The size of the neighbors' futures is equal to the forecast horizon (```tp```): how far into the future we want to forecast.","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"tp = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"The plot on the left shows the positions of the neighbors as red dots. Hover over each neighbor to view its embedded vector and its future, offset to the current point. The plot on the right shows the embedded vector of the current point (blue). It also shows each neighbor's offset embedded vector AND future (shades of red).\n\nThe purple line in each plot is the point forecasts, calculated using the simplex method. The simplex method is a weighted average of each neighbor's future:","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"\\hat \\mathbf y = \\sum_{i=1}^{n}{w_i \\cdot \\mathbf z_i}","pinned":false,"hidden":false,"mode":"tex"},{"id":629,"value":"Where ${tex`\\hat \\mathbf y`} is the forecast vector, ${tex`n`} is the number of neighbors, ${tex`w_i`} is the weight of the ith neighbor, and ${tex`\\mathbf z_i`} is the ith neighbor's future vector. ","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"exampleForecasts = {\n const forecasts = fc.simplex(data, vField, tp, E, nn, thetaRb)\n \n for (const forecast of forecasts) {\n const VW = forecast.nexts.map(d => [d[vField], d.w])\n forecast.kdeRes = fc.kde(VW, {kernelWidth})\n }\n \n return forecasts\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"dash = {\n const simplexDiv = html`

`\n const embedDiv = html`

`\n \n // const simplexPlot = new fc.SimplexPlot(simplexDiv, exampleData, exampleForecasts, vField, {\n // plotT: tnn,\n // //dateField: tFieldToggle.checked ? tField : null,\n // //showDates: dateToggle.checked,\n // showShading: showShading, showTooltip: false, \n // width: 520, height: 340,\n // margin: {left: 60, right: 30, top: 35, bottom: 30},\n // })\n\n // const embedPlot = new fc.EmbedPlot(embedDiv, exampleData, exampleForecasts, vField, {\n // state: simplexPlot.state,\n // showShading: showShading,\n // width: 340, height: 340, \n // margin: {left: 60, right: 30, top: 35, bottom: 30}\n // })\n\n const div = document.createElement(\"div\")\n div.style.display = \"flex\"\n div.style[\"column-gap\"] = \"10px\"\n\n // tsPlot.style.display = \"inline-block\"\n // embedPlot.style.display = \"inline-block\"\n\n div.append(simplexDiv)\n div.append(embedDiv)\n\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"plots = {\n dash\n \n const simplexPlot = new fc.SimplexPlot(document.getElementById(\"simplex-plot\"), exampleData, exampleForecasts, vField, {\n plotT: tnn,\n //dateField: tFieldToggle.checked ? tField : null,\n //showDates: dateToggle.checked,\n showShading: showShading, showTooltip: false, \n width: 520, height: 340,\n margin: {left: 60, right: 30, top: 35, bottom: 30},\n })\n\n const embedPlot = new fc.EmbedPlot(document.getElementById(\"embed-plot\"), exampleData, exampleForecasts, vField, {\n state: simplexPlot.state,\n showShading: showShading,\n width: 340, height: 340, \n margin: {left: 60, right: 30, top: 35, bottom: 30}\n })\n\n return {simplexPlot: simplexPlot, embedPlot: embedPlot}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"Inputs.bind(Inputs.range(d3.extent(exampleDataEmbed, d => d.t), {step: 1, label: \"t\"}), viewof tnn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"Inputs.bind(Inputs.range([0, 8], {label: \"nn\", step: 1, value: 4}), viewof nn)","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"viewof showShading = Inputs.toggle({label: \"Show Shading\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"The shaded forecast summary is essentially ${tex`tp`} adjacent gradients, with the coloring of each gradient determined by a sum over ${tex`nn`} gaussian kernels, one for each neighbor. The diagrams below show how this works for a single gradient. Adjust which gradient to view using the *'Gradient tp'* input. \n\nNote how each kernel is centered on a neighbor's future value. The shape of the kernel is determined by the neighbor's weight: higher weighted neighbors have taller and thinner kernels. ","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"viewof plotTp = Inputs.range([1, tp], {label: \"Gradient tp\", step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"The equation for each kernel is:\n\n${tex`K_{i,tp}(v) = s \\cdot w_i \\ f(\\frac{1}{\\alpha} \\cdot q \\cdot (v-z_{i,T+tp}))`}\n\nWhere ${tex`f`} is the density function of the normal distribution with mean 0 and variance 1, ${tex`s`} is a scaling parameter set to ensure the sum of all kernel peaks would be equal to 1 if all neighbors had a weight equal to 1, ${tex`α`} is the desired width of the kernel, and ${tex`q = \\sqrt{-ln(2c^2\\pi)}`} is a constant which ensures that width at probability density ${tex`c`} for the density function f. We set ${tex`c=0.001`} and ${tex`α= σ⋅kernel\\_width`} where ${tex`\\sigma`} is the standard deviation of the data and ${tex`kernel\\_width`} is a hyperparameter with a default value of 1. Then, to get the overall value we sum up the value of each kernel: ${tex`q(v) = \\sum^{n}_{i=1}{K_{i,tp}(v)}`}. Finally, this value is mapped linearly to a color on a color scale which gives the color in the forecast area at ${tex`v`} for ${tex`t = T+1`}. This is repeated for all future time steps. ","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"// Relative kernel width. \nviewof kw = Inputs.range([0.001, 4], {label: \"Rel. Kernel Width\", value:1.0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"kernelWidth = std * kw","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"forecast = {\n const forecast = exampleForecasts.find(d => d.baseT == tnn && d.tp == plotTp)\n const VW = forecast.nexts.map(d => [d[vField], d.w])\n //const kdeRes = fc.kde(VW, {kernelWidth, outputKernels: true})\n const kdeRes = kde(VW, {kernelWidth, outputKernels: true})\n return {...forecast, kdeRes: kdeRes}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"std = d3.deviation(data, d => d[vField])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"mutable thetaRb = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"weightColorScale = d3.scaleSequential([0, 1], d3.interpolateReds)","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"gaussian = require('https://bundle.run/gaussian@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"fc = import(`https://episphere.github.io/forecast/src/index.js`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}