44:["$","title",null,{"children":"Canvas dynamic bar chart | Robert Pettersson | Observable"}] 4c:[] 48:{"id":"58d12d1a7b16bf56","slug":"canvas-dynamic-bar-chart","title":"Canvas dynamic bar chart","thumbnail":"580cb32d878782c478e0106b3fded53e0809a5049582ba860797001364bb6094","access_level":"public","create_time":"$D2019-05-26T20:26:37.813Z","update_time":"$D2019-06-21T10:21:38.046Z","view_time":null,"first_public_time":"$D2019-06-21T09:54:52.190Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b8f6ddb4a89bf145","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":"starter_2024","bio":"Programmer","followed_by_you":false,"follows_you":false},"version":113,"publish_version":113,"role":null,"authored":false,"authors":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"bio":"Programmer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f3f56c4ef203da4d","login":"lemonode","name":"Robert Pettersson","avatar_url":"https://avatars-next.observableusercontent.com/5c38da744c71f234af8b0e738618c092e04b1c9b63a1177ff67c401654a0bb20","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Canvas dynamic bar chart","cells":[{"id":0,"value":"md`# Canvas dynamic bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`Just wanted to test out and see if I could make a dynamic bar chart in canvas, I'm sure there are some edgecases I'm not thinking about but it seems to be working ok.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof selection = {\n const form = html``;\n form.i.onchange = e => {\n select.lerp = scaleY([...data[data.option]], height);\n data.option = e.target.value;\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const context = DOM.context2d(width, height);\n const {canvas} = context;\n while (true) {\n draw(canvas, context, data, select, attr);\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`It's worth noting that the transitions are a lot more jumpier in Observeable than in regular js code using the \"requestAnimationFrame\" function, not sure why. Here's my gist for that code https://bl.ocks.org/lemonode/31b8156c9b078e99062c286fb4b6b87c for anyone that's interested`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"data = ({ \n option: \"2019\",\n \"2019\": [40, 50, 112, 111, 93],\n \"2018\": [222, 138, 75, 120, 200],\n month: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"Maj\"],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"select = ({\n lerp: new Array(data[data.option].length).fill(0),\n tick: new Array(calcTicks(data, height - attr.y * 2)[1]).fill(0)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"attr = ({x: 45, y: 25, p: 35, s: .1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function draw(dom, ctx, data, select, attr) {\n var clear = ctx.clearRect(0, 0, dom.width, dom.height);\n var font = ctx.font = \"12px Arial\";\n var axisY = draw_axisY(dom, ctx, data, select, attr);\n var axisX = draw_axisX(dom, ctx, data, select, attr);\n var rect = draw_rect(dom, ctx, data, select, attr);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`## Lerp`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`In order to make the rectangles not jump from one value to another I used a simple lerp, the lerp values are stored in the \"select\" objects so the original data stays intact.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"mutable lerping = 0 // shows the height of the first rectangle in the bar chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function draw_rect(dom, ctx) {\n var scale = scaleY([...data[data.option]], dom.height - attr.y * 2);\n var width = (dom.width - (attr.x * 2) - attr.p) / select.lerp.length;\n var xPos = (dom.width - (attr.x * 2) + attr.p / 2) / select.lerp.length;\n var align = ctx.textAlign = \"center\";\n for (var i = 0; i < select.lerp.length; i++) {\n select.lerp[i] += (scale[i] - select.lerp[i]) * attr.s; // lerp is here\n let test = mutable lerping = select.lerp[0]\n ctx.fillStyle = \"steelblue\";\n ctx.fillRect(attr.x + xPos * i, \n dom.height - attr.y, \n width, \n -select.lerp[i]);\n ctx.fillStyle = \"#333\";\n ctx.fillText(data[data.option][i],\n attr.x + xPos * i + width / 2,\n dom.height - attr.y - select.lerp[i] - 5)\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function draw_axisY(dom, ctx, data, select, attr) {\n var tickArr = calcTicks(data, dom.height - attr.y * 2);\n var align = ctx.textAlign = \"right\";\n var color = ctx.fillStyle = \"#333\";\n for (var i = 0; i < tickArr[1]; i++) {\n select.tick[i] += ((tickArr[0]) * (i + 1) - select.tick[i]) * attr.s;\n ctx.fillRect(attr.x - 5, \n dom.height - attr.y - select.tick[i], \n dom.width - attr.x - attr.x / 2, \n .5);\n ctx.fillText(tickArr[2] * (i + 1), \n attr.x - 10,\n dom.height - attr.y - select.tick[i] + 5);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function draw_axisX(dom, ctx, data, select, attr) {\n var xPos = (dom.width - (attr.x * 2) + attr.p / 2) / select.lerp.length;\n var width = (dom.width - (attr.x * 2) - attr.p) / select.lerp.length;\n var align = ctx.textAlign = \"center\";\n var color = ctx.fillStyle = \"#333\";\n for (var i = 0; i < data.month.length; i++) {\n ctx.fillText(data.month[i], \n attr.x + xPos * i + width / 2, \n dom.height - (attr.y / 2))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function arrMax(arr) {\n var max = 0;\n for (var i = 0; i < arr.length; i++) {\n if (arr[i] > max) {\n max = arr[i]\n } else if (i != 0 && arr[i - 1] < arr[i] && arr[i] > max) {\n max = arr[i]\n }\n }\n return Math.ceil(max / 25) * 25;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function calcTicks(data, height) {\n var max = arrMax(data[data.option]);\n for (var i = 0; i < max; i++) {\n if (max % i == 0 && ![0, 1, 2].includes(i)) {\n return [height / i, i, max / i];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function scaleY(arr, height) {\n var temp = [];\n var max = arrMax(arr);\n var big = max / height;\n for (var i = 0; i < arr.length; i++) {\n temp[i] = Math.round(arr[i] / big)\n }\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 320","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null