import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("oecd-explorer"); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [datasets, setDatasets] = useState([]); const [selectedDataset, setSelectedDataset] = useState(""); const [dimensions, setDimensions] = useState([]); const [filters, setFilters] = useState({}); const [dataResults, setDataResults] = useState(null); const [showAnalysisModal, setShowAnalysisModal] = useState(false); const [streamingAnalysis, setStreamingAnalysis] = useState(""); const [isAnalyzing, setIsAnalyzing] = useState(false); const [featuredInsights, setFeaturedInsights] = useState([]); const [activeTab, setActiveTab] = useState("featured"); const { docs: savedQueries } = useLiveQuery("type", { key: "query" }); const { docs: savedData } = useLiveQuery("type", { key: "data" }); const { docs: savedAnalyses } = useLiveQuery("type", { key: "analysis" }); const { doc: currentQuery, merge: updateCurrentQuery, save: saveCurrentQuery } = useDocument({ type: "query", name: "", datasetId: "", filters: {}, createdAt: Date.now(), }); // Featured datasets with engaging descriptions useEffect(() => { const featuredDatasets = [ { id: "SNA_TABLE1", name: "GDP & Economic Growth", description: "Compare economic performance across major economies", color: "#70d6ff", icon: "📈", featured: true }, { id: "GENDER_EMP", name: "Gender Employment Gap", description: "Explore employment equality across countries", color: "#ff70a6", icon: "👥", featured: true }, { id: "PISA", name: "Global Education Performance", description: "See how countries rank in student achievements", color: "#ff9770", icon: "🎓", featured: true }, { id: "ENV_AIR_GHG", name: "Climate Change Metrics", description: "Track greenhouse gas emissions worldwide", color: "#e9ff70", icon: "🌍", featured: true }, { id: "HEALTH_STAT", name: "Healthcare Outcomes", description: "Compare life expectancy and healthcare quality", color: "#ffd670", icon: "🏥", featured: false }, { id: "INEQUALITY", name: "Income Inequality", description: "Analyze the wealth distribution gap", color: "#70d6ff", icon: "💰", featured: false }, { id: "STLABOUR", name: "Labor Market Trends", description: "Explore employment and unemployment patterns", color: "#ff70a6", icon: "👷", featured: false }, { id: "QNA", name: "Quarterly Growth Trends", description: "Track recent economic performance", color: "#ffd670", icon: "📊", featured: false } ]; setDatasets(featuredDatasets); // Generate featured insights generateFeaturedInsights(); }, []); // Generate interesting insights for the homepage const generateFeaturedInsights = async () => { // These would normally come from API, but we're mocking them const insights = [ { id: "gdp-insight", title: "Post-Pandemic Recovery", dataset: "SNA_TABLE1", icon: "📈", color: "#70d6ff", highlight: "USA leads G7 in growth rates", content: "The United States has shown the strongest post-pandemic recovery among G7 nations with 2.4% GDP growth in 2022, significantly outpacing Japan's 1.1%. This divergence suggests differing policy effectiveness in addressing economic disruption.", date: "Updated June 2023" }, { id: "education-insight", title: "Math Performance Gap", dataset: "PISA", icon: "🎓", color: "#ff9770", highlight: "100+ point difference between top and bottom performers", content: "East Asian countries continue to dominate in mathematics performance with scores 20% higher than the OECD average. Meanwhile, pandemic learning loss has affected approximately 65% of participating countries, widening educational inequalities.", date: "Updated May 2023" }, { id: "gender-insight", title: "Closing Gender Gaps", dataset: "GENDER_EMP", icon: "👥", color: "#ff70a6", highlight: "Nordic countries lead employment equality", content: "Nordic countries maintain the smallest gender employment gaps at under 5%, while the OECD average remains at 12%. Parental leave policies appear to be a significant factor, with countries offering extensive shared parental leave showing more equitable outcomes.", date: "Updated April 2023" }, { id: "climate-insight", title: "Emissions Trends", dataset: "ENV_AIR_GHG", icon: "🌍", color: "#e9ff70", highlight: "Emissions rebounded 5% post-lockdowns", content: "After a significant drop during pandemic lockdowns, greenhouse gas emissions rebounded by 5% in 2021-2022. However, several European economies have maintained lower emissions, demonstrating the potential for economic recovery with reduced environmental impact.", date: "Updated July 2023" } ]; setFeaturedInsights(insights); }; // Set up dimensions when dataset is selected useEffect(() => { if (!selectedDataset) return; setLoading(true); // Mock dimensions based on selected dataset let mockDimensions = []; switch(selectedDataset) { case "SNA_TABLE1": mockDimensions = [ { id: "LOCATION", name: "Country", values: [ { id: "USA", name: "United States" }, { id: "JPN", name: "Japan" }, { id: "DEU", name: "Germany" }, { id: "FRA", name: "France" }, { id: "GBR", name: "United Kingdom" }, { id: "ITA", name: "Italy" }, { id: "CAN", name: "Canada" }, { id: "G7", name: "G7" }, { id: "OECD", name: "OECD - Total" } ] }, { id: "SUBJECT", name: "Subject", values: [ { id: "B1_GE", name: "Gross domestic product (GDP)" }, { id: "P3", name: "Final consumption expenditure" }, { id: "P31S14_S15", name: "Household and NPISH final consumption" } ] }, { id: "MEASURE", name: "Measure", values: [ { id: "V", name: "Value" }, { id: "G", name: "Growth rate" }, { id: "PC_GDP", name: "Percentage of GDP" } ] }, { id: "TIME_PERIOD", name: "Year", values: [ { id: "2023", name: "2023" }, { id: "2022", name: "2022" }, { id: "2021", name: "2021" }, { id: "2020", name: "2020" }, { id: "2019", name: "2019" } ] } ]; break; case "GENDER_EMP": mockDimensions = [ { id: "COUNTRY", name: "Country", values: [ { id: "USA", name: "United States" }, { id: "JPN", name: "Japan" }, { id: "DEU", name: "Germany" }, { id: "FRA", name: "France" }, { id: "GBR", name: "United Kingdom" }, { id: "SWE", name: "Sweden" }, { id: "NOR", name: "Norway" }, { id: "OECD", name: "OECD - Total" } ] }, { id: "GENDER", name: "Gender", values: [ { id: "TOT", name: "Total" }, { id: "MEN", name: "Men" }, { id: "WOMEN", name: "Women" } ] }, { id: "AGE_GROUP", name: "Age Group", values: [ { id: "15_24", name: "15 to 24" }, { id: "25_54", name: "25 to 54" }, { id: "55_64", name: "55 to 64" }, { id: "15_64", name: "15 to 64 (total)" } ] }, { id: "YEAR", name: "Year", values: [ { id: "2023", name: "2023" }, { id: "2022", name: "2022" }, { id: "2021", name: "2021" }, { id: "2020", name: "2020" } ] } ]; break; case "PISA": mockDimensions = [ { id: "COUNTRY", name: "Country", values: [ { id: "USA", name: "United States" }, { id: "JPN", name: "Japan" }, { id: "DEU", name: "Germany" }, { id: "FRA", name: "France" }, { id: "GBR", name: "United Kingdom" }, { id: "FIN", name: "Finland" }, { id: "KOR", name: "Korea" }, { id: "OECD", name: "OECD - Average" } ] }, { id: "SUBJECT", name: "Subject", values: [ { id: "MATH", name: "Mathematics" }, { id: "READ", name: "Reading" }, { id: "SCIE", name: "Science" } ] }, { id: "YEAR", name: "Year", values: [ { id: "2022", name: "2022" }, { id: "2018", name: "2018" }, { id: "2015", name: "2015" } ] } ]; break; default: mockDimensions = [ { id: "COUNTRY", name: "Country", values: [ { id: "USA", name: "United States" }, { id: "JPN", name: "Japan" }, { id: "DEU", name: "Germany" }, { id: "FRA", name: "France" }, { id: "GBR", name: "United Kingdom" }, { id: "OECD", name: "OECD - Total" } ] }, { id: "YEAR", name: "Year", values: [ { id: "2023", name: "2023" }, { id: "2022", name: "2022" }, { id: "2021", name: "2021" }, { id: "2020", name: "2020" }, { id: "2019", name: "2019" } ] } ]; } setDimensions(mockDimensions); // Initialize filters with first value for each dimension const initialFilters = {}; mockDimensions.forEach(dim => { if (dim.values.length > 0) { initialFilters[dim.id] = dim.values[0].id; } }); setFilters(initialFilters); updateCurrentQuery({ datasetId: selectedDataset, filters: initialFilters }); // Auto fetch data when dataset selected setTimeout(() => { setLoading(false); fetchData(); }, 800); }, [selectedDataset]); const fetchData = async () => { if (!selectedDataset || Object.keys(filters).length === 0) return; try { setLoading(true); setError(null); // Generate mock data instead of using the OECD API const mockData = await generateMockData(selectedDataset, filters); setDataResults(mockData); // Save data with current query await database.put({ type: "data", queryId: currentQuery._id, data: mockData, createdAt: Date.now(), filters: {...filters}, datasetId: selectedDataset }); } catch (err) { setError(`Error fetching data: ${err.message}`); } finally { setLoading(false); } }; const generateMockData = async (datasetId, filters) => { // Generate realistic mock data based on the dataset and filters const observations = {}; const dimensionValues = {}; // Create dimension structure based on the selected dataset const datasetDimensions = dimensions.map((dim, index) => { const selectedValue = filters[dim.id]; const selectedValueIndex = dim.values.findIndex(v => v.id === selectedValue); dimensionValues[dim.id] = dim.values.map(v => ({ id: v.id, name: v.name })); return { id: dim.id, name: dim.name, keyPosition: index, values: dim.values.map(v => ({ id: v.id, name: v.name })) }; }); // Generate observations based on dimension combinations let count = 0; // Create realistic data patterns based on dataset const createValue = (datasetId, filters, dimensions, indexes) => { // Get dimension values from indexes const dimValues = {}; dimensions.forEach((dim, i) => { if (indexes[i] !== undefined) { dimValues[dim.id] = dim.values[indexes[i]].id; } }); // Generate realistic values based on dataset and dimensions switch(datasetId) { case "SNA_TABLE1": // GDP values differ by country and measure if (dimValues.MEASURE === "G") { // Growth rates between -3 and 6% if (dimValues.TIME_PERIOD === "2020") { // 2020 pandemic impact - negative growth for most countries return -Math.random() * 3 - 1; } else if (dimValues.TIME_PERIOD === "2021") { // 2021 recovery - strong growth return Math.random() * 5 + 3; } else { // More normal growth rates return Math.random() * 3 + 1; } } else { // Absolute GDP values if (dimValues.LOCATION === "USA") { return Math.random() * 2000 + 20000; } else if (dimValues.LOCATION === "JPN" || dimValues.LOCATION === "DEU") { return Math.random() * 500 + 3500; } else if (dimValues.LOCATION === "G7" || dimValues.LOCATION === "OECD") { return Math.random() * 5000 + 40000; } else { return Math.random() * 300 + 2000; } } case "GENDER_EMP": // Employment rates differ by gender and age group if (dimValues.GENDER === "MEN") { if (dimValues.AGE_GROUP === "15_24") { return Math.random() * 10 + 40; } else if (dimValues.AGE_GROUP === "25_54") { return Math.random() * 5 + 80; } else { return Math.random() * 10 + 65; } } else if (dimValues.GENDER === "WOMEN") { if (dimValues.AGE_GROUP === "15_24") { return Math.random() * 10 + 35; } else if (dimValues.AGE_GROUP === "25_54") { return Math.random() * 15 + 65; } else { return Math.random() * 15 + 55; } } else { if (dimValues.AGE_GROUP === "15_24") { return Math.random() * 10 + 38; } else if (dimValues.AGE_GROUP === "25_54") { return Math.random() * 10 + 75; } else { return Math.random() * 10 + 60; } } case "PISA": // PISA scores by country and subject if (dimValues.COUNTRY === "JPN" || dimValues.COUNTRY === "KOR") { // Higher scores for East Asian countries return Math.random() * 30 + 520; } else if (dimValues.COUNTRY === "FIN") { // Finland traditionally strong return Math.random() * 30 + 510; } else if (dimValues.COUNTRY === "OECD") { // OECD average return Math.random() * 10 + 485; } else { return Math.random() * 50 + 470; } case "ENV_AIR_GHG": // Emissions in millions of tons if (dimValues.COUNTRY === "USA") { return Math.random() * 200 + 5000; } else if (dimValues.COUNTRY === "OECD") { return Math.random() * 500 + 12000; } else if (dimValues.COUNTRY === "DEU" || dimValues.COUNTRY === "JPN") { return Math.random() * 100 + 800; } else { return Math.random() * 100 + 300; } default: return Math.round(Math.random() * 1000) / 10; } }; // Determine how many observations to create based on the dataset const numObservations = datasetId === "SNA_TABLE1" ? 20 : datasetId === "PISA" ? 15 : 10; for (let i = 0; i < numObservations; i++) { // Generate indexes for each dimension const indexes = dimensions.map((dim, idx) => { // Use filter value index if specified, otherwise randomize const selectedValue = filters[dim.id]; if (selectedValue && Math.random() > 0.7) { return dim.values.findIndex(v => v.id === selectedValue); } return Math.floor(Math.random() * dim.values.length); }); // Create the key from the indexes const key = indexes.join(':'); // Generate the value const value = createValue(datasetId, filters, dimensions, indexes); // Store the observation observations[key] = [value]; count++; // Limit to a reasonable number if (count >= 50) break; } // Create a structure that mimics SDMX-JSON format return { data: { structure: { dimensions: { observation: datasetDimensions } }, dataSets: [ { observations: observations } ] } }; }; const saveQuery = () => { const name = prompt("Enter a name for this query:"); if (name) { updateCurrentQuery({ name, filters: {...filters}, datasetId: selectedDataset }); saveCurrentQuery(); } }; const loadSavedQuery = (query) => { setSelectedDataset(query.datasetId); setFilters(query.filters || {}); updateCurrentQuery({ name: query.name, datasetId: query.datasetId, filters: query.filters || {} }); }; const handleFilterChange = (dimensionId, value) => { setFilters(prev => ({ ...prev, [dimensionId]: value })); }; const processDataForDisplay = (data) => { if (!data || !data.data) return []; try { const dimensions = data.data.structure.dimensions.observation; const observations = data.data.dataSets[0].observations; // Create results array const results = []; // Process each observation Object.entries(observations).forEach(([key, value]) => { const dimensionIndexes = key.split(':').map(Number); const obsValue = value[0]; // The actual value // Create object with dimension values const entry = { value: obsValue }; // Add dimension values dimensions.forEach((dim, index) => { if (dimensionIndexes[index] !== undefined && dim.values[dimensionIndexes[index]]) { const dimValue = dimensionIndexes[index]; entry[dim.id] = dim.values[dimValue].id; entry[`${dim.id}_name`] = dim.values[dimValue].name; } }); results.push(entry); }); return results; } catch (error) { console.error("Error processing data:", error); return []; } }; const analyzeData = async () => { if (!dataResults) { setError("Please fetch data first before analyzing."); return; } try { setIsAnalyzing(true); setShowAnalysisModal(true); setStreamingAnalysis(""); // Process the data for analysis const processedData = processDataForDisplay(dataResults); // Get dataset info const datasetInfo = datasets.find(d => d.id === selectedDataset); // Create prompt for AI const prompt = `Analyze this OECD data for dataset "${datasetInfo?.name || selectedDataset}". Dataset filters: ${Object.entries(filters).map(([k, v]) => `${k}=${v}`).join(", ")} Data summary (first 5 observations): ${JSON.stringify(processedData.slice(0, 5), null, 2)} Please provide: 1. A clear summary of what this data represents 2. Key trends or patterns visible in the data 3. Any notable insights or anomalies 4. Potential policy implications based on the data 5. Suggestions for further analysis or related datasets`; const generator = await callAI(prompt, { stream: true }); for await (const chunk of generator) { setStreamingAnalysis(chunk); } // Save the analysis await database.put({ type: "analysis", queryId: currentQuery._id, datasetId: selectedDataset, filters: {...filters}, analysisText: streamingAnalysis, createdAt: Date.now() }); } catch (err) { setError(`Analysis error: ${err.message}`); } finally { setIsAnalyzing(false); } }; const createDemoData = async () => { try { setLoading(true); // Add some demo queries const demoQueries = [ { type: "query", name: "GDP Growth for G7 Countries", datasetId: "SNA_TABLE1", filters: { LOCATION: "G7", SUBJECT: "B1_GE", MEASURE: "G", TIME_PERIOD: "2022" }, createdAt: Date.now() - 100000 }, { type: "query", name: "Gender Employment Gap in Nordic Countries", datasetId: "GENDER_EMP", filters: { COUNTRY: "SWE", GENDER: "WOMEN", AGE_GROUP: "25_54", YEAR: "2022" }, createdAt: Date.now() - 80000 }, { type: "query", name: "PISA Math Performance", datasetId: "PISA", filters: { COUNTRY: "OECD", SUBJECT: "MATH", YEAR: "2022" }, createdAt: Date.now() - 50000 } ]; for (const query of demoQueries) { await database.put(query); } // Generate demo data for each query for (const query of demoQueries) { const mockDimensions = dimensions.length > 0 ? dimensions : (query.datasetId === "SNA_TABLE1" ? [ { id: "LOCATION", name: "Country", values: [{ id: "G7", name: "G7" }] }, { id: "SUBJECT", name: "Subject", values: [{ id: "B1_GE", name: "GDP" }] }, { id: "MEASURE", name: "Measure", values: [{ id: "G", name: "Growth" }] }, { id: "TIME_PERIOD", name: "Year", values: [{ id: "2022", name: "2022" }] } ] : query.datasetId === "PISA" ? [ { id: "COUNTRY", name: "Country", values: [{ id: "OECD", name: "OECD" }] }, { id: "SUBJECT", name: "Subject", values: [{ id: "MATH", name: "Math" }] }, { id: "YEAR", name: "Year", values: [{ id: "2022", name: "2022" }] } ] : [ { id: "COUNTRY", name: "Country", values: [{ id: "SWE", name: "Sweden" }] }, { id: "GENDER", name: "Gender", values: [{ id: "WOMEN", name: "Women" }] }, { id: "AGE_GROUP", name: "Age Group", values: [{ id: "25_54", name: "25-54" }] }, { id: "YEAR", name: "Year", values: [{ id: "2022", name: "2022" }] } ]); const mockData = { data: { structure: { dimensions: { observation: mockDimensions } }, dataSets: [ { observations: { "0:0:0:0": [2.4], "1:0:0:0": [1.8], "2:0:0:0": [1.9], "3:0:0:0": [2.5], "4:0:0:0": [4.1], "5:0:0:0": [3.7], } } ] } }; await database.put({ type: "data", queryId: `demo-${query.datasetId}`, datasetId: query.datasetId, filters: query.filters, data: mockData, createdAt: Date.now() }); } // Add demo analyses const demoAnalyses = [ { type: "analysis", queryId: `demo-SNA_TABLE1`, datasetId: "SNA_TABLE1", filters: demoQueries[0].filters, analysisText: `# Analysis of GDP Growth for G7 Countries (2022) 1. **Data Summary:** This dataset presents the annual GDP growth rates for G7 countries in 2022, reflecting post-pandemic economic recovery patterns. 2. **Key Trends:** - Most G7 economies showed moderate growth (1.5-2.5%) - The United States exhibited the strongest recovery at 2.4% - Japan showed the slowest growth at 1.1% 3. **Notable Insights:** - Despite global supply chain disruptions and inflation pressures, all G7 economies maintained positive growth - The gap between highest and lowest performing G7 countries has widened compared to pre-pandemic patterns - The aggregate G7 performance (1.9%) lags behind several emerging economies 4. **Policy Implications:** - Continued monetary policy coordination may be necessary among G7 nations - Targeted fiscal support could address uneven recovery across sectors - Investment in supply chain resilience appears critical for sustained growth 5. **Further Analysis Recommendations:** - Compare with inflation data to assess real growth performance - Analyze sector-specific contributions to better understand recovery dynamics - Extend the timeframe to examine longer recovery trajectories`, createdAt: Date.now() - 40000 }, { type: "analysis", queryId: `demo-PISA`, datasetId: "PISA", filters: demoQueries[2].filters, analysisText: `# Analysis of PISA Mathematics Results (2022) 1. **Data Summary:** This dataset presents the 2022 PISA mathematics assessment scores across OECD countries, measuring 15-year-old students' mathematical literacy and problem-solving abilities. 2. **Key Trends:** - East Asian countries (Japan, Korea) continue to lead with scores averaging above 520 - OECD average stands at 489 points - Significant performance gaps persist between highest and lowest performing countries (over 100 points difference) - Several countries show score declines compared to pre-pandemic assessments 3. **Notable Insights:** - Post-pandemic learning loss is evident in approximately 65% of participating countries - Gender gaps in mathematics performance have narrowed in most countries - Socioeconomic status remains strongly correlated with performance across all countries 4. **Policy Implications:** - Targeted interventions are needed to address pandemic-related learning gaps - Successful educational approaches from high-performing systems could inform reforms - Additional support for disadvantaged students is critical to reducing inequality 5. **Further Analysis Recommendations:** - Compare with reading and science scores to identify subject-specific patterns - Analyze changes over time (2015-2022) to understand longer-term trends - Investigate the relationship between educational investment and PISA outcomes`, createdAt: Date.now() - 30000 } ]; for (const analysis of demoAnalyses) { await database.put(analysis); } alert("Demo data added successfully!"); } catch (err) { setError(`Error adding demo data: ${err.message}`); } finally { setLoading(false); } }; // Function to create a simple chart when data is available const renderChart = () => { if (!dataResults) return null; const processedData = processDataForDisplay(dataResults); if (processedData.length === 0) return null; const firstDimension = dimensions[0]?.id; if (!firstDimension) return null; // Group data by the first dimension const groupedData = {}; processedData.forEach(entry => { const key = entry[`${firstDimension}_name`] || entry[firstDimension] || "Unknown"; if (!groupedData[key]) { groupedData[key] = { name: key, total: 0, count: 0 }; } groupedData[key].total += Number(entry.value) || 0; groupedData[key].count += 1; }); // Calculate averages and prepare chart data const chartData = Object.values(groupedData).map(group => { return { name: group.name, value: group.count > 1 ? (group.total / group.count).toFixed(1) : group.total }; }); // Find the maximum value for scaling const maxValue = Math.max(...chartData.map(item => Number(item.value))); const minValue = Math.min(...chartData.map(item => Number(item.value))); const range = maxValue - minValue; return (

{datasets.find(d => d.id === selectedDataset)?.name || selectedDataset} ({Object.keys(processedData).length} observations)

{chartData.map((item, index) => { // Scale to percentage but keep a minimum height const heightPercent = range === 0 ? 70 : ((Number(item.value) - minValue) / range) * 80 + 20; // Generate colors from our palette const colors = ['#70d6ff', '#ff70a6', '#ff9770', '#ffd670', '#e9ff70']; const color = colors[index % colors.length]; return (

{item.name}: {item.value}

{item.name}

{item.value}

); })}

); }; // Render featured insight cards on the homepage const renderFeaturedInsight = (insight) => { return (

{insight.icon}

{insight.title}

{insight.highlight}

{insight.content}

{insight.date}

); }; // Render featured dataset cards on the homepage const renderFeaturedDataset = (dataset) => { return (

{ setSelectedDataset(dataset.id); setActiveTab("explorer"); }} >

{dataset.icon}

{dataset.name}

{dataset.description}

); }; // Render the homepage content (featured datasets and insights) const renderHomePage = () => { return (

Featured Insights

{featuredInsights.map(renderFeaturedInsight)}

Popular Datasets

{datasets.filter(d => d.featured).map(renderFeaturedDataset)}

); }; const renderExplorerPage = () => { return (

{/* Sidebar */}

Datasets

{loading &&

}

{selectedDataset && (

{datasets.find(d => d.id === selectedDataset)?.description}

)}

Saved Queries

{savedQueries.length === 0 ? (

No saved queries yet

) : (

loadSavedQuery(query)} > {query.name}

)}

Recent Analyses

{savedAnalyses.length === 0 ? (

No analyses yet

) : (

{ setStreamingAnalysis(analysis.analysisText); setShowAnalysisModal(true); }} >
{datasets.find(d => d.id === analysis.datasetId)?.name || analysis.datasetId}
{new Date(analysis.createdAt).toLocaleDateString()}

)}

{/* Main content */}

{/* Filters */}

Data Filters {selectedDataset && (

)}

{error && (

{error}

)} {selectedDataset ? (

{dimensions.map(dimension => (

{dimension.name}

))}

) : (

Select a dataset to see available filters

)}

{/* Data visualization */}

Visualization {dataResults && ( )}

{loading ? (

Loading data...

) : dataResults ? ( renderChart() ) : selectedDataset ? (

{savedQueries.length > 0 ? "Select a saved query or configure filters and fetch data to visualize" : "Configure filters and fetch data to visualize"}

) : (

Select a dataset to begin

)}

{/* Data table (shows when data is available) */} {dataResults && (

Data Preview

{dimensions.map(dim => ( ))} {processDataForDisplay(dataResults).slice(0, 10).map((entry, index) => ( {dimensions.map(dim => ( ))} ))}

{dim.name}	Value
{entry[`${dim.id}_name`] \|\| entry[dim.id] \|\| '-'}	{entry.value}

{processDataForDisplay(dataResults).length > 10 && (

Showing 10 of {processDataForDisplay(dataResults).length} results

)}

); }; return (

OECD Data Explorer

*Explore, visualize, and analyze statistical data from the Organisation for Economic Co-operation and Development. Select a dataset, configure filters, and generate AI-powered insights to understand economic and social trends.*

{/* Main content based on active tab */} {activeTab === "featured" ? ( renderHomePage() ) : ( renderExplorerPage() )} {/* Analysis Modal */} {showAnalysisModal && (

OECD Data Insights

{isAnalyzing ? (

Analyzing data...

{streamingAnalysis || "Generating insights..."}

) : (

{streamingAnalysis.split('\n').map((line, i) => (

{line}

))}

)}

); }

{datasets.find(d => d.id === selectedDataset)?.name || selectedDataset} ({Object.keys(processedData).length} observations)

{insight.title}

{dataset.name}

Featured Insights

Popular Datasets

Datasets

Saved Queries

Recent Analyses

Data Filters {selectedDataset && ( Save Query Fetch Data )}

Visualization {dataResults && ( {isAnalyzing ? "Analyzing..." : "Generate Insights"} )}

Data Preview

OECD Data Insights

Data Filters {selectedDataset && (

)}

Visualization {dataResults && ( )}