43:["$","title",null,{"children":"Deaths in armed conflicts, 1989 - 2022 | zhaoting zhou | Observable"}] 4b:T28ab,map = { let currentEvents = [] let lastMouseX, lastMouseY; const popover = d3.select("body").append("div") .attr("class", "popover") .style("position", "absolute") .style("visibility", "hidden"); // Specify the chart’s dimensions. const height = Math.min(width, 720); // Observable sets a responsive *width* const colorScale = d3.scaleLog() .domain([1, 10, 100, 1000, 10000, 50000]) .range(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"]); // Prepare a canvas. const dpr = window.devicePixelRatio ?? 1; const canvas = d3.create("canvas").attr("width", dpr * width).attr("height", dpr * height).style("width", `${width}px`); const context = canvas.node().getContext("2d"); context.scale(dpr, dpr); // Create a projection and a path generator. const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], {type: "Sphere"}); const path = d3.geoPath(projection, context); const tilt = 20; function renderEventFeatures(currentTime) { const radiusScale = d3.scaleLinear() .domain([0, 75340]) // Adjust based on your data .range([0.1, 3]); currentEvents.forEach(feature => { const baseRadius = radiusScale(feature.properties.best); const animatedRadius = getAnimatedRadius(baseRadius, feature.properties.start, currentTime); const circle = d3.geoCircle() .center(feature.geometry.coordinates) .radius(animatedRadius || baseRadius); context.beginPath(); path(circle()); context.fillStyle = 'rgba(255, 0, 0, 0.6)'; context.fill(); }); } function renderHemisphere(fillStyle, globalAlpha) { context.save(); context.globalAlpha = globalAlpha; countryGeo.features.forEach(feature => { // Begin a new path for the country shape context.beginPath(); // Draw the country shape path(feature); // Set the fill style based on the 'deaths' property context.fillStyle = feature.properties.deaths ? colorScale(feature.properties.deaths) : fillStyle; // Default color if no deaths // Fill the country shape context.fill(); // Optionally, add a stroke to each country context.stroke(); }) renderEventFeatures() context.beginPath(), path(borders), context.strokeStyle = "#fff", context.lineWidth = 0.5, context.stroke(); context.beginPath(), path({type: "Sphere"}), context.strokeStyle = "#000", context.lineWidth = 1.5, context.stroke(); context.restore(); } const projectionRotate = projection.rotate() function zoomed(event) { const k = event.transform.k projection.scale(k < 200 | k > 1200 ? projection.scale()[0] : k); render(); // Redraw the map with the updated projection } // Create a zoom behavior const zoom = d3.zoom().scaleExtent([200, 1200]).on("zoom", zoomed); // Modify the setInterval part to pass the entire event object let currentDay = 1; async function addEventsAsync() { while (currentDay <= 365) { removePassEvents() const day = dayjs().year(year).dayOfYear(currentDay); const currents = events.filter(i => day.isSame(i.date_start, 'day')); const now = Date.now() currents.forEach(event => { event.start = now currentEvents.push(transformEventToFeature(event)) const countryIndex = countryMap[event.country] if(countryIndex) { // Ensure that the deaths property is initialized if (!countries[countryIndex].properties.deaths) { countries[countryIndex].properties.deaths = 0; } // Now safely add to the deaths property countries[countryIndex].properties.deaths += Number(event.best); } }); const hoveredCountry = getCountryAtPosition(lastMouseX, lastMouseY); updatePopover(hoveredCountry, lastMouseX, lastMouseY); await new Promise(resolve => setTimeout(resolve, 1200)); // Wait for 300 milliseconds before processing the next day currentDay++; } } addEventsAsync() function drawProgressBar() { const progressBarHeight = 20; // Height of the progress bar const progressBarY = height - progressBarHeight; // Y position of the progress bar const progressBarWidth = (currentDay / 364) * width; // Width based on current day // Draw the background of the progress bar context.fillStyle = "#e0e0e0"; context.fillRect(0, progressBarY, width, progressBarHeight); // Draw the progress context.fillStyle = "#fc8d59"; context.fillRect(0, progressBarY, progressBarWidth, progressBarHeight); } function drawLenged() { const legendData = colorScale.domain(); // Get domain of your scale, e.g., [1, 10, 100, 1000, 10000] const legendWidth = 50; // Width of legend item const legendHeight = 20; // Height of legend item const legendMargin = 5; // Margin between items let legendX = width - 350; // Starting X position of the legend const legendY = height - 50; // Y position of the legend // Draw legend items legendData.forEach((value, index) => { // Set color for each legend item context.fillStyle = colorScale(value); // Draw the rectangle context.fillRect(legendX, legendY, legendWidth, legendHeight); // Draw the text context.font = '12px Arial'; context.fillStyle = 'black'; // Or any color that is visible on your legend item context.fillText(value.toString(), legendX + legendWidth - context.measureText(value.toString()).width / 2, legendY - legendHeight + 10); // Increment x position for next item legendX += legendWidth + legendMargin }); } function getAnimatedRadius(baseRadius, startTime, currentTime) { const duration = 2000; // Duration of one cycle of expansion and contraction const elapsed = (currentTime - startTime) % duration; const expansion = Math.sin((elapsed / duration) * 2 * Math.PI); // Sine wave for smooth oscillation return baseRadius + expansion * 0.5; // Adjust '2' to control max expansion } function animate() { const currentTime = Date.now(); // Clear the canvas context.clearRect(0, 0, width, height); render(); renderEventFeatures(currentTime); // Pass the current time requestAnimationFrame(animate); } function removePassEvents() { const duration = 5000 const now = Date.now() currentEvents = currentEvents.filter(event => { return (event.start_doy <= currentDay && event.end_doy >= currentDay) || (now - event.properties.start) < duration }) } function render() { // Clear the canvas context.clearRect(0, 0, width, height); // Set clip angle for back hemisphere and render it projection.clipAngle(180); renderHemisphere("#e0e0e0", 0.5); // Light color and lower opacity for back hemisphere // Set clip angle for front hemisphere and render it projection.clipAngle(90); renderHemisphere("#ccc", 1); // Normal color and opacity for front hemisphere drawProgressBar(); drawLenged(); const currentDate = dayjs().year(year).dayOfYear(currentDay).format('MMMM D, YYYY'); // Format the date as needed context.font = '30px Arial'; // Set the font size and type context.fillStyle = 'black'; // Set the text color context.fillText(currentDate, 0, height - 40); // Position the text at bottom left corner } function dragged(event) { render(); // Redraw the map } // You might need to adjust the sensitivity based on your needs const sensitivity = 75; animate(); function getCountryAtPosition(mouseX, mouseY) { const transform = d3.zoomTransform(canvas); const coords = projection.invert([ (mouseX - transform.x) / transform.k, (mouseY - transform.y) / transform.k ]); if (!coords) return null; return countryGeo.features.find(feature => d3.geoContains(feature, coords)); } function updatePopover(country, mouseX, mouseY) { if (country) { const events = currentEvents.filter(i => i.properties.country === country.properties.name) let articlesHTML = events.map(event => { const title = newsMap[Number(event.properties.id)]; const truncatedTitle = title.length > 100 ? `${title.substring(0, 100)}...` : title; return `"${truncatedTitle}" ${event.properties.best}`; }).join(''); popover.html(`

${country.properties.name}

Total Deaths: ${country.properties.deaths || 0}

${articlesHTML ? ` ` : ''} ${articlesHTML}

Source

Deaths

`) .style("left", `${mouseX + 30}px`) .style("top", `${mouseY + 20}px`) .style("visibility", "visible"); } else { popover.style("visibility", "hidden"); } } function hidePopover() { popover.style("visibility", "hidden"); } function transformEventToFeature(event) { return { type: 'Feature', geometry: { type: 'Point', coordinates: [parseFloat(event.longitude), parseFloat(event.latitude)] }, properties: { id: event.id, year: event.year, country: event.country, date_start: event.date_start, date_end: event.date_end, best: parseInt(event.best), start: event.start } } } d3.select(context.canvas) .on("mousemove", function(event) { [lastMouseX, lastMouseY] = d3.pointer(event); const hoveredCountry = getCountryAtPosition(lastMouseX, lastMouseY); updatePopover(hoveredCountry, lastMouseX, lastMouseY); }); return d3.select(context.canvas).call(drag(projection).on("drag.render", dragged)).call(zoom) .call(render) .node(); }4c:[{"id":"6c926dea819aca265ba2bcfc18a2ca42bdcd582288750eb4dd199d1c7975710d7ad0d1b0c5c23da0b80ce1333d38349894e10d7660b62da5d2acd86c2f086f6a","href":"https://static.observableusercontent.com/files/6c926dea819aca265ba2bcfc18a2ca42bdcd582288750eb4dd199d1c7975710d7ad0d1b0c5c23da0b80ce1333d38349894e10d7660b62da5d2acd86c2f086f6a","name":"countries-110m@1.json","type":"application/json","lastModified":1702459125453.197,"size":196198},{"id":"ffa639b36d3a3a200736ab7583f994777ad2ae83658e642c6b228f1e4c97677a2272b6a09860479ace9ca4b023a4ed188097f3014dc1301d9049f56c07189fe6","href":"https://static.observableusercontent.com/files/ffa639b36d3a3a200736ab7583f994777ad2ae83658e642c6b228f1e4c97677a2272b6a09860479ace9ca4b023a4ed188097f3014dc1301d9049f56c07189fe6","name":"countries-110m-1.json","type":"application/json","lastModified":1702480793371.317,"size":196195},{"id":"026ea446704be461f73aea01de2d2727064caf9fad2e08773e842042dafa04edc7067d1911135fd427212d9aba06daefc7110209089daec6b5659e1e5d0ea87e","href":"https://static.observableusercontent.com/files/026ea446704be461f73aea01de2d2727064caf9fad2e08773e842042dafa04edc7067d1911135fd427212d9aba06daefc7110209089daec6b5659e1e5d0ea87e","name":"final_data_compact@1.csv","type":"text/csv","lastModified":1702346852780.839,"size":29151283},{"id":"75143770d23549207437cc9e298f845f32fa01eef99f9b790045f608ec3a287624c271691798da99e32e248bfe4b3b371ac89704ad1b50c92f39fa1458f366db","href":"https://static.observableusercontent.com/files/75143770d23549207437cc9e298f845f32fa01eef99f9b790045f608ec3a287624c271691798da99e32e248bfe4b3b371ac89704ad1b50c92f39fa1458f366db","name":"news.csv","type":"text/csv","lastModified":1702447344694.055,"size":39972599}] 47:{"id":"5b9994838bafe5cf","slug":"deaths-in-armed-conflicts-1989-2022","title":"Deaths in armed conflicts, 1989 - 2022","thumbnail":"62cd4d4521dc192797921eb0ad200b72e66f1ac7773204eb33e27b918b4e6f4f","access_level":"public","create_time":"$D2023-12-11T20:58:58.942Z","update_time":"$D2024-09-30T02:45:51.746Z","view_time":null,"first_public_time":"$D2023-12-11T20:58:58.942Z","has_unpublished_edits":null,"fork":{"id":"2fc7bd0a8fe03f40","slug":"draggable-globe-in-d3","title":"Draggable globe in D3","owner":{"id":"edfb432b0f72f4e7","login":"michael-keith","name":"Michael Keith"}},"stars":0,"starred":false,"owner":{"type":"team","id":"687b59356ba6ff12","login":"zhaoting-zhou","name":"zhaoting zhou","avatar_url":"https://avatars-next.observableusercontent.com/630aa55e2614dc4640b49d4a99ea49c41b205773e3761fbeb25a1b35a1313c92","tier":"starter_2024","bio":"","following":false},"version":1156,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ab1bb20ff247dc9","login":"zhaoting-zhou","name":"zhaoting zhou","avatar_url":"https://avatars-next.observableusercontent.com/630aa55e2614dc4640b49d4a99ea49c41b205773e3761fbeb25a1b35a1313c92","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1ab1bb20ff247dc9","login":"zhaoting-zhou","name":"zhaoting zhou","avatar_url":"https://avatars-next.observableusercontent.com/630aa55e2614dc4640b49d4a99ea49c41b205773e3761fbeb25a1b35a1313c92","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Deaths in armed conflicts, 1989 - 2022","cells":[{"id":92,"value":"md`# Deaths in armed conflicts, 1989 - 2022` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"viewof year = Inputs.select([1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022], {value: 2022, label: \"Select a year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"data = FileAttachment(\"final_data_compact@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"countryNames = data.reduce((set, i) => {\n set.add(i.country)\n return set\n}, new Set())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"events = data.filter(i => Number(i.best) && Number(i.year) === year).map(i => ({...i, start_doy: dayjs(i.start_date).dayOfYear(), end_doy: dayjs(i.end_date).dayOfYear()}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"news = FileAttachment(\"news.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"newsMap = news.reduce((dic, i) => {\n dic[i.id] = i.source_article\n return dic\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"countryGeo = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"countries = countryGeo.features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"countryMap = countries.reduce((prev, c, i) => {\n prev[c.properties.name] = i\n return prev\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"world = FileAttachment(\"countries-110m-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {drag} with {d3} from \"@d3/versor-dragging\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"dayjs = {\n const t = await require(\"dayjs\");\n const doy = await require('dayjs/plugin/dayOfYear')\n return t.extend(doy)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null