31:T44d, 32:[] 2f:{"title":"Quick canvas sparkline","cells":[{"id":0,"value":"md`# Quick \\`canvas\\` sparkline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"\n","pinned":false,"hidden":false,"mode":"html"},{"id":16,"value":"simple = {\n const context = DOM.context2d(width, 33);\n context.lineJoin = context.lineCap = \"round\";\n\n context.beginPath();\n context.moveTo(0, data[0]);\n \n for (let x = 0; x < width; ++x) {\n context.lineTo(x, data[x])\n };\n \n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"color_path_based_on_data = {\n const context = DOM.context2d(width, 33);\n context.lineJoin = context.lineCap = \"round\";\n\n context.beginPath();\n context.moveTo(0, data[0]);\n \n for (let x = 0; x < width; ++x) {\n if (x%100===0){\n // close out the last point...\n context.lineTo(x, data[x])\n context.stroke();\n // ...and begin the new one\n context.strokeStyle = colors[~~(x/100)];\n context.beginPath();\n } else {\n context.lineTo(x, data[x])\n }\n };\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"color_path_based_on_data2 = {\n\n const range = (n) => {\n if (n > 18) { return 2 }\n else if (n < 14) { return 0 }\n else { return 1 } \n }\n\n const colors = ['red','#bbb','green']\n \n const context = DOM.context2d(width, 33);\n context.lineJoin = context.lineCap = \"round\";\n\n context.strokeStyle = colors[1];\n context.beginPath();\n context.moveTo(0, data[0]);\n \n for (let x = 1; x < width; x++) {\n if ( range(data[x]) !== range(data[x-1]) ) {\n // close out the last point...\n context.lineTo(x, data[x])\n context.stroke();\n // ...and begin the new one\n context.strokeStyle = colors[range(data[x])];\n context.beginPath();\n context.moveTo(x, data[x]);\n } else {\n context.lineTo(x, data[x])\n }\n };\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"speed_in_ms = 80","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"## Settings for the “actual” data","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"viewof smoothing = Inputs.range([1, 10], {label: \"Smoothing\", value: 2, step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"viewof max_actual = Inputs.range([0,50000], {label: \"Max\", value: 30, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof min_actual = Inputs.range([1, max_actual-1], {label: \"Min\", value: 0, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"data = {\n let out = []\n while (true) {\n yield Promises.tick(speed_in_ms).then(()=> {\n let max = max_actual\n let min = min_actual\n let scale = (max-min)/smoothing\n \n const rand = d3.randomNormal(0.5, 0.2)\n \n let latest_value = out[out.length-1] || Math.floor(Math.random() * (max - min + 1)) + min\n let change = ((rand() - 0.5) * scale)\n \n if (latest_value + change > max || latest_value + change < min) {\n change *= -1\n }\n out.push(latest_value + change) //* 3 + (16 - y) * 0.1)\n out = out.slice(-200)\n return out\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"latest_value = {\n let out = data[data.length-1]\n if (out >= 14) {\n out = ~~out\n } else {\n out = out.toFixed(1)\n }\n return out\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"sPath = {\n let data_clone = [...data]\n let len = data_clone.length\n\n let x = 0 // starting point of line in the SVG\n \n let svg_y_max = 45 // the SVG has room to draw this high\n let svg_y_min = -45 // the SVG has room to draw this low\n let data_max = max_actual // maximum data value we can expect to see\n let data_min = min_actual // minimum data value we can expect to see\n let y_map = (value) => -1 * ((value - data_min) * (svg_y_max - svg_y_min) / (data_max - data_min) + svg_y_min);\n \n let first_element = data_clone.pop()\n let out = [`M${x--} ${y_map(first_element)}`]\n \n while (data_clone.length > 0) {\n let d = data_clone.pop()\n out.push(`L${x--} ${y_map(d)}`)\n }\n return out\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"Math.max(...data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"Math.min(...data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"\n \n \n","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"colors = [\n 'red','blue','green','orange','purple',\n 'red','blue','green','orange','purple',\n 'red','blue','green','orange','purple',\n 'red','blue','green','orange','purple',\n]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}