2b:null 2c:["$","title",null,{"children":"Canada's Missing Trade Potential | ONE Campaign | Observable"}] 31:T1614,viewof svg = { const maxW = Math.min(width, 600); const w = maxW; const h = maxW; const svg = d3 // .select(DOM.svg(w, h)) .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .attr("max-width", `${w}px`) .attr("height", "auto") .attr("preserveAspectRatio", "xMidYMid meet"); const colorMin = "#FF5E1F"; const colorMid = "white"; const colorMax = "#17858C"; const borderColor = "#555555"; const strokeHover = "#DDDDDD"; const colorScale = d3.scaleDiverging( [-absMax, 0, absMax], [colorMin, colorMid, colorMax] ); const dataByIso3 = new Map(tradeData.map((d) => [d.iso3, d])); const data = hexmap; data.features.forEach((f) => { const iso = f.properties.iso3; const match = dataByIso3.get(iso); f.properties.GPT = +match?.GPT || 0; f.properties.LDCT = +match?.LDCT || 0; f.properties.FIPA = +match?.FIPA || 0; const metricRow = filteredData.find((d) => d.iso3 === iso); f.properties.potential = metricRow ? +metricRow[`potential_${selectedYear}`] : null; }); console.log(data); const margin = { top: 25, right: 25, bottom: 50, left: 75 }; const projection = d3 .geoIdentity() .reflectY(true) .fitExtent( [ [margin.left, margin.top], [w - margin.right, h - margin.bottom] ], data ); const path = d3.geoPath().projection(projection); // Hex fills svg .append("g") .selectAll("path.hex-fill") .data(data.features) .join("path") .attr("class", "hex-fill") .attr("fill", (d) => +d.properties.potential != null ? colorScale(+d.properties.potential) : borderColor ) .attr("d", path); svg .append("defs") .selectAll("clipPath") .data(data.features) .join("clipPath") .attr("id", (d) => `clip-${d.properties.iso3}`) .append("path") .attr("d", (d) => path(d)); // Stripe layer (flat horizontal bars) const stripeHeight = 2, stripeSpacing = 4; const stripeOffsets = { GPT: 0, LDCT: 1, FIPA: 2 }; ["GPT", "LDCT", "FIPA"].forEach((type) => { svg .append("g") .attr("class", `stripe-layer-${type}`) .selectAll("rect") .data(data.features.filter((d) => d.properties[type])) .join("rect") .attr("x", (d) => path.bounds(d)[0][0]) .attr( "y", (d) => path.bounds(d)[0][1] + 4 + stripeOffsets[type] * (stripeHeight + stripeSpacing) ) .attr("width", (d) => { const bounds = path.bounds(d); const hexWidth = bounds[1][0] - bounds[0][0]; return hexWidth; // optional margin }) .attr("height", stripeHeight) .attr("fill", borderColor) .attr("clip-path", (d) => `url(#clip-${d.properties.iso3})`); }); // Persistent tooltip div const tooltip = d3.select("body").select("div.hex-tooltip").empty() ? d3.select("body").append("div").attr("class", "hex-tooltip") : d3.select("body").select("div.hex-tooltip"); tooltip .style("position", "absolute") .style("padding", "8px") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); // Top stroke layer svg .append("g") .selectAll("path.stroke") .data(data.features) .join("path") .attr("class", "stroke") .attr("fill", "transparent") .attr("stroke", borderColor) .attr("stroke-width", 2) .attr("d", path) .on("mouseover", function (event, d) { this.parentNode.appendChild(this); d3.select(this).attr("stroke", strokeHover); highlightLegend(+d.properties.potential, d.properties.name); showTooltip(tooltip, event, d, colorMin, colorMax); const offset = 10; const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; const mouseX = event.pageX; const mouseY = event.pageY; const viewportX = mouseX; // fine as-is const viewportY = mouseY - window.scrollY; // adjust to relative Y position in viewport const left = viewportX > window.innerWidth / 2 ? mouseX - tooltipWidth - offset : mouseX + offset; const top = viewportY > window.innerHeight / 2 ? mouseY - tooltipHeight - offset : mouseY + offset; tooltip .style("left", `${left}px`) .style("top", `${top}px`); }) .on("mousemove", (event) => { const offset = 10; const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; const mouseX = event.pageX; const mouseY = event.pageY; const viewportX = mouseX; // fine as-is const viewportY = mouseY - window.scrollY; // adjust to relative Y position in viewport const left = viewportX > window.innerWidth / 2 ? mouseX - tooltipWidth - offset : mouseX + offset; const top = viewportY > window.innerHeight / 2 ? mouseY - tooltipHeight - offset : mouseY + offset; tooltip .style("left", `${left}px`) .style("top", `${top}px`); }) .on("mouseout", function () { d3.select(this).attr("stroke", borderColor); tooltip.style("opacity", 0); highlightLegend(null); }); const highlightLegend = addColorLegend({ svg, values: allValues, colorScale, label: "Trade gap, CA$ million", width: w * 0.33, height: h * 0.08, x: w * 0.08, y: h * 0.79 }); return svg.node(); }32:T637,bottomPannel = html`${await (async () => `

Source: Gap values estimated via gravity model of international trade; Canada’s international trade and investment agreements; Customs Tariff 2025.

GPT: General Preferential Tariff; LDCT: Least Developed Country Tariff; FIPA: Foreign Investment Promotion and Protection Agreement

`)()}`33:Tc93,function addColorLegend({ svg, values, colorScale, width = 200, height = 50, margin = { v: 0, h: 0 }, x = 50, y = 475, label = null }) { const domain = [d3.min(values), d3.max(values)]; const xScale = d3.scaleLinear().domain(domain).range([0, width]); const gradientId = `legend-gradient-${Math.random() .toString(36) .slice(2, 8)}`; const defs = svg.append("defs"); const linearGradient = defs .append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "0%"); // Add color stops const steps = 30; for (let i = 0; i <= steps; i++) { const t = i / steps; const val = domain[0] + t * (domain[1] - domain[0]); linearGradient .append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(val)); } // Wrapper group const legendGroup = svg .append("g") .attr("class", "barcode-legend") .attr("transform", `translate(${x}, ${y})`); const stripWidth = height * 0.66 legendGroup .append("rect") .attr("x", 0) .attr("y", stripWidth) .attr("width", width) .attr("height", height - stripWidth) .attr("fill", `url(#${gradientId})`) .attr("stroke", "none") .attr("opacity", 1); // X-axis const axis = d3 .axisBottom(xScale) .ticks(4) .tickFormat((d) => d3.format(",.0f")(d / 1e3)); legendGroup .append("g") .attr("transform", `translate(0, ${height})`) .call(axis) .call((g) => g.select(".domain").remove()); // Label legendGroup .append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", 10) .text(label); // Hover marker line const legendMarker = legendGroup .append("line") .attr("class", "hover-marker") .attr("y1", 0) .attr("y2", height) .attr("stroke", "black") .attr("stroke-width", 1) .attr("opacity", 0); // Hover name label const legendName = legendGroup .append("text") .attr("class", "hover-label") .attr("y", 10) .attr("dx", ".5em") .attr("text-anchor", "left") .attr("font-size", 10) .attr("opacity", 0); // Hover value label const legendValue = legendGroup .append("text") .attr("class", "hover-label") .attr("y", 25) .attr("dx", ".5em") .attr("text-anchor", "left") .attr("font-size", 10) .attr("opacity", 0); // Return marker control function return function highlight(value, name) { if (value == null) { legendMarker.attr("opacity", 0); legendName.attr("opacity", 0); legendValue.attr("opacity", 0); } else { const xpos = xScale(value); legendMarker.attr("x1", xpos).attr("x2", xpos).attr("opacity", 1); legendName.attr("x", xpos).text(name).attr("opacity", 1); const formattedVal = value / 1e3; const stringVal = Math.abs(formattedVal) < 0.1 ? d3.format(",.2f")(formattedVal) : Math.abs(formattedVal) < 1 ? d3.format(",.1f")(formattedVal) : d3.format(",.0f")(formattedVal); legendValue .attr("x", xpos) .text(stringVal) .attr("opacity", 1); } }; }34:T5db,function showTooltip(tooltip, event, d, colorMin, colorMax) { const name = d.properties.name; const value = d.properties.potential; if (value == null || isNaN(value)) { tooltip.html(` ${name}
No data `) // .style("left", event.pageX + 10 + "px") // .style("top", event.pageY + 10 + "px") .style("opacity", 1); return; } const formattedVal = Math.abs(value) / 1e3; const stringVal = formattedVal < 0.1 ? d3.format(",.2f")(formattedVal) : formattedVal < 1 ? d3.format(",.1f")(formattedVal) : d3.format(",.0f")(formattedVal); const potentialTextSpan = ` ${value < 0 ? "below potential" : value > 0 ? "above expectations": "as expected"} `; const agreements = ["GPT", "LDCT", "FIPA"]; const agreementCells = agreements.map(a => `${a}` ).join(""); tooltip.html(` ${name}
Trading ${potentialTextSpan}
by CA$ ${stringVal} M

Trade agreements with Canada:
${agreementCells}

`) .style("left", event.pageX + 10 + "px") .style("top", event.pageY + 10 + "px") .style("opacity", 1); }35:[{"id":"9e7eb467a493bd756d84da1169ffd90bf945e30b9f24040ffebc8cc2606ef91feaf8db0cdae5c4d665781856d59157854a4b539f59d918af0cd5b78c88c2ed06","href":"https://static.observableusercontent.com/files/9e7eb467a493bd756d84da1169ffd90bf945e30b9f24040ffebc8cc2606ef91feaf8db0cdae5c4d665781856d59157854a4b539f59d918af0cd5b78c88c2ed06","name":"canada_africa_potential_trade_by_country@7.csv","type":"text/csv","lastModified":1747834623955.28,"size":41152},{"id":"39682d2b630bb36663f126e71692c33dc751c87ed491aee2702340f4ac85b5d980ddfdc42ee9c4c42d38387cc59f8690da7b2c132b2f398ef85886950c4e9df3","href":"https://static.observableusercontent.com/files/39682d2b630bb36663f126e71692c33dc751c87ed491aee2702340f4ac85b5d980ddfdc42ee9c4c42d38387cc59f8690da7b2c132b2f398ef85886950c4e9df3","name":"canada_africa_potential_trade_by_country@8.csv","type":"text/csv","lastModified":1747834677741.128,"size":35108},{"id":"d16dd175ea70d98be11b7dd8138dd0ac40c654910d9e7c674d49da71ce8234904d656235577a48007a0f88f2297705261c0f9d8baf89359a30d28ed4308db24f","href":"https://static.observableusercontent.com/files/d16dd175ea70d98be11b7dd8138dd0ac40c654910d9e7c674d49da71ce8234904d656235577a48007a0f88f2297705261c0f9d8baf89359a30d28ed4308db24f","name":"canada_africa_potential_trade_by_country@9.csv","type":"text/csv","lastModified":1747835082695.664,"size":35472},{"id":"b618ad1ea85857c4e2bf2f3fcd1121ade112a91f811ae674d47cc761dc18609d42981ec66608a3bde5d0ef4d57ffac90b761436a3ca9478bf5da61bf16ec62eb","href":"https://static.observableusercontent.com/files/b618ad1ea85857c4e2bf2f3fcd1121ade112a91f811ae674d47cc761dc18609d42981ec66608a3bde5d0ef4d57ffac90b761436a3ca9478bf5da61bf16ec62eb","name":"ONE-logo-black.png","type":"image/png","lastModified":1747926899985.206,"size":13590},{"id":"195aeef94136fcf56c06339f7be3750bb00e5eeefb54dbac70c15427c7be19e34d5b313cac6c2b3c4084efc0330a0e34c8c26d74be050d8bad2aa8c5086caa0a","href":"https://static.observableusercontent.com/files/195aeef94136fcf56c06339f7be3750bb00e5eeefb54dbac70c15427c7be19e34d5b313cac6c2b3c4084efc0330a0e34c8c26d74be050d8bad2aa8c5086caa0a","name":"canada_africa_trade_agreements@2.csv","type":"text/csv","lastModified":1747583112653.528,"size":1362},{"id":"50e4b60837c01b69845cc8ed6e8eefa17d24956191901c65635372d82f6b7436c0665c3651705d04928b6ac3585c12e7cdcb1d52ed7d600ffcdad4b3300ef966","href":"https://static.observableusercontent.com/files/50e4b60837c01b69845cc8ed6e8eefa17d24956191901c65635372d82f6b7436c0665c3651705d04928b6ac3585c12e7cdcb1d52ed7d600ffcdad4b3300ef966","name":"africa_hexmap_no_territories.geojson","type":"application/geo+json","lastModified":1747760386352.336,"size":46639}] 2f:{"id":"62e0db367aff829c","slug":"canada-africa-missing-trade","title":"Canada's Missing Trade Potential","thumbnail":"7d3135d20c91152e154fdd6aabf14578ce3db3b9af43aa5f3f1ab5d59a4332b3","access_level":"public","create_time":"$D2025-05-16T13:20:07.105Z","update_time":"$D2025-10-06T09:44:03.856Z","view_time":null,"first_public_time":"$D2025-05-20T10:34:13.934Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024"},"version":844,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc783bf047a346db","login":"miguel-haro-ruiz","name":"Miguel Haro Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/a05630d527f8c49488aed0cc618a6759454b27822ae9ac043347ad70ad5dda89","tier":null}],"members":[{"type":"individual","id":"fc783bf047a346db","login":"miguel-haro-ruiz","name":"Miguel Haro Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/a05630d527f8c49488aed0cc618a6759454b27822ae9ac043347ad70ad5dda89","tier":null,"role":"editor"},{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Canada's Missing Trade Potential","cells":[{"id":731,"value":"# Canada's Missing Trade Potential ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":650,"value":"viewof selectedFlow = Inputs.select(\n [...new Set(potentialData.map(d => d.flow))],\n { label: \"Trade flow:\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"viewof selectedCategory = Inputs.select(\n [\"Manufactured + Agri-foods\", \"Manufactured goods\", \"Agri-food products\"],\n { \n label: \"Traded category:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"viewof selectedYear = Inputs.radio(\n new Map([\n [\"2024\", 2024],\n [\"2030\", 2030]\n ]),\n { label: \"Year:\" ,\n value: 2030\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"

Horizontal lines indicate trade agreements with Canada (GPT, LDCT, or FIPA)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":745,"value":"$32","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":" // Filter input data by user selections\nfilteredData = potentialData.filter(d =>\n d.flow === selectedFlow && d.category === selectedCategory\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"allValues = filteredData\n .map((d) => +d[`potential_${selectedYear}`])\n .filter((v) => !isNaN(v))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"absMax = d3.max(allValues, (d) => Math.abs(d)) || 1 // fallback to 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"hexmap = await FileAttachment(\"africa_hexmap_no_territories.geojson\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"tradeData = await FileAttachment(\"canada_africa_trade_agreements@2.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"potentialData = await FileAttachment(\"canada_africa_potential_trade_by_country@9.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"Math.min(width, 600)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":740,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"