2b:null 2c:["$","title",null,{"children":"Day 21: #30DayChartChallenge. russian losses in Ukraine. Small multiples line charts | Roman Sverdan | Observable"}] 31:[] 2f:{"id":"63bb94550b3c4693","slug":"30daychartchallenge-day-21","title":"Day 21: #30DayChartChallenge. russian losses in Ukraine. Small multiples line charts","thumbnail":"b62b0dececa3a64f4c21fef6b6f9dec9dc7be615e8deb0d98b20f9f966d01ed4","access_level":"public","create_time":"$D2023-04-21T15:58:13.099Z","update_time":"$D2023-10-29T08:04:32.446Z","view_time":null,"first_public_time":"$D2023-04-21T15:58:13.099Z","fork":{"id":"a75cff6ccda452a0","slug":null,"title":"russian losses in Ukraine, relative comparison","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":751,"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 21: #30DayChartChallenge. russian losses in Ukraine. Small multiples line charts","cells":[{"id":736,"value":"# Day 21: #30DayChartChallenge.
russian losses in Ukraine.
Small multiples line charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":573,"value":"

\n Data: @GeneralStaffUA\n

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

\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"font\", \"12px sans-serif\");\n\n const chartContainer = svg\n .selectAll(\"g\")\n .data(data.series)\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${blockWidth * (i % 4)}, ${Math.floor(i / 4) * blockWidth})`\n );\n\n chartContainer.append(\"g\").attr(\"class\", \"x_axis\").call(xAxis);\n chartContainer.append(\"g\").call(yAxis);\n chartContainer\n .append(\"text\")\n .attr(\"class\", \"chart-title\")\n .attr(\"x\", blockWidth / 2)\n .attr(\"y\", gutter + 5)\n .attr(\"text-anchor\", \"middle\")\n .text((d, i) => categories[0][d.name]);\n\n const path = chartContainer\n .append(\"g\")\n .append(\"path\")\n .attr(\"class\", \"line\")\n .attr(\"d\", (d) => line(d.values));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"gutter = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"blockWidth = width / 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(data.dates))\n .range([gutter, blockWidth - gutter])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data.series, (d) => d3.max(d.values))])\n .nice()\n .range([blockWidth - gutter * 2, gutter])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${blockWidth - gutter * 2})`)\n .call(d3.axisBottom(x).ticks(4).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d))\n // .curve(d3.curveStep)\n .x((d, i) => x(data.dates[i]))\n .y((d) => y(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"formatMonth = d3.timeFormat(\"%B, %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"categories = [\n {\n personnel: \"Personnel\",\n apv: \"Armored Vehicles\",\n tanks: \"Tanks\",\n artillery: \"Artillery\",\n helicopters: \"Helicopters\",\n aircrafts: \"Aircrafts\",\n uav: \"Unmanned Aerial Vehicle\",\n cruise_missiles: \"Cruise Missiles\",\n mlrs: \"MLRS\",\n aaws: \"Anti-aircraft warfare\",\n special_equipment: \"Special Equipment\",\n vehicles_fuel_tanks: \"Vehicles & Fuel Tanks\",\n warships: \"Warships\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"function getMonthlyData(data, category) {\n let maxValue = parseInt(csv[csv.length - 1][category]);\n return Array.from(\n d3.group(\n data,\n (d) => d.date.getFullYear() + \"-\" + (parseInt(d.date.getMonth()) + 1)\n )\n ).map((el) => {\n let total = d3.sum(el[1], (i) => i[category]);\n return {\n date: parseDate(el[0] + \"-1\"),\n total: total,\n percent: (total / maxValue) * 100\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"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":318,"value":"dailyData = {\n const columns = Object.keys(csv[0]);\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":325,"value":"data = {\n let catNames = Object.keys(categories[0]);\n\n let series = catNames.map((el) => {\n return {\n name: el,\n values: getMonthlyData(dailyData, el).map((p) => p.percent),\n absoluteValues: getMonthlyData(dailyData, el).map((p) => p.total),\n dates: getMonthlyData(dailyData, el).map((p) => p.date)\n };\n });\n let dates = series[0].dates;\n return { y: \"%\", series: series, dates: dates };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@^6.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"