`; } function drawScatterPlot(data) { d3.select("#scatterPlotContainer svg").remove(); // Clear previous plot const containerWidth = scatterPlotContainer.clientWidth; const containerHeight = 350; // Fixed height for simplicity const margin = { top: 40, right: 30, bottom: 50, left: 60 }; const width = containerWidth - margin.left - margin.right; const height = containerHeight - margin.top - margin.bottom; if (width <=0 || height <=0) { // Ensure dimensions are positive scatterPlotContainer.innerHTML = "

Chart cannot be drawn due to insufficient space.

"; return; } scatterPlotContainer.innerHTML = ""; // Clear any error message const svg = d3.select("#scatterPlotContainer") .append("svg") .attr("width", containerWidth) .attr("height", containerHeight) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Find data ranges, add padding const xDomain = d3.extent(data, d => d.gdp); const yDomain = d3.extent(data, d => d.stock); const xPadding = (xDomain[1] - xDomain[0]) * 0.1 || 1; // Ensure some padding if all values are same const yPadding = (yDomain[1] - yDomain[0]) * 0.1 || 1; const xScale = d3.scaleLinear() .domain([xDomain[0] - xPadding, xDomain[1] + xPadding]) .range([0, width]); const yScale = d3.scaleLinear() .domain([yDomain[0] - yPadding, yDomain[1] + yPadding]) .range([height, 0]); // Add X axis svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale)); svg.append("text") .attr("class", "axis-label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height + margin.bottom - 10) .text("GDP Growth Rate (%)"); // Add Y axis svg.append("g") .call(d3.axisLeft(yScale)); svg.append("text") .attr("class", "axis-label") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -margin.left + 20) .text("Stock Market Index Return (%)"); // Chart Title svg.append("text") .attr("class", "chart-title") .attr("x", width / 2) .attr("y", -margin.top / 2 - 5) .text(`GDP Growth vs. Stock Market Returns`); // Add dots svg.append('g') .selectAll("dot") .data(data) .enter() .append("circle") .attr("cx", d => xScale(d.gdp)) .attr("cy", d => yScale(d.stock)) .attr("r", 4.5) .style("fill", "#3b82f6") .style("opacity", 0.7) .append("title") // Tooltip on hover .text(d => `GDP: ${d.gdp.toFixed(1)}%\nStock: ${d.stock.toFixed(1)}%`); } backToInputsBtn.addEventListener('click', () => { hideMessage(); switchTab('inputsPanel'); }); downloadAnalysisPdfBtn.addEventListener('click', () => { if (Object.keys(currentAnalysis).length === 0) { showMessage("No analysis to download. Please calculate first.", "info"); return; } hideMessage(); if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined') { showMessage("Error: PDF library (jsPDF) could not be loaded.", "error"); return; } const { jsPDF: JSPDFConstructor } = window.jspdf; const doc = new JSPDFConstructor({ orientation: 'p', unit: 'pt', format: 'a4' }); if (typeof doc.autoTable !== 'function') { showMessage("Error: PDF generation failed (autoTable function not available).", "error"); return; } const title = "GDP Growth & Stock Market Correlation Analysis"; const countryText = currentInputs.countryName ? ` for ${currentInputs.countryName}` : ""; const periodText = currentInputs.timePeriod ? ` (${currentInputs.timePeriod})` : ""; const timestamp = `Generated: ${new Date().toLocaleString()}`; const pageWidth = doc.internal.pageSize.getWidth(); const margin = 40; let startY = margin; doc.setFontSize(16); doc.text(title + countryText + periodText, pageWidth / 2, startY, { align: 'center' }); startY += 18; doc.setFontSize(10); doc.text(timestamp, pageWidth / 2, startY, { align: 'center' }); startY += 25; // Input Data Section doc.setFontSize(12); doc.setFont(undefined, 'bold'); doc.text("Input Data Series", margin, startY); startY += 15; const tableData = currentAnalysis.pairedData.map(d => [d.gdp.toFixed(2), d.stock.toFixed(2)]); doc.autoTable({ head: [['GDP Growth (%)', 'Stock Market Return (%)']], body: tableData, startY: startY, theme: 'striped', styles: { fontSize: 9, cellPadding: 4 }, headStyles: { fillColor: [74, 85, 104] } // Tailwind gray-700 like }); startY = doc.lastAutoTable.finalY + 20; // Analysis Results Section doc.setFontSize(12); doc.setFont(undefined, 'bold'); doc.text("Analysis Results", margin, startY); startY += 15; doc.setFont(undefined, 'normal'); doc.setFontSize(10); doc.text(`Pearson Correlation Coefficient (r): ${currentAnalysis.correlationCoefficient}`, margin, startY); startY += 15; const interpretationLines = doc.splitTextToSize(`Interpretation: ${currentAnalysis.interpretation}`, pageWidth - (2 * margin)); doc.text(interpretationLines, margin, startY); startY += interpretationLines.length * 12 + 10; // Disclaimer doc.setFontSize(8); doc.setFont(undefined, 'italic'); const disclaimer = "Disclaimer: This analysis is based on the provided data and calculates the Pearson correlation coefficient, which measures linear association. Correlation does not imply causation. Other economic factors can influence both GDP and stock markets. This tool is for informational purposes only and not financial advice."; const splitDisclaimer = doc.splitTextToSize(disclaimer, pageWidth - (2 * margin)); doc.text(splitDisclaimer, margin, startY); try { doc.save(`GDP_StockMarket_Correlation_${currentInputs.countryName.replace(/\s+/g, '_') || 'Analysis'}.pdf`); showMessage("PDF download initiated.", "success"); } catch (e) { console.error("Error during PDF generation or save: ", e); showMessage("Failed to generate or save PDF. See console for details.", "error"); } }); const initialActiveTab = document.querySelector('.tab-nav-item.active'); if (initialActiveTab) { const initialTabContentId = initialActiveTab.dataset.tab; const initialTabContent = document.getElementById(initialTabContentId); if (initialTabContent) initialTabContent.classList.add('active'); } else if (tabNavItems.length > 0 && tabContents.length > 0) { tabNavItems[0].classList.add('active'); const firstTabId = tabNavItems[0].dataset.tab; const firstContent = document.getElementById(firstTabId); if (firstContent) firstContent.classList.add('active'); } });