// Create the trade deals chart with watermark and improved label positioning viewof tradeDealsChart = { // Function to determine width based on container size const getResponsiveWidth = () => { // Get the container width (default to 800 if not available) const containerWidth = width || 800; return Math.min(containerWidth, 800); // Cap at 800px max }; // Calculate responsive dimensions const chartWidth = getResponsiveWidth(); const chartHeight = chartWidth * 0.625; // Maintain aspect ratio (500/800 = 0.625) // Adjust font sizes based on width const titleSize = chartWidth < 500 ? 14 : 16; const subtitleSize = chartWidth < 500 ? 12 : 14; const labelSize = chartWidth < 500 ? 10 : 12; // Adjust margins for smaller screens const rightMargin = chartWidth < 500 ? 80 : 120; const leftMargin = chartWidth < 500 ? 40 : 60; const bottomMargin = chartWidth < 500 ? 30 : 40; const topMargin = chartWidth < 500 ? 30 : 40; // Adjust tick count for smaller screens const tickCount = chartWidth < 500 ? 4 : 8; // Create the basic chart using Plot const chart = Plot.plot({ title: "US Trade Deal Probabilities", subtitle: "Comparing US-China and US-EU trade deal predictions before June 2025", width: chartWidth, height: chartHeight, style: { fontSize: labelSize, ".plot-title": { fontSize: titleSize + "px" }, ".plot-subtitle": { fontSize: subtitleSize + "px" } }, x: { label: "Date", tickFormat: "%b %d", tickCount: tickCount, grid: true }, y: { label: "Probability (%)", domain: [0, 100], grid: true }, // Use responsive margins marginRight: rightMargin, marginLeft: leftMargin, marginBottom: bottomMargin, marginTop: topMargin, marks: [ Plot.ruleY([0, 25, 50, 75, 100], { stroke: "#ccc", strokeDasharray: "3,3" }), // Lines Plot.line(processedHistory, { x: "date", y: "US-China", stroke: "red", strokeWidth: chartWidth < 500 ? 1.5 : 2 }), Plot.line(processedHistory, { x: "date", y: "US-EU", stroke: "blue", strokeWidth: chartWidth < 500 ? 1.5 : 2 }), // Dots with adaptive frequency Plot.dot( processedHistory.filter( (d, i) => i % (chartWidth < 500 ? 14 : 7) === 0 ), { x: "date", y: "US-China", fill: "red", r: chartWidth < 500 ? 2 : 3, opacity: 0.7 } ), Plot.dot( processedHistory.filter( (d, i) => i % (chartWidth < 500 ? 14 : 7) === 0 ), { x: "date", y: "US-EU", fill: "blue", r: chartWidth < 500 ? 2 : 3, opacity: 0.7 } ), // End labels - only show on larger screens ...(chartWidth >= 500 ? [ Plot.text( processedHistory.filter( (d, i) => i === processedHistory.length - 1 ), { x: "date", y: "US-China", text: (d) => `${d["US-China"]?.toFixed(1)}%`, dx: chartWidth < 600 ? 30 : 50, fill: "red", fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ), Plot.text( processedHistory.filter( (d, i) => i === processedHistory.length - 1 ), { x: "date", y: "US-EU", text: (d) => `${d["US-EU"]?.toFixed(1)}%`, dx: chartWidth < 600 ? 30 : 50, fill: "blue", fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ) ] : []) ] }); // Calculate legend position based on chart size const legendTop = chartWidth < 500 ? 50 : 70; const legendLeft = chartWidth < 500 ? 70 : 130; const legendFontSize = chartWidth < 500 ? 10 : 12; // Calculate watermark position and size const watermarkTop = chartHeight / 2 + topMargin; const watermarkLeft = chartWidth / 2; const watermarkSize = chartWidth < 500 ? 30 : 60; // Create the container with legend and watermark const container = html`

${chart}

US-China Trade Deal

US-EU Trade Deal

ADJACENT

`; // Add resize event listener to make the chart responsive to window resizing container.value = chart; // Create a resize observer to update chart on container size changes if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { // Get the container's new width const containerWidth = entries[0].contentRect.width; // Only redraw if width has changed significantly if (Math.abs(containerWidth - chartWidth) > 20) { // This will trigger a redraw with the new container width invalidation.then(() => observer.disconnect()); return container; } }); // Start observing the container observer.observe(container); } return container; }