29:null 2a:["$","title",null,{"children":"russian losses in Ukraine, relative comparison | Roman Sverdan | Observable"}] 2f:T822,tchart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg.append("g").attr("class", "x_axis").call(xAxis); svg.append("g").call(yAxis); const path = svg .append("g") .selectAll("path") .data(data.series) .join("path") .attr("class", (d) => "line " + d.name) .attr("d", (d) => line(d.values)); svg.call(hover, path); const legend = svg.append("g").attr("class", "legend"); const legendY = 200; legend .append("text") .attr("y", legendY) .attr("x", width - margin.left - margin.right) .attr("text-anchor", "end") .style("fill", "rgb(251 0 0 / 83%)") .text("Personnel"); legend .append("text") .attr("y", legendY + 20) .attr("x", width - margin.left - margin.right) .attr("text-anchor", "end") .text("Tanks"); legend .append("text") .attr("y", legendY + 40) .attr("x", width - margin.left - margin.right) .attr("text-anchor", "end") .style("fill", "#7570b3") .text("Artillery"); legend .append("line") .attr("x1", width - margin.left - margin.right + 5) .attr("x2", width - margin.left - margin.right + 25) .attr("y1", legendY - 5) .attr("y2", legendY - 5) .style("stroke", "rgb(251 0 0 / 83%)") .style("stroke-width", "2px"); legend .append("line") .attr("x1", width - margin.left - margin.right + 5) .attr("x2", width - margin.left - margin.right + 25) .attr("y1", legendY + 15) .attr("y2", legendY + 15) .style("stroke", "rgb(0 0 0 / 83%)") .style("stroke-width", "2px"); legend .append("line") .attr("x1", width - margin.left - margin.right + 5) .attr("x2", width - margin.left - margin.right + 25) .attr("y1", legendY + 35) .attr("y2", legendY + 35) .style("stroke", "#7570b3") .style("stroke-width", "2px"); svg.selectAll(".line.tanks").raise(); svg.selectAll(".line.personnel").raise(); svg.selectAll(".line.artillery").raise(); svg.selectAll(".x_axis").raise(); return svg.node(); }30:Tc3c,function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); else svg.on("mousemove", moved).on("mouseenter", entered).on("mouseleave", left); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); dot .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(data.dates, xm); const s = d3.least(data.series, (d) => Math.abs(d.values[i] - ym)); d3.selectAll(".line.tanks").raise().style("opacity", 0.2); d3.select(".line.personnel").raise().style("opacity", 0.2); d3.select(".line.artillery").raise().style("opacity", 0.2); d3.selectAll(".x_axis").raise(); d3.selectAll(".legend_line").remove(); path .attr("stroke", (d) => (d === s ? "orange" : "#ddd")) .classed("active", (d) => (d === s ? true : false)) .filter((d) => d === s) .raise(); d3.selectAll(".line").attr("opacity", 1); d3.selectAll(".line.active").attr("opacity", 1); dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`); svg .append("line") .attr("class", "legend_line") .style("stroke", "#000") .style("stroke-width", 0.5) .attr("x1", () => x(data.dates[i]) + "px") .attr("y1", () => y(s.values[i]) + "px") .attr("x2", () => x(data.dates[i]) + "px") .attr("y2", () => { return y(s.values[i]) > 200 ? y(s.values[i]) - 170 + "px" : y(s.values[i]) - 100 + "px"; }); toolTip .style("left", () => { return width - event.pageX > 200 ? x(data.dates[i]) + 13 + "px" : x(data.dates[i]) - 143 + "px"; }) .style("top", () => { return y(s.values[i]) > 200 ? y(s.values[i]) + 50 + "px" : y(s.values[i]) + 120 + "px"; }) .style("display", "block") .html( ` ${categories[0][s.name]}
Month: ${formatMonth(s.dates[i])}
Destroyed: ${s.absoluteValues[i]} | ${s.values[i].toFixed( 2 )}%
Total Destroyed: ${d3.sum(s.absoluteValues)}` ); } function entered() { d3.select(".line.personnel").raise(); dot.attr("display", null); } function left() { dot.attr("display", "none"); d3.selectAll(".line").classed("active", false); d3.selectAll(".line.tanks").raise().style("opacity", 1); d3.select(".line.personnel").raise().style("opacity", 1); d3.select(".line.artillery").raise().style("opacity", 1); d3.selectAll(".x_axis").raise(); d3.selectAll(".line").attr("opacity", 1); toolTip.style("display", "none"); d3.selectAll(".legend_line").remove(); } }31:[{"id":"b154f8efd1a64d5e3e829b93e4fefd6d72219371ef440007fe368369fea0bbcdc9bcac06b72aae851f392411102931eba7774befa8c8fcbfcad4fc28f136ecd6","href":"https://static.observableusercontent.com/files/b154f8efd1a64d5e3e829b93e4fefd6d72219371ef440007fe368369fea0bbcdc9bcac06b72aae851f392411102931eba7774befa8c8fcbfcad4fc28f136ecd6","name":"unemployment.tsv","type":"application/octet-stream","lastModified":1676879349361.714,"size":32052}] 2d:{"id":"a75cff6ccda452a0","slug":null,"title":"russian losses in Ukraine, relative comparison","thumbnail":"a50efec4d5db8ceeafae47930357c1140bb457f60f248731a7a03fc7ab23ff0b","access_level":"public","create_time":"$D2023-02-20T07:49:09.361Z","update_time":"$D2025-01-19T09:21:09.711Z","view_time":null,"first_public_time":"$D2023-02-20T07:49:09.361Z","fork":true,"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":645,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"41e58452cdbb35f1","slug":"russian-war-data","title":"War in Ukraine","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"russian losses in Ukraine, relative comparison","cells":[{"id":1,"value":"md`# russian losses in Ukraine, relative comparison\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":610,"value":"Check out a daily number of ru personnel and equipment losses at this notebook
\nTotal numbers of losses in 2022 is available here","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 600","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.scaleUtc()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).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 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 }\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":475,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"","pinned":true,"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: \"% of losses\", 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"}} 2e:"$2d:body"