// Create the recession prediction chart with watermark and improved label positioning viewof recessionPredictionChart2 = { // 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: "Is a U.S. recession coming?", subtitle: "Based on prediction markets for negative GDP growth in 2025, 5% GDP contraction, & US recession in '25'", 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" }), // Dynamically generate lines for each market ...marketNames2.map((marketName, index) => { const colors = ["red", "blue", "green"]; return Plot.line(processedData2, { x: "date", y: marketName, stroke: colors[index % colors.length], strokeWidth: chartWidth < 500 ? 1.5 : 2 }); }), // Dynamically generate dots for each market (show fewer dots on small screens) ...marketNames2.map((marketName, index) => { const colors = ["red", "blue", "green"]; const dotFrequency = chartWidth < 500 ? 14 : 7; // Show fewer dots on small screens return Plot.dot( processedData2.filter((d, i) => i % dotFrequency === 0), { x: "date", y: marketName, fill: colors[index % colors.length], r: chartWidth < 500 ? 2 : 3, opacity: 0.7 } ); }), // Dynamically generate end labels for each market ...marketNames2.map((marketName, index) => { const colors = ["red", "blue", "green"]; // Only show end labels if screen is wide enough if (chartWidth >= 500) { return Plot.text( processedData2.filter((d, i) => i === processedData2.length - 1), { x: "date", y: marketName, text: (d) => `${d[marketName]?.toFixed(1)}%`, dx: 50, fill: colors[index % colors.length], fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ); } else { return Plot.text([]); // Empty plot for small screens } }) ] }); // 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}

${marketNames2.map((name, index) => { const colors = ["red", "blue", "green"]; // Remove the question mark from the display name const displayName = name.replace("?", "") + " 2025"; return html`

${displayName}

`; })}

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; }