31:T89a,showHeatmap = function(colorMap){ const numDays = 156; const margin = 25; const marginTop = 12; const cellHeight = 16; const cellWidth = (width - 2 * margin) / numDays; const height = cellHeight * Object.keys(winters).length + marginTop; const ctx = DOM.context2d(width, height); let y = marginTop; for (const year in winters) { const days = winters[year]; const leap = isLeap(+year + 1); for (let i = 0; i < numDays; i++) { ctx.fillStyle = colorMap(days[i]); ctx.fillRect(margin + Math.floor(i * cellWidth), y, cellWidth + 1, cellHeight); } ctx.strokeStyle = '#888'; ctx.beginPath(); const marchStart = leap ? 121 : 120; const marchX = margin + Math.floor(marchStart * cellWidth); ctx.moveTo(marchX, y); ctx.lineTo(marchX, y + cellHeight); const aprilX = margin + Math.floor((marchStart + 31) * cellWidth); ctx.moveTo(aprilX, y); ctx.lineTo(aprilX, y + cellHeight); ctx.stroke(); ctx.fillStyle = 'black'; ctx.textBaseline = 'middle'; ctx.textAlign = 'left'; ctx.fillText(year, 0, y + cellHeight / 2); ctx.textAlign = 'right'; ctx.fillText(+year + 1, width, y + cellHeight / 2); y += cellHeight; } ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText('November', margin, 0); ctx.fillText('December', margin + Math.floor(30 * cellWidth), 0); ctx.fillText('January', margin + Math.floor(61 * cellWidth), 0); ctx.fillText('February', margin + Math.floor(92 * cellWidth), 0); ctx.fillText('March', margin + Math.floor(120 * cellWidth), 0); ctx.fillText('April', margin + Math.floor(151 * cellWidth), 0); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(margin + Math.floor(61 * cellWidth), marginTop); ctx.lineTo(margin + Math.floor(61 * cellWidth), height); ctx.stroke(); ctx.strokeStyle = '#888'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(margin + Math.floor(30 * cellWidth), marginTop); ctx.lineTo(margin + Math.floor(30 * cellWidth), height); ctx.moveTo(margin + Math.floor(92 * cellWidth), marginTop); ctx.lineTo(margin + Math.floor(92 * cellWidth), height); ctx.stroke(); return ctx.canvas; }32:[{"id":"d4b2d9175fe92479d5de45444777d5cc131667a5e752069030f96184a85242e93cbdcdaed505d85250ca0a7b77037b9bd6e18c513dc579705968f4cc068b342b","href":"https://static.observableusercontent.com/files/d4b2d9175fe92479d5de45444777d5cc131667a5e752069030f96184a85242e93cbdcdaed505d85250ca0a7b77037b9bd6e18c513dc579705968f4cc068b342b","name":"2130597.csv","type":"text/csv","lastModified":1615875971110.359,"size":437087}] 2f:{"title":"Your Turn! (heatmap)","cells":[{"id":0,"value":"md`# Your Turn! (heatmap)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`In this observable notebook, you can see how changing parameters will change [Vladamir Agafonkin's](https://observablehq.com/@mourner/were-kyiv-winters-as-snowy-as-i-remember-as-a-kid) viz: \"Where Kyiv Winters as Snowy as I Remember as a Kid\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"showColorMap(dayColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"showHeatmap(dayColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`### Try changing the colors for undefined, or no snow.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"viewof undefinedColor = color({\n value: \"#949494\",\n title: \"undefined color\",\n description: \"Click to color for days that have missing data (are undefined).\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof noSnow = color({\n value: \"#000000\",\n title: \"color for no snow\",\n description: \"Try changing the color for days that have missing data (are undefined).\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`### What happens if you change the max snow depth?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"viewof maxSnowInCM = Range([5, 100], {value: 60, label: \"max snow depth\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`### What if you change the color function?\n\nChoose from built in color schemes like \"viridis\" or \"purple-orange\". \n\nOr, set your own colors by choosing \"custom\". Change the colorRange (the colors to use) and colorDomain (the numeric cutoff-points) array to whatever values you would like. It will linearly interpolate the colors between the numbers you choose.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"viewof nameOfColorFunction = Select(\n ['turbo', 'viridis', 'white-blue', 'custom'], \n {\n label: \"Pick Color Function\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`If you choose \"custom\" then add in colors below. The arrays can be any length, but both colorRange and colorDomain must have the same length. Note that the values for colorDomain can be numbers or formulas calculated on other variables.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"colorRange = [\"white\",\"white\",\"pink\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"colorDomain = [0,.1,maxSnowInCM / 2, maxSnowInCM]","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`## Challenge Questions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"*How would you change the color mapping if you really want to make sure it's obvious when your data is undefined?*","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"md`*What if the only thing you care about is if there is snow or no snow? IE - you don't care about the depth at all?*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"md`*What if you want to know if there was enough snow to go skiing? How might you change the colors?*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`# Under the Hood`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`### color function definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"colorFunctions = ({\n 'turbo': k => interpolateTurbo(0.02 + 0.98 * Math.min(1, k / maxSnow)),\n 'viridis': k => d3.interpolateViridis(0.02 + 0.98 * Math.min(1, k / maxSnow)),\n 'white-blue': k => d3.interpolateRgb(\"white\", \"blue\")(0.02 + 0.98 * Math.min(1, k / maxSnow)),\n 'custom': k => d3.scaleLinear().domain(colorDomain).range(colorRange)(k / 10)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"colorFunction = colorFunctions[nameOfColorFunction]","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"dayColor = d => \n d === undefined ? undefinedColor : \n d === 0 ? noSnow : \n colorFunction(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"maxSnow = maxSnowInCM * 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`### define vis for heatmap & legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"showColorMap = function(colorMap){\n const legend = html`

`;\n legend.appendChild(html`${0}`)\n for (let i = 0; i <= maxSnow; i += 50) {\n let j = i == 0 ? .1 : i;\n legend.appendChild(html`${j / 10}${j === 600 ? '+' : ''}`)\n }\n legend.appendChild(html`(snow depth in cm)`)\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`### data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"winters = {\n const lines = (await FileAttachment(\"2130597.csv\").text()).trim().split('\\n').slice(1);\n const re = /\\\".+\\\",\\\"(\\d+)-(\\d+)-(\\d+)\\\",\\\"?(\\d+)?\\.?\\\"?/;\n const winters = {};\n for (const line of lines) {\n const [_, year, month, day, snow] = line.match(re);\n if (month < 11 && month > 4) continue;\n const winterYear = month <= 4 ? year - 1 : year;\n winters[winterYear] = winters[winterYear] || [];\n winters[winterYear][winterIndex(+year, +month, +day)] = +snow || 0;\n }\n return winters;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"winterIndex = (year, month, day) => {\n const N1 = Math.floor(275 * month / 9);\n const N2 = Math.floor((month + 9) / 12);\n const N3 = (1 + Math.floor((year - 4 * Math.floor(year / 4) + 2) / 3));\n return N1 - (N2 * N3) + day + 30 - (month > 6 ? (isLeap(year) ? 366 : 365) : 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"isLeap = year => year % 4 === 0 && year % 100 !== 0 || year % 400 === 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"import {interpolateTurbo} from '@mbostock/turbo'","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"Inputs = require(\"@observablehq/inputs@0.7.17/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"Range = Inputs.Range","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}