30:[] 2e:{"title":"Gaussian Smoothing","cells":[{"id":0,"value":"md`# Gaussian Smoothing\n\n${N}-hours smoothing of electricity usage, using a simple Gaussian kernel.\n
Data: [Mike Bostock](/@mbostock/electric-usage-2019).\n\n_Note: in this version the time steps are uniform and there are no holes in the data. Please send suggestions._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof N = {\n const form = html``;\n form.i.oninput = () => (form.value = form.i.valueAsNumber);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof compareWithMM = {\n const form = html``;\n form.i.oninput = () => (form.value = form.i.checked);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const color = d3\n .scaleLinear()\n .domain([3, 0, -1])\n .range(d3.schemeRdYlBu[3]),\n gradient = DOM.uid();\n svg\n .append(\"linearGradient\")\n .attr(\"id\", gradient.id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"x1\", 0)\n .attr(\"y1\", y(color.domain()[0]))\n .attr(\"x2\", 0)\n .attr(\"y2\", y(color.domain()[2]))\n .selectAll(\"stop\")\n .data(d3.range(5))\n .join(\"stop\")\n .attr(\"offset\", i => i / 4)\n .attr(\"stop-color\", i => color(3 - i));\n\n svg\n .append(\"path\")\n .attr(\"fill\", gradient)\n .attr(\"d\", area(values));\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n if (compareWithMM)\n svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", .5)\n .attr(\"d\", line(mm));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"precision = 1e-6","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"function applyKernel(points, w) {\n const values = new Float64Array(points.length).fill(0),\n total = new Float64Array(points.length).fill(0);\n let p = 1;\n for (let d = 0; p > precision; d++) {\n p = w(d);\n for (let i = 0; i < points.length; i++) {\n if (i + d < points.length) {\n values[i + d] += p * points[i];\n total[i + d] += p;\n }\n if (d != 0 && i - d >= 0) {\n values[i - d] += p * points[i];\n total[i - d] += p;\n }\n }\n }\n for (let i = 0; i < values.length; i++) {\n values[i] /= total[i];\n }\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"function gaussianSmoothing(values, N) {\n const r = 2 / N;\n return applyKernel(values, d => Math.exp(-((r * d) ** 2)));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"values = gaussianSmoothing(data.map(d => d.usage), N)","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"mm = movingAverage(data.map(d => d.usage), N)","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`----\n_Thanks to [Jeshurun Hembd](/@jjhembd) for fixing an egregious mistake._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { data } from \"@mbostock/electric-usage-2019\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"area = d3\n .area()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data[i].date))\n .y0(y(0))\n .y1(y)","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"line = d3\n .line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data[i].date - (N / 2) * (3600 * 1000)))\n .y(y)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(mm))\n .nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width)\n .attr(\"stroke-opacity\", 0.1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"margin = ({top: 20, right: 12, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}