<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dow 30: Interactive Strategic Analysis</title>
<script src=”https://cdn.tailwindcss.com”></script>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js”></script>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap” rel=”stylesheet”>
<!– Chosen Palette: Warm Neutral Harmony –>
<!– Application Structure Plan: The SPA is designed as a dynamic dashboard. A sticky header provides navigation to key thematic sections. This non-linear structure allows users to explore topics based on interest. The “Risk & Patterns” section now includes a Gemini API-powered feature to generate mitigation strategies, transforming the tool from purely descriptive to prescriptive and actionable. This enhances the value for a board-level audience by facilitating forward-looking strategic conversations. –>
<!– Visualization & Content Choices:
– Goal: Generate actionable ideas. Method: Gemini API call via a button. Interaction: User clicks to generate text. Justification: Adds a dynamic, AI-powered brainstorming tool that directly addresses the presented risks, making the analysis more valuable.
– Goal: Compare strategic groups. Method: HTML/CSS diagram. Interaction: None. Justification: A simple visual grouping is most effective.
– Goal: Compare capital allocation. Method: Grouped Bar Chart (Chart.js). Interaction: Filterable by sector. Justification: Allows direct, quantitative comparison.
– Goal: Compare shareholder returns. Method: Donut Chart (Chart.js). Interaction: Filterable by company. Justification: Effectively shows composition of returns.
– Goal: Show workforce evolution. Method: Line Chart (Chart.js). Interaction: Filterable by company. Justification: Clearly illustrates trends.
– Goal: Detail risk exposure. Method: Dynamic HTML Table. Interaction: Updates based on company selection. Justification: Presents qualitative data in a structured format. –>
<!– CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. –>
<style>
body { font-family: ‘Inter’, sans-serif; }
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 40vh;
}
@media (max-width: 768px) {
.chart-container {
height: 300px;
}
}
.section {
display: none;
}
.section.active {
display: block;
}
.nav-link.active {
color: #111827; /* text-gray-900 */
border-bottom: 2px solid #4f46e5; /* indigo-600 */
padding-bottom: 4px;
}
.prose h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1.25rem; font-weight: 600; }
.prose ul { list-style-type: disc; margin-left: 1.5rem; }
.prose li { margin-bottom: 0.25em; }
.prose strong { font-weight: 600; }
</style>
</head>
<body class=”bg-gray-50 text-gray-800″>
<header class=”bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-sm”>
<div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8″>
<div class=”flex justify-between items-center py-4 md:justify-start md:space-x-10″>
<div class=”flex justify-start lg:w-0 lg:flex-1″>
<a href=”#” class=”flex items-center”>
<span class=”text-xl font-bold text-gray-900″>Dow 30 Analysis</span>
</a>
</div>
<nav class=”hidden md:flex space-x-10″>
<button onclick=”showSection(‘overview’, this)” class=”nav-link text-base font-medium text-gray-500 hover:text-gray-900 transition-colors duration-200″>Overview</button>
<button onclick=”showSection(‘strategy’, this)” class=”nav-link text-base font-medium text-gray-500 hover:text-gray-900 transition-colors duration-200″>Strategic Analysis</button>
<button onclick=”showSection(‘capital’, this)” class=”nav-link text-base font-medium text-gray-500 hover:text-gray-900 transition-colors duration-200″>Capital & Talent</button>
<button onclick=”showSection(‘risk’, this)” class=”nav-link text-base font-medium text-gray-500 hover:text-gray-900 transition-colors duration-200″>Risk & Patterns</button>
</nav>
</div>
</div>
</header>
<main class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12″>
<section id=”overview” class=”section active”>
<div class=”text-center mb-12″>
<h1 class=”text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight”>Navigating the Nexus of AI & Geopolitics</h1>
<p class=”mt-4 max-w-2xl mx-auto text-xl text-gray-500″>An interactive analysis of strategy, capital, and talent among the Dow 30.
</p>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg mb-12″>
<h2 class=”text-2xl font-bold text-gray-900 mb-4″>Executive Summary</h2>
<p class=”text-gray-600 leading-relaxed”>A comprehensive 10-year analysis of the Dow 30 reveals a profound transformation driven by two powerful forces: the rise of Artificial Intelligence (AI) and the fracturing of the global order. Companies are bifurcating into distinct strategic groups: “Leaders” who integrate AI as a core business principle, “Adapters” who use AI to optimize legacy models, and “Laggards” who face significant risk. This interactive report examines how these forces reshape strategy, capital deployment, and talent management across the DJIA. Use the navigation above to explore the key findings.</p>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg”>
<h2 class=”text-2xl font-bold text-gray-900 mb-6 text-center”>The New Competitive Landscape</h2>
<p class=”text-center text-gray-600 mb-8 max-w-3xl mx-auto”>The analysis categorizes the DJIA 30 into three groups based on their strategic response to the twin forces of AI and Geopolitics. This framework helps in understanding their preparedness for future disruptions.</p>
<div class=”grid md:grid-cols-3 gap-8 text-center”>
<div class=”border-2 border-green-500 p-6 rounded-xl bg-green-50/70 transform hover:scale-105 transition-transform duration-300″>
<h3 class=”text-xl font-semibold text-green-800 mb-2″>Leaders</h3>
<p class=”text-green-700″>Proactive, deeply integrated strategies for AI and geopolitics. AI is the new foundation of their business model. Examples: <span class=”font-bold”>Microsoft, Apple, Salesforce</span>.</p>
</div>
<div class=”border-2 border-blue-500 p-6 rounded-xl bg-blue-50/70 transform hover:scale-105 transition-transform duration-300″>
<h3 class=”text-xl font-semibold text-blue-800 mb-2″>Adapters</h3>
<p class=”text-blue-700″>Actively investing to adapt legacy models. AI is a powerful optimizer. Examples: <span class=”font-bold”>Walmart, JPMorgan Chase, Honeywell, Nike</span>.</p>
</div>
<div class=”border-2 border-yellow-500 p-6 rounded-xl bg-yellow-50/70 transform hover:scale-105 transition-transform duration-300″>
<h3 class=”text-xl font-semibold text-yellow-800 mb-2″>Laggards</h3>
<p class=”text-yellow-700″>Reactive strategies, siloed AI investments, and significant operational or market headwinds. Examples: <span class=”font-bold”>Walgreens, 3M</span>.</p>
</div>
</div>
</div>
</section>
<section id=”strategy” class=”section”>
<div class=”text-center mb-12″>
<h1 class=”text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight”>Comparative Strategic Analysis</h1>
<p class=”mt-4 max-w-2xl mx-auto text-xl text-gray-500″>Explore how different strategic cohorts within the Dow are leveraging AI and navigating geopolitical shifts.</p>
</div>
<div class=”flex justify-center mb-8″>
<div class=”bg-white p-2 rounded-xl shadow-md”>
<select id=”sectorSelector” class=”border-none rounded-lg text-lg focus:ring-2 focus:ring-indigo-500″>
<option value=”tech”>Tech Vanguard</option>
<option value=”financial”>Financial Powerhouses</option>
<option value=”industrial”>Industrial, Materials & Energy</option>
<option value=”healthcare”>Healthcare & Pharma Leaders</option>
<option value=”retail”>Consumer & Retail Stalwarts</option>
<option value=”media_telecom”>Media, Telecom & Health Services</option>
</select>
</div>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg”>
<div class=”grid lg:grid-cols-2 gap-12 items-center”>
<div>
<h2 id=”strategyTitle” class=”text-3xl font-bold text-gray-900 mb-4″></h2>
<h3 id=”strategyCompany” class=”text-xl font-semibold text-indigo-600 mb-4″></h3>
<div id=”strategyContent” class=”space-y-4 text-gray-600 leading-relaxed”></div>
</div>
<div class=”w-full”>
<div class=”chart-container”>
<canvas id=”capitalAllocationChart”></canvas>
</div>
<p id=”capitalAllocationChartLabel” class=”text-center text-sm text-gray-500 mt-2″></p>
</div>
</div>
</div>
</section>
<section id=”capital” class=”section”>
<div class=”text-center mb-12″>
<h1 class=”text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight”>Capital Deployment & Human Capital</h1>
<p class=”mt-4 max-w-2xl mx-auto text-xl text-gray-500″>Analyze investment in growth versus shareholder returns, and track workforce evolution over time.</p>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg mb-12″>
<h2 class=”text-3xl font-bold text-gray-900 mb-4 text-center”>Methodology Note</h2>
<p class=”text-gray-600 leading-relaxed max-w-4xl mx-auto text-center”>The data presented here is derived from a systematic review of public disclosures (2014-2024), including SEC filings (10-Ks, Proxies) and investor communications. The analysis benchmarks each company’s stated strategy against its quantitative results in capital allocation and human capital management to provide an evidence-based view of its strategic execution and priorities.</p>
</div>
<div class=”flex justify-center mb-8″>
<div class=”bg-white p-2 rounded-xl shadow-md”>
<select id=”companySelectorCapital” class=”border-none rounded-lg text-lg focus:ring-2 focus:ring-indigo-500″>
<option value=”MMM”>3M</option>
<option value=”AXP”>American Express</option>
<option value=”AMGN”>Amgen</option>
<option value=”AAPL”>Apple</option>
<option value=”BA”>Boeing</option>
<option value=”CAT”>Caterpillar</option>
<option value=”CVX”>Chevron</option>
<option value=”CSCO”>Cisco</option>
<option value=”KO”>Coca-Cola</option>
<option value=”DOW”>Dow Inc.</option>
<option value=”GS”>Goldman Sachs</option>
<option value=”HD”>Home Depot</option>
<option value=”HON”>Honeywell</option>
<option value=”IBM”>IBM</option>
<option value=”INTC”>Intel</option>
<option value=”JNJ”>Johnson & Johnson</option>
<option value=”JPM”>JPMorgan Chase</option>
<option value=”MCD”>McDonald’s</option>
<option value=”MRK”>Merck</option>
<option value=”MSFT”>Microsoft</option>
<option value=”NKE”>Nike</option>
<option value=”PG”>Procter & Gamble</option>
<option value=”CRM”>Salesforce</option>
<option value=”TRV”>Travelers</option>
<option value=”UNH”>UnitedHealth Group</option>
<option value=”VZ”>Verizon</option>
<option value=”V”>Visa</option>
<option value=”WBA”>Walgreens</option>
<option value=”WMT”>Walmart</option>
<option value=”DIS”>Walt Disney</option>
</select>
</div>
</div>
<div class=”grid lg:grid-cols-2 gap-8″>
<div class=”bg-white p-8 rounded-2xl shadow-lg”>
<h2 class=”text-2xl font-bold text-gray-900 mb-4 text-center”>Shareholder Returns (Recent Avg Yield)</h2>
<div class=”chart-container” style=”height:300px;”>
<canvas id=”shareholderReturnsChart”></canvas>
</div>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg”>
<h2 class=”text-2xl font-bold text-gray-900 mb-4 text-center”>Workforce Evolution</h2>
<div class=”chart-container” style=”height:300px;”>
<canvas id=”headcountChart”></canvas>
</div>
</div>
</div>
</section>
<section id=”risk” class=”section”>
<div class=”text-center mb-12″>
<h1 class=”text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight”>Risk & Strategic Patterns</h1>
<p class=”mt-4 max-w-2xl mx-auto text-xl text-gray-500″>Compare company-specific risks and view high-level strategic patterns.</p>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg mb-12″>
<h2 class=”text-3xl font-bold text-gray-900 mb-6 text-center”>Patterns in Capital & Talent</h2>
<p class=”text-center text-gray-600 mb-8 max-w-3xl mx-auto”>Analysis reveals distinct patterns in how Leaders, Adapters, and Laggards allocate capital and manage their workforce, directly reflecting their strategic posture.</p>
<div class=”grid md:grid-cols-3 gap-8″>
<div class=”border-l-4 border-green-500 pl-6″>
<h3 class=”text-xl font-semibold text-green-800 mb-2″>Leaders</h3>
<p class=”text-sm font-medium text-gray-700″><strong>Capital:</strong> Prioritize aggressive, large-scale reinvestment in technology (AI infrastructure, R&D) as a primary driver of growth, often dwarfing traditional CapEx. M&A is strategic, aimed at acquiring technology and ecosystems.</p>
<p class=”mt-3 text-sm font-medium text-gray-700″><strong>Talent:</strong> Engage in a “war for talent” for elite AI specialists while simultaneously restructuring to improve engineering efficiency. Proactively building a workforce for a future of human-AI collaboration.</p>
</div>
<div class=”border-l-4 border-blue-500 pl-6″>
<h3 class=”text-xl font-semibold text-blue-800 mb-2″>Adapters</h3>
<p class=”text-sm font-medium text-gray-700″><strong>Capital:</strong> Balance significant tech spending to modernize legacy systems with a strong, consistent commitment to shareholder returns (dividends & buybacks). M&A is often focused on “bolt-on” acquisitions to gain specific capabilities.</p>
<p class=”mt-3 text-sm font-medium text-gray-700″><strong>Talent:</strong> Focus on upskilling their existing, large workforces to operate in a more digital environment. Compete with tech for digital marketing, data science, and logistics talent.</p>
</div>
<div class=”border-l-4 border-yellow-500 pl-6″>
<h3 class=”text-xl font-semibold text-yellow-800 mb-2″>Laggards</h3>
<p class=”text-sm font-medium text-gray-700″><strong>Capital:</strong> Allocation is often dictated by crisis management—funding litigation, managing debt, or paying for restructuring. Shareholder returns can be volatile, with dividend cuts possible to preserve cash. Growth investments are constrained.</p>
<p class=”mt-3 text-sm font-medium text-gray-700″><strong>Talent:</strong> Human capital strategy can be reactive, focusing on cost-cutting and headcount reductions. They face significant challenges in retaining key talent amid uncertainty and limited growth opportunities.</p>
</div>
</div>
</div>
<div class=”flex justify-center mb-8″>
<div class=”bg-white p-2 rounded-xl shadow-md”>
<select id=”companySelectorRisk” class=”border-none rounded-lg text-lg focus:ring-2 focus:ring-indigo-500″>
<option value=”MMM”>3M</option>
<option value=”AXP”>American Express</option>
<option value=”AMGN”>Amgen</option>
<option value=”AAPL”>Apple</option>
<option value=”BA”>Boeing</option>
<option value=”CAT”>Caterpillar</option>
<option value=”CVX”>Chevron</option>
<option value=”CSCO”>Cisco</option>
<option value=”KO”>Coca-Cola</option>
<option value=”DOW”>Dow Inc.</option>
<option value=”GS”>Goldman Sachs</option>
<option value=”HD”>Home Depot</option>
<option value=”HON”>Honeywell</option>
<option value=”IBM”>IBM</option>
<option value=”INTC”>Intel</option>
<option value=”JNJ”>Johnson & Johnson</option>
<option value=”JPM”>JPMorgan Chase</option>
<option value=”MCD”>McDonald’s</option>
<option value=”MRK”>Merck</option>
<option value=”MSFT”>Microsoft</option>
<option value=”NKE”>Nike</option>
<option value=”PG”>Procter & Gamble</option>
<option value=”CRM”>Salesforce</option>
<option value=”TRV”>Travelers</option>
<option value=”UNH”>UnitedHealth Group</option>
<option value=”VZ”>Verizon</option>
<option value=”V”>Visa</option>
<option value=”WBA”>Walgreens</option>
<option value=”WMT”>Walmart</option>
<option value=”DIS”>Walt Disney</option>
</select>
</div>
</div>
<div class=”bg-white p-8 rounded-2xl shadow-lg”>
<h2 id=”riskMatrixTitle” class=”text-2xl font-bold text-gray-900 mb-6 text-center”></h2>
<div class=”overflow-x-auto”>
<table class=”min-w-full divide-y divide-gray-200″>
<thead class=”bg-gray-50″>
<tr>
<th class=”px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>Risk Category</th>
<th class=”px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider”>Exposure Level</th>
</tr>
</thead>
<tbody id=”riskTableBody” class=”bg-white divide-y divide-gray-200″>
</tbody>
</table>
</div>
<div class=”mt-8 text-center”>
<button id=”gemini-button” onclick=”generateMitigationStrategies()” class=”inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-transform transform hover:scale-105″>
✨ Brainstorm Mitigation Strategies
</button>
</div>
<div id=”gemini-output” class=”mt-8 prose max-w-none text-gray-600 leading-relaxed”></div>
</div>
</section>
</main>
<script>
const reportData = {
strategy: {
tech: {
title: “The Tech Vanguard”,
company: “Example: Microsoft (MSFT)”,
content: `<p>For technology leaders, AI is the central axis of corporate strategy. The goal is platform dominance in the new AI era. Microsoft’s vision is to infuse AI into every layer of its product stack, aiming to control the entire “AI stack.” Apple takes a consumer-focused approach, integrating AI to enhance user experience while emphasizing privacy. Salesforce has been a leader in enterprise AI with its “Einstein” platform.</p>`,
yAxisLabel: ‘% of Revenue’,
chartData: { labels: [‘R&D’, ‘CapEx’], datasets: [{ label: ‘Microsoft’, data: [13, 11.5], backgroundColor: ‘rgba(79, 70, 229, 0.8)’ }, { label: ‘Apple’, data: [8, 4], backgroundColor: ‘rgba(165, 180, 252, 0.8)’ }] }
},
financial: {
title: “The Financial Powerhouses”,
company: “Example: JPMorgan Chase (JPM)”,
content: `<p>Financial firms are sophisticated users of AI, leveraging it to optimize operations and defend against fintech disruption. JPM’s strategy is built on its “fortress balance sheet” and massive tech investment ($15B+ annually) for fraud detection, credit risk modeling, and algorithmic trading. Visa & Amex focus on evolving their payment networks, turning potential fintech disruptors into partners.</p>`,
yAxisLabel: ‘$ Billions’,
chartData: { labels: [‘Tech Spend’], datasets: [{ label: ‘JPMorgan Chase’, data: [15.5], backgroundColor: ‘rgba(30, 64, 175, 0.8)’ }, { label: ‘Goldman Sachs’, data: [8.0], backgroundColor: ‘rgba(147, 197, 253, 0.8)’ }] }
},
industrial: {
title: “Industrial, Materials & Energy”,
company: “Example: Caterpillar (CAT)”,
content: `<p>This sector is digitizing physical assets and navigating the energy transition. Caterpillar’s strategy emphasizes services revenue for its machine fleet to be less cyclical. Chevron focuses on “higher returns, lower carbon,” using AI for exploration and operations while investing in low-carbon tech. Honeywell has pivoted to automation, aviation, and sustainability tech.</p>`,
yAxisLabel: ‘% of Revenue’,
chartData: { labels: [‘R&D’, ‘CapEx’], datasets: [{ label: ‘Chevron’, data: [0.5, 9], backgroundColor: ‘rgba(21, 128, 61, 0.8)’ }, { label: ‘Caterpillar’, data: [3.5, 5], backgroundColor: ‘rgba(134, 239, 172, 0.8)’ }] }
},
healthcare: {
title: “The Healthcare & Pharma Leaders”,
company: “Example: Merck (MRK)”,
content: `<p>This sector operates on long R&D cycles, with AI now a revolutionary accelerant for drug discovery and clinical trials. Merck’s strategy is dominated by preparing for the patent expiration of its blockbuster Keytruda via M&A. J&J spun off its consumer health business to focus on higher-margin pharma and med-tech. UnitedHealth has pivoted aggressively to value-based care through its Optum division.</p>`,
yAxisLabel: ‘% of Revenue’,
chartData: { labels: [‘R&D’, ‘CapEx’], datasets: [{ label: ‘Merck’, data: [21, 5.5], backgroundColor: ‘rgba(217, 70, 239, 0.8)’ }, { label: ‘Johnson & Johnson’, data: [15, 4.5], backgroundColor: ‘rgba(233, 185, 243, 0.8)’ }] }
},
retail: {
title: “The Consumer & Retail Stalwarts”,
company: “Example: Walmart (WMT)”,
content: `<p>Retail giants are focused on mastering omnichannel retail. Walmart’s “people-led, tech-powered” strategy uses its stores as fulfillment hubs, powered by AI for supply chain forecasting and personalization. Nike has aggressively pursued a direct-to-consumer strategy via its apps and stores to gain higher margins and invaluable customer data. P&G and Coca-Cola focus on digital marketing and portfolio shaping.</p>`,
yAxisLabel: ‘% of Revenue’,
chartData: { labels: [‘CapEx’], datasets: [{ label: ‘Walmart’, data: [3.2], backgroundColor: ‘rgba(217, 119, 6, 0.8)’ }, { label: ‘Home Depot’, data: [2.0], backgroundColor: ‘rgba(253, 186, 116, 0.8)’ }] }
},
media_telecom: {
title: “Media, Telecom & Health Services”,
company: “Example: Walt Disney (DIS)”,
content: `<p>This diverse group is navigating profound industry shifts. Disney has pivoted from all-out streaming growth to focusing on profitability and revitalizing its core assets. Verizon retreated from its failed media experiment to refocus on its core competency: building and monetizing its 5G network. Walgreens is in a difficult turnaround, cutting costs and scaling back its healthcare investments to stabilize its core pharmacy business.</p>`,
yAxisLabel: ‘$ Billions’,
chartData: { labels: [‘Content/Network CapEx’], datasets: [{ label: ‘Disney’, data: [16], backgroundColor: ‘rgba(220, 38, 38, 0.8)’ }, { label: ‘Verizon’, data: [18.5], backgroundColor: ‘rgba(251, 146, 60, 0.8)’ }] }
}
},
capital: {
MSFT: { name: ‘Microsoft’, returns: [2.5, 0.8], headcount: {labels:[‘2020′,’2021′,’2022′,’2023′,’2024’], data:[163, 181, 221, 221, 218]}},
AAPL: { name: ‘Apple’, returns: [4.5, 0.6], headcount: {labels:[‘2020′,’2021′,’2022′,’2023′,’2024’], data:[147, 154, 164, 161, 158]}},
JPM: { name: ‘JPMorgan Chase’, returns: [3.0, 2.8], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[257, 255, 271, 293, 309]}},
JNJ: { name: ‘Johnson & Johnson’, returns: [1.5, 2.9], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[132, 134, 141, 155, 131]}},
CVX: { name: ‘Chevron’, returns: [2.5, 4.2], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[48.2, 44.6, 42.5, 43.8, 45.6]}},
WMT: { name: ‘Walmart’, returns: [1.2, 1.8], headcount: {labels:[‘FY21′,’FY22′,’FY23′,’FY24′,’FY25’], data:[2.3, 2.3, 2.1, 2.1, 2.0]}},
DIS: { name: ‘Walt Disney’, returns: [1.0, 0.3], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[223, 203, 190, 220, 225]}},
BA: { name: ‘Boeing’, returns: [0, 0], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[161, 141, 142, 156, 171]}},
WBA: { name: ‘Walgreens’, returns: [0.5, 3.5], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[287, 325, 315, 331, 330]}},
MMM: { name: ‘3M’, returns: [1.2, 4.5], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[96, 95, 95, 92, 85]}},
AXP: { name: ‘American Express’, returns: [2.1, 1.4], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[64, 64, 64, 77, 74]}},
AMGN: { name: ‘Amgen’, returns: [2.2, 3.1], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[22, 24, 24, 25, 26]}},
CAT: { name: ‘Caterpillar’, returns: [2.0, 2.6], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[102, 97, 107, 109, 113]}},
CSCO: { name: ‘Cisco’, returns: [3.5, 2.8], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[75, 77, 79, 83, 84]}},
KO: { name: ‘Coca-Cola’, returns: [1.0, 3.2], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[86, 80, 79, 82, 84]}},
DOW: { name: ‘Dow Inc.’, returns: [0.8, 5.0], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[36.5, 35.7, 35.7, 37.8, 37.5]}},
GS: { name: ‘Goldman Sachs’, returns: [2.5, 2.2], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[38, 40, 43, 48, 45]}},
HD: { name: ‘Home Depot’, returns: [2.5, 2.1], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[400, 504, 490, 471, 463]}},
HON: { name: ‘Honeywell’, returns: [1.8, 1.9], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[113, 103, 97, 99, 100]}},
IBM: { name: ‘IBM’, returns: [1.5, 4.8], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[352, 345, 282, 260, 250]}},
INTC: { name: ‘Intel’, returns: [2.0, 1.0], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[110, 110, 121, 131, 124]}},
MCD: { name: “McDonald’s”, returns: [2.8, 2.5], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[205, 175, 150, 150, 155]}},
MRK: { name: ‘Merck’, returns: [1.5, 2.9], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[71, 74, 68, 69, 72]}},
NKE: { name: ‘Nike’, returns: [1.5, 1.1], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[76, 75, 73, 79, 83]}},
PG: { name: ‘Procter & Gamble’, returns: [2.0, 2.4], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[97, 99, 101, 106, 107]}},
CRM: { name: ‘Salesforce’, returns: [0.2, 0.5], headcount: {labels:[‘FY20′,’FY21′,’FY22′,’FY23′,’FY24’], data:[49, 56, 73, 79, 72]}},
TRV: { name: ‘Travelers’, returns: [1.8, 2.8], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[30, 30, 30, 31, 32]}},
UNH: { name: ‘UnitedHealth Group’, returns: [1.2, 1.5], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[325, 330, 350, 400, 440]}},
VZ: { name: ‘Verizon’, returns: [0.8, 5.0], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[135, 132, 118, 117, 105]}},
V: { name: ‘Visa’, returns: [2.5, 0.8], headcount: {labels:[‘2019′,’2020′,’2021′,’2022′,’2023’], data:[19.5, 20.5, 21.5, 26.5, 28.8]}},
},
risk: {
MSFT: { name: ‘Microsoft’, matrix: {‘AI Model Liability’: ‘High’, ‘AI Talent Gap’: ‘High’, ‘Geopolitical Supply Chain’: ‘Medium’, ‘Data Sovereignty’: ‘High’}},
AAPL: { name: ‘Apple’, matrix: {‘AI Model Liability’: ‘Medium’, ‘AI Talent Gap’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Data Sovereignty’: ‘High’}},
JPM: { name: ‘JPMorgan Chase’, matrix: {‘AI Model Liability’: ‘Medium’, ‘Regulatory Scrutiny’: ‘High’, ‘Data Sovereignty’: ‘High’, ‘Credit Cycle Risk’: ‘High’}},
JNJ: { name: ‘Johnson & Johnson’, matrix: {‘AI Model Liability’: ‘High’, ‘Patent Cliff’: ‘High’, ‘Geopolitical Supply Chain’: ‘Medium’, ‘Drug Pricing Regulation’: ‘High’}},
CVX: { name: ‘Chevron’, matrix: {‘Commodity Price Volatility’: ‘High’, ‘AI Talent Gap’: ‘Low’, ‘Geopolitical Supply Chain’: ‘High’, ‘Energy Transition Risk’: ‘High’}},
WMT: { name: ‘Walmart’, matrix: {‘E-commerce Competition’: ‘High’, ‘AI Talent Gap’: ‘Medium’, ‘Geopolitical Supply Chain’: ‘High’, ‘Data Sovereignty’: ‘Medium’}},
BA: { name: ‘Boeing’, matrix: {‘Production & Quality Control’: ‘High’, ‘AI Talent Gap’: ‘Medium’, ‘Geopolitical Supply Chain’: ‘High’, ‘Regulatory Oversight’: ‘High’}},
KO: { name: ‘Coca-Cola’, matrix: {‘Changing Consumer Tastes’: ‘High’, ‘AI Talent Gap’: ‘Low’, ‘Geopolitical Supply Chain’: ‘Medium’, ‘Brand Reputation’: ‘High’}},
DIS: { name: ‘Walt Disney’, matrix: {‘Streaming Profitability’: ‘High’, ‘Geopolitical Content Regulation’: ‘High’, ‘Succession Planning’: ‘Medium’, ‘Linear TV Decline’: ‘High’}},
VZ: { name: ‘Verizon’, matrix: {‘5G Competitive Intensity’: ‘High’, ‘AI Talent Gap’: ‘Low’, ‘Capital Expenditure Burden’: ‘High’, ‘Regulatory Environment’: ‘Medium’}},
WBA: { name: ‘Walgreens’, matrix: {‘Retail Turnaround Execution’: ‘High’, ‘Pharmacy Reimbursement Pressure’: ‘High’, ‘Healthcare Strategy Pivot’: ‘High’, ‘Debt Load’: ‘Medium’}},
MMM: { name: ‘3M’, matrix: {‘Litigation Liability (PFAS)’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Portfolio Complexity’: ‘Medium’, ‘Economic Cyclicality’: ‘High’}},
AXP: { name: ‘American Express’, matrix: {‘Fintech Disruption’: ‘High’, ‘Consumer Spending Downturn’: ‘High’, ‘Regulatory Scrutiny’: ‘Medium’, ‘Data Security’: ‘High’}},
AMGN: { name: ‘Amgen’, matrix: {‘Patent Cliff’: ‘High’, ‘Drug Pricing Regulation’: ‘High’, ‘R&D Pipeline Success’: ‘High’, ‘M&A Integration’: ‘Medium’}},
CAT: { name: ‘Caterpillar’, matrix: {‘Global Economic Cycles’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Commodity Prices’: ‘Medium’, ‘Energy Transition’: ‘Medium’}},
CSCO: { name: ‘Cisco’, matrix: {‘Tech Spending Cycles’: ‘High’, ‘AI Talent Gap’: ‘Medium’, ‘Geopolitical Supply Chain’: ‘High’, ‘Competition from Cloud’: ‘High’}},
DOW: { name: ‘Dow Inc.’, matrix: {‘Chemical Commodity Cycles’: ‘High’, ‘Energy/Feedstock Costs’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Environmental Regulation’: ‘High’}},
GS: { name: ‘Goldman Sachs’, matrix: {‘Market Volatility’: ‘High’, ‘Regulatory Scrutiny’: ‘High’, ‘Strategic Pivot Risk (Consumer)’: ‘Medium’, ‘AI Talent Gap’: ‘High’}},
HD: { name: ‘Home Depot’, matrix: {‘Housing Market Cycles’: ‘High’, ‘Consumer Spending’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Labor Availability’: ‘Medium’}},
HON: { name: ‘Honeywell’, matrix: {‘Economic Cyclicality’: ‘High’, ‘M&A Integration’: ‘Medium’, ‘Geopolitical Supply Chain’: ‘High’, ‘AI Talent Gap’: ‘Medium’}},
IBM: { name: ‘IBM’, matrix: {‘Hybrid Cloud Competition’: ‘High’, ‘AI Platform Adoption’: ‘High’, ‘Legacy Business Decline’: ‘Medium’, ‘AI Talent Gap’: ‘High’}},
INTC: { name: ‘Intel’, matrix: {‘Manufacturing Turnaround’: ‘High’, ‘Competition (Nvidia, AMD)’: ‘High’, ‘Foundry Strategy Execution’: ‘High’, ‘Geopolitical (CHIPS Act)’: ‘High’}},
MCD: { name: “McDonald’s”, matrix: {‘Changing Consumer Tastes’: ‘High’, ‘Franchisee Relations’: ‘Medium’, ‘Geopolitical (Brand Risk)’: ‘Medium’, ‘Labor Costs/Availability’: ‘High’}},
MRK: { name: ‘Merck’, matrix: {‘Patent Cliff (Keytruda)’: ‘High’, ‘Drug Pricing Regulation’: ‘High’, ‘R&D Pipeline Success’: ‘High’, ‘AI Talent Gap’: ‘Medium’}},
NKE: { name: ‘Nike’, matrix: {‘DTC Strategy Execution’: ‘High’, ‘Fashion/Consumer Trends’: ‘High’, ‘Geopolitical Supply Chain’: ‘High’, ‘Brand Reputation’: ‘High’}},
PG: { name: ‘Procter & Gamble’, matrix: {‘Commodity Costs’: ‘High’, ‘Private Label Competition’: ‘Medium’, ‘Geopolitical Supply Chain’: ‘Medium’, ‘Brand Management’: ‘High’}},
CRM: { name: ‘Salesforce’, matrix: {‘Growth Deceleration’: ‘High’, ‘M&A Integration (Slack)’: ‘Medium’, ‘Competition (Microsoft)’: ‘High’, ‘AI Talent Gap’: ‘High’}},
TRV: { name: ‘Travelers’, matrix: {‘Catastrophe Losses (Climate)’: ‘High’, ‘Interest Rate Sensitivity’: ‘High’, ‘Insurance Pricing Cycles’: ‘High’, ‘Insurtech Disruption’: ‘Medium’}},
UNH: { name: ‘UnitedHealth Group’, matrix: {‘Regulatory Risk (Healthcare Policy)’: ‘High’, ‘Vertical Integration Scrutiny’: ‘High’, ‘Data Security (Cyberattack)’: ‘High’, ‘Medical Cost Trends’: ‘High’}},
V: { name: ‘Visa’, matrix: {‘Fintech Disruption’: ‘High’, ‘Regulatory Scrutiny (Antitrust)’: ‘High’, ‘Geopolitical (Cross-Border Fees)’: ‘Medium’, ‘Data Security’: ‘High’}}
}
};
let capitalAllocationChart, shareholderReturnsChart, headcountChart;
function showSection(sectionId, element) {
document.querySelectorAll(‘.section’).forEach(section => section.classList.remove(‘active’));
document.getElementById(sectionId).classList.add(‘active’);
document.querySelectorAll(‘.nav-link’).forEach(link => link.classList.remove(‘active’));
element.classList.add(‘active’);
}
function updateStrategySection(sector) {
const data = reportData.strategy[sector];
const yAxisLabel = data.yAxisLabel || ‘% of Revenue’;
document.getElementById(‘strategyTitle’).innerText = data.title;
document.getElementById(‘strategyCompany’).innerText = data.company;
document.getElementById(‘strategyContent’).innerHTML = data.content;
document.getElementById(‘capitalAllocationChartLabel’).innerText = `Investment as a ${yAxisLabel} (Recent Avg)`;
if (capitalAllocationChart) capitalAllocationChart.destroy();
const ctx = document.getElementById(‘capitalAllocationChart’).getContext(‘2d’);
capitalAllocationChart = new Chart(ctx, {
type: ‘bar’,
data: data.chartData,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: yAxisLabel
}
}
},
plugins: {
legend: { position: ‘top’ },
tooltip: {
callbacks: {
label: (c) => `${c.dataset.label}: ${c.formattedValue}${yAxisLabel.includes(‘%’) ? ‘%’ : ‘B’}`
}
}
}
}
});
}
function updateCapitalSection(company) {
const data = reportData.capital[company];
if (shareholderReturnsChart) shareholderReturnsChart.destroy();
const returnsCtx = document.getElementById(‘shareholderReturnsChart’).getContext(‘2d’);
shareholderReturnsChart = new Chart(returnsCtx, {
type: ‘doughnut’,
data: { labels: [‘Buyback Yield’, ‘Dividend Yield’], datasets: [{ data: data.returns, backgroundColor: [‘#4f46e5’, ‘#a5b4fc’], borderColor: ‘#ffffff’, borderWidth: 2 }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: ‘bottom’ }, tooltip: { callbacks: { label: (c) => `${c.label}: ${c.formattedValue}%` } } } }
});
if (headcountChart) headcountChart.destroy();
const headcountCtx = document.getElementById(‘headcountChart’).getContext(‘2d’);
headcountChart = new Chart(headcountCtx, {
type: ‘line’,
data: { labels: data.headcount.labels, datasets: [{ label: `Headcount`, data: data.headcount.data, borderColor: ‘#10b981’, backgroundColor: ‘rgba(16, 185, 129, 0.1)’, fill: true, tension: 0.1 }] },
options: { responsive: true, maintainAspectRatio: false, scales: { y: { title: { display: true, text: ‘Employees (in thousands/millions)’ } } }, plugins: { legend: { display: false } } }
});
}
function updateRiskSection(company) {
const data = reportData.risk[company];
document.getElementById(‘riskMatrixTitle’).innerText = `Risk Profile: ${data.name}`;
const tableBody = document.getElementById(‘riskTableBody’);
tableBody.innerHTML = ”;
document.getElementById(‘gemini-output’).innerHTML = ”; // Clear previous output
Object.entries(data.matrix).forEach(([risk, level]) => {
let levelColor;
switch (level) {
case ‘High’: levelColor = ‘bg-red-100 text-red-800’; break;
case ‘Medium’: levelColor = ‘bg-yellow-100 text-yellow-800’; break;
case ‘Low’: levelColor = ‘bg-green-100 text-green-800’; break;
}
tableBody.innerHTML += `<tr><td class=”px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900″>${risk}</td><td class=”px-6 py-4 whitespace-nowrap text-sm text-gray-500″><span class=”px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${levelColor}”>${level}</span></td></tr>`;
});
}
function markdownToHtml(text) {
let html = text
.replace(/\*\*(.*?)\*\*/g, ‘<strong>$1</strong>’)
.replace(/\*(.*?)\*/g, ‘<li>$1</li>’);
html = html.replace(/(\<li\>.*?\<\/li\>)/g, ‘<ul>$1</ul>’);
html = html.replace(/<\/li\>\n<ul>/g, ‘</li><li>’);
html = html.replace(/<\/ul>\n<ul>/g, ”);
return html.split(‘\n’).map(line => {
if(line.startsWith(‘###’)) return `<h3>${line.substring(3).trim()}</h3>`;
if(line.trim().length > 0 && !line.startsWith(‘<‘)) return `<p>${line}</p>`;
return line;
}).join(”);
}
async function generateMitigationStrategies() {
const companyKey = document.getElementById(‘companySelectorRisk’).value;
const companyData = reportData.risk[companyKey];
const outputDiv = document.getElementById(‘gemini-output’);
const button = document.getElementById(‘gemini-button’);
const highRisks = Object.entries(companyData.matrix)
.filter(([, level]) => level === ‘High’)
.map(([risk]) => risk)
.join(‘, ‘);
if (!highRisks) {
outputDiv.innerHTML = ‘<p>No high-risk factors identified for brainstorming.</p>’;
return;
}
const prompt = `You are a strategic advisor to a corporate board. For ${companyData.name}, which faces the following primary risks: ${highRisks}. Please brainstorm 2-3 high-level, actionable mitigation strategies for each identified risk. Format the response clearly with headings for each risk.`;
outputDiv.innerHTML = ‘<div class=”flex justify-center items-center”><div class=”animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600″></div><p class=”ml-3″>Generating ideas with Gemini…</p></div>’;
button.disabled = true;
button.classList.add(‘opacity-50’, ‘cursor-not-allowed’);
try {
let chatHistory = [{ role: “user”, parts: [{ text: prompt }] }];
const payload = { contents: chatHistory };
const apiKey = “”;
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
const response = await fetch(apiUrl, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`API request failed with status ${response.status}`);
}
const result = await response.json();
if (result.candidates && result.candidates.length > 0 && result.candidates[0].content && result.candidates[0].content.parts && result.candidates[0].content.parts.length > 0) {
const rawText = result.candidates[0].content.parts[0].text;
outputDiv.innerHTML = markdownToHtml(rawText);
} else {
outputDiv.innerHTML = ‘<p class=”text-red-500″>Could not generate a response. The API returned an empty result. Please try again.</p>’;
}
} catch (error) {
console.error(“Error calling Gemini API:”, error);
outputDiv.innerHTML = `<p class=”text-red-500″>An error occurred while generating strategies. Please check the console for details.</p>`;
} finally {
button.disabled = false;
button.classList.remove(‘opacity-50’, ‘cursor-not-allowed’);
}
}
document.addEventListener(‘DOMContentLoaded’, () => {
const firstNavLink = document.querySelector(‘.nav-link’);
firstNavLink.classList.add(‘active’);
const initialCompany = document.querySelector(‘#companySelectorCapital’).value;
const initialRiskCompany = document.querySelector(‘#companySelectorRisk’).value;
updateStrategySection(‘tech’);
updateCapitalSection(initialCompany);
updateRiskSection(initialRiskCompany);
document.getElementById(‘sectorSelector’).addEventListener(‘change’, (e) => updateStrategySection(e.target.value));
document.getElementById(‘companySelectorCapital’).addEventListener(‘change’, (e) => updateCapitalSection(e.target.value));
document.getElementById(‘companySelectorRisk’).addEventListener(‘change’, (e) => updateRiskSection(e.target.value));
});
</script>
</body>
</html>
“`
Once saved and uploaded, this file will function as a standalone webpa