2b:null 2c:["$","title",null,{"children":"Day 1: Part-to-whole #30DayChartChallenge | Roman Sverdan | Observable"}] 31:T48c,chart = { const root = treemap(treeData); console.log(root.leaves()); const svg = d3 .select(DOM.svg(width, height)) .style("font", "10px sans-serif"); const leaf = svg .selectAll("g") .data(root.leaves()) .enter() .append("g") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); leaf .append("rect") .attr("fill", (d) => { if (d.data.year === 2022) { return colors[0]; } else if (d.data.year === 2023) { return colors[1]; } else if (d.data.year === 2024) { return colors[2]; } else if (d.data.year === 2025) { return colors[3]; } else { return colors[4]; } }) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); leaf .append("text") .selectAll("tspan") .data((d) => d.data.month.split(/\s+/g).concat(formatTotal(d.data.total))) .enter() .append("tspan") .attr("x", 10) .attr( "y", (d, i, nodes) => (i === nodes.length - 1) * 5 + 28 + (i - 0.5) * 9 ) .attr("class", (d) => (parseInt(d) ? "value" : "month")) .text((d) => d); return svg.node(); }32:[] 2f:{"id":"a3ea1ab33f689117","slug":"30daychartchallenge-day-1","title":"Day 1: Part-to-whole #30DayChartChallenge","thumbnail":"ba981438d5d2ea0ec925e3b923e81fb1290505a283694fa9658000be004657df","access_level":"public","create_time":"$D2023-04-01T06:45:51.569Z","update_time":"$D2026-01-24T19:22:36.555Z","view_time":null,"first_public_time":"$D2023-04-01T06:45:51.569Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":107,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 1: Part-to-whole #30DayChartChallenge","cells":[{"id":0,"value":"# Day 1: Part-to-whole #30DayChartChallenge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"### Absolute comparison of russian losses in Ukraine since the beginning of full scale war, 24.02.2022.\n
\nSince the beginning of 2023 up to March 31, russia has lost over 67,000 individuals, which accounts for more than half of the total losses incurred for 11 months of 2022 (105,960). The number of losses continues to increase on a daily basis. For more information on the specific types of equipment lost, please check the chart below.\n\nOriginal data source @GeneralStaffUA.
\nCleaned and formatted CSV data is available at my Github repo here. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"viewof selectedCategory = Inputs.select(Object.keys(categories), {\n value: \"pesonnel\",\n format: (x) => categories[x],\n label: \"Select category\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## `${categories[selectedCategory]} losses`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"

\n 2022
${treeData['total']['2022'].toLocaleString()}\n

\n 2023
${treeData['total']['2023'].toLocaleString()}\n

\n 2024
${treeData['total']['2024'].toLocaleString()}\n

\n 2025
${treeData['total']['2025'].toLocaleString()}\n

\n 2026
${treeData['total']['2026'].toLocaleString()}\n

\n Total:
${(treeData['total']['2023'] + treeData['total']['2022'] + treeData['total']['2024']).toLocaleString()}\n

\n Last data update:
${csvData[csvData.length-1].date.toISOString().slice(0, 10)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"colors = [\"#c2c287\", \"#aaaa4a\", \"#c6c629\", \"#ecc937\", \"#eca237\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"formatTotal = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"treemap = (data) =>\n d3\n .treemap()\n .tile(d3.treemapBinary) // TODO Allow d3.treemapSquarify?\n .size([width, height])\n .padding(1)\n .round(true)(\n d3\n .hierarchy(data)\n .sum((d) => (d.children ? 0 : isNaN(d.total) ? 1 : d.total))\n .sort((a, b) => b.height - a.height || b.total - a.total)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"categories = ({\n personnel: \"Personnel\",\n apv: \"Armored Personnel Vehicles\",\n tanks: \"Tanks\",\n helicopters: \"Helicopters\",\n aircrafts: \"Aircrafts\",\n artillery: \"Artillery\",\n cruise_missiles: \"Cruise Missiles\",\n mlrs: \"Multiple Launch Rocket Systems\",\n special_equipment: \"Special Equipment\",\n vehicles_fuel_tanks: \"Vehicles & Fuel Tanks\",\n aaws: \"Anti-aircraft warfare\",\n uav: \"Unmanned Aerial Vehicle\",\n warships: \"Warships\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"csv = d3.csv(\n \"https://raw.githubusercontent.com/romansverdan/Russian-Losses-in-Ukraine/main/data/russia_losses.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"csv","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"csvData = {\n const columns = Object.keys(csv[0]);\n\n let daysCount = 0;\n let res = csv.map((d) => {\n const obj = {};\n columns.forEach((col, i) => {\n if (i === 0) {\n obj[col] = parseDate(d[col]);\n } else if (i === 1) {\n obj[col] = parseInt(d[col]);\n } else {\n if (daysCount === 0) {\n obj[col] = parseInt(d[col]);\n } else {\n obj[col] = parseInt(d[col]) - parseInt(csv[daysCount - 1][col]);\n }\n }\n });\n daysCount++;\n return obj;\n });\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"treeData = {\n let totalByYears = {};\n\n let group = Array.from(\n d3.group(\n csvData,\n (d) => d.date.getFullYear() + \"-\" + (parseInt(d.date.getMonth()) + 1)\n )\n ).map((el) => {\n // const total = d3.sum(el[1], (i) => i.personnel);\n const total = d3.sum(el[1], (i) => i[selectedCategory]);\n const date = parseDate(el[0] + \"-1\");\n const year = date.getFullYear();\n totalByYears[year]\n ? (totalByYears[year] += total)\n : (totalByYears[year] = total);\n const month = date.toLocaleString(\"default\", { month: \"long\" }).slice(0, 3);\n return { date: date, total: total, month: month, year: year };\n });\n\n let groupByYear = Array.from(d3.group(group, (d) => d.year)).map((y) => {\n return {\n year: y[0],\n children: y[1]\n };\n });\n\n return {\n name: \"ru losses\",\n color: \"#ccc\",\n total: totalByYears,\n children: groupByYear\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"