31:T772,md`# 10 Years of Daily Steps A heatmap visualization of daily steps taken for the last 10 years of my life, as measured by my iPhone (after Apple introduced HealthKit). It's not a very accurate measurement, and only works when the phone is in my pocket — e.g. when I'm working from home, it mostly lies on a table. But it's still nice to have a glimpse of how active I've been in various periods of recent years. A few observations: - The first year seems curiously erratic, which can probably be explained by it being the first year of caring for twin girls after they were born in June 2014. :) - You can clearly see the weeks when I've been traveling and/or on vacation. - There's a noticeable uptick in walking when the weather gets nice in the Spring, although for some reason this period has been shifting about a week forward per year — climate change? - The lower activity periods (mostly around winter) are likely when I'm working from home instead of commuting to a coworking space. - The Tue/Thu/Sat activity stripes in Q1 2020 are due to me [going to the gym consistently](https://observablehq.com/@mourner/workout-consistency-heatmap) (damn I miss it so much!). - The pandemic had a very severe impact on how much I move throughout the day. Perhaps it's time for me to start doing occasional walks outside (but far away from other people). - _Update 2022_: gosh, I felt I recovered to normal life after two years of the pandemic, being fully vaccinated and everything, but the visualization shows I'm still way below my pre-pandemic activity levels. I need to fix that. - _Update 2024_: after the large-scale Russian invasion, mental health self-care has been especially important to me, so you can see how I got back to pre-pandemic levels of activity after the stump in the initial months, and then bumped it further by starting to run regularly in the end of 2022. Will keep it up. `32:T51e,{ const maxWeeks = 53; const margin = 10; const right = 20; const size = (width - right) / maxWeeks; const size2 = Math.ceil(size); const height = Math.ceil((endYear - startYear + 1) * 7 * size + (endYear - startYear) * margin); const ctx = DOM.context2d(width, height); ctx.strokeStyle = 'white'; ctx.font = '16px sans-serif'; ctx.textAlign = 'center'; for (let year = startYear, i = 0; year <= endYear; year++) { const yl = new YearLookup(year); ctx.save(); const cx = (width - right); const cy = (year - startYear) * (7 * size + margin) + (7 * size / 2) | 0; ctx.translate(cx, cy); ctx.rotate(Math.PI / 2); ctx.fillStyle = 'black'; ctx.fillText(year, 0, -9); ctx.restore(); for (let d = 0; d < yl.numDays; d++, i++) { const x = yl.weekNum(d) * size | 0; const y = (year - startYear) * (7 * size + margin) + yl.dayOfWeek(d) * size | 0; ctx.fillStyle = getColor(steps[yl.toString(d)]); ctx.fillRect(x, y, size2, size2); if (yl.dayOfMonth[d] < 7 && yl.month[d] > 0) { ctx.beginPath(); ctx.moveTo(x, y + size2); ctx.lineTo(x, y); if (yl.dayOfMonth[d] === 0 && yl.dayOfWeek(d) > 0) ctx.lineTo(x + size2, y); ctx.stroke(); } } } return ctx.canvas; }33:[{"id":"8bbebcb6f1260d3047b84919c41293e6c620a64e54b7555c6b4545787372c244ddbf79fa828cf074f18114eaf2a2ba4653c13bb7411ed37c2563473d4d9260f7","href":"https://static.observableusercontent.com/files/8bbebcb6f1260d3047b84919c41293e6c620a64e54b7555c6b4545787372c244ddbf79fa828cf074f18114eaf2a2ba4653c13bb7411ed37c2563473d4d9260f7","name":"steps@2.json","type":"application/json","lastModified":1588341611881.991,"size":44661},{"id":"4262503aa0f3d714cdd4c4e7cc38a54c0d73b510026569f06aa123f799b1aeb74842e1090b3dea430b30380579ff305600d4fdd918f9c1f917f30c66dbfd47f3","href":"https://static.observableusercontent.com/files/4262503aa0f3d714cdd4c4e7cc38a54c0d73b510026569f06aa123f799b1aeb74842e1090b3dea430b30380579ff305600d4fdd918f9c1f917f30c66dbfd47f3","name":"steps@4.json","type":"application/json","lastModified":1715869679309.215,"size":77242},{"id":"3554a2c8508762c9dcc2fb5d92eb0b9c37cb9862154d40f968d4088ef4f74e937f4fc343bb1336011521c051fa1cca3e0e01675982b3e1353417a7f661d6da90","href":"https://static.observableusercontent.com/files/3554a2c8508762c9dcc2fb5d92eb0b9c37cb9862154d40f968d4088ef4f74e937f4fc343bb1336011521c051fa1cca3e0e01675982b3e1353417a7f661d6da90","name":"steps@3.json","type":"application/json","lastModified":1650549295362.605,"size":60479}] 2f:{"title":"10 Years of Daily Steps","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"{\n const legend = html`

`;\n for (let i = 0; i <= maxSteps; i += 1000) {\n legend.appendChild(html`${i / 1000}${i === maxSteps ? '+' : ''}`)\n }\n legend.appendChild(html`(thousand steps per day)`)\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"getColor = steps => steps === undefined ? '#ccc' : interpolateTurbo(Math.min(steps / maxSteps, 0.8))","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"YearLookup = class { // an exercise in making calendar calculations without the Date class\n constructor(year) {\n this.year = year;\n\n const isLeap = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;\n this.numDays = isLeap ? 366 : 365;\n\n const prev = year - 1;\n this.yearStartDay = ((prev + (prev >> 2) - (prev / 100 | 0) + (prev / 400 | 0)) % 7 + 1) % 7;\n \n const daysInMonth = [31, isLeap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n this.dayOfMonth = [];\n this.month = [];\n for (let m = 0; m < daysInMonth.length; m++) {\n for (let d = 0; d < daysInMonth[m]; d++) {\n this.month.push(m);\n this.dayOfMonth.push(d);\n }\n }\n }\n dayOfWeek(d) {\n return (this.yearStartDay + d) % 7;\n }\n weekNum(d) {\n return Math.floor((this.yearStartDay + d) / 7);\n }\n toString(d) {\n const mm = String(this.month[d] + 1).padStart(2, '0');\n const dd = String(this.dayOfMonth[d] + 1).padStart(2, '0');\n return `${this.year}-${mm}-${dd}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"maxSteps = 24000","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"steps = {\n const steps = await FileAttachment(\"steps@4.json\").json();\n const sorted = {};\n for (const id of Object.keys(steps).sort((a, b) => a.localeCompare(b, 'en'))) {\n sorted[id] = steps[id];\n }\n return sorted;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`Exported from Apple Health, processed with [this converter by Eric Wolter](https://www.ericwolter.com/projects/apple-health-export/) and then extracted daily steps from \\`HKQuantityTypeIdentifierStepCount.csv\\` with Node.js:\n\n~~~js\nconst csv = require('@fast-csv/parse');\nconst fs = require('fs');\n\nconst dayMs = 1000 * 60 * 60 * 24;\nconst dates = {};\n\nfs.createReadStream('./HKQuantityTypeIdentifierStepCount.csv')\n.pipe(csv.parse({headers: true, skipLines: 1, delimiter: ';'}))\n.on('data', ({startdate, enddate, value}) => {\n const start = Date.parse(startdate.substr(0, 10));\n const end = Date.parse(enddate.substr(0, 10));\n const days = (end - start) / dayMs + 1;\n const steps = Math.round(+value / days);\n\n for (let t = start; t <= end; t += dayMs) {\n const date = new Date(t).toISOString().substr(0, 10);\n dates[date] = (dates[date] || 0) + steps;\n }\n})\n.on('end', () => console.log(JSON.stringify(dates, null, 2)));\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"startYear = +Object.keys(steps)[0].slice(0, 4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"endYear = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import {interpolateTurbo} from '@mbostock/turbo'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}