// Create the India Conflict Risk Index Chart viewof indiaConflictRiskChart = { // 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: "India Conflict Weighted Risk Index", subtitle: "Based on weighted prediction markets for India-Pakistan and India-China conflicts", 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: "Risk Index (%)", 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" }), // Line for the index - thinner on mobile Plot.line(indiaConflictRiskIndex, { x: "date", y: "indexValue", stroke: "#E63946", // Red color for the index strokeWidth: chartWidth < 500 ? 2 : 3 }), // Dots for the index - smaller on mobile and fewer Plot.dot( indiaConflictRiskIndex.filter( (d, i) => i % (chartWidth < 500 ? 10 : 5) === 0 ), { x: "date", y: "indexValue", fill: "#E63946", r: chartWidth < 500 ? 3 : 4, opacity: 0.8 } ), // End label for the index - only on larger screens ...(chartWidth >= 500 ? [ Plot.text( indiaConflictRiskIndex.filter( (d, i) => i === indiaConflictRiskIndex.length - 1 ), { x: "date", y: "indexValue", text: (d) => `${d.indexValue.toFixed(1)}%`, dx: chartWidth < 600 ? 30 : 50, fill: "#E63946", fontWeight: "bold", fontSize: chartWidth < 600 ? 12 : 14 } ) ] : []) ] }); // Determine legend font size const legendFontSize = chartWidth < 500 ? 11 : 10.5; // Calculate watermark position and size const watermarkTop = chartHeight / 2 + topMargin; const watermarkLeft = chartWidth / 2; const watermarkSize = chartWidth < 500 ? 30 : 60; // Create a container for the chart const chartContainer = html`

${chart}

ADJACENT

`; // Create legend items HTML for consistency with other charts const legendItemsHTML = `

India Conflict Risk Index

`; // Add legend to the chart if (chartWidth < 500) { // Mobile: Create a wrapper that includes both chart and legend below it const wrapper = html`

${chartContainer}

${html([legendItemsHTML])}

`; wrapper.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return wrapper; } }); observer.observe(wrapper); } return wrapper; } else { // Desktop: Add legend as an overlay const legendElement = html`

${html([legendItemsHTML])}

`; chartContainer.appendChild(legendElement); chartContainer.value = chart; // Create a resize observer if (typeof ResizeObserver !== "undefined") { const observer = new ResizeObserver((entries) => { const containerWidth = entries[0].contentRect.width; if (Math.abs(containerWidth - chartWidth) > 20) { invalidation.then(() => observer.disconnect()); return chartContainer; } }); observer.observe(chartContainer); } return chartContainer; } }