viewof transportchart = { const context = DOM.context2d(width, height); const path = d3.geoPath(projection).context(context); const graticule = d3.geoGraticule(); const canvas = context.canvas; canvas.style.position = "absolute"; canvas.style.top = "0"; canvas.style.left = "0"; // Create offscreen canvas for legend (render once) const legendCanvas = document.createElement('canvas'); const legendCtx = legendCanvas.getContext('2d'); legendCanvas.width = 250; legendCanvas.height = 80; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("top", "0") .style("left", "0") .style("pointer-events", "none"); const tooltip = svg.append("g").style("display", "none"); const tooltipPath = tooltip.append("path").attr("fill", "white").attr("stroke", "black"); const tooltipText = tooltip.append("text").attr("font-size", 12).attr("font-family", "sans-serif"); const comparisonGroup = svg.append("g") .attr("class", "comparison-text") .attr("transform", `translate(10, 12)`); const comparisonText = comparisonGroup.append("text") .attr("text-anchor", "start") .attr("font-size", "15px") .attr("font-family", "sans-serif") .attr("font-weight", "bold"); const colorRange = ["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]; const colorScale = d3.scaleQuantile() .domain(Array.from(cost.values())) .range(colorRange); const thresholds = colorScale.quantiles(); let hoveredCountry = null; let isDragging = false; function formatValue(value) { return "$" + value.toFixed(2); } // Draw legend once to offscreen canvas function drawLegend() { const legendX = 10; const legendY = 35; const boxWidth = 40; const boxHeight = 12; const separatorHeight = 20; const titlePadding = 10; const labelPadding = 15; const legendTop = legendY + titlePadding; legendCtx.clearRect(0, 0, legendCanvas.width, legendCanvas.height); legendCtx.font = "bold 10px sans-serif"; legendCtx.fillStyle = "black"; legendCtx.fillText("Cost of transport per kg", legendX, legendY); for (let i = 0; i < colorRange.length; i++) { const x = legendX + i * boxWidth; legendCtx.fillStyle = colorRange[i]; legendCtx.fillRect(x, legendTop, boxWidth, boxHeight); } legendCtx.strokeStyle = "black"; legendCtx.lineWidth = 0.5; for (let i = 1; i < colorRange.length; i++) { const x = legendX + i * boxWidth; legendCtx.beginPath(); legendCtx.moveTo(x, legendTop - (separatorHeight - boxHeight) / 2); legendCtx.lineTo(x, legendTop + boxHeight + (separatorHeight - boxHeight) / 2); legendCtx.stroke(); } legendCtx.font = "normal 10px sans-serif"; legendCtx.fillStyle = "black"; for (let i = 0; i < thresholds.length; i++) { const label = formatValue(thresholds[i]); const labelX = legendX + (i + 1) * boxWidth; const offsetX = legendCtx.measureText(label).width / 2; legendCtx.fillText(label, labelX - offsetX, legendTop + boxHeight + labelPadding); } const lastThreshold = thresholds[thresholds.length - 1]; const lastLabel = ">" + formatValue(lastThreshold); const finalX = legendX + colorRange.length * boxWidth; const finalOffset = legendCtx.measureText(lastLabel).width / 2; legendCtx.fillText(lastLabel, finalX - finalOffset, legendTop + boxHeight + labelPadding); } function render() { context.clearRect(0, 0, width, height); context.lineWidth = 0.75; context.beginPath(); path(sphere); context.fillStyle = "#fff"; context.fill(); context.beginPath(); path(graticule()); context.strokeStyle = "#E8E8E8"; context.stroke(); // Draw countries const pathCtx = context; for (let i = 0; i < countries.length; i++) { const d = countries[i]; context.beginPath(); path(d); const alpha3 = nameToAlpha3.get(d.properties.name); const hasData = cost.has(alpha3); const isHovered = hoveredCountry === d; context.fillStyle = hasData ? colorScale(cost.get(alpha3)) : "#E8E8E8"; context.fill(); if (hasData && isHovered) { context.lineWidth = 1; context.strokeStyle = "black"; context.stroke(); context.lineWidth = 0.75; } } context.beginPath(); path(sphere); context.strokeStyle = "#E8E8E8"; context.stroke(); // Draw legend from offscreen canvas context.drawImage(legendCanvas, 0, 0); } function handlePointer(event) { if (isDragging) return; // Skip hover during drag const [x, y] = d3.pointer(event); const legendLeft = 10; const legendTopY = 70; const legendRight = legendLeft + colorRange.length * 40; const legendBottom = legendTopY + 12 + 20; if (x >= legendLeft && x <= legendRight && y >= legendTopY && y <= legendBottom) { tooltip.style("display", "none"); hoveredCountry = null; comparisonText.text(""); render(); return; } const geo = projection.invert([x, y]); const feature = countries.find(d => d3.geoContains(d, geo)); if (feature) { const name = feature.properties.name; const alpha3 = nameToAlpha3.get(name); const val = cost.get(alpha3); const usVal = cost.get("USA"); let transportMode = mode.get(alpha3); if (transportMode) transportMode = transportMode.toLowerCase(); hoveredCountry = feature; if (val != null && transportMode != null) { tooltip.style("display", null); tooltip.attr("transform", `translate(${x},${y})`); tooltipText.selectAll("tspan").remove(); const valueText = `${formatValue(val)}/kg`; const nameText = name; const fullLine = `It costs ${valueText} to transport ${selectedname.toLowerCase()} to ${nameText} via ${transportMode}, the most frequently used mode for this trade route.`; const wrappedLines = wrapText([fullLine], 200, tooltipText); wrappedLines.forEach((line, i) => { tooltipText.append("tspan") .attr("x", 0) .attr("y", `${(i + 1) * 1.4}em`) .text(line); }); const { x: tx, y: ty, width: w, height: h } = tooltipText.node().getBBox(); tooltipText.attr("transform", `translate(${-w / 2},${15 - ty})`); tooltipPath.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } else { tooltip.style("display", "none"); } if (val != null && usVal != null && alpha3 !== "USA") { const diff = val - usVal; if (diff === 0) { comparisonText.html(`Transport cost to ${name} is the same as to the U.S.`); } else { const diffText = diff > 0 ? `is ${formatValue(Math.abs(diff))}/kg more` : `is ${formatValue(Math.abs(diff))}/kg less`; comparisonText.html(`Transport cost to ${name} ${diffText} than to the U.S.`); } } else { comparisonText.text(""); } } else { hoveredCountry = null; tooltip.style("display", "none"); comparisonText.text(""); } render(); } function wrapText(lines, maxWidth, tooltipText) { const wrapped = []; const tempText = tooltipText.append("tspan") .style("visibility", "hidden") .attr("x", -9999) .attr("y", -9999); lines.forEach(line => { let words = line.split(" "); let currentLine = ""; for (let word of words) { const testLine = currentLine + word + " "; tempText.text(testLine); const width = tempText.node().getComputedTextLength(); if (width > maxWidth && currentLine !== "") { wrapped.push(currentLine.trim()); currentLine = word + " "; } else { currentLine = testLine; } } if (currentLine) wrapped.push(currentLine.trim()); }); tempText.remove(); return wrapped; } const wrapper = d3.create("div") .style("position", "relative") .style("width", `${width}px`) .style("height", `${height}px`); // Optimized drag behavior const dragBehavior = d3.drag() .on("start", function() { isDragging = true; tooltip.style("display", "none"); comparisonText.text(""); }) .on("drag", function(event) { const rotate = projection.rotate(); const k = 75 / projection.scale(); projection.rotate([rotate[0] + event.dx * k, rotate[1] - event.dy * k]); render(); }) .on("end", function() { isDragging = false; }); d3.select(canvas) .on("pointermove", handlePointer) .on("pointerleave", () => { tooltip.style("display", "none"); hoveredCountry = null; comparisonText.text(""); render(); }) .call(dragBehavior); // Draw legend once at initialization drawLegend(); render(); wrapper.node().appendChild(canvas); wrapper.node().appendChild(svg.node()); return wrapper.node(); }