2d:null 2e:["$","title",null,{"children":"Visualizing Blackouts at Home in Kyiv | Volodymyr Agafonkin | Observable"}] 33:T5df,# Visualizing Blackouts at Home in Kyiv 8 months into Russia's genocidal invasion of Ukraine, after a series of humiliating losses, Russia turned to a tactic it's much better equipped to do than conventional warfare — a cowardly war on civilians. With Ukraine approaching winter & freezing temperatures, Russia launched wave after wave of [mass missile and drone strikes on energy infrastructure](https://en.wikipedia.org/wiki/October%E2%80%93November_2022_nationwide_missile_strikes_on_Ukraine), trying to destroy the power grid and subsequently deprive Ukrainian civilians of not only electricity, but also heating, running water, light and communications. But Ukrainians are not intimidated, they just get angrier and more resolute. Despite daily blackouts after all the damage, it's been inspiring to see how quickly the country adjusts — civilians stocking up on survival gear & non-perishable food and helping each other, and businesses setting up power generators & [Starlink](https://www.starlink.com/) systems and providing shelter to strangers. My family and I live in Kyiv, which has been notably affected by the energy attacks, but we adjusted pretty well too. During blackouts, we use an [EcoFlow](https://www.ecoflow.com) power station for light and charging gadgets, a portable camping gas stove with a bunch of canisters for cooking, and wear warmer clothes when heaters stop working. For a glimpse of our daily life in the last few months, I built this blackouts visualization:34:T13ec, { const cellHeight = width < 640 ? 7 : 9; const marginTop = width < 640 ? 8 : 10; const marginLeft = width < 640 ? 30 : 33; const height = cellHeight * numDays + marginTop; const innerWidth = width - marginLeft; const ctx = DOM.context2d(width, height); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); // sunlight backgrounds function drawBg(day, date0, date1) { let date = minDate + secondsPerDay * day; if (date < dst) date -= secondsPerDay / 24; if (isNaN(date0)) date0 = date * 1000; if (isNaN(date1)) date1 = (date + secondsPerDay) * 1000; const date0offset = date0 / 1000 - date + (date0 < dst ? 3600 : 0); const date1offset = date1 / 1000 - date + (date1 < dst ? 3600 : 0); const x0 = Math.floor(date0offset / secondsPerDay * innerWidth) + 0.5; const x1 = Math.floor(date1offset / secondsPerDay * innerWidth) + 0.5; ctx.fillRect(marginLeft + x0, marginTop + day * cellHeight, x1 - x0, cellHeight); } for (let day = 0; day < numDays; day++) { ctx.fillStyle = '#74add1'; ctx.fillRect(marginLeft, marginTop + day * cellHeight, innerWidth, cellHeight); const times = suncalc.getTimes(new Date((minDate + secondsPerDay * (day + 0.5)) * 1000), 50.5, 30.5); ctx.fillStyle = '#abd9e9'; // drawBg(day, times.nightEnd, times.night); /* ctx.fillStyle = '#e0f3f8'; */ drawBg(day, times.dawn, times.dusk); ctx.fillStyle = '#ffffdd'; drawBg(day, times.sunrise, times.sunset); // ctx.fillStyle = '#FFE8A8'; drawBg(day, times.goldenHourEnd, times.goldenHour); } // sirens // ctx.fillStyle = 'rgba(255,0,0,0.1)'; // for (let i = 0; i < kyivSirens.length; i += 2) { // const date0 = kyivSirens[i]; // const date1 = kyivSirens[i + 1]; // const date0offset = date0 - minDate + (date0 < dst ? 3600 : 0); // const date1offset = date1 - minDate + (date1 < dst ? 3600 : 0); // const day0 = Math.floor(date0offset / secondsPerDay); // const day1 = Math.floor(date1offset / secondsPerDay); // const x0 = (date0offset % secondsPerDay) * innerWidth / secondsPerDay; // const x1 = (date1offset % secondsPerDay) * innerWidth / secondsPerDay; // const w = (date1 - date0) * innerWidth / secondsPerDay; // ctx.fillRect(marginLeft + x0, marginTop + day0 * cellHeight, w, cellHeight); // if (day1 !== day0) { // for (let d = day0 + 1; d < day1; d++) { // ctx.fillRect(marginLeft, marginTop + d * cellHeight, innerWidth, cellHeight); // } // ctx.fillRect(marginLeft, marginTop + day1 * cellHeight, x1, cellHeight); // } // } // blackout ranges ctx.fillStyle = 'black'; for (let i = 0; i < ranges.length; i += 2) { const date0 = ranges[i]; const date1 = ranges[i + 1]; const date0offset = date0 - minDate + (date0 < dst ? 0 : -3600); const date1offset = date1 - minDate + (date1 < dst ? 0 : -3600); const day0 = Math.floor(date0offset / secondsPerDay); const day1 = Math.floor(date1offset / secondsPerDay); const x0 = (date0offset % secondsPerDay) * innerWidth / secondsPerDay; const x1 = (date1offset % secondsPerDay) * innerWidth / secondsPerDay; const w = (date1 - date0) * innerWidth / secondsPerDay; ctx.fillRect(marginLeft + x0, marginTop + day0 * cellHeight, w, cellHeight); if (day1 !== day0) { for (let d = day0 + 1; d < day1; d++) { ctx.fillRect(marginLeft, marginTop + d * cellHeight, innerWidth, cellHeight); } ctx.fillRect(marginLeft, marginTop + day1 * cellHeight, x1, cellHeight); } } ctx.fillStyle = '#bbb'; const lx = ((dateUpdated - minDate) % secondsPerDay) * innerWidth / secondsPerDay; const lw = innerWidth - lx; ctx.fillRect(marginLeft + lx, marginTop + (numDays - 1) * cellHeight, lw, cellHeight); // vertical guides ctx.strokeStyle = 'rgba(0,0,0,0.20)'; ctx.beginPath(); for (let i = 1; i < 24; i++) { const x = Math.floor(i * innerWidth / 24) + 0.5; ctx.moveTo(marginLeft + x, 0); ctx.lineTo(marginLeft + x, height); } ctx.stroke(); // horizontal guides for (let i = 1; i < numDays; i++) { const date = new Date((minDate + secondsPerDay * (i + 0.5)) * 1000); const y = marginTop + i * cellHeight + 0.5; ctx.beginPath(); ctx.moveTo(2, y); ctx.lineTo(marginLeft + innerWidth, y); ctx.strokeStyle = date.getDate() === 1 ? 'rgba(0,0,0,1)' : (firstWeekDay + i) % 7 === 1 ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'; ctx.stroke(); } // labels ctx.fillStyle = 'black'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.font = `${width < 640 ? 8 : 9}px Helvetica, Arial, sans-serif`; for (let i = 0; i < 24; i++) { ctx.fillText(String(i), marginLeft + i * innerWidth / 24 + 2, 0); } ctx.textBaseline = 'middle'; for (let i = 0; i < numDays; i++) { const dateStr = new Date((minDate + (i + 0.5) * secondsPerDay) * 1000) .toLocaleString('en-US', {timeZone: 'Europe/Kiev', month: 'short', day: 'numeric'}); ctx.fillText(dateStr, 2, marginTop + Math.round((i + 0.5) * cellHeight) + 0.5); } return ctx.canvas; }35:Td04,_Last updated on ${new Date(dateUpdated * 1000).toLocaleString('en-GB', {dateStyle: 'long', timeStyle: 'short'})}._ Columns represent hours of the day, and rows represent days. Black blocks are blackouts at my home, with blue–yellow backgrounds showing the day/night cycle. It's built the same way as my previous visualization, [Visualizing Air Raid Sirens in Ukraine](https://observablehq.com/@mourner/sirens). I found the blackout data in the server logs of my home security camera system, which conveniently records when it was shutdown and powered back. As you can see, we spend many hours in blackout daily. You can notice some stepping patterns in the data — this is our energy workers trying to stabilize the blackouts into some kind of schedule, although it's often overridden due to emergency shutdowns. More blackouts happen in the evening time because of the increased load on the grid, with everyone getting home after work and cooking dinner. There's often no need for blackouts at night because people go to sleep, and the load falls sharply — that's usually the time for us to charge devices, turn on the washing machine & dishwasher, and occasionally bake something nice in the oven. Three notable periods of especially long blackouts were due to new mass missile and drone attacks. These days are the toughest not as much because of no power, but because of the uncertainty — not knowing how permanent the damage is and how soon the power will be restored (if at all) adds a lot of anxiety to an already stressful daily life. The blackouts certainly affected my productivity at work, but I adjusted by finding things to work on offline, with the added benefit of no online distractions (_update: two improvised coworking spaces popped up nearby since_!). I also enjoy more time working on my health (doing [5k runs](https://twitter.com/mourner/status/1596144382021095424) outside, [lifting weights](https://twitter.com/mourner/status/1592562272945438722) in the gym that continues to work without power, and walking more), as well as spending more quality time with family and reading books. My friends adjusted similarly, and we're entering winter in pretty good spirits considering the circumstances. How can you beat a nation like this? Note that this chart reflects just one home in Kyiv — it varies significantly across the country, and people around frontline areas like Kherson and Kharkiv have it much worse. But they still push on. Thanks for reading and sharing, and please reach out to me [on Twitter](https://twitter.com/mourner) if you have any questions or comments. **Feb 27, 2023 update**: it's been a few weeks pretty much without any power outages. The grid stabilized, and winter is mostly behind so it's only getting better as it gets warmer — I don't expect any further updates to the chart. Russia wasted tens of billions worth of missiles and failed miserably. Not only the grid is more resilient now, so are the Ukrainian people. If you want to help Ukraine, donate to [Come Back Alive](https://www.comebackalive.in.ua/donate) or see other options here:

36:Te90,ranges = [1666216800,1666229557,1666272669,1666286679,1666419337,1666432759,1666458153,1666470165,1666529846,1666545620,1666693353,1666705398,1666874400,1666891962,1666945801,1666962313,1667199035,1667207970,1667207970,1667239110,1667239142,1667251356,1667286108,1667294613,1667297886,1667313034,1667316181,1667318263,1667386220,1667399055,1667418656,1667429975,1667450187,1667463106,1667483506,1667495265,1667547451,1667559021,1667580317,1667592094,1667645567,1667659350,1667678163,1667687306,1667742694,1667759708,1667799676,1667808724,1667828766,1667841164,1667893626,1667905384,1667926167,1667937695,1667990942,1668002200,1668055645,1668067387,1668088255,1668099401,1668152918,1668164960,1668185508,1668197563,1668244338,1668250690,1668272246,1668276103,1668282949,1668283750,1668314912,1668326792,1668353292,1668359641,1668401409,1668412297,1668524365,1668538277,1668562963,1668575812,1668585549,1668596865,1668607070,1668617970,1668628244,1668637274,1668667245,1668672313,1668681884,1668693489,1668701868,1668707255,1668782947,1668801872,1668854401,1668867130,1668926670,1668930465,1669005952,1669017662,1669038498,1669051307,1669110449,1669114587,1669135956,1669146658,1669203460,1669227405,1669285699,1669420203,1669457225,1669461273,1669463281,1669464731,1669469555,1669480043,1669555111,1669578765,1669621112,1669634268,1669642844,1669663700,1669708108,1669731160,1669739884,1669749956,1669805417,1669828509,1669884814,1669889108,1669967436,1669978671,1669999416,1670010986,1670066052,1670076107,1670099323,1670101473,1670249273,1670259780,1670274441,1670293273,1670312711,1670325133,1670336952,1670356587,1670378010,1670384534,1670410147,1670423000,1670443047,1670448382,1670464082,1670468371,1670484315,1670488584,1670497245,1670520588,1670539312,1670550924,1670572567,1670583150,1670594097,1670617333,1670627795,1670650808,1670670771,1670681060,1670692037,1670715139,1670723936,1670745911,1670809967,1670823360,1670846561,1670865036,1670886629,1670896313,1671015105,1671026663,1671080135,1671084025,1671112267,1671124587,1671144341,1671155574,1671173925,1671193603,1671275280,1671286631,1671372723,1671380734,1671431553,1671542322,1671546905,1671610750,1671614730,1671642216,1671666778,1671700833,1671732108,1671764780,1671778742,1671831196,1672063195,1672074345,1672123590,1672138898,1672159785,1672170543,1672295099,1672312955,1672390838,1672398471,1672418914,1672423650,1672485190,1672502673,1672667851,1672671108,1672834272,1672841008,1673264063,1673285324,1673304328,1673314003,1673338873,1673348330,1673369587,1673381328,1673434919,1673441460,1673466909,1673471743,1673504857,1673510802,1673531982,1673542978,1673598239,1673607583,1673628496,1673635986,1673661456,1673669107,1673697709,1673713445,1673721283,1673727608,1673793469,1673801472,1673877014,1673889218,1673910918,1673920997,1673943494,1673953774,1673974340,1673985231,1674008414,1674020690,1674038921,1674051506,1674136336,1674147410,1674168565,1674180562,1674256862,1674276629,1674481853,1674492515,1674546392,1674559388,1674578879,1674591053,1674611128,1674624706,1674676690,1674686804,1674712197,1674733888,1674740948,1674751795,1674773255,1674787063,1674838324,1674842317,1674871087,1674884365,1674902996,1674916129,1674938081,1674942188,1674968001,1674970029,1674998149,1675011235,1675086360,1675098315,1675120858,1675130087,1675151249,1675162186,1675217552,1675230255,1675249930,1675260657,1675346694,1675357658,1675380457,1675388945,1675443289,1675456508,1675476219,1675488855,1675723860,1675734500,1675756264,1675767083,1675821561,1675833692,1675854040,1675867372,1675918110,1675932322,1675949809,1675962631,1675982714,1675993656,1676014933,1676029845,1676047496,1676059040,1676079771,1676087521,1676706335,1676711514,1676821531,1676822821]37:[] 31:{"id":"b499ccd8fbdc4da8","slug":"blackouts","title":"Visualizing Blackouts at Home in Kyiv","thumbnail":"730057664927661ec4758d2802649b18f1360bdffc7eb0b03716c76339d7ecee","access_level":"public","create_time":"$D2022-12-02T14:14:24.498Z","update_time":"$D2026-07-28T08:41:18.802Z","view_time":null,"first_public_time":"$D2022-12-02T15:37:28.742Z","has_unpublished_edits":null,"fork":false,"stars":62,"starred":false,"owner":{"type":"team","id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":"starter_2024"},"version":365,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null}],"members":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"7f9c38896ce07772","slug":"personal","title":"Personal","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"type":"notebook","body":{"title":"Visualizing Blackouts at Home in Kyiv","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"dateUpdated = 1676843900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"minDate = Math.floor(minEventDate / secondsPerDay + 1) * secondsPerDay - 2 * 60 * 60 // adjust to UTC+3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"minEventDate = ranges[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"maxEventDate = ranges[ranges.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"dst = 1667080800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"numDays = Math.ceil((dateUpdated - minDate) / secondsPerDay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"firstWeekDay = new Date((minDate + 43200) * 1000).getUTCDay()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"secondsPerDay = 60 * 60 * 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"suncalc = import('suncalc')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"// kyivSirens = sirens.locations['м. Київ'].filter(t => t >= minDate && t <= dateUpdated)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"// import {data as sirens} from \"@mourner/sirens\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"