29:null 2a:["$","title",null,{"children":"US-EU and US-China Trade Deals | Adjacent | Observable"}] 2f:Tb60,// Fetch price history with explicit today's timestamp fetchPolymarketHistory = async function() { try { // Use both interval and endTs to ensure we get the most recent data const interval = "max"; const endTs = Date.now(); // Current timestamp in milliseconds console.log("Fetching price history with interval:", interval); console.log("End timestamp (now):", new Date(endTs).toISOString()); // Include explicit endTs in the URL const euUrl = `https://clob.polymarket.com/prices-history?market=${euAssetId}&interval=${interval}`; const chinaUrl = `https://clob.polymarket.com/prices-history?market=${chinaAssetId}&interval=${interval}`; console.log("EU URL:", euUrl); console.log("China URL:", chinaUrl); // Add Content-Type header const options = { headers: { "Content-Type": "application/json", "Cache-Control": "no-cache" // Try to avoid cached responses } }; // Fetch EU market history const euResponse = await fetch(euUrl, options); console.log("EU response status:", euResponse.status); const euPriceHistory = await euResponse.json(); // Fetch China market history const chinaResponse = await fetch(chinaUrl, options); console.log("China response status:", chinaResponse.status); const chinaPriceHistory = await chinaResponse.json(); // Log the number of price points and date range console.log("EU Price History points:", euPriceHistory.history?.length || 0); console.log("China Price History points:", chinaPriceHistory.history?.length || 0); // If we have data, log more detailed timestamp information if (euPriceHistory.history && euPriceHistory.history.length > 0) { const sortedHistory = [...euPriceHistory.history].sort((a, b) => a.t - b.t); const firstPoint = sortedHistory[0]; const lastPoint = sortedHistory[sortedHistory.length - 1]; console.log("EU first point:", new Date(firstPoint.t * 1000).toISOString(), firstPoint.p); console.log("EU last point:", new Date(lastPoint.t * 1000).toISOString(), lastPoint.p); console.log("Seconds ago of last point:", Math.floor((Date.now() - lastPoint.t * 1000) / 1000)); } if (chinaPriceHistory.history && chinaPriceHistory.history.length > 0) { const sortedHistory = [...chinaPriceHistory.history].sort((a, b) => a.t - b.t); const lastPoint = sortedHistory[sortedHistory.length - 1]; console.log("China last point:", new Date(lastPoint.t * 1000).toISOString(), lastPoint.p); console.log("Seconds ago of last point:", Math.floor((Date.now() - lastPoint.t * 1000) / 1000)); } return { euHistory: euPriceHistory, chinaHistory: chinaPriceHistory }; } catch (error) { console.error("Error fetching Polymarket history:", error); return { error: error.message }; } }30:T1861,// Process the price history to get one data point per day including today processedHistory = { // Wait for the price history to load const data = await polymarketHistory; // Check if we got valid history data const euHistory = data?.euHistory?.history || []; const chinaHistory = data?.chinaHistory?.history || []; console.log(`Processing ${euHistory.length} EU prices and ${chinaHistory.length} China prices`); // Group prices by day and get the closing price for each day function getDailyClosingPrices(pricePoints) { // Group by day const pricesByDay = {}; pricePoints.forEach(point => { // Convert timestamp to date (assuming timestamp is in seconds) const date = new Date(point.t * 1000); // Create a key that is timezone consistent const dayKey = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`; if (!pricesByDay[dayKey]) { pricesByDay[dayKey] = []; } pricesByDay[dayKey].push({ timestamp: point.t, price: point.p }); }); // For each day, get the closing price (last price of the day) return Object.entries(pricesByDay).map(([day, prices]) => { // Sort by timestamp (latest last) const sortedPrices = prices.sort((a, b) => a.timestamp - b.timestamp); // Take the latest price of the day const latestPrice = sortedPrices[sortedPrices.length - 1]; // Create a date with no time component for consistent comparisons const [year, month, dayNum] = day.split('-').map(Number); const dateObj = new Date(Date.UTC(year, month - 1, dayNum)); return { date: dateObj, price: latestPrice.price }; }); } // Get daily closing prices const euDailyPrices = getDailyClosingPrices(euHistory); const chinaDailyPrices = getDailyClosingPrices(chinaHistory); console.log("EU daily data points:", euDailyPrices.length); console.log("China daily data points:", chinaDailyPrices.length); // Sort by date euDailyPrices.sort((a, b) => a.date - b.date); chinaDailyPrices.sort((a, b) => a.date - b.date); // Log the range of dates in the data if (euDailyPrices.length > 0) { console.log("EU date range:", euDailyPrices[0].date.toISOString().split('T')[0], "to", euDailyPrices[euDailyPrices.length - 1].date.toISOString().split('T')[0]); } if (chinaDailyPrices.length > 0) { console.log("China date range:", chinaDailyPrices[0].date.toISOString().split('T')[0], "to", chinaDailyPrices[chinaDailyPrices.length - 1].date.toISOString().split('T')[0]); } // Ensure today's date is in UTC to match our other dates const today = new Date(); const todayUTC = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate())); console.log("Today (UTC):", todayUTC.toISOString().split('T')[0]); // Market creation dates - convert to UTC dates with no time component const euCreatedAt = new Date(Date.UTC(2025, 3, 10)); // 2025-04-10 const chinaCreatedAt = new Date(Date.UTC(2025, 3, 8)); // 2025-04-08 // Generate a complete date range from the earliest market creation to today const startDate = new Date(Math.min(euCreatedAt.getTime(), chinaCreatedAt.getTime())); // Create all days in the range const allDates = []; const currentDate = new Date(startDate); while (currentDate <= todayUTC) { const dateStr = currentDate.toISOString().split('T')[0]; allDates.push(dateStr); // Move to next day currentDate.setUTCDate(currentDate.getUTCDate() + 1); } console.log("Date range:", allDates[0], "to", allDates[allDates.length - 1]); console.log("Total days:", allDates.length); // Create lookup maps for efficient access const euPriceMap = new Map(); euDailyPrices.forEach(day => { const dateStr = day.date.toISOString().split('T')[0]; euPriceMap.set(dateStr, day.price); }); const chinaPriceMap = new Map(); chinaDailyPrices.forEach(day => { const dateStr = day.date.toISOString().split('T')[0]; chinaPriceMap.set(dateStr, day.price); }); // If we don't have prices for every day, carry forward the previous day's price function fillInMissingPrices(priceMap, startDate) { const result = new Map(priceMap); const dates = Array.from(priceMap.keys()).sort(); // If we have no prices at all, return the empty map if (dates.length === 0) { return result; } // Start with the first available price let lastPrice = priceMap.get(dates[0]); // For each day from start date to today const currentDate = new Date(startDate); while (currentDate <= todayUTC) { const dateStr = currentDate.toISOString().split('T')[0]; // If we have a price for this day, update lastPrice if (priceMap.has(dateStr)) { lastPrice = priceMap.get(dateStr); } // Otherwise, use the last known price if after the first date with data else if (dates.length > 0 && currentDate >= new Date(dates[0])) { result.set(dateStr, lastPrice); } // Move to the next day currentDate.setUTCDate(currentDate.getUTCDate() + 1); } return result; } // Fill in missing prices by carrying forward the last known price const filledEuPriceMap = fillInMissingPrices(euPriceMap, euCreatedAt); const filledChinaPriceMap = fillInMissingPrices(chinaPriceMap, chinaCreatedAt); // Create the final dataset with daily intervals const result = allDates.map(dateStr => { const date = new Date(dateStr); return { date: date, "US-EU": date >= euCreatedAt ? filledEuPriceMap.get(dateStr) * 100 || null : null, "US-China": date >= chinaCreatedAt ? filledChinaPriceMap.get(dateStr) * 100 || null : null }; }); console.log(`Created ${result.length} processed data points`); if (result.length > 0) { console.log("First data point:", result[0]); console.log("Last data point:", result[result.length - 1]); } return result; }31:T1851,// 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; }32:[] 2d:{"id":"338378ab37aacd99","slug":null,"title":"US-EU and US-China Trade Deals","thumbnail":"3a9db74cd74cc7a14e63b244fb634d98b033411bd6fd655f89dd0a731b0fc81b","access_level":"public","create_time":"$D2025-04-28T13:55:05.042Z","update_time":"$D2025-05-01T17:58:56.562Z","view_time":null,"first_public_time":"$D2025-04-28T19:49:22.254Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"59b2aaa9189b56d4","login":"adjacent","name":"Adjacent","avatar_url":"https://avatars-next.observableusercontent.com/e34bfda26f2a3e11bf04364a685b422fda7ad5630974dadb7c20559fdf8ea883","tier":"pro_2024"},"version":300,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d75e52b48086387","login":"dougiebuckets","name":"dougiebuckets","avatar_url":"https://avatars-next.observableusercontent.com/d55596be54f2db1cfdf1dd98b171dbdcc2e8c228c20ce7d20d50902a10772d44","tier":null}],"members":[{"type":"team","id":"59b2aaa9189b56d4","login":"adjacent","name":"Adjacent","avatar_url":"https://avatars-next.observableusercontent.com/e34bfda26f2a3e11bf04364a685b422fda7ad5630974dadb7c20559fdf8ea883","tier":"pro_2024","role":"editor"},{"type":"individual","id":"4d75e52b48086387","login":"dougiebuckets","name":"dougiebuckets","avatar_url":"https://avatars-next.observableusercontent.com/d55596be54f2db1cfdf1dd98b171dbdcc2e8c228c20ce7d20d50902a10772d44","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"1b9a0609907383f3","slug":"adjacent-news","title":"Adjacent News","owner":{"id":"59b2aaa9189b56d4","login":"adjacent","name":"Adjacent"}},"type":"notebook","body":{"title":"US-EU and US-China Trade Deals","cells":[{"id":0,"value":"# US-EU and US-China Trade Deals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"The goal of this notebook is to create a visualization that maps out both the probabilities for a \"US-China trade deal before June?\" as well as \"US-EU trade deal before June?\". It will be interesting to track how these markets have moved relative to one another since their inceptions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"euAssetId = \"86486659648553056860637968871113351445154060030558927642935776592245776250803\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"chinaAssetId = \"43574888282240197675710510825990137104478048769278676395877833277398528952511\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"Let's fetch the historical data using the correct endpoint","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"polymarketHistory = fetchPolymarketHistory()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"Now let's get the historical probability data so we can create a visualization to track both markets over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"Lastly, we are going to visualize the data for each market","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"// Import Observable Plot\nPlot = require(\"@observablehq/plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"