2d:null 2e:["$","title",null,{"children":"Liberia in West Africa | Malik Koné | Observable"}] 33:Tc94,WestAfricaMap = { const w = Math.min(width, 1000); const h = 760; const margin = 30; const africaIds = new Set([ 430, 694, 324, 384, 288, 466, 478, 686, 270, 624, 854, 566, 204, 768, 562, 120, 148, 140, 178, 180, 266, 226, 678 ]); const africa = { type: "FeatureCollection", features: countries.features.filter((d) => africaIds.has(+d.id)) }; const projection = d3.geoMercator().fitExtent( [ [margin, margin + 40], [w - margin, h - margin] ], africa ); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("style", "max-width:100%; height:auto; background:white;"); svg .append("text") .attr("x", margin) .attr("y", 30) .attr("font-family", "sans-serif") .attr("font-size", 22) .attr("font-weight", 700) .attr("fill", "#083b4d") .text("Liberia in West Africa"); svg .append("text") .attr("x", margin) .attr("y", 52) .attr("font-family", "sans-serif") .attr("font-size", 13) .attr("fill", "#444") .text( "Liberia highlighted with neighboring countries: Sierra Leone, Guinea, and Côte d’Ivoire" ); svg .append("g") .selectAll("path") .data(africa.features) .join("path") .attr("d", path) .attr("fill", (d) => focus.get(+d.id)?.fill ?? "#f1eee6") .attr("stroke", "#344") .attr("stroke-width", (d) => (focus.has(+d.id) ? 1.4 : 0.6)) .append("title") .text((d) => countryNames.get(+d.id) ?? d.id); svg .append("path") .datum(africa) .attr("d", path) .attr("fill", "none") .attr("stroke", "#122") .attr("stroke-width", 1.4); const labelIds = new Set([ 430, 694, 324, 384, // Liberia + neighbors 288, 466, 686, 854, 566, 768, 204, 624, 270 ]); const labelFeatures = africa.features.filter((d) => labelIds.has(+d.id)); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("text-anchor", "middle") .attr("paint-order", "stroke") .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "#102a2a") .selectAll("text") .data(labelFeatures) .join("text") .attr("transform", (d) => `translate(${path.centroid(d)})`) .attr("font-weight", (d) => (focus.has(+d.id) ? 700 : 500)) .text((d) => countryNames.get(+d.id) ?? ""); const legend = svg .append("g") .attr("transform", `translate(${w - 250}, ${margin + 50})`) .attr("font-family", "sans-serif"); const legendItems = [ { label: "Liberia", fill: "#d9a514" }, { label: "Neighboring countries", fill: "#6aa57b" }, { label: "Other countries shown", fill: "#f1eee6" } ]; const row = legend .selectAll("g") .data(legendItems) .join("g") .attr("transform", (_, i) => `translate(0, ${i * 26})`); row .append("rect") .attr("width", 18) .attr("height", 18) .attr("rx", 2) .attr("fill", (d) => d.fill) .attr("stroke", "#555") .attr("stroke-width", 0.5); row .append("text") .attr("x", 26) .attr("y", 13) .attr("font-size", 12) .attr("fill", "#333") .text((d) => d.label); return svg.node(); }34:T609,downloadWestAfricaMap = { const svg = WestAfricaMap.cloneNode(true); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); const viewBox = svg.getAttribute("viewBox").split(/[,\s]+/).map(Number); const svgWidth = viewBox[2]; const svgHeight = viewBox[3]; const svgText = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); const svgUrl = URL.createObjectURL(svgBlob); // PNG export resolution multiplier const scale = 3; const img = new Image(); const imgUrl = URL.createObjectURL(svgBlob); await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = imgUrl; }); const canvas = document.createElement("canvas"); canvas.width = svgWidth * scale; canvas.height = svgHeight * scale; const ctx = canvas.getContext("2d"); // White background for brochure / PowerPoint use ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pngBlob = await new Promise(resolve => canvas.toBlob(resolve, "image/png") ); const pngUrl = URL.createObjectURL(pngBlob); return html`

Download WestAfricaMap SVG Download WestAfricaMap PNG

`; }35:T14b9,FullAfricaMap = { const w = Math.min(width, 1000); const h = 780; const margin = 35; // Full Africa const africaIds = new Set([ 12, 24, 204, 72, 854, 108, 132, 120, 140, 148, 174, 178, 180, 262, 818, 226, 232, 748, 231, 266, 270, 288, 324, 624, 384, 404, 426, 430, 434, 450, 454, 466, 478, 480, 504, 508, 516, 562, 566, 646, 678, 686, 690, 694, 706, 710, 728, 729, 834, 768, 788, 800, 732, 894, 716 ]); const liberiaId = 430; const neighborIds = new Set([694, 324, 384]); // Sierra Leone, Guinea, Côte d’Ivoire // West Africa excluding Liberia and its direct neighbors const otherWestAfricaIds = new Set( [...westAfricaIds].filter((id) => id !== liberiaId && !neighborIds.has(id)) ); const africa = { type: "FeatureCollection", features: countries.features.filter((d) => africaIds.has(+d.id)) }; //geoEqualEarth ; geoMercator ; geoAzimuthalEqualArea const projection = d3.geoEqualEarth().fitExtent( [ [margin, margin + 55], [w - margin, h - margin] ], africa ); const path = d3.geoPath(projection); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("style", "max-width:100%; height:auto; background:#cfeefa;"); // Sea svg .append("rect") .attr("width", w) .attr("height", h) .attr("fill", "#cfeefa"); // Title svg .append("text") .attr("x", margin) .attr("y", 32) .attr("font-family", "sans-serif") .attr("font-size", 24) .attr("font-weight", 700) .attr("fill", "#083b4d") .text("Liberia in Africa"); svg .append("text") .attr("x", margin) .attr("y", 56) .attr("font-family", "sans-serif") .attr("font-size", 13) .attr("fill", "#264653") .text("Liberia highlighted within West Africa"); // Base Africa: black, no visible internal borders svg .append("g") .selectAll("path") .data(africa.features) .join("path") .attr("d", path) .attr("fill", "#111111") .attr("stroke", "#111111") .attr("stroke-width", 0.35); // Other West Africa svg .append("g") .selectAll("path") .data(africa.features.filter((d) => otherWestAfricaIds.has(+d.id))) .join("path") .attr("d", path) .attr("fill", "#8b6f47") // change this if you want another West Africa color .attr("stroke", "#8b6f47") .attr("stroke-width", 0.6); // Immediate neighbors svg .append("g") .selectAll("path") .data(africa.features.filter((d) => neighborIds.has(+d.id))) .join("path") .attr("d", path) .attr("fill", "#5fa66a") .attr("stroke", "white") .attr("stroke-width", 1.1); // Liberia svg .append("g") .selectAll("path") .data(africa.features.filter((d) => +d.id === liberiaId)) .join("path") .attr("d", path) .attr("fill", "#d9a514") .attr("stroke", "white") .attr("stroke-width", 1.5); // Labels const labels = [ { name: "Guinea", lon: -10.9, lat: 10.4, dx: -80, dy: -18 }, { name: "Sierra Leone", lon: -11.8, lat: 8.5, dx: -95, dy: 10 }, { name: "Liberia", lon: -9.4, lat: 6.5, dx: -75, dy: 38 }, { name: "Côte d’Ivoire", lon: -5.5, lat: 7.6, dx: 70, dy: 22 } ]; const labelG = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", 700); labelG .selectAll("line") .data(labels) .join("line") .attr("x1", (d) => projection([d.lon, d.lat])[0]) .attr("y1", (d) => projection([d.lon, d.lat])[1]) .attr("x2", (d) => projection([d.lon, d.lat])[0] + d.dx) .attr("y2", (d) => projection([d.lon, d.lat])[1] + d.dy) .attr("stroke", "#ffffff") .attr("stroke-width", 1.2); labelG .selectAll("circle") .data(labels) .join("circle") .attr("cx", (d) => projection([d.lon, d.lat])[0]) .attr("cy", (d) => projection([d.lon, d.lat])[1]) .attr("r", 3) .attr("fill", "#ffffff"); labelG .selectAll("text") .data(labels) .join("text") .attr("x", (d) => projection([d.lon, d.lat])[0] + d.dx) .attr("y", (d) => projection([d.lon, d.lat])[1] + d.dy) .attr("text-anchor", (d) => (d.dx < 0 ? "end" : "start")) .attr("dominant-baseline", "middle") .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 3) .attr("fill", "#102a2a") .text((d) => d.name); // Legend const legend = svg .append("g") .attr("transform", `translate(${w - 280}, ${margin + 55})`) .attr("font-family", "sans-serif"); const legendItems = [ { label: "Liberia", fill: "#d9a514" }, { label: "Neighboring countries", fill: "#5fa66a" }, { label: "Other West Africa", fill: "#8b6f47" }, { label: "Rest of Africa", fill: "#111111" }, { label: "Sea", fill: "#cfeefa" } ]; const row = legend .selectAll("g") .data(legendItems) .join("g") .attr("transform", (_, i) => `translate(0, ${i * 26})`); row .append("rect") .attr("width", 18) .attr("height", 18) .attr("rx", 2) .attr("fill", (d) => d.fill) .attr("stroke", "#555") .attr("stroke-width", 0.5); row .append("text") .attr("x", 26) .attr("y", 13) .attr("font-size", 12) .attr("fill", "#102a2a") .text((d) => d.label); return svg.node(); }36:T609,downloadFullAfricaMap = { const svg = FullAfricaMap.cloneNode(true); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); const viewBox = svg.getAttribute("viewBox").split(/[,\s]+/).map(Number); const svgWidth = viewBox[2]; const svgHeight = viewBox[3]; const svgText = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); const svgUrl = URL.createObjectURL(svgBlob); // PNG export resolution multiplier const scale = 3; const img = new Image(); const imgUrl = URL.createObjectURL(svgBlob); await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = imgUrl; }); const canvas = document.createElement("canvas"); canvas.width = svgWidth * scale; canvas.height = svgHeight * scale; const ctx = canvas.getContext("2d"); // White background for brochure / PowerPoint use ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pngBlob = await new Promise(resolve => canvas.toBlob(resolve, "image/png") ); const pngUrl = URL.createObjectURL(pngBlob); return html`

Download FullAfricaMap SVG Download FullAfricaMap PNG

`; }37:[] 31:{"id":"0750cb1d1c965630","slug":"liberia-in-west-africa","title":"Liberia in West Africa","thumbnail":"1533ad42633426ee04cb885c4de55f4b84cf40eaca9961fb447a42aa6fac4278","access_level":"public","create_time":"$D2026-06-12T18:32:27.866Z","update_time":"$D2026-06-12T19:47:30.450Z","view_time":null,"first_public_time":"$D2026-06-12T19:23:41.443Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":63,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Liberia in West Africa","cells":[{"id":0,"value":"# Liberia in West Africa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Technical details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"countryNames = new Map([\n [430, \"Liberia\"],\n [694, \"Sierra Leone\"],\n [324, \"Guinea\"],\n [384, \"Côte d’Ivoire\"],\n [288, \"Ghana\"],\n [466, \"Mali\"],\n [478, \"Mauritania\"],\n [686, \"Senegal\"],\n [270, \"The Gambia\"],\n [624, \"Guinea-Bissau\"],\n [854, \"Burkina Faso\"],\n [566, \"Nigeria\"],\n [204, \"Benin\"],\n [768, \"Togo\"],\n [562, \"Niger\"],\n [120, \"Cameroon\"],\n [148, \"Chad\"],\n [140, \"Central African Republic\"],\n [178, \"Republic of Congo\"],\n [180, \"DR Congo\"],\n [266, \"Gabon\"],\n [226, \"Equatorial Guinea\"],\n [678, \"São Tomé and Príncipe\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"colors = ({\n liberia: \"#d9a514\",\n neighbor: \"#6aa57b\",\n other: \"#f1eee6\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"focus = new Map([\n [430, { name: \"Liberia\", fill: colors.liberia }],\n [694, { name: \"Sierra Leone\", fill: colors.neighbor }],\n [324, { name: \"Guinea\", fill: colors.neighbor }],\n [384, { name: \"Côte d’Ivoire\", fill: colors.neighbor }]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"westAfricaIds = new Set([\n 204, // Benin\n 854, // Burkina Faso\n 132, // Cabo Verde\n 384, // Côte d’Ivoire\n 270, // Gambia\n 288, // Ghana\n 324, // Guinea\n 624, // Guinea-Bissau\n 430, // Liberia\n 466, // Mali\n 478, // Mauritania\n 562, // Niger\n 566, // Nigeria\n 686, // Senegal\n 694, // Sierra Leone\n 768 // Togo\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"