2c:null 2d:["$","title",null,{"children":"How does changing the colors affect interpretation of a heatmap? | Adam Pearce | Observable"}] 32:T8ca,{ 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++) { const snow = days[i]; ctx.fillStyle = snow === undefined ? 'grey' : interpolateTurbo((snow || 0) / maxSnow); 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; }33:T8c5,{ 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++) { const snow = days[i]; ctx.fillStyle = snow === undefined ? 'grey' : customColor((snow || 0) / maxSnow); 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; }34:T98f,{ 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]; console.log(days) const leap = isLeap(+year + 1); for (let i = 0; i < numDays; i++) { const snow = days[i]; var snowHeight = snow == 0 ? .5 : 2 + snow/60 snowHeight = Math.min(snowHeight, cellHeight) ctx.fillStyle = snow === undefined ? missingDataColor2 : snow == 0 ? '#ccc' : customColor2((snow + 20 || 0) / (maxSnow + 20)); ctx.fillRect(margin + Math.floor(i * cellWidth), Math.floor(y + cellHeight*.4), cellWidth + 1, snowHeight); } 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; }35:T8d1,{ 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++) { const snow = days[i]; ctx.fillStyle = snow === undefined ? missingDataColor2 : customColor3((snow || 0) / maxSnow); 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; }36:[{"id":"398999c555ddc4142b7eb6ba31284d6e3f1845137a3741877bce5017cb421eae139dfe86426f1babbd0c4e5fdf4e8041ddd9742626dd5c4f50cbd13fe66df0ed","href":"https://static.observableusercontent.com/files/398999c555ddc4142b7eb6ba31284d6e3f1845137a3741877bce5017cb421eae139dfe86426f1babbd0c4e5fdf4e8041ddd9742626dd5c4f50cbd13fe66df0ed","name":"2002427.csv","type":"text/csv","lastModified":1579204900008.396,"size":433985}] 30:{"id":"2fb3e1139fa34cb6","slug":"how-does-changing-the-colors-affect-interpretation-of-a-hea","title":"How does changing the colors affect interpretation of a heatmap?","thumbnail":"f68b83c6c5def6f8bd0385906e36de65383f5bab77c531deef9c16c386396310","access_level":"public","create_time":"$D2020-01-16T20:01:40.008Z","update_time":"$D2020-01-16T20:15:43.664Z","view_time":null,"first_public_time":"$D2020-01-16T20:16:15.919Z","fork":{"id":"5a99e37a3a234df0","slug":"how-does-changing-the-colors-affect-interpretation-of-a-hea","title":"How does changing the colors affect interpretation of a heatmap?","owner":{"id":"f5c920385539a3ff","login":"zanarmstrong","name":"Zan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a1a4e483f0fac7e","login":"1wheel","name":"Adam Pearce","avatar_url":"https://avatars-next.observableusercontent.com/832d482db1f93bad1bff573d7712fe2559d54911cb34a1883eca3fec10ee2ab0","tier":"starter_2024"},"version":628,"publish_version":628,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e47514623dce5d1","login":"1wheel","name":"Adam Pearce","avatar_url":"https://avatars-next.observableusercontent.com/832d482db1f93bad1bff573d7712fe2559d54911cb34a1883eca3fec10ee2ab0","tier":null}],"members":[{"type":"individual","id":"1e47514623dce5d1","login":"1wheel","name":"Adam Pearce","avatar_url":"https://avatars-next.observableusercontent.com/832d482db1f93bad1bff573d7712fe2559d54911cb34a1883eca3fec10ee2ab0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"How does changing the colors affect interpretation of a heatmap?","cells":[{"id":436,"value":"md`# How does changing the colors affect interpretation of a heatmap?\n\nI loved Vladimir's original [\"Were Kyiv Winters as Snowy as I remember as Kid?\"](https://observablehq.com/@mourner/were-kyiv-winters-as-snowy-as-i-remember-as-a-kid). But, was curious how it would look similar/different with a slightly different and very different color map. And, he invited forking, so I decided to give it a try.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`# Original\n\nHere is Vladimir's original viz, which I love! In general, I'm a fan of the [Turbo colors](https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html) used here because there is relatively high visual perception difference between colors/values. But, I also wonder how changing the colors would change our understanding of the viz. In particular by (1) increasing the visual difference between 0 and >0 or (2) mapping the colors more closely to the meaning of the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"{\n const legend = html`

brown --> bleh, no snow :(

white --> snow

pink --> woohoo!!!! snow, snow snow!!!

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`# Discrete colors\n\nInspired by Adam Pearce's [Coloring Maps](https://roadtolarissa.com/coloring-maps/), we could also bin the colors as shown below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"{\n const legend = html`

`;\n for (let i = 0; i <= maxSnow; i += 50) {\n legend.appendChild(html`${i / 10}${i === 600 ? '+' : ''}`)\n }\n legend.appendChild(html`(snow depth in cm)`)\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`# Conclusion\n\nIs there a better color map? I'm not sure. What do you think? Do you notice different things about the snow history with different colors? What jumps out? What do you notice less?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`Yes - I did a lot of copy/pasting to create this when I probably could (\"should\"?) have written functions. But, it was a quick prototyping so felt ok to just copy/paste and change one variables name.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"missingDataColor2 = \"black\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"customColor = function(v){\n if(v == 0) return \"black\"\n return interpolateTurbo(.9 * v + .1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"customColor2 = function(v){\n if(v == 0) return \"#614200\"\n let interpolator = d3.scaleLinear()\n .domain([0,.1,1])\n .range(['lightpink',\"#fff7ff\",\"#ff00f7\"])\n .interpolate(d3.interpolateHcl);\n return interpolator(v)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"customColor3 = function(v){\n if(v == 0) return \"#614200\"\n let interpolateBase = d3.scaleLinear()\n .domain([0,.1,1])\n .range(['#ffffff',\"#fff7ff\",\"#ff00f7\"])\n .interpolate(d3.interpolateHcl)\n let interpolatorBase = d3.scaleQuantize()\n .domain([0,1])\n .range([interpolateBase(0),interpolateBase(.2),interpolateBase(.4),interpolateBase(.6),interpolateBase(.8),interpolateBase(1)])\n return interpolatorBase(v)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"winters = {\n const lines = (await FileAttachment(\"2002427.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"maxSnow = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"isLeap = year => year % 4 === 0 && year % 100 !== 0 || year % 400 === 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import {interpolateTurbo} from '@mbostock/turbo'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"