Oil reserves${labels[j] && ` (${labels[j]})`} HDI${labels[i] && ` (${labels[i]})`}

2f:Tb0c,treemap = { const margin = {top: 15, right: 25, bottom: 50, left: 10}; const width = 850 - margin.left - margin.right; const height = 700 - margin.top - margin.bottom; // Specify the color scale. const color = d3.scaleOrdinal(dataTreemap.children.map(d => d.name), d3.schemeTableau10); // Compute the layout. const root = d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .paddingTop(30) .paddingRight(7) .paddingInner(1) //.padding(1) .round(true) (d3.hierarchy(dataTreemap) .sum(d => d.value) .sort((a, b) => a.value - b.value)); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Add a cell for each leaf of the hierarchy. const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); // Append a color rectangle. leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("stroke", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => d.data.name === "" ? .9 : .5 ) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("text") .attr("x", 5) .attr("y", 20) .text(d => d.data.name === "" ? "" : `${d3.format(".2s")(d.data.value)}` ) .attr("font-size", 16) .style("fill", "#866c4d"); leaf.append("text") .attr("x", 5) .attr("y", 33) .text(d => d.data.name ) .attr("font-size", 12) .style("fill", "#5c4835"); // Add title for the 3 groups svg .selectAll("titles") .data(root.descendants().filter(function(d){return d.depth==1})) .enter() .append("text") .attr("x", d => d.x0) .attr("y", d => d.y0+21) .text(d => d.data.name) .attr("font-size", "18px") .attr("fill", d => color(d.data.name)) // Add title svg .append("text") .attr("x", 0) .attr("y", 10) .text("Overview of the humanitarian situation in Yemen") .attr("font-size", "19px") .attr("font-weight", "bold") .attr("fill", "grey" ) // Add text below svg .append("text") .attr("x", 0) .attr("y", height+15) .text(`Sources: OCHA (www.unocha.org/yemen), WFP (www.wfp.org/emergencies/yemen-emergency)`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) return Object.assign(svg.node(), {scales: {color}}); }30:Tad5,slopechart = { const width = 650; const height = 250; const marginTop = 30; const marginRight = 20; const marginBottom = 15; const marginLeft = -90; const padding = 10; // Prepare the positional scales. const x = d3.scalePoint() .domain([0, 1]) .range([marginLeft, width - marginRight]) .padding(0.5); const y = d3.scaleLinear() .domain(d3.extent(dataSlope.flatMap(d => [d[2015], d[2025]]))) .range([height - marginBottom, marginTop]); const line = d3.line() .x((d, i) => x(i)) .y(y); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Append the x axis. svg.append("g") .attr("text-anchor", "middle") .style("fill", "#866c4d") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i)},20)`) .call(g => g.append("text") .text((i) => i ? 2025 : 2015) .attr("font-size", "8px") .attr("font-weight", "bold")) .call(g => g.append("line") .attr("y1", 3) .attr("y2", 9) .attr("stroke", "#866c4d")); // Create a line for each stat. svg.append("g") .attr("fill", "none") .selectAll("path") .data(dataSlope) .join("path") .attr("d", (d) => line([d[2015], d[2025]])) .attr("stroke", (d) => d.colour) .attr("stroke-opacity", 0.8) .attr("stroke-width", 2); // Create a group of labels for each year. svg.append("g") .selectAll("g") .data([0, 1]) .join("g") .attr("transform", (i) => `translate(${x(i) + (i ? padding : -padding)},0)`) .attr("text-anchor", (i) => i ? "start" : "end") .selectAll("text") .data((i) => d3.zip( dataSlope.map(i ? (d) => `${d[2025]}M ${d.stat}` : (d) => `${d.stat} ${d[2015]}M`), dodge(dataSlope.map(d => y(d[i ? 2025 : 2015]))) )) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .text(([text]) => text) .attr("font-size", "9px") .data(dataSlope) .style("fill", (d) => d.colour); // Add title svg .append("text") .attr("x", 0) .attr("y", 8) .text("Evolution of the humanitarian situation over 10 years of war in Yemen") .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) // Add text below svg .append("text") .attr("x", 0) .attr("y", height-1) .text(`Sources: OCHA reports (www.unocha.org), WFP (www.wfp.org/emergencies/yemen-emergency)`) .attr("font-size", "6px") .attr("font-weight", "bold") .attr("fill", "grey" ) return svg.node(); }31:Tef7,circlepacking = { const margin = {top: 20, right: 40, bottom: 20, left: 10}; const width = 750 - margin.left - margin.right; const height = 350 - margin.top - margin.bottom; // Specify the number format for values. const format = d3.format(",d"); // Create the pack layout. const pack = d3.pack() .size([width - margin.left - margin.right, height - margin.top - margin.bottom]) .padding(3); // Compute the hierarchy; recursively sum the // values for each node; sort the tree by descending value; lastly // apply the pack layout. const root = pack(d3.hierarchy(dataCirclepacking) .sum(d => d.value) .sort((a, b) => b.value - a.value)); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, -10, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;") .attr("text-anchor", "start"); // Place each node according to the layout’s x and y values. const node = svg.append("g") .selectAll() .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Add a title. node.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); // Add a filled or stroked circle. node.append("circle") .attr("fill", d => d.children ? "#fff" : d.data.colour) .attr("fill-opacity", d => d.data.opacity) .attr("stroke", d => d.children ? "#3d7262" : d.data.colour) .attr("r", d => d.r) // Add a label to leaf nodes. const text = node .filter(d => !d.children && d.r > 10) .append("text") .attr("clip-path", d => `circle(${d.r})`); // Add a tspan for each CamelCase-separated word. text.selectAll() .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g)) .join("tspan") .attr("x", -20) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`) .text(d => d) .style("fill", "#5c4835"); // Add a tspan for the node’s value. text.append("tspan") .attr("x", -20) .attr("y", d => `${d.data.name.split(/(?=[A-Z][a-z])|\s+/g).length / 2 + 0.35}em`) .attr("fill-opacity", 0.7) .text(d => format(d.value)) .attr("font-weight", "bold") .style("fill", "#866c4d"); // Add subtitle svg .append("text") .attr("x", 0) .attr("y", 24) .text("In 2021, the UN estimated the war's") .attr("font-size", "11px") .attr("fill", "#3d7262" ) svg .append("text") .attr("x", 0) .attr("y", 41) .text("death toll to 377,000 deaths,") .attr("font-size", "11px") .attr("fill", "#866c4d" ) svg .append("text") .attr("x", 0) .attr("y", 58) .text("of which 60% are indirects deaths") .attr("font-size", "11px") .attr("fill", "#3d7262" ) svg .append("text") .attr("x", 0) .attr("y", 75) .text("(caused by hunger, preventable") .attr("font-size", "11px") .attr("fill", "#3d7262" ) svg .append("text") .attr("x", 0) .attr("y", 92) .text("diseases...)") .attr("font-size", "11px") .attr("fill", "#3d7262" ) // Add title svg .append("text") .attr("x", 0) .attr("y", 0) .text("War fatalities in Yemen") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "grey" ) // Add text below svg .append("text") .attr("x", 0) .attr("y", height - 15) .text(`Source: Aljazeera (www.aljazeera.com/news/2021/11/23/un-yemen-recovery-possible-in-one-generation-if-war-stops-now)`) .attr("font-size", "7px") .attr("font-weight", "bold") .attr("fill", "grey" ) return svg.node(); }32:Tc82,mapOilReserves = { const width = 975; const height = 610; const margin = 40; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); svg.append(legend) .attr("transform", "translate(870,450)"); const x = d3.scaleQuantile([34475100, 3000000000, 40582685000], d3.range(n)); // For 2020: lowest in Asia, medium range, highest const y = d3.scaleQuantile([0.386, (0.386+0.967)/2, 0.967], d3.range(n)); // For 2020: lowest HDI 0.386, highest HDI 0.967 const index = d3.index(dataMapOil, d => d.country); const projection = d3Geo.geoEqualEarth() //.center([0,20]) // GPS of location to zoom on .scale(width+300) // This is like the zoom .translate([ -400, height+250 ]); const path = d3.geoPath(projection); const color = (value) => { if (!value) return "#E2E1E1"; const {oil_reserves: a, hdi: b} = value; return colors[y(b) + x(a) * n]; }; const format = (value) => { if (!value) return ""; const {oil_reserves: a, hdi: b} = value; return `${d3.format(".3s")(a)} tonnes of oil reserves\n${b} Human Development Index`; }; svg.append("g") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .join("path") .attr("fill", d => color(index.get(d.properties.name))) .attr("d", path) .append("title") .text(d => `${d.properties.name}\n${format(index.get(d.properties.name))}`); svg.append("path") .datum(topojson.mesh(countries, countries.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Add title svg .append("text") .attr("x", 0) .attr("y", 17) .text("Yemen: lowest oil reserve & lowest Human Development Index in the region") .attr("font-size", "17px") .attr("font-weight", "bold") .attr("fill", "grey" ); svg .append("text") .attr("x", 0) .attr("y", 35) .text("(2020 data)") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "grey" ); // Add text below svg .append("text") .attr("x", width) .attr("y", height - 27) .text(`Sources:`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); svg .append("text") .attr("x", width) .attr("y", height - 15) .text(`Our World in Data (ourworldindata.org/grapher/oil-proved-reserves?region=Asia)`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); svg .append("text") .attr("x", width) .attr("y", height - 3) .text(`World Population Review (worldpopulationreview.com/country-rankings/hdi-by-country)`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); return svg.node(); }33:Tc9a,mapGasReserves = { const width = 975; const height = 610; const margin = 40; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); svg.append(legend1) .attr("transform", "translate(870,450)"); const x = d3.scaleQuantile([143084030000, 3000000000000, 32101378000000], d3.range(n)); // For 2020: lowest in Asia, medium range, highest const y = d3.scaleQuantile([0.386, (0.386+0.967)/2, 0.967], d3.range(n)); // For 2020: lowest HDI 0.386, highest HDI 0.967 const index = d3.index(dataMapGas, d => d.country); const projection = d3Geo.geoEqualEarth() //.center([0,20]) // GPS of location to zoom on .scale(width+300) // This is like the zoom .translate([ -400, height+250 ]); const path = d3.geoPath(projection); const color = (value) => { if (!value) return "#E2E1E1"; const {gas_reserves: a, hdi: b} = value; return colors1[y(b) + x(a) * n]; }; const format = (value) => { if (!value) return ""; const {gas_reserves: a, hdi: b} = value; return `${d3.format(".3s")(a)} m³ of natural gas reserves\n${b} Human Development Index`; }; svg.append("g") .selectAll("path") .data(topojson.feature(countries, countries.objects.countries).features) .join("path") .attr("fill", d => color(index.get(d.properties.name))) .attr("d", path) .append("title") .text(d => `${d.properties.name}\n${format(index.get(d.properties.name))}`); svg.append("path") .datum(topojson.mesh(countries, countries.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Add title svg .append("text") .attr("x", 0) .attr("y", 17) .text("Yemen: lowest gas reserve & lowest Human Development Index in the region") .attr("font-size", "17px") .attr("font-weight", "bold") .attr("fill", "grey" ); svg .append("text") .attr("x", 0) .attr("y", 35) .text("(2020 data)") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "grey" ); // Add text below svg .append("text") .attr("x", width) .attr("y", height - 27) .text(`Sources:`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); svg .append("text") .attr("x", width) .attr("y", height - 15) .text(`Our World in Data (ourworldindata.org/grapher/natural-gas-proved-reserves?region=Asia)`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); svg .append("text") .attr("x", width) .attr("y", height - 2) .text(`World Population Review (worldpopulationreview.com/country-rankings/hdi-by-country)`) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); return svg.node(); }34:Tb35,beeswarm = { const width = 1100; const height = 970; const marginTop = 20; const marginRight = 20; const marginBottom = 20; const marginLeft = 10; const radius = 1; const padding = 1.5; const x = d3.scaleTime() .domain(d3.extent(saAirRaids, d => new Date(d.Date))) .range([marginLeft, width - marginRight]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); svg.append("g") .selectAll() .data(dodge2(saAirRaids, {radius: radius * 2 + padding, x: d => x(new Date(d.Date))})) .join("circle") .attr("cx", d => d.x) .attr("cy", d => height - marginBottom - radius - padding - d.y) .attr("r", radius) .attr("fill", d3.schemeDark2[0]) .attr("fill-opacity", d => d.data.Target === "Military Security Target" ? 1 : 0.5) .append("title") .text(d => `${d.data["Max Air Raids"]} air raids on ${d.data.Date}\ntarget: ${d.data.Target} in ${d.data["Governorate"]} Governorate\n${d.data["Civilian Casualties"]} civilian casualties and ${d.data["Fatalities "]} fatalities (including ${d.data["Child fatalities"]} child fatalities)`); // Add title svg .append("text") .attr("x", width - marginRight) .attr("y", 25) .text("Yemen war: Saudi & UAE coalition air raids") .attr("font-size", "17px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); // Add source svg .append("text") .attr("x", width - marginRight) .attr("y", 50) .text("Source: Yemen Data Project (yemendataproject.org)") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "grey" ) .attr("text-anchor", "end"); // Legend svg .append("circle") .attr("cx", width/1.65) .attr("cy", 70) .attr("fill", d3.schemeDark2[0]) .attr("fill-opacity", 1) .attr("r", 2.5); svg .append("text") .attr("x", width/1.65 + 10) .attr("y", 72) .text("Operation (1 raid or more) with a military target identified") .attr("font-size", "10px") .attr("fill", "grey" ) .attr("text-anchor", "start"); svg .append("circle") .attr("cx", width/1.65) .attr("cy", 85) .attr("fill", d3.schemeDark2[0]) .attr("fill-opacity", .5) .attr("r", 2.5); svg .append("text") .attr("x", width/1.65 + 10) .attr("y", 87) .text("Operation (1 raid or more) with a non-military target identified or unknown target") .attr("font-size", "10px") .attr("fill", "grey" ) .attr("text-anchor", "start"); return svg.node(); }35:T49a,function dodge2(data, {radius = 1, x = d => d} = {}) { const radius2 = radius ** 2; const circles = data.map((d, i, data) => ({x: +x(d, i, data), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.x < b.x - radius2) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2); if (y < b.y && !intersects(b.x, y)) b.y = y; a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return circles; }36:T42a,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` Oil reserves${labels[j] && ` (${labels[j]})`} HDI${labels[i] && ` (${labels[i]})`} `)} Oil reserves HDI `; }37:T42c,legend1 = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` Natural Gas ${labels[j] && ` (${labels[j]})`} HDI${labels[i] && ` (${labels[i]})`} `)} Natural Gas HDI `; }38:[{"id":"547882c5fe199d8a5ab809cf32131dd3006bcd7cf7bf1b8c3420f57931120d5bcacc04ba6a78a279b328d9750564b24efd74955b267257c421f6e233122d8b3d","href":"https://static.observableusercontent.com/files/547882c5fe199d8a5ab809cf32131dd3006bcd7cf7bf1b8c3420f57931120d5bcacc04ba6a78a279b328d9750564b24efd74955b267257c421f6e233122d8b3d","name":"Yemen Data Project Published Air raids database from 26 March 2015 to 30 April 2022_modified .csv","type":"text/csv","lastModified":1746021122036.72,"size":2837422},{"id":"7d83b04cc7f7fd279cd676dac7b983bfd51cf1d0345e9ca92ccfd4ae966b9725c3d3ba0e0296f281fcb7525daaf01a7fcb9f9641aeb23591aa9d255f82db3e33","href":"https://static.observableusercontent.com/files/7d83b04cc7f7fd279cd676dac7b983bfd51cf1d0345e9ca92ccfd4ae966b9725c3d3ba0e0296f281fcb7525daaf01a7fcb9f9641aeb23591aa9d255f82db3e33","name":"countries-110m.json","type":"application/json","lastModified":1745593204671.38,"size":107762}] 2d:{"title":"Humanitarian Emergencies","cells":[{"id":0,"value":"# Humanitarian Emergencies","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"## Yemen 🇾🇪","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"After 10 years of war, severe deterioration of economic conditions, extensive damage to civilian infrastructure, and the collapse of essential services are critical drivers of large-scale vulnerabilities and needs countrywide.\n##### Source: UN Office for the Coordination of Humanitarian Affairs (OCHA), [www.unocha.org/yemen](https://www.unocha.org/yemen)","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"colors = [ \n \"#E9DDDD\", // light grey-purple\n d3.schemeSet3[4], // light blue\n d3.schemeTableau10[0], // medium blue\n \"#e4acac\", // pale red\n \"#927387\", // medium grey-purple\n \"#4C547E\", // grey blue\n d3.schemeTableau10[2], // red\n \"#823755\", // medium grey-red\n \"#574256\" // dark grey-purple\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"colors1 = [ \n \"#F0E9E1\", // light grey-purple\n \"#A7B6CB\", // light blue\n \"#7090BF\", // medium blue\n d3.schemePastel1[4], // pale orange\n \"#9D8F71\", // medium grey-purple\n \"#555C6A\", // grey blue\n d3.schemeTableau10[1], // orange\n \"#87592E\", // medium brown\n \"#5c4835\" // dark brown\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"n = Math.floor(Math.sqrt(colors.length));","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"dataMapOil = [\n {country: \"Saudi Arabia\", oil_reserves: 40582685000, hdi: 0.861},\n {country: \"Kuwait\", oil_reserves: 13844600000, hdi: 0.826},\n {country: \"Bahrain\", oil_reserves: null, hdi: 0.884},\n {country: \"Qatar\", oil_reserves: 3443281400, hdi: 0.863},\n {country: \"United Arab Emirates\", oil_reserves: 13339920000, hdi: 0.930},\n {country: \"Oman\", oil_reserves: 732877250, hdi: 0.823},\n {country: \"Yemen\", oil_reserves: 409200000, hdi: 0.430}\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"dataMapGas = [\n {country: \"Saudi Arabia\", gas_reserves: 6019120400000, hdi: 0.861},\n {country: \"Kuwait\", gas_reserves: 1694800000000, hdi: 0.826},\n {country: \"Bahrain\", gas_reserves: 64831427000, hdi: 0.884},\n {country: \"Qatar\", gas_reserves: 24665473000000, hdi: 0.863},\n {country: \"United Arab Emirates\", gas_reserves: 5938725000000, hdi: 0.930},\n {country: \"Oman\", gas_reserves: 666347500000, hdi: 0.823},\n {country: \"Yemen\", gas_reserves: 265831020000, hdi: 0.430}\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"countriesSelection = dataMapOil.map(d => d.country);","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"countries = FileAttachment(\"countries-110m.json\").json() ","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n positions = Array.from(positions);\n let n = positions.length; \n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"dataSlope = [\n {2015: 26.0, 2025: 34.9, stat: \"Population\", colour: \"#3f3124\"},\n {2015: 21.2, 2025: 19.5, stat: \"in need\", colour: d3.schemeTableau10[0]},\n {2015: 6.0, 2025: 17.1, stat: \"food insecure\", colour: d3.schemeTableau10[1]},\n {2015: 2.5, 2025: 4.8, stat: \"displaced\", colour: d3.schemeTableau10[2]}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"dataTreemap = new Object({name: \"flare\",\n children: [\n {name: \"Humanitarian needs\",\n children: [\n {name: \"people in need\", value: 19500000},\n {name: \"\", value: 19200000}\n ]},\n {name: \"Food insecurity\",\n children: [\n {name: \"food insecure people\", value: 17100000},\n {name: \"\", value: 21600000}\n ]},\n {name: \"Internal displacement\",\n children: [\n {name: \"people internally displaced\", value: 4800000},\n {name: \"\", value: 33900000}\n ]}\n ]});","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"dataTreemap2 = new Object({name: \"flare\",\n children: [\n {name: \"2021 UN report: 377,000 deaths including 60% of indirects causes\",\n children: [\n {name: \"deaths from conflict violence\", value: 125667, opacity: 0.6},\n {name: \"deaths from indirect causes\", value: 251333, opacity: 0.9}\n ]}\n ]});","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"dataCirclepacking = new Object({name: \"flare\",\n children: [\n {name: \"By 2021, 377,000 deaths including 60% of indirects causes (UN report)\",\n children: [\n {name: \"deaths from conflict violence\", value: 125667, colour: d3.schemeDark2[0], opacity: 0.6},\n {name: \"deaths from indirect causes\", value: 251333, colour: d3.schemeDark2[0], opacity: 0.9}\n ]}\n ]});","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"pattern = /(\\d{2})\\/(\\d{2})\\/(\\d{4})/;","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"saAirRaids = (await FileAttachment(\"Yemen Data Project Published Air raids database from 26 March 2015 to 30 April 2022_modified .csv\").csv()).map((d) => (d.Target = d[\"Main category\"].replaceAll(\"_\", \" \"), d)).map((d) => (d.Date = d.Date.replace(pattern, '$3-$2-$1'), d));","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// dataHumNeeds = (await FileAttachment(\"yemen-humanitarian-needs-2024.csv\").csv()).map((d) => (d[\"In Need\"] = +parseInt(d[\"In Need\"]), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"// yemenAdminLvl2 = FileAttachment(\"yemen_admin2_ploygons.topojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"// yemenAdminLvl1 = FileAttachment(\"yemen_admin1_ploygons.topojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"d3Geo = require(\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}