Spaces:

droov
/

opt

Sleeping

App Files Files Community

dhruv575 commited on Apr 23, 2025

Commit

5a590e8

1 Parent(s): 277da82

Education tab

Browse files

Files changed (8) hide show

app.py +17 -1
assets/static/education.html +470 -0
assets/static/education.js +1354 -0
assets/static/index.html +24 -80
assets/static/script.js +203 -23
assets/static/style.css +547 -10
data/stock_data.csv +2 -2
data/tickers_by_sector.json +1 -42

app.py CHANGED Viewed

@@ -239,12 +239,28 @@ async def serve_frontend():
     """Serve the custom frontend HTML."""
     html_path = Path(__file__).parent / "assets" / "static" / "index.html"
     if html_path.exists():
-        with open(html_path) as f:
             content = f.read()
         return HTMLResponse(content=content)
     else:
         return {"error": "Frontend HTML file not found"}
 @app.get("/api/tickers_by_sector")
 async def get_tickers_by_sector():
     """Return the tickers grouped by sector."""

     """Serve the custom frontend HTML."""
     html_path = Path(__file__).parent / "assets" / "static" / "index.html"
     if html_path.exists():
+        with open(html_path, 'r', encoding='utf-8') as f:
             content = f.read()
         return HTMLResponse(content=content)
     else:
         return {"error": "Frontend HTML file not found"}
+@app.get("/index.html")
+async def serve_index():
+    """Serve the index page HTML."""
+    return await serve_frontend()
+@app.get("/education.html")
+async def serve_education():
+    """Serve the education page HTML."""
+    html_path = Path(__file__).parent / "assets" / "static" / "education.html"
+    if html_path.exists():
+        with open(html_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        return HTMLResponse(content=content)
+    else:
+        return {"error": "Education HTML file not found"}
 @app.get("/api/tickers_by_sector")
 async def get_tickers_by_sector():
     """Return the tickers grouped by sector."""

assets/static/education.html ADDED Viewed

	@@ -0,0 +1,470 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Portfolio Optimizer - Education</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1/build/global/luxon.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.1.0/dist/chartjs-plugin-annotation.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div class="title-container">
+        <h1>Portfolio Optimizer</h1>
+      </div>
+      <nav class="nav-menu">
+        <a href="/index.html" class="nav-link">Simulation</a>
+        <a href="/education.html" class="nav-link active">Education</a>
+      </nav>
+    </header>
+    <div class="education-container">
+      <div class="education-header">
+        <h2>Educational Resources</h2>
+        <p>
+          This page is designed to help you understand the components of our portfolio optimization objective function.
+          Through interactive demonstrations with synthetic data, you'll see how different components affect portfolio performance
+          and learn the mathematical concepts behind modern portfolio theory and online convex optimization.
+        </p>
+      </div>
+      <div class="variable-definitions">
+        <h3>Variable Definitions</h3>
+        <div class="variable-grid">
+          <div class="variable-math">
+            <span class="math-symbol">w<sub>t</sub> ∈ ℝ<sup>N</sup></span>
+          </div>
+          <div class="variable-description">
+            Portfolio weights at time t
+          </div>
+          <div class="variable-math">
+            <span class="math-symbol">R<sub>t</sub> ∈ ℝ</span>
+          </div>
+          <div class="variable-description">
+            Portfolio return at time t
+          </div>
+          <div class="variable-math">
+            <span class="math-symbol">r<sub>f,t</sub> ∈ ℝ</span>
+          </div>
+          <div class="variable-description">
+            Risk-free rate at time t
+          </div>
+          <div class="variable-math">
+            <span class="math-symbol">a<sub>i</sub> ∈ ℝ<sub>+</sub></span>
+          </div>
+          <div class="variable-description">
+            Objective weights, i ∈ {1,2,3,4}
+          </div>
+          <div class="variable-math">
+            <span class="math-symbol">ε ∈ ℝ<sub>+</sub></span>
+          </div>
+          <div class="variable-description">
+            Small constant for numerical stability
+          </div>
+        </div>
+      </div>
+      <!-- Sortino Ratio Section -->
+      <div class="subsection" id="sortino-ratio">
+        <h3>Sortino Ratio</h3>
+        <p>
+          The Sortino ratio is a modification of the Sharpe ratio that differentiates harmful volatility from total overall volatility.
+          It was developed by Frank A. Sortino in the early 1980s and has become an important risk-adjusted performance metric in
+          portfolio management. Unlike the Sharpe ratio, which penalizes both upside and downside volatility equally,
+          the Sortino ratio only penalizes downside volatility - recognizing that investors are typically concerned
+          with the risk of losing money rather than the "risk" of making more than expected.
+        </p>
+        <div class="formula-container">
+          <div class="formula">
+            <p class="formula-header">Sortino Ratio Formula:</p>
+            <div class="formula-content">
+              <p>Sortino(r, r<sub>f</sub>) = <span class="fraction"><span class="numerator">E[R<sub>t</sub> - r<sub>f,t</sub>]</span><span class="denominator">σ<sub>downside</sub> + ε</span></span></p>
+              <p class="formula-notation">where</p>
+              <p>σ<sub>downside</sub> = <span class="sqrt"><span class="sqrt-content"><span class="fraction"><span class="numerator">1</span><span class="denominator">T</span></span> ∑<sub>t=1</sub><sup>T</sup> min(R<sub>t</sub> - r<sub>f,t</sub>, 0)<sup>2</sup></span></span></p>
+            </div>
+          </div>
+          <div class="formula-explanation">
+            <p><strong>E[R<sub>t</sub> - r<sub>f,t</sub>]</strong>: Expected excess return (portfolio return minus risk-free rate)</p>
+            <p><strong>σ<sub>downside</sub></strong>: Downside deviation (standard deviation of negative returns only)</p>
+            <p><strong>ε</strong>: Small constant to avoid division by zero when downside deviation is zero</p>
+          </div>
+        </div>
+        <p>
+          In our objective function, maximizing the Sortino ratio is the first term. By focusing on downside risk,
+          our optimization algorithm seeks to maximize returns while minimizing the risk of significant losses,
+          which aligns with most investors' preferences and behavioral tendencies.
+        </p>
+        <div class="interactive-demo">
+          <h4>Interactive Demonstration</h4>
+          <p>
+            Below are two charts showing the performance of three synthetic assets with distinctly different risk-return profiles over a 4-month period.
+            The left chart shows the cumulative returns of each asset, while the right chart displays their corresponding 10-day Sortino ratios.
+            Notice how the Sortino ratio responds to downside volatility while ignoring positive volatility, making it a valuable measure for risk-averse investors.
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Cumulative Returns</h4>
+              <canvas id="returnsChart"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Sortino Ratios</h4>
+              <canvas id="sortinoChart"></canvas>
+            </div>
+          </div>
+          <div class="asset-descriptions">
+            <div class="asset-description">
+              <h5>Asset A: Volatile with Spike Patterns</h5>
+              <p>This asset exhibits a "spikey" pattern with dramatic upward and downward movements, resulting in high volatility and unpredictable Sortino ratios.</p>
+            </div>
+            <div class="asset-description">
+              <h5>Asset B: Exponential Growth with Limited Downside</h5>
+              <p>This asset follows an exponential growth curve with very limited downside risk, resulting in a consistently high Sortino ratio despite moderate returns.</p>
+            </div>
+            <div class="asset-description">
+              <h5>Asset C: Linear Growth with Minimal Volatility</h5>
+              <p>This asset shows a nearly linear growth pattern with very low volatility in both directions, making it highly predictable but with limited return potential.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Maximum Drawdown Section -->
+      <div class="subsection" id="maximum-drawdown">
+        <h3>Maximum Drawdown</h3>
+        <p>
+          Maximum Drawdown (MDD) is a key risk metric that measures the largest peak-to-trough decline in the value of a portfolio
+          before a new peak is achieved. Unlike volatility-based metrics that treat upward and downward movements equally,
+          maximum drawdown specifically focuses on the largest sustained loss an investor might experience, making it
+          particularly important for assessing downside risk.
+        </p>
+        <div class="formula-container">
+          <div class="formula">
+            <p class="formula-header">Maximum Drawdown Formula:</p>
+            <div class="formula-content">
+              <p>MaxDD(r) = <span class="fraction"><span class="numerator">max<sub>t∈[1,T]</sub> CR<sub>t</sub> - CR<sub>T</sub></span><span class="denominator">max<sub>t∈[1,T]</sub> CR<sub>t</sub> + ε</span></span></p>
+              <p class="formula-notation">where</p>
+              <p>CR<sub>t</sub> = ∏<sub>i=1</sub><sup>t</sup>(1 + R<sub>i</sub>)</p>
+            </div>
+          </div>
+          <div class="formula-explanation">
+            <p><strong>CR<sub>t</sub></strong>: Cumulative return at time t</p>
+            <p><strong>max<sub>t∈[1,T]</sub> CR<sub>t</sub></strong>: Maximum cumulative return up to time T</p>
+            <p><strong>CR<sub>T</sub></strong>: Final cumulative return</p>
+            <p><strong>ε</strong>: Small constant for numerical stability</p>
+          </div>
+        </div>
+        <p>
+          In our objective function, minimizing maximum drawdown is the second term. By reducing the severity of prolonged
+          declines, our optimization algorithm aims to protect capital during market downturns while still seeking growth
+          opportunities. This is especially valuable for investors with lower risk tolerance or shorter time horizons.
+        </p>
+        <div class="interactive-demo">
+          <h4>Interactive Demonstration</h4>
+          <p>
+            Below are two charts demonstrating maximum drawdown for three synthetic assets over a 4-month period.
+            The left chart shows the cumulative returns with the maximum drawdown periods highlighted, while the right chart
+            displays the drawdown percentage over time (distance from previous peak). Notice how different return patterns lead to
+            varying drawdown profiles, even for assets with similar overall returns.
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Cumulative Returns with Drawdown Periods</h4>
+              <canvas id="mddReturnsChart"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Drawdown Percentage</h4>
+              <canvas id="drawdownChart"></canvas>
+            </div>
+          </div>
+          <div class="asset-descriptions">
+            <div class="asset-description">
+              <h5>Asset D: Steady Growth with One Major Correction</h5>
+              <p>This asset shows generally positive performance but experiences one significant correction, creating a large maximum drawdown despite good overall returns.</p>
+            </div>
+            <div class="asset-description">
+              <h5>Asset E: Volatile with Frequent Drawdowns</h5>
+              <p>This asset has multiple smaller drawdowns throughout the period, demonstrating how frequent minor corrections affect the drawdown profile.</p>
+            </div>
+            <div class="asset-description">
+              <h5>Asset F: Declining Trend with Recovery</h5>
+              <p>This asset shows a prolonged decline followed by recovery, illustrating how a negative trend creates extended drawdown periods even with eventual improvement.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Turnover Ratio Section -->
+      <div class="subsection" id="turnover-ratio">
+        <h3>Turnover Ratio</h3>
+        <p>
+          The Turnover Ratio measures the frequency and magnitude of changes in portfolio weights between consecutive time periods.
+          High turnover typically results in increased transaction costs, which can significantly impact net returns, especially in
+          strategies with frequent rebalancing. In optimization, controlling turnover is essential for creating portfolios that are
+          both profitable and practically implementable.
+        </p>
+        <div class="formula-container">
+          <div class="formula">
+            <p class="formula-header">Turnover Ratio Formula:</p>
+            <div class="formula-content">
+              <p>Turnover(w<sub>t</sub>, w<sub>t-1</sub>) = <span class="fraction"><span class="numerator">1</span><span class="denominator">2</span></span> ∑<sub>i=1</sub><sup>N</sup> |w<sub>t,i</sub> - w<sub>t-1,i</sub>|</p>
+            </div>
+          </div>
+          <div class="formula-explanation">
+            <p><strong>w<sub>t,i</sub></strong>: Weight of asset i at time t</p>
+            <p><strong>w<sub>t-1,i</sub></strong>: Weight of asset i at time t-1</p>
+            <p><strong>N</strong>: Number of assets in the portfolio</p>
+            <p><strong>0.5 multiplier</strong>: Makes the measure represent the minimum fraction of the portfolio that must be traded</p>
+          </div>
+        </div>
+        <p>
+          In our objective function, minimizing turnover is the third term. The measure ranges from 0 (no change in weights) to 1
+          (complete portfolio turnover). By penalizing excessive turnover, the optimization algorithm balances the desire for
+          optimal positioning against the practical costs of frequent trading, resulting in more efficient portfolio adjustments.
+        </p>
+        <div class="interactive-demo">
+          <h4>Interactive Demonstration</h4>
+          <p>
+            Below are three examples of different portfolio turnover patterns, each showing a 3-asset portfolio over time.
+            The left charts show weight allocations for each strategy, while the right charts display the corresponding turnover ratio.
+            These examples illustrate how different rebalancing approaches impact turnover and associated trading costs.
+          </p>
+          <!-- Portfolio 1: Stable Weights -->
+          <h5 class="demo-title">Portfolio 1: Stable Allocation</h5>
+          <p class="demo-description">
+            This portfolio maintains relatively stable weights over time (approximately 40%, 35%, 25%), with only minor
+            adjustments to maintain target allocations. Note the consistently low turnover values.
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Portfolio Weights</h4>
+              <canvas id="weightsChart1"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Turnover Ratio</h4>
+              <canvas id="turnoverChart1"></canvas>
+            </div>
+          </div>
+          <!-- Portfolio 2: Erratic Trading -->
+          <h5 class="demo-title">Portfolio 2: Erratic Trading</h5>
+          <p class="demo-description">
+            This portfolio exhibits extreme day-to-day changes in allocations, frequently shifting substantial portions
+            of capital between assets. The resulting high turnover indicates excessive trading costs.
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Portfolio Weights</h4>
+              <canvas id="weightsChart2"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Turnover Ratio</h4>
+              <canvas id="turnoverChart2"></canvas>
+            </div>
+          </div>
+          <!-- Portfolio 3: Gradual Concentration -->
+          <h5 class="demo-title">Portfolio 3: Gradual Concentration</h5>
+          <p class="demo-description">
+            This portfolio starts with equal weights but gradually concentrates all capital into a single asset.
+            While daily turnover is moderate, the cumulative effect represents a complete portfolio transformation.
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Portfolio Weights</h4>
+              <canvas id="weightsChart3"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Turnover Ratio</h4>
+              <canvas id="turnoverChart3"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Concentration Penalty Section -->
+      <div class="subsection" id="concentration-penalty">
+        <h3>Concentration Penalty</h3>
+        <p>
+          The Concentration Penalty helps maintain a balanced portfolio by discouraging excessive concentration in a small number of assets
+          or excessive diversification across too many assets. It uses the concept of Effective Number of Positions (ENP),
+          which measures portfolio diversification based on the Herfindahl-Hirschman Index (HHI),
+          a common measure of market concentration used in economics and finance.
+        </p>
+        <div class="formula-container">
+          <div class="formula">
+            <p class="formula-header">Concentration Penalty Formula:</p>
+            <div class="formula-content">
+              <p>CP(w<sub>t</sub>) = max(ENP<sub>min</sub> - ENP(w<sub>t</sub>), 0) + max(ENP(w<sub>t</sub>) - ENP<sub>max</sub>, 0)</p>
+              <p class="formula-notation">where</p>
+              <p>ENP(w<sub>t</sub>) = <span class="fraction"><span class="numerator">1</span><span class="denominator">HHI(w<sub>t</sub>) + ε</span></span></p>
+              <p>HHI(w<sub>t</sub>) = ∑<sub>i=1</sub><sup>N</sup> w<sub>t,i</sub><sup>2</sup></p>
+            </div>
+          </div>
+          <div class="formula-explanation">
+            <p><strong>ENP<sub>min</sub></strong>: Minimum target for the effective number of positions</p>
+            <p><strong>ENP<sub>max</sub></strong>: Maximum target for the effective number of positions</p>
+            <p><strong>ENP(w<sub>t</sub>)</strong>: Effective number of positions at time t</p>
+            <p><strong>HHI(w<sub>t</sub>)</strong>: Herfindahl-Hirschman Index at time t</p>
+            <p><strong>w<sub>t,i</sub></strong>: Weight of asset i at time t</p>
+            <p><strong>ε</strong>: Small constant for numerical stability</p>
+          </div>
+        </div>
+        <p>
+          In our objective function, the concentration penalty is the fourth term. It creates a "target range" for portfolio
+          diversification, adding a penalty when the portfolio's ENP falls below ENP<sub>min</sub> or exceeds ENP<sub>max</sub>.
+          This approach allows us to control portfolio concentration within desired bounds, balancing the benefits of diversification
+          against the potential for overdiversification.
+        </p>
+        <div class="interactive-demo">
+          <h4>Interactive Demonstration</h4>
+          <p>
+            Below are examples showing how different portfolio weight distributions affect concentration metrics,
+            with ENP targets of 3 (minimum) and 8 (maximum). The visualizations demonstrate how portfolios
+            with the same number of assets can have very different effective concentrations.
+          </p>
+          <!-- Portfolio Concentration Demo -->
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>Portfolio Weight Distributions</h4>
+              <canvas id="concentrationWeightsChart"></canvas>
+            </div>
+            <div class="edu-chart">
+              <h4>Effective Number of Positions (ENP)</h4>
+              <canvas id="enpChart"></canvas>
+            </div>
+          </div>
+          <div class="concentration-explanations">
+            <div class="concentration-example">
+              <h5>Highly Concentrated Portfolio</h5>
+              <p>
+                This portfolio has most of its weight in just a few assets, resulting in an ENP below the minimum target.
+                The concentration penalty encourages adding more diversification to reach the target range.
+              </p>
+              <div class="enp-indicator">
+                <span class="enp-value">ENP ≈ 2.1</span>
+                <div class="enp-bar">
+                  <div class="enp-progress" style="width: 26%;"></div>
+                  <div class="enp-marker min-marker" style="left: 37.5%;">Min</div>
+                  <div class="enp-marker max-marker" style="left: 100%;">Max</div>
+                </div>
+              </div>
+            </div>
+            <div class="concentration-example">
+              <h5>Balanced Portfolio</h5>
+              <p>
+                This portfolio has a balanced distribution of weights across assets, with an ENP within the target range.
+                No concentration penalty is applied since the portfolio diversification is optimal.
+              </p>
+              <div class="enp-indicator">
+                <span class="enp-value">ENP ≈ 5.8</span>
+                <div class="enp-bar">
+                  <div class="enp-progress" style="width: 72.5%;"></div>
+                  <div class="enp-marker min-marker" style="left: 37.5%;">Min</div>
+                  <div class="enp-marker max-marker" style="left: 100%;">Max</div>
+                </div>
+              </div>
+            </div>
+            <div class="concentration-example">
+              <h5>Overly Diversified Portfolio</h5>
+              <p>
+                This portfolio has weights spread too thinly across many assets, with an ENP exceeding the maximum target.
+                The concentration penalty encourages more focus on fewer positions.
+              </p>
+              <div class="enp-indicator">
+                <span class="enp-value">ENP ≈ 9.6</span>
+                <div class="enp-bar">
+                  <div class="enp-progress" style="width: 120%;"></div>
+                  <div class="enp-marker min-marker" style="left: 37.5%;">Min</div>
+                  <div class="enp-marker max-marker" style="left: 100%;">Max</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- HHI vs ENP Relationship -->
+          <h5 class="demo-title">Relationship Between HHI and ENP</h5>
+          <p class="demo-description">
+            The chart below shows the inverse relationship between the Herfindahl-Hirschman Index (HHI) and the Effective Number of Positions (ENP).
+            As HHI increases (more concentration), ENP decreases (fewer effective positions).
+          </p>
+          <div class="chart-container">
+            <div class="edu-chart">
+              <h4>HHI vs ENP Relationship</h4>
+              <canvas id="hhiEnpChart"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Integrated Objective Function Section -->
+      <div class="subsection" id="objective-function">
+        <h3>Integrated Objective Function</h3>
+        <p>
+          Our portfolio optimization approach combines all the previously discussed components into a single objective function.
+          This integrated approach allows us to balance multiple competing goals simultaneously:
+          maximizing risk-adjusted returns (Sortino ratio), minimizing maximum drawdown, controlling turnover,
+          and maintaining an appropriate level of diversification.
+        </p>
+        <div class="formula-container">
+          <div class="formula">
+            <p class="formula-header">Objective Function:</p>
+            <div class="formula-content">
+              <p>max<sub>w<sub>t</sub></sub> α<sub>1</sub> · Sortino(r, r<sub>f</sub>) - α<sub>2</sub> · MaxDD(r) - α<sub>3</sub> · Turnover(w<sub>t</sub>, w<sub>t-1</sub>) - α<sub>4</sub> · CP(w<sub>t</sub>)</p>
+              <p class="formula-notation">subject to:</p>
+              <p>Σ<sub>i=1</sub><sup>N</sup> w<sub>t,i</sub> = 1 and w<sub>t,i</sub> ≥ 0 ∀t,i</p>
+            </div>
+          </div>
+          <div class="formula-explanation">
+            <p><strong>α<sub>1</sub>, α<sub>2</sub>, α<sub>3</sub>, α<sub>4</sub></strong>: Objective weights that control the relative importance of each component</p>
+            <p><strong>Sortino(r, r<sub>f</sub>)</strong>: The Sortino ratio</p>
+            <p><strong>MaxDD(r)</strong>: Maximum drawdown</p>
+            <p><strong>Turnover(w<sub>t</sub>, w<sub>t-1</sub>)</strong>: Portfolio turnover</p>
+            <p><strong>CP(w<sub>t</sub>)</strong>: Concentration penalty</p>
+          </div>
+        </div>
+        <p>
+          The objective weights (α) allow us to customize the optimization for different investor preferences and market conditions.
+          For example, increasing α<sub>2</sub> puts more emphasis on drawdown protection, which may be preferable during volatile markets,
+          while increasing α<sub>3</sub> reduces turnover for more tax-efficient or lower-cost implementations.
+        </p>
+      </div>
+    </div>
+  </div>
+  <script src="/static/education.js"></script>
+</body>
+</html>

assets/static/education.js ADDED Viewed

	@@ -0,0 +1,1354 @@

+// Register the Chart.js annotation plugin if available
+try {
+  // In Chart.js 3.x, the plugin is imported separately but needs to be registered
+  // In some bundled versions, it might be automatically available
+  const hasAnnotationPlugin =
+    typeof window.ChartAnnotation !== 'undefined' ||
+    (Chart && Chart.Annotation) ||
+    (Chart && Chart.registry && Chart.registry.plugins && Chart.registry.plugins.get('annotation'));
+  console.log('Chart.js version:', Chart.version);
+  console.log('Annotation plugin available:', hasAnnotationPlugin);
+  if (typeof window.ChartAnnotation !== 'undefined') {
+    Chart.register(window.ChartAnnotation);
+    console.log('Registered external ChartAnnotation plugin');
+  } else {
+    console.log('Using bundled annotation plugin or proceeding without it');
+  }
+} catch (error) {
+  console.error('Error during Chart.js plugin setup:', error);
+}
+// Education page JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('Education page loaded');
+  // Mark the current page in the navigation
+  const currentPath = window.location.pathname;
+  const navLinks = document.querySelectorAll('.nav-link');
+  navLinks.forEach(link => {
+    const linkPath = link.getAttribute('href');
+    if (currentPath.endsWith(linkPath) ||
+        (currentPath.endsWith('/') && linkPath === '/index.html')) {
+      link.classList.add('active');
+    } else {
+      link.classList.remove('active');
+    }
+  });
+  // Initialize the Sortino ratio demonstration
+  initializeSortinoDemo();
+  // Initialize the Maximum Drawdown demonstration
+  initializeMDDDemo();
+  // Initialize the Turnover Ratio demonstration
+  initializeTurnoverDemo();
+  // Initialize the Concentration Penalty demonstration
+  initializeConcentrationDemo();
+});
+// Utility function to calculate cumulative returns
+function calculateCumulativeReturns(returns) {
+  let cumulative = 1.0;
+  return returns.map(ret => {
+    cumulative *= (1 + ret);
+    return cumulative;
+  });
+}
+// Utility function to calculate drawdowns from cumulative returns
+function calculateDrawdowns(cumulativeReturns) {
+  let peak = cumulativeReturns[0];
+  return cumulativeReturns.map(cr => {
+    peak = Math.max(peak, cr);
+    return (peak - cr) / peak; // Drawdown as a percentage of the peak
+  });
+}
+// Utility function to calculate maximum drawdown
+function calculateMaxDrawdown(cumulativeReturns) {
+  let peak = cumulativeReturns[0];
+  let maxDrawdown = 0;
+  cumulativeReturns.forEach(cr => {
+    peak = Math.max(peak, cr);
+    const drawdown = (peak - cr) / peak;
+    maxDrawdown = Math.max(maxDrawdown, drawdown);
+  });
+  return maxDrawdown;
+}
+// Utility function to find drawdown periods
+function findDrawdownPeriods(cumulativeReturns, threshold = 0.05) {
+  const periods = [];
+  let inDrawdown = false;
+  let startIndex = 0;
+  let peak = cumulativeReturns[0];
+  let peakIndex = 0;
+  cumulativeReturns.forEach((cr, i) => {
+    if (cr > peak) {
+      peak = cr;
+      peakIndex = i;
+      // If we were in a drawdown, it's now over
+      if (inDrawdown) {
+        periods.push({
+          start: startIndex,
+          end: i - 1,
+          peakIndex: peakIndex
+        });
+        inDrawdown = false;
+      }
+    } else {
+      const drawdown = (peak - cr) / peak;
+      // Start tracking a new drawdown once it exceeds the threshold
+      if (!inDrawdown && drawdown >= threshold) {
+        inDrawdown = true;
+        startIndex = i;
+      }
+    }
+  });
+  // If we're still in a drawdown at the end, add the final period
+  if (inDrawdown) {
+    periods.push({
+      start: startIndex,
+      end: cumulativeReturns.length - 1,
+      peakIndex: peakIndex
+    });
+  }
+  return periods;
+}
+// Utility function to calculate Sortino ratio
+function calculateSortinoRatio(returns, riskFreeRate, windowSize) {
+  if (returns.length < windowSize) {
+    return 0;
+  }
+  // Calculate excess returns
+  const excessReturns = returns.map(r => r - riskFreeRate);
+  // Calculate average excess return
+  const avgExcessReturn = excessReturns.reduce((a, b) => a + b, 0) / excessReturns.length;
+  // Calculate downside deviation (only consider negative excess returns)
+  const negativeExcessReturns = excessReturns.filter(r => r < 0);
+  if (negativeExcessReturns.length === 0) {
+    return 10; // Arbitrary high value when there are no negative returns
+  }
+  const downsideDeviation = Math.sqrt(
+    negativeExcessReturns.reduce((sum, r) => sum + r * r, 0) / negativeExcessReturns.length
+  );
+  // Small constant to avoid division by zero
+  const epsilon = 0.0001;
+  // Calculate Sortino ratio
+  return avgExcessReturn / (downsideDeviation + epsilon);
+}
+// Generate synthetic data for assets with different risk-return profiles
+function generateSyntheticData(days = 120) {
+  const riskFreeRate = 0.0001; // Daily risk-free rate (approximately 2.5% annually)
+  const dates = [];
+  const today = new Date();
+  // Generate dates for the past 4 months
+  for (let i = days; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+    dates.push(date);
+  }
+  // Asset A: Highly volatile with spikey behavior (dramatic ups and downs)
+  const assetAReturns = Array(days + 1).fill(0).map((_, i) => {
+    // Base pattern with occasional sharp spikes both positive and negative
+    let baseReturn = 0.0005;
+    // Add spikes every ~10 days
+    if (i % 10 === 0) {
+      // Alternate between positive and negative spikes
+      return (i % 20 === 0) ? 0.025 : -0.02;
+    } else if (i % 10 === 1) {
+      // Follow-up correction
+      return (i % 20 === 1) ? -0.01 : 0.008;
+    }
+    // Regular volatility on other days
+    return baseReturn + (Math.random() - 0.5) * 0.012;
+  });
+  // Asset B: Smooth exponential growth with minimal downside
+  const assetBReturns = Array(days + 1).fill(0).map((_, i) => {
+    // Gradually increasing return rate to create exponential curve
+    const growthFactor = 1 + (i / (days * 5));
+    const baseReturn = 0.001 * growthFactor;
+    // Add very limited downside with 20% chance of small negative returns
+    const rand = Math.random();
+    if (rand < 0.2) {
+      return -0.0015; // Small controlled negative returns
+    } else {
+      return baseReturn + (rand * 0.005); // Positive returns with upward trend
+    }
+  });
+  // Asset C: Nearly linear growth with minimal volatility
+  const assetCReturns = Array(days + 1).fill(0).map(() => {
+    // Very consistent returns with minimal variation
+    return 0.0003 + (Math.random() - 0.5) * 0.0006;
+  });
+  // Calculate cumulative returns
+  const assetACumulative = calculateCumulativeReturns(assetAReturns);
+  const assetBCumulative = calculateCumulativeReturns(assetBReturns);
+  const assetCCumulative = calculateCumulativeReturns(assetCReturns);
+  // Calculate rolling Sortino ratios with a 10-day window (shorter window for more variation)
+  const windowSize = 10;
+  const assetASortino = [];
+  const assetBSortino = [];
+  const assetCSortino = [];
+  for (let i = 0; i <= days; i++) {
+    const startIdx = Math.max(0, i - windowSize + 1);
+    const windowA = assetAReturns.slice(startIdx, i + 1);
+    const windowB = assetBReturns.slice(startIdx, i + 1);
+    const windowC = assetCReturns.slice(startIdx, i + 1);
+    assetASortino.push(calculateSortinoRatio(windowA, riskFreeRate, windowSize));
+    assetBSortino.push(calculateSortinoRatio(windowB, riskFreeRate, windowSize));
+    assetCSortino.push(calculateSortinoRatio(windowC, riskFreeRate, windowSize));
+  }
+  return {
+    dates,
+    returns: {
+      assetA: assetAReturns,
+      assetB: assetBReturns,
+      assetC: assetCReturns
+    },
+    cumulative: {
+      assetA: assetACumulative,
+      assetB: assetBCumulative,
+      assetC: assetCCumulative
+    },
+    sortino: {
+      assetA: assetASortino,
+      assetB: assetBSortino,
+      assetC: assetCSortino
+    }
+  };
+}
+// Initialize the Sortino ratio demonstration charts
+function initializeSortinoDemo() {
+  console.log('Initializing Sortino demo');
+  const returnsChartCtx = document.getElementById('returnsChart');
+  const sortinoChartCtx = document.getElementById('sortinoChart');
+  if (!returnsChartCtx || !sortinoChartCtx) {
+    console.error('Chart canvas elements not found for Sortino demo');
+    return;
+  }
+  // Configure Chart.js global defaults for dark theme
+  Chart.defaults.color = '#b0b0b8';
+  Chart.defaults.scale.grid.color = 'rgba(56, 56, 64, 0.5)';
+  Chart.defaults.scale.grid.borderColor = 'rgba(56, 56, 64, 0.8)';
+  // Generate synthetic data
+  const syntheticData = generateSyntheticData();
+  // Create returns chart
+  const returnsChart = new Chart(returnsChartCtx, {
+    type: 'line',
+    data: {
+      labels: syntheticData.dates,
+      datasets: [
+        {
+          label: 'Asset A',
+          data: syntheticData.cumulative.assetA,
+          borderColor: '#3f88e2',
+          backgroundColor: 'rgba(63, 136, 226, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        },
+        {
+          label: 'Asset B',
+          data: syntheticData.cumulative.assetB,
+          borderColor: '#4caf50',
+          backgroundColor: 'rgba(76, 175, 80, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        },
+        {
+          label: 'Asset C',
+          data: syntheticData.cumulative.assetC,
+          borderColor: '#e2b53f',
+          backgroundColor: 'rgba(226, 181, 63, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'top',
+          labels: {
+            usePointStyle: true,
+            padding: 15
+          }
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          backgroundColor: 'rgba(42, 42, 48, 0.9)',
+          titleColor: '#ffffff',
+          bodyColor: '#ffffff',
+          borderColor: 'rgba(56, 56, 64, 1)',
+          borderWidth: 1
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'week',
+            displayFormats: {
+              week: 'MMM d'
+            },
+            tooltipFormat: 'MMM d, yyyy'
+          },
+          title: {
+            display: true,
+            text: 'Date'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Cumulative Return'
+          },
+          beginAtZero: false,
+          suggestedMin: 0.9,
+          suggestedMax: 1.7
+        }
+      }
+    }
+  });
+  // Create Sortino chart
+  const sortinoChart = new Chart(sortinoChartCtx, {
+    type: 'line',
+    data: {
+      labels: syntheticData.dates,
+      datasets: [
+        {
+          label: 'Asset A',
+          data: syntheticData.sortino.assetA,
+          borderColor: '#3f88e2',
+          backgroundColor: 'rgba(63, 136, 226, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        },
+        {
+          label: 'Asset B',
+          data: syntheticData.sortino.assetB,
+          borderColor: '#4caf50',
+          backgroundColor: 'rgba(76, 175, 80, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        },
+        {
+          label: 'Asset C',
+          data: syntheticData.sortino.assetC,
+          borderColor: '#e2b53f',
+          backgroundColor: 'rgba(226, 181, 63, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'top',
+          labels: {
+            usePointStyle: true,
+            padding: 15
+          }
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          backgroundColor: 'rgba(42, 42, 48, 0.9)',
+          titleColor: '#ffffff',
+          bodyColor: '#ffffff',
+          borderColor: 'rgba(56, 56, 64, 1)',
+          borderWidth: 1
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'week',
+            displayFormats: {
+              week: 'MMM d'
+            },
+            tooltipFormat: 'MMM d, yyyy'
+          },
+          title: {
+            display: true,
+            text: 'Date'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Sortino Ratio (10-day Window)'
+          },
+          min: 0,
+          suggestedMax: 5
+        }
+      }
+    }
+  });
+}
+// Generate synthetic data for assets with different drawdown characteristics
+function generateMDDSyntheticData(days = 120) {
+  const dates = [];
+  const today = new Date();
+  // Generate dates for the past 4 months
+  for (let i = days; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+    dates.push(date);
+  }
+  // Asset D: Steady growth with one major correction
+  const assetDReturns = Array(days + 1).fill(0).map((_, i) => {
+    // Generally positive returns
+    let baseReturn = 0.0010;
+    // Add one major correction around day 50-65
+    if (i >= 50 && i < 65) {
+      // Sharp decline
+      return (i === 50) ? -0.06 : -0.008;
+    } else if (i >= 65 && i < 80) {
+      // Recovery period with strong returns
+      return 0.005;
+    }
+    // Regular positive drift with some noise
+    return baseReturn + (Math.random() - 0.45) * 0.003;
+  });
+  // Asset E: Volatile with frequent smaller drawdowns
+  const assetEReturns = Array(days + 1).fill(0).map((_, i) => {
+    // Base pattern with frequent corrections
+    let baseReturn = 0.0015;
+    // Cyclical pattern: every 15-20 days a correction
+    if (i % 20 > 15) {
+      return -0.01 - Math.random() * 0.005;
+    } else {
+      return baseReturn + (Math.random() - 0.3) * 0.004;
+    }
+  });
+  // Asset F: Declining trend with recovery
+  const assetFReturns = Array(days + 1).fill(0).map((_, i) => {
+    if (i < 60) {
+      // Gradual decline in first half
+      return -0.002 - Math.random() * 0.003;
+    } else if (i < 80) {
+      // Bottom formation
+      return -0.0005 + (Math.random() - 0.5) * 0.002;
+    } else {
+      // Recovery in last part
+      return 0.003 + Math.random() * 0.004;
+    }
+  });
+  // Calculate cumulative returns
+  const assetDCumulative = calculateCumulativeReturns(assetDReturns);
+  const assetECumulative = calculateCumulativeReturns(assetEReturns);
+  const assetFCumulative = calculateCumulativeReturns(assetFReturns);
+  // Calculate drawdowns
+  const assetDDrawdowns = calculateDrawdowns(assetDCumulative);
+  const assetEDrawdowns = calculateDrawdowns(assetECumulative);
+  const assetFDrawdowns = calculateDrawdowns(assetFCumulative);
+  // Find significant drawdown periods
+  const assetDPeriods = findDrawdownPeriods(assetDCumulative);
+  const assetEPeriods = findDrawdownPeriods(assetECumulative);
+  const assetFPeriods = findDrawdownPeriods(assetFCumulative);
+  return {
+    dates,
+    returns: {
+      assetD: assetDReturns,
+      assetE: assetEReturns,
+      assetF: assetFReturns
+    },
+    cumulative: {
+      assetD: assetDCumulative,
+      assetE: assetECumulative,
+      assetF: assetFCumulative
+    },
+    drawdowns: {
+      assetD: assetDDrawdowns,
+      assetE: assetEDrawdowns,
+      assetF: assetFDrawdowns
+    },
+    periods: {
+      assetD: assetDPeriods,
+      assetE: assetEPeriods,
+      assetF: assetFPeriods
+    },
+    maxDrawdowns: {
+      assetD: calculateMaxDrawdown(assetDCumulative),
+      assetE: calculateMaxDrawdown(assetECumulative),
+      assetF: calculateMaxDrawdown(assetFCumulative)
+    }
+  };
+}
+// Initialize the Maximum Drawdown demonstration charts
+function initializeMDDDemo() {
+  console.log('Initializing Maximum Drawdown demo');
+  const mddReturnsChartCtx = document.getElementById('mddReturnsChart');
+  const drawdownChartCtx = document.getElementById('drawdownChart');
+  if (!mddReturnsChartCtx || !drawdownChartCtx) {
+    console.error('Chart canvas elements not found for MDD demo');
+    return;
+  }
+  // Generate synthetic data for MDD demo
+  const syntheticData = generateMDDSyntheticData();
+  // Create plugin for highlighting drawdown periods
+  const drawdownPeriodPlugin = {
+    id: 'drawdownPeriod',
+    beforeDraw: (chart) => {
+      const {ctx, chartArea, scales} = chart;
+      if (!chartArea) {
+        return;
+      }
+      // Get the datasets
+      const datasets = chart.data.datasets;
+      for (let i = 0; i < datasets.length; i++) {
+        const dataset = datasets[i];
+        // Skip if it's not a dataset we want to highlight periods for
+        if (!dataset.drawdownPeriods) continue;
+        const periods = dataset.drawdownPeriods;
+        // Draw each drawdown period
+        periods.forEach(period => {
+          const startX = scales.x.getPixelForValue(chart.data.labels[period.start]);
+          const endX = scales.x.getPixelForValue(chart.data.labels[period.end]);
+          // Draw a semi-transparent rectangle for the drawdown period
+          ctx.fillStyle = dataset.backgroundColor.replace('0.1', '0.2');
+          ctx.fillRect(startX, chartArea.top, endX - startX, chartArea.height);
+          // Mark the peak with a vertical line
+          const peakX = scales.x.getPixelForValue(chart.data.labels[period.peakIndex]);
+          ctx.strokeStyle = dataset.borderColor;
+          ctx.setLineDash([5, 3]);
+          ctx.beginPath();
+          ctx.moveTo(peakX, chartArea.top);
+          ctx.lineTo(peakX, chartArea.bottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+        });
+      }
+    }
+  };
+  // Create returns chart with drawdown periods highlighted
+  const mddReturnsChart = new Chart(mddReturnsChartCtx, {
+    type: 'line',
+    plugins: [drawdownPeriodPlugin],
+    data: {
+      labels: syntheticData.dates,
+      datasets: [
+        {
+          label: 'Asset D',
+          data: syntheticData.cumulative.assetD,
+          borderColor: '#ff6384',
+          backgroundColor: 'rgba(255, 99, 132, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          drawdownPeriods: syntheticData.periods.assetD
+        },
+        {
+          label: 'Asset E',
+          data: syntheticData.cumulative.assetE,
+          borderColor: '#36a2eb',
+          backgroundColor: 'rgba(54, 162, 235, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          drawdownPeriods: syntheticData.periods.assetE
+        },
+        {
+          label: 'Asset F',
+          data: syntheticData.cumulative.assetF,
+          borderColor: '#ffcd56',
+          backgroundColor: 'rgba(255, 205, 86, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          drawdownPeriods: syntheticData.periods.assetF
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          callbacks: {
+            afterTitle: function(context) {
+              const datasetIndex = context[0].datasetIndex;
+              const dataIndex = context[0].dataIndex;
+              const value = context[0].dataset.data[dataIndex];
+              const maxValue = Math.max(...context[0].dataset.data.slice(0, dataIndex + 1));
+              const drawdown = ((maxValue - value) / maxValue * 100).toFixed(2);
+              return `Current Drawdown: ${drawdown}%`;
+            }
+          }
+        },
+        legend: {
+          position: 'top'
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'week',
+            displayFormats: {
+              week: 'MMM d'
+            },
+            tooltipFormat: 'MMM d, yyyy'
+          },
+          title: {
+            display: true,
+            text: 'Date'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Cumulative Return'
+          },
+          suggestedMin: 0.7,
+          suggestedMax: 1.5
+        }
+      }
+    }
+  });
+  // Create drawdown chart
+  const drawdownChart = new Chart(drawdownChartCtx, {
+    type: 'line',
+    data: {
+      labels: syntheticData.dates,
+      datasets: [
+        {
+          label: `Asset D (Max: ${(syntheticData.maxDrawdowns.assetD * 100).toFixed(1)}%)`,
+          data: syntheticData.drawdowns.assetD.map(d => d * 100), // Convert to percentage
+          borderColor: '#ff6384',
+          backgroundColor: 'rgba(255, 99, 132, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          fill: 'origin'
+        },
+        {
+          label: `Asset E (Max: ${(syntheticData.maxDrawdowns.assetE * 100).toFixed(1)}%)`,
+          data: syntheticData.drawdowns.assetE.map(d => d * 100), // Convert to percentage
+          borderColor: '#36a2eb',
+          backgroundColor: 'rgba(54, 162, 235, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          fill: 'origin'
+        },
+        {
+          label: `Asset F (Max: ${(syntheticData.maxDrawdowns.assetF * 100).toFixed(1)}%)`,
+          data: syntheticData.drawdowns.assetF.map(d => d * 100), // Convert to percentage
+          borderColor: '#ffcd56',
+          backgroundColor: 'rgba(255, 205, 86, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          fill: 'origin'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          callbacks: {
+            label: function(context) {
+              return `${context.dataset.label.split(' (')[0]}: ${context.parsed.y.toFixed(2)}%`;
+            }
+          }
+        },
+        legend: {
+          position: 'top'
+        }
+      },
+      scales: {
+        x: {
+          type: 'time',
+          time: {
+            unit: 'week',
+            displayFormats: {
+              week: 'MMM d'
+            },
+            tooltipFormat: 'MMM d, yyyy'
+          },
+          title: {
+            display: true,
+            text: 'Date'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Drawdown (%)'
+          },
+          min: 0,
+          max: 35, // Max drawdown percentage to show
+          reverse: true // Invert axis so drawdowns go downward
+        }
+      }
+    }
+  });
+}
+// Utility function to calculate turnover ratio
+function calculateTurnover(currentWeights, previousWeights) {
+  if (!previousWeights) {
+    return 0; // First period has no turnover
+  }
+  let sumAbsDiff = 0;
+  for (let i = 0; i < currentWeights.length; i++) {
+    sumAbsDiff += Math.abs(currentWeights[i] - previousWeights[i]);
+  }
+  // Multiply by 0.5 to get the turnover ratio (representing minimum fraction of portfolio that must be traded)
+  return sumAbsDiff * 0.5;
+}
+// Generate data for turnover ratio demonstration
+function generateTurnoverDemoData(days = 60) {
+  const dates = [];
+  const today = new Date();
+  // Generate dates
+  for (let i = days; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+    dates.push(date);
+  }
+  // Portfolio 1: Stable allocations around 40%, 35%, 25%
+  const portfolio1Weights = [];
+  const portfolio1Turnover = [];
+  let prevWeights1 = null;
+  for (let i = 0; i <= days; i++) {
+    // Target weights with small random fluctuations
+    const target1 = 0.40;
+    const target2 = 0.35;
+    const target3 = 0.25;
+    // Small random adjustments (up to +/- 2%)
+    const adjust1 = (Math.random() - 0.5) * 0.02;
+    const adjust2 = (Math.random() - 0.5) * 0.02;
+    // Calculate weights ensuring they sum to 1
+    let weight1 = Math.max(0.01, Math.min(0.99, target1 + adjust1));
+    let weight2 = Math.max(0.01, Math.min(0.99 - weight1, target2 + adjust2));
+    let weight3 = 1 - weight1 - weight2;
+    const currentWeights = [weight1, weight2, weight3];
+    portfolio1Weights.push(currentWeights);
+    // Calculate turnover
+    const turnover = calculateTurnover(currentWeights, prevWeights1);
+    portfolio1Turnover.push(turnover);
+    prevWeights1 = currentWeights;
+  }
+  // Portfolio 2: Erratic trading with large daily changes
+  const portfolio2Weights = [];
+  const portfolio2Turnover = [];
+  let prevWeights2 = null;
+  for (let i = 0; i <= days; i++) {
+    // Significantly different weights each day
+    let weight1 = Math.random() * 0.8 + 0.1; // Between 10% and 90%
+    let weight2 = Math.random() * (1 - weight1 - 0.05); // Remaining, leaving at least 5% for asset 3
+    let weight3 = 1 - weight1 - weight2;
+    const currentWeights = [weight1, weight2, weight3];
+    portfolio2Weights.push(currentWeights);
+    // Calculate turnover
+    const turnover = calculateTurnover(currentWeights, prevWeights2);
+    portfolio2Turnover.push(turnover);
+    prevWeights2 = currentWeights;
+  }
+  // Portfolio 3: Gradual concentration from equal weights to all in one asset
+  const portfolio3Weights = [];
+  const portfolio3Turnover = [];
+  let prevWeights3 = null;
+  for (let i = 0; i <= days; i++) {
+    // Start with equal weights
+    if (i === 0) {
+      const currentWeights = [1/3, 1/3, 1/3];
+      portfolio3Weights.push(currentWeights);
+      portfolio3Turnover.push(0);
+      prevWeights3 = currentWeights;
+      continue;
+    }
+    // Gradually increase weight of asset 1, reduce others
+    const progressFactor = i / days; // 0 at start, 1 at end
+    let weight1 = 1/3 + progressFactor * 2/3; // Grows from 1/3 to 1
+    let weight2 = 1/3 * (1 - progressFactor); // Shrinks from 1/3 to 0
+    let weight3 = 1 - weight1 - weight2;      // Shrinks from 1/3 to 0
+    const currentWeights = [weight1, weight2, weight3];
+    portfolio3Weights.push(currentWeights);
+    // Calculate turnover
+    const turnover = calculateTurnover(currentWeights, prevWeights3);
+    portfolio3Turnover.push(turnover);
+    prevWeights3 = currentWeights;
+  }
+  return {
+    dates,
+    portfolios: {
+      stable: {
+        weights: portfolio1Weights,
+        turnover: portfolio1Turnover
+      },
+      erratic: {
+        weights: portfolio2Weights,
+        turnover: portfolio2Turnover
+      },
+      concentration: {
+        weights: portfolio3Weights,
+        turnover: portfolio3Turnover
+      }
+    }
+  };
+}
+// Initialize the Turnover Ratio demonstration charts
+function initializeTurnoverDemo() {
+  console.log('Initializing Turnover demo');
+  const weightsChart1Ctx = document.getElementById('weightsChart1');
+  const turnoverChart1Ctx = document.getElementById('turnoverChart1');
+  const weightsChart2Ctx = document.getElementById('weightsChart2');
+  const turnoverChart2Ctx = document.getElementById('turnoverChart2');
+  const weightsChart3Ctx = document.getElementById('weightsChart3');
+  const turnoverChart3Ctx = document.getElementById('turnoverChart3');
+  if (!weightsChart1Ctx || !turnoverChart1Ctx || !weightsChart2Ctx ||
+      !turnoverChart2Ctx || !weightsChart3Ctx || !turnoverChart3Ctx) {
+    console.error('Chart canvas elements not found for Turnover demo');
+    return;
+  }
+  // Generate data for all portfolios
+  const data = generateTurnoverDemoData();
+  // Define colors for assets
+  const assetColors = [
+    '#8844ee',
+    '#44bbee',
+    '#ee7744'
+  ];
+  // Create stacked area charts for portfolio weights
+  const createWeightsChart = (ctx, weights, title) => {
+    const datasets = [];
+    // Create a dataset for each asset
+    for (let assetIndex = 0; assetIndex < 3; assetIndex++) {
+      datasets.push({
+        label: `Asset ${assetIndex + 1}`,
+        data: weights.map(w => w[assetIndex] * 100), // Convert to percentage
+        backgroundColor: assetColors[assetIndex],
+        borderColor: assetColors[assetIndex],
+        borderWidth: 1,
+        fill: true,
+        tension: 0
+      });
+    }
+    return new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: data.dates,
+        datasets: datasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'day',
+              displayFormats: {
+                day: 'MMM d'
+              },
+              tooltipFormat: 'MMM d, yyyy'
+            },
+            title: {
+              display: true,
+              text: 'Date'
+            },
+            stacked: true
+          },
+          y: {
+            stacked: true,
+            min: 0,
+            max: 100,
+            title: {
+              display: true,
+              text: 'Allocation (%)'
+            }
+          }
+        },
+        plugins: {
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+            callbacks: {
+              label: function(context) {
+                return `${context.dataset.label}: ${context.parsed.y.toFixed(1)}%`;
+              }
+            }
+          },
+          legend: {
+            position: 'top'
+          }
+        }
+      }
+    });
+  };
+  // Create line charts for turnover values
+  const createTurnoverChart = (ctx, turnover, title) => {
+    return new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: data.dates,
+        datasets: [{
+          label: 'Turnover Ratio',
+          data: turnover.map(t => t * 100), // Convert to percentage
+          borderColor: '#3f88e2',
+          backgroundColor: 'rgba(63, 136, 226, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0,
+          tension: 0.1,
+          fill: 'origin'
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            type: 'time',
+            time: {
+              unit: 'day',
+              displayFormats: {
+                day: 'MMM d'
+              },
+              tooltipFormat: 'MMM d, yyyy'
+            },
+            title: {
+              display: true,
+              text: 'Date'
+            }
+          },
+          y: {
+            min: 0,
+            max: 100,
+            title: {
+              display: true,
+              text: 'Turnover (%)'
+            }
+          }
+        },
+        plugins: {
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+            callbacks: {
+              label: function(context) {
+                return `Turnover: ${context.parsed.y.toFixed(1)}%`;
+              }
+            }
+          },
+          legend: {
+            display: false
+          }
+        }
+      }
+    });
+  };
+  // Create all charts
+  createWeightsChart(weightsChart1Ctx, data.portfolios.stable.weights, 'Stable Portfolio');
+  createTurnoverChart(turnoverChart1Ctx, data.portfolios.stable.turnover, 'Stable Portfolio Turnover');
+  createWeightsChart(weightsChart2Ctx, data.portfolios.erratic.weights, 'Erratic Portfolio');
+  createTurnoverChart(turnoverChart2Ctx, data.portfolios.erratic.turnover, 'Erratic Portfolio Turnover');
+  createWeightsChart(weightsChart3Ctx, data.portfolios.concentration.weights, 'Concentration Portfolio');
+  createTurnoverChart(turnoverChart3Ctx, data.portfolios.concentration.turnover, 'Concentration Portfolio Turnover');
+}
+// Utility function to calculate HHI (Herfindahl-Hirschman Index)
+function calculateHHI(weights) {
+  return weights.reduce((sum, weight) => sum + weight * weight, 0);
+}
+// Utility function to calculate ENP (Effective Number of Positions)
+function calculateENP(weights, epsilon = 0.0001) {
+  const hhi = calculateHHI(weights);
+  return 1 / (hhi + epsilon);
+}
+// Utility function to calculate concentration penalty
+function calculateConcentrationPenalty(weights, enpMin, enpMax, epsilon = 0.0001) {
+  const enp = calculateENP(weights, epsilon);
+  const lowerPenalty = Math.max(enpMin - enp, 0);
+  const upperPenalty = Math.max(enp - enpMax, 0);
+  return lowerPenalty + upperPenalty;
+}
+// Initialize the Concentration Penalty demonstration
+function initializeConcentrationDemo() {
+  console.log('Initializing Concentration demo');
+  const concentrationWeightsChartCtx = document.getElementById('concentrationWeightsChart');
+  const enpChartCtx = document.getElementById('enpChart');
+  const hhiEnpChartCtx = document.getElementById('hhiEnpChart');
+  if (!concentrationWeightsChartCtx || !enpChartCtx || !hhiEnpChartCtx) {
+    console.error('Concentration chart canvas elements not found', {
+      concentrationWeightsChartCtx,
+      enpChartCtx,
+      hhiEnpChartCtx
+    });
+    return;
+  }
+  // Define ENP target range
+  const enpMin = 3;
+  const enpMax = 8;
+  // Define example portfolios with different concentration levels
+  const portfolios = [
+    {
+      name: 'Highly Concentrated',
+      weights: [0.65, 0.20, 0.07, 0.03, 0.02, 0.01, 0.01, 0.01],
+      color: '#ff6384'
+    },
+    {
+      name: 'Balanced',
+      weights: [0.25, 0.18, 0.15, 0.12, 0.10, 0.08, 0.07, 0.05],
+      color: '#4caf50'
+    },
+    {
+      name: 'Overly Diversified',
+      weights: [0.125, 0.125, 0.125, 0.125, 0.125, 0.125, 0.125, 0.125],
+      color: '#ffcd56'
+    }
+  ];
+  // Calculate HHI and ENP for each portfolio
+  portfolios.forEach(portfolio => {
+    portfolio.hhi = calculateHHI(portfolio.weights);
+    portfolio.enp = calculateENP(portfolio.weights);
+    portfolio.penalty = calculateConcentrationPenalty(portfolio.weights, enpMin, enpMax);
+  });
+  // Create weight distribution chart
+  const concentrationWeightsChart = new Chart(concentrationWeightsChartCtx, {
+    type: 'bar',
+    data: {
+      labels: ['Asset 1', 'Asset 2', 'Asset 3', 'Asset 4', 'Asset 5', 'Asset 6', 'Asset 7', 'Asset 8'],
+      datasets: portfolios.map(portfolio => ({
+        label: portfolio.name,
+        data: portfolio.weights.map(w => w * 100), // Convert to percentage
+        backgroundColor: portfolio.color,
+        borderColor: portfolio.color,
+        borderWidth: 1
+      }))
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: 'Assets'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Weight (%)'
+          },
+          min: 0,
+          max: 70
+        }
+      },
+      plugins: {
+        legend: {
+          position: 'top'
+        },
+        tooltip: {
+          callbacks: {
+            label: function(context) {
+              return `${context.dataset.label}: ${context.parsed.y.toFixed(1)}%`;
+            }
+          }
+        }
+      }
+    }
+  });
+  // Create ENP comparison chart
+  const enpChart = new Chart(enpChartCtx, {
+    type: 'bar',
+    data: {
+      labels: portfolios.map(p => p.name),
+      datasets: [
+        {
+          label: 'Effective Number of Positions',
+          data: portfolios.map(p => p.enp),
+          backgroundColor: portfolios.map(p => p.color),
+          borderColor: portfolios.map(p => p.color),
+          borderWidth: 1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: 'Portfolio'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'ENP'
+          },
+          min: 0,
+          max: 10,
+          ticks: {
+            callback: function(value) {
+              return value.toFixed(1);
+            }
+          }
+        }
+      },
+      plugins: {
+        annotation: {
+          annotations: {
+            minLine: {
+              type: 'line',
+              mode: 'horizontal',
+              scaleID: 'y',
+              value: enpMin,
+              borderColor: '#ff9800',
+              borderWidth: 2,
+              borderDash: [5, 5],
+              label: {
+                content: 'ENP Min = ' + enpMin,
+                enabled: true,
+                position: 'end'
+              }
+            },
+            maxLine: {
+              type: 'line',
+              mode: 'horizontal',
+              scaleID: 'y',
+              value: enpMax,
+              borderColor: '#8bc34a',
+              borderWidth: 2,
+              borderDash: [5, 5],
+              label: {
+                content: 'ENP Max = ' + enpMax,
+                enabled: true,
+                position: 'end'
+              }
+            }
+          }
+        },
+        legend: {
+          display: false
+        },
+        tooltip: {
+          callbacks: {
+            label: function(context) {
+              const portfolio = portfolios[context.dataIndex];
+              let label = `ENP: ${context.parsed.y.toFixed(2)}`;
+              if (portfolio.penalty > 0) {
+                label += ` (Penalty: ${portfolio.penalty.toFixed(2)})`;
+              }
+              return label;
+            },
+            afterLabel: function(context) {
+              const portfolio = portfolios[context.dataIndex];
+              return `HHI: ${portfolio.hhi.toFixed(3)}`;
+            }
+          }
+        }
+      }
+    }
+  });
+  // Create HHI vs ENP relationship chart
+  // Generate data points for the inverse relationship curve
+  const hhiValues = [];
+  const enpValues = [];
+  // Generate data points from HHI = 0.125 (equal weights) to HHI = 1 (complete concentration)
+  for (let hhi = 0.125; hhi <= 1; hhi += 0.01) {
+    hhiValues.push(hhi);
+    enpValues.push(1 / hhi);
+  }
+  // Add actual portfolio data points
+  const portfolioPoints = portfolios.map(p => ({
+    x: p.hhi,
+    y: p.enp
+  }));
+  const hhiEnpChart = new Chart(hhiEnpChartCtx, {
+    type: 'scatter',
+    data: {
+      datasets: [
+        {
+          label: 'HHI-ENP Curve',
+          data: hhiValues.map((hhi, i) => ({ x: hhi, y: enpValues[i] })),
+          showLine: true,
+          borderColor: '#3f88e2',
+          backgroundColor: 'rgba(63, 136, 226, 0.1)',
+          borderWidth: 2,
+          pointRadius: 0
+        },
+        {
+          label: 'Portfolio Examples',
+          data: portfolioPoints,
+          borderColor: '#ffffff',
+          backgroundColor: portfolios.map(p => p.color),
+          pointRadius: 6,
+          pointHoverRadius: 8
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: {
+          type: 'linear',
+          title: {
+            display: true,
+            text: 'HHI (Herfindahl-Hirschman Index)'
+          },
+          min: 0,
+          max: 1
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'ENP (Effective Number of Positions)'
+          },
+          min: 0,
+          max: 10
+        }
+      },
+      plugins: {
+        tooltip: {
+          callbacks: {
+            label: function(context) {
+              if (context.datasetIndex === 0) {
+                return `HHI: ${context.parsed.x.toFixed(3)}, ENP: ${context.parsed.y.toFixed(2)}`;
+              } else {
+                const portfolio = portfolios[context.dataIndex];
+                return `${portfolio.name}: HHI = ${portfolio.hhi.toFixed(3)}, ENP = ${portfolio.enp.toFixed(2)}`;
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+}

assets/static/index.html CHANGED Viewed

@@ -16,6 +16,10 @@
       <div class="title-container">
         <h1>Portfolio Optimizer</h1>
       </div>
     </header>
     <div class="main-content">
@@ -108,86 +112,26 @@
           <!-- Stats Row -->
           <div class="stats-row">
-            <!-- OGD Portfolio Stats -->
-            <div class="stat-card">
-              <div class="stat-title">OGD Portfolio</div>
-              <div class="stat-value" id="ogdSharpeRatio">-</div>
-              <div class="stat-subtitle">Sharpe Ratio</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">OGD Portfolio</div>
-              <div class="stat-value" id="ogdMaxDrawdown">-</div>
-              <div class="stat-subtitle">Max Drawdown</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">OGD Portfolio</div>
-              <div class="stat-value" id="ogdReturn">-</div>
-              <div class="stat-subtitle">Return</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">OGD Portfolio</div>
-              <div class="stat-value" id="ogdCAPMAlpha">-</div>
-              <div class="stat-subtitle">CAPM Alpha</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">OGD Portfolio</div>
-              <div class="stat-value" id="ogdFF3Alpha">-</div>
-              <div class="stat-subtitle">FF3 Alpha</div>
-            </div>
-            <!-- Equal Weight Portfolio Stats -->
-            <div class="stat-card">
-              <div class="stat-title">Equal Weight</div>
-              <div class="stat-value" id="ewSharpeRatio">-</div>
-              <div class="stat-subtitle">Sharpe Ratio</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Equal Weight</div>
-              <div class="stat-value" id="ewMaxDrawdown">-</div>
-              <div class="stat-subtitle">Max Drawdown</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Equal Weight</div>
-              <div class="stat-value" id="ewReturn">-</div>
-              <div class="stat-subtitle">Return</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Equal Weight</div>
-              <div class="stat-value" id="ewCAPMAlpha">-</div>
-              <div class="stat-subtitle">CAPM Alpha</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Equal Weight</div>
-              <div class="stat-value" id="ewFF3Alpha">-</div>
-              <div class="stat-subtitle">FF3 Alpha</div>
-            </div>
-            <!-- Random Portfolio Stats -->
-            <div class="stat-card">
-              <div class="stat-title">Random Portfolio</div>
-              <div class="stat-value" id="randomSharpeRatio">-</div>
-              <div class="stat-subtitle">Sharpe Ratio</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Random Portfolio</div>
-              <div class="stat-value" id="randomMaxDrawdown">-</div>
-              <div class="stat-subtitle">Max Drawdown</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Random Portfolio</div>
-              <div class="stat-value" id="randomReturn">-</div>
-              <div class="stat-subtitle">Return</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Random Portfolio</div>
-              <div class="stat-value" id="randomCAPMAlpha">-</div>
-              <div class="stat-subtitle">CAPM Alpha</div>
-            </div>
-            <div class="stat-card">
-              <div class="stat-title">Random Portfolio</div>
-              <div class="stat-value" id="randomFF3Alpha">-</div>
-              <div class="stat-subtitle">FF3 Alpha</div>
-            </div>
           </div>
         </div>
       </div>

       <div class="title-container">
         <h1>Portfolio Optimizer</h1>
       </div>
+      <nav class="nav-menu">
+        <a href="/index.html" class="nav-link active">Simulation</a>
+        <a href="/education.html" class="nav-link">Education</a>
+      </nav>
     </header>
     <div class="main-content">
           <!-- Stats Row -->
           <div class="stats-row">
+            <!-- Dynamically generated stats grid will be placed here -->
+          </div>
+          <!-- Legacy elements for backward compatibility -->
+          <div style="display:none" aria-hidden="true">
+            <span id="ogdSharpeRatio">-</span>
+            <span id="ogdMaxDrawdown">-</span>
+            <span id="ogdReturn">-</span>
+            <span id="ogdCAPMAlpha">-</span>
+            <span id="ogdFF3Alpha">-</span>
+            <span id="ewSharpeRatio">-</span>
+            <span id="ewMaxDrawdown">-</span>
+            <span id="ewReturn">-</span>
+            <span id="ewCAPMAlpha">-</span>
+            <span id="ewFF3Alpha">-</span>
+            <span id="randomSharpeRatio">-</span>
+            <span id="randomMaxDrawdown">-</span>
+            <span id="randomReturn">-</span>
+            <span id="randomCAPMAlpha">-</span>
+            <span id="randomFF3Alpha">-</span>
           </div>
         </div>
       </div>

assets/static/script.js CHANGED Viewed

@@ -21,6 +21,22 @@ function formatDate(date) {
   return date.toISOString().split('T')[0];
 }
 // Populate the stock list with sectors and tickers
 function populateStockList(sectors) {
   const stockListElement = document.getElementById('stockList');
@@ -528,29 +544,165 @@ function updateCharts(returnsData, weightsData, concentrationData, enpMin, enpMa
 // Update performance metrics for all three portfolios
 function updateMetrics(metrics) {
-  // OGD Portfolio metrics
-  document.getElementById('ogdSharpeRatio').textContent = metrics.ogd.sharpe.toFixed(2);
-  document.getElementById('ogdMaxDrawdown').textContent = (metrics.ogd.max_drawdown * 100).toFixed(2) + '%';
-  document.getElementById('ogdReturn').textContent = ((metrics.ogd.cumulative_return - 1) * 100).toFixed(2) + '%';
-  // Equal Weight Portfolio metrics
-  document.getElementById('ewSharpeRatio').textContent = metrics.equal_weight.sharpe.toFixed(2);
-  document.getElementById('ewMaxDrawdown').textContent = (metrics.equal_weight.max_drawdown * 100).toFixed(2) + '%';
-  document.getElementById('ewReturn').textContent = ((metrics.equal_weight.cumulative_return - 1) * 100).toFixed(2) + '%';
-  // Random Portfolio metrics
-  document.getElementById('randomSharpeRatio').textContent = metrics.random.sharpe.toFixed(2);
-  document.getElementById('randomMaxDrawdown').textContent = (metrics.random.max_drawdown * 100).toFixed(2) + '%';
-  document.getElementById('randomReturn').textContent = ((metrics.random.cumulative_return - 1) * 100).toFixed(2) + '%';
-  // Factor metrics (if available)
-  if (metrics.ogd.capm_alpha !== undefined) {
-    document.getElementById('ogdCAPMAlpha').textContent = metrics.ogd.capm_alpha.toFixed(2) + '%';
-    document.getElementById('ogdFF3Alpha').textContent = metrics.ogd.ff3_alpha.toFixed(2) + '%';
-    document.getElementById('ewCAPMAlpha').textContent = metrics.equal_weight.capm_alpha.toFixed(2) + '%';
-    document.getElementById('ewFF3Alpha').textContent = metrics.equal_weight.ff3_alpha.toFixed(2) + '%';
-    document.getElementById('randomCAPMAlpha').textContent = metrics.random.capm_alpha.toFixed(2) + '%';
-    document.getElementById('randomFF3Alpha').textContent = metrics.random.ff3_alpha.toFixed(2) + '%';
   }
 }
@@ -656,6 +808,9 @@ function runFakeSimulation() {
 // Initialize the application
 async function initialize() {
   try {
     // Initialize charts
     initializeCharts();
@@ -670,6 +825,31 @@ async function initialize() {
     // Add event listener to run button
     document.getElementById('runButton').addEventListener('click', runOptimization);
     // Run fake simulation for initial visual
     runFakeSimulation();

   return date.toISOString().split('T')[0];
 }
+// Set active navigation link
+function setActiveNavLink() {
+  const currentPath = window.location.pathname;
+  const navLinks = document.querySelectorAll('.nav-link');
+  navLinks.forEach(link => {
+    const linkPath = link.getAttribute('href');
+    if (currentPath.endsWith(linkPath) ||
+        (currentPath.endsWith('/') && linkPath === '/index.html')) {
+      link.classList.add('active');
+    } else {
+      link.classList.remove('active');
+    }
+  });
+}
 // Populate the stock list with sectors and tickers
 function populateStockList(sectors) {
   const stockListElement = document.getElementById('stockList');
 // Update performance metrics for all three portfolios
 function updateMetrics(metrics) {
+  // Format values for display
+  const formatValue = (value, format = 'decimal') => {
+    if (value === undefined || value === null) return '-';
+    if (format === 'percent') {
+      // For cumulative returns, we need to subtract 1 first to get the percent change
+      if (format === 'percent' && value > 1) {
+        // This is a cumulative return (started at 1)
+        return ((value - 1) * 100).toFixed(2) + '%';
+      }
+      return (value * 100).toFixed(2) + '%';
+    } else if (format === 'decimal') {
+      return value.toFixed(2);
+    }
+    return value;
+  };
+  // Make sure metrics objects exist to avoid errors
+  if (!metrics) {
+    console.error('No metrics data provided to updateMetrics');
+    metrics = {
+      ogd: { sharpe: 0, max_drawdown: 0, cumulative_return: 1, capm_alpha: 0, ff3_alpha: 0 },
+      equal_weight: { sharpe: 0, max_drawdown: 0, cumulative_return: 1, capm_alpha: 0, ff3_alpha: 0 },
+      random: { sharpe: 0, max_drawdown: 0, cumulative_return: 1, capm_alpha: 0, ff3_alpha: 0 }
+    };
+  }
+  // Initialize metric objects if missing
+  if (!metrics.ogd) metrics.ogd = {};
+  if (!metrics.equal_weight) metrics.equal_weight = {};
+  if (!metrics.random) metrics.random = {};
+  const statsRow = document.querySelector('.stats-row');
+  if (!statsRow) {
+    console.error('Stats row element not found');
+    return;
+  }
+  // Clear the grid
+  statsRow.innerHTML = '';
+  // Create strategy titles (column headers)
+  const strategies = [
+    { id: 'ogd', name: 'OGD Portfolio', class: 'ogd-strategy' },
+    { id: 'equal_weight', name: 'Equal Weight', class: 'equal-weight-strategy' },
+    { id: 'random', name: 'Random Portfolio', class: 'random-strategy' }
+  ];
+  // Define metrics to display (row headers)
+  const metricTypes = [
+    { id: 'sharpe', name: 'Sharpe Ratio', format: 'decimal' },
+    { id: 'max_drawdown', name: 'Max Drawdown', format: 'percent' },
+    { id: 'cumulative_return', name: 'Return', format: 'percent' },
+    { id: 'capm_alpha', name: 'CAPM Alpha', format: 'percent' },
+    { id: 'ff3_alpha', name: 'FF3 Alpha', format: 'percent' }
+  ];
+  // Add column headers (strategy names)
+  // Empty cell for top-left corner
+  const emptyHeader = document.createElement('div');
+  emptyHeader.className = 'stat-card metric-label strategy-header';
+  emptyHeader.innerHTML = '<div class="stat-value">Metrics</div>';
+  statsRow.appendChild(emptyHeader);
+  // Create strategy headers
+  strategies.forEach(strategy => {
+    const strategyHeader = document.createElement('div');
+    strategyHeader.className = `stat-card strategy-header ${strategy.class}`;
+    strategyHeader.innerHTML = `<div class="stat-value">${strategy.name}</div>`;
+    statsRow.appendChild(strategyHeader);
+  });
+  // Add metric rows
+  metricTypes.forEach(metric => {
+    // Add row label
+    const metricLabel = document.createElement('div');
+    metricLabel.className = 'stat-card metric-label';
+    metricLabel.innerHTML = `<div class="stat-value">${metric.name}</div>`;
+    statsRow.appendChild(metricLabel);
+    // Add values for each strategy
+    strategies.forEach(strategy => {
+      // Get the value safely
+      const value = metrics[strategy.id][metric.id] || 0;
+      let formattedValue = '-';
+      // Handle cumulative return differently
+      if (metric.id === 'cumulative_return') {
+        formattedValue = ((value - 1) * 100).toFixed(2) + '%';
+      } else if (metric.format === 'percent') {
+        formattedValue = (value * 100).toFixed(2) + '%';
+      } else {
+        formattedValue = formatValue(value, metric.format);
+      }
+      const metricCell = document.createElement('div');
+      metricCell.className = `stat-card metric-row ${strategy.class}`;
+      metricCell.setAttribute('data-metric', metric.name);
+      metricCell.innerHTML = `<div class="stat-value">${formattedValue}</div>`;
+      statsRow.appendChild(metricCell);
+    });
+  });
+  // Log grid creation
+  console.log('Metrics grid created with', strategies.length * metricTypes.length, 'cells');
+  // Update legacy hidden elements
+  try {
+    // Legacy element ID updates for backward compatibility
+    const ogdSharpe = document.getElementById('ogdSharpeRatio');
+    if (ogdSharpe) ogdSharpe.textContent = formatValue(metrics.ogd.sharpe);
+    const ogdDrawdown = document.getElementById('ogdMaxDrawdown');
+    if (ogdDrawdown) ogdDrawdown.textContent = formatValue(metrics.ogd.max_drawdown, 'percent');
+    const ogdReturn = document.getElementById('ogdReturn');
+    if (ogdReturn) ogdReturn.textContent = ((metrics.ogd.cumulative_return - 1) * 100).toFixed(2) + '%';
+    const ewSharpe = document.getElementById('ewSharpeRatio');
+    if (ewSharpe) ewSharpe.textContent = formatValue(metrics.equal_weight.sharpe);
+    const ewDrawdown = document.getElementById('ewMaxDrawdown');
+    if (ewDrawdown) ewDrawdown.textContent = formatValue(metrics.equal_weight.max_drawdown, 'percent');
+    const ewReturn = document.getElementById('ewReturn');
+    if (ewReturn) ewReturn.textContent = ((metrics.equal_weight.cumulative_return - 1) * 100).toFixed(2) + '%';
+    const randomSharpe = document.getElementById('randomSharpeRatio');
+    if (randomSharpe) randomSharpe.textContent = formatValue(metrics.random.sharpe);
+    const randomDrawdown = document.getElementById('randomMaxDrawdown');
+    if (randomDrawdown) randomDrawdown.textContent = formatValue(metrics.random.max_drawdown, 'percent');
+    const randomReturn = document.getElementById('randomReturn');
+    if (randomReturn) randomReturn.textContent = ((metrics.random.cumulative_return - 1) * 100).toFixed(2) + '%';
+    // Update factor alphas if available
+    if (metrics.ogd.capm_alpha !== undefined) {
+      const ogdCAPM = document.getElementById('ogdCAPMAlpha');
+      if (ogdCAPM) ogdCAPM.textContent = formatValue(metrics.ogd.capm_alpha, 'percent');
+      const ogdFF3 = document.getElementById('ogdFF3Alpha');
+      if (ogdFF3) ogdFF3.textContent = formatValue(metrics.ogd.ff3_alpha, 'percent');
+      const ewCAPM = document.getElementById('ewCAPMAlpha');
+      if (ewCAPM) ewCAPM.textContent = formatValue(metrics.equal_weight.capm_alpha, 'percent');
+      const ewFF3 = document.getElementById('ewFF3Alpha');
+      if (ewFF3) ewFF3.textContent = formatValue(metrics.equal_weight.ff3_alpha, 'percent');
+      const randomCAPM = document.getElementById('randomCAPMAlpha');
+      if (randomCAPM) randomCAPM.textContent = formatValue(metrics.random.capm_alpha, 'percent');
+      const randomFF3 = document.getElementById('randomFF3Alpha');
+      if (randomFF3) randomFF3.textContent = formatValue(metrics.random.ff3_alpha, 'percent');
+    }
+  } catch (e) {
+    console.warn('Error updating legacy elements:', e);
+    // Continue execution even if legacy element update fails
   }
 }
 // Initialize the application
 async function initialize() {
   try {
+    // Set active navigation link
+    setActiveNavLink();
     // Initialize charts
     initializeCharts();
     // Add event listener to run button
     document.getElementById('runButton').addEventListener('click', runOptimization);
+    // Create initial metrics grid
+    updateMetrics({
+      ogd: {
+        sharpe: 1.2,
+        max_drawdown: 0.12,
+        cumulative_return: 1.3,
+        capm_alpha: 2.5,
+        ff3_alpha: 1.8
+      },
+      equal_weight: {
+        sharpe: 0.9,
+        max_drawdown: 0.15,
+        cumulative_return: 1.2,
+        capm_alpha: 1.2,
+        ff3_alpha: 0.8
+      },
+      random: {
+        sharpe: 0.6,
+        max_drawdown: 0.2,
+        cumulative_return: 1.1,
+        capm_alpha: 0.4,
+        ff3_alpha: 0.2
+      }
+    });
     // Run fake simulation for initial visual
     runFakeSimulation();

assets/static/style.css CHANGED Viewed

@@ -78,6 +78,40 @@ body {
   color: var(--text-secondary);
 }
 .main-content {
   display: flex;
   flex: 1;
@@ -198,20 +232,71 @@ body {
 .stats-row {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(3, auto);
   gap: var(--spacing-sm);
-  margin-top: var(--spacing-sm);
 }
 .stat-card {
-  background-color: var(--bg-secondary);
-  border-radius: 8px;
   padding: var(--spacing-sm);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 .stat-title {
@@ -453,7 +538,7 @@ body {
   }
   .right-panel {
-    max-height: 300px;
   }
   .config-grid {
@@ -465,15 +550,14 @@ body {
   }
   .stats-row {
-    grid-template-columns: repeat(3, 1fr); /* Show 3 columns on medium screens */
-    grid-template-rows: repeat(5, auto);
   }
 }
 @media (max-width: 768px) {
   .stats-row {
-    grid-template-columns: 1fr; /* Show 1 column on small screens */
-    grid-template-rows: repeat(15, auto);
   }
   .ticker-grid {
@@ -481,6 +565,31 @@ body {
   }
 }
 .alpha-controls {
   margin-top: var(--spacing-md);
 }
@@ -517,4 +626,432 @@ body {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: var(--spacing-md);
 }

   color: var(--text-secondary);
 }
+/* Navigation Menu Styles */
+.nav-menu {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+.nav-link {
+  position: relative;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  padding: var(--spacing-sm) 0;
+  transition: color 0.2s;
+}
+.nav-link:hover {
+  color: var(--text-primary);
+}
+.nav-link.active {
+  color: var(--accent-primary);
+}
+.nav-link.active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -2px;
+  height: 2px;
+  background-color: var(--accent-primary);
+}
 .main-content {
   display: flex;
   flex: 1;
 .stats-row {
   display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: auto;
   gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+  width: 100%;
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: var(--spacing-md);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 .stat-card {
+  background-color: var(--bg-tertiary);
+  border-radius: 6px;
   padding: var(--spacing-sm);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  min-height: 60px;
+  border: none;
+  box-shadow: none;
+}
+/* Style for strategy headers (first row) */
+.stat-card.strategy-header {
+  background-color: var(--bg-primary);
+  border-bottom: 2px solid var(--accent-primary);
+  border-top: 2px solid var(--accent-primary);
+  font-weight: 600;
+  padding: var(--spacing-md) var(--spacing-sm);
+}
+/* Styling for metric rows */
+.stat-card.metric-row {
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+.stat-card.metric-row:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+/* Specific styling for each strategy column */
+.stat-card.ogd-strategy {
+  border-left-color: var(--accent-primary);
+}
+.stat-card.equal-weight-strategy {
+  border-left-color: var(--equal-weight-color);
+}
+.stat-card.random-strategy {
+  border-left-color: var(--random-color);
+}
+/* Specific styling for metric labels */
+.stat-card.metric-label {
+  justify-content: flex-start;
+  background-color: var(--bg-primary);
+  font-weight: 500;
+  border-right: 2px solid var(--border-color);
+  padding-left: var(--spacing-md);
 }
 .stat-title {
   }
   .right-panel {
+    max-height: none;
   }
   .config-grid {
   }
   .stats-row {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 @media (max-width: 768px) {
   .stats-row {
+    grid-template-columns: 1fr 1fr 1fr;
+    font-size: 0.9em;
   }
   .ticker-grid {
   }
 }
+@media (max-width: 576px) {
+  .stats-row {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+  .stat-card.strategy-header {
+    grid-column: 1 / -1;
+    text-align: center;
+    margin-top: var(--spacing-md);
+  }
+  .stat-card.metric-label {
+    display: none;
+  }
+  .stat-card.metric-row::before {
+    content: attr(data-metric);
+    display: block;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-xs);
+  }
+}
 .alpha-controls {
   margin-top: var(--spacing-md);
 }
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: var(--spacing-md);
+}
+/* Education Page Styles */
+.education-container {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+  height: calc(100vh - 80px);
+}
+.education-header {
+  margin-bottom: var(--spacing-xl);
+  text-align: center;
+}
+.education-header h2 {
+  font-size: var(--font-size-xxl);
+  margin-bottom: var(--spacing-md);
+  color: var(--accent-primary);
+}
+.education-header p {
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  max-width: 800px;
+  margin: 0 auto;
+}
+.variable-definitions {
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+.variable-definitions h3 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-lg);
+  text-align: center;
+  color: var(--accent-primary);
+}
+.variable-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-lg) var(--spacing-xl);
+  max-width: 800px;
+  margin: 0 auto;
+}
+.variable-math {
+  font-size: var(--font-size-lg);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+}
+.variable-math .math-symbol {
+  color: var(--accent-primary);
+  margin-right: var(--spacing-sm);
+}
+.variable-description {
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+}
+.subsection {
+  margin-bottom: var(--spacing-xl);
+}
+.subsection h3 {
+  font-size: var(--font-size-lg);
+  margin-bottom: var(--spacing-md);
+  color: var(--accent-primary);
+}
+.subsection p {
+  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+}
+.chart-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+  position: relative; /* Add positioning context */
+}
+.edu-chart {
+  flex: 1;
+  min-width: 400px;
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: var(--spacing-md);
+  height: 300px;
+  position: relative; /* Ensure proper stacking context */
+}
+.edu-chart h4 {
+  text-align: center;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+}
+/* Override fixed height for the grid container and apply proper spacing */
+.edu-metrics-grid {
+  height: auto !important; /* Force override with !important */
+  min-height: 250px;
+  max-height: none;
+  overflow: visible;
+  padding-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+/* Add new class for the objective-charts-wrapper */
+.objective-charts-wrapper {
+  position: relative;
+  margin-bottom: 350px; /* Large margin to ensure space for descriptions */
+}
+/* Add new class for the objective-descriptions-wrapper */
+.objective-descriptions-wrapper {
+  position: relative;
+  clear: both;
+  width: 100%;
+}
+.asset-descriptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+  position: relative; /* Ensure proper position */
+  z-index: 1; /* Ensure it's above other elements */
+}
+.asset-description {
+  flex: 1;
+  min-width: 250px;
+  background-color: var(--bg-tertiary);
+  border-radius: 8px;
+  padding: var(--spacing-md);
+  position: relative; /* Ensure proper stacking */
+}
+.asset-description h5 {
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-xs);
+  font-weight: 600;
+}
+.asset-description:nth-child(1) h5 {
+  color: #3f88e2; /* Asset A color */
+}
+.asset-description:nth-child(2) h5 {
+  color: #4caf50; /* Asset B color */
+}
+.asset-description:nth-child(3) h5 {
+  color: #e2b53f; /* Asset C color */
+}
+/* Maximum Drawdown asset colors */
+#maximum-drawdown .asset-description:nth-child(1) h5 {
+  color: #ff6384; /* Asset D color */
+}
+#maximum-drawdown .asset-description:nth-child(2) h5 {
+  color: #36a2eb; /* Asset E color */
+}
+#maximum-drawdown .asset-description:nth-child(3) h5 {
+  color: #ffcd56; /* Asset F color */
+}
+.demo-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin: var(--spacing-lg) 0 var(--spacing-xs) 0;
+  color: var(--accent-primary);
+}
+.demo-description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-md);
+  max-width: 900px;
+}
+/* Concentration Example Styles */
+.concentration-explanations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+}
+.concentration-example {
+  flex: 1;
+  min-width: 300px;
+  background-color: var(--bg-tertiary);
+  border-radius: 8px;
+  padding: var(--spacing-md);
+}
+.concentration-example h5 {
+  font-size: var(--font-size-md);
+  margin-bottom: var(--spacing-xs);
+  font-weight: 600;
+}
+.concentration-example:nth-child(1) h5 {
+  color: #ff6384; /* Concentrated portfolio */
+}
+.concentration-example:nth-child(2) h5 {
+  color: #4caf50; /* Balanced portfolio */
+}
+.concentration-example:nth-child(3) h5 {
+  color: #ffcd56; /* Over-diversified portfolio */
+}
+/* ENP Indicator Styles */
+.enp-indicator {
+  margin-top: var(--spacing-md);
+}
+.enp-value {
+  display: block;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin-bottom: var(--spacing-xs);
+}
+.concentration-example:nth-child(1) .enp-value {
+  color: #ff6384;
+}
+.concentration-example:nth-child(2) .enp-value {
+  color: #4caf50;
+}
+.concentration-example:nth-child(3) .enp-value {
+  color: #ffcd56;
+}
+.enp-bar {
+  height: 10px;
+  background-color: var(--bg-primary);
+  border-radius: 5px;
+  position: relative;
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  overflow: hidden;
+}
+.enp-progress {
+  height: 100%;
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: 100%;
+}
+.concentration-example:nth-child(1) .enp-progress {
+  background-color: #ff6384;
+}
+.concentration-example:nth-child(2) .enp-progress {
+  background-color: #4caf50;
+}
+.concentration-example:nth-child(3) .enp-progress {
+  background-color: #ffcd56;
+}
+.enp-marker {
+  position: absolute;
+  bottom: -25px;
+  transform: translateX(-50%);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+.enp-marker::before {
+  content: '';
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 12px;
+  width: 1px;
+  background-color: var(--border-color);
+}
+.min-marker::before {
+  background-color: #ff9800;
+}
+.max-marker::before {
+  background-color: #8bc34a;
+}
+/* Formula Styles */
+.formula-container {
+  background-color: var(--bg-tertiary);
+  border-radius: 8px;
+  padding: var(--spacing-lg);
+  margin: var(--spacing-lg) 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xl);
+}
+.formula {
+  flex: 1;
+  min-width: 300px;
+}
+.formula-header {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+  color: var(--accent-primary);
+}
+.formula-content {
+  font-size: var(--font-size-lg);
+  color: var(--text-primary);
+  line-height: 2.2;
+}
+.formula-explanation {
+  flex: 1;
+  min-width: 300px;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+.formula-notation {
+  font-size: var(--font-size-md);
+  font-style: italic;
+  color: var(--text-secondary);
+  margin: var(--spacing-sm) 0;
+}
+/* Mathematical notation */
+.fraction {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  text-align: center;
+  font-size: var(--font-size-md);
+}
+.numerator, .denominator {
+  display: block;
+}
+.numerator {
+  padding: 0 0.2em;
+  border-bottom: 1px solid var(--text-primary);
+}
+.denominator {
+  padding: 0 0.2em;
+}
+.sqrt {
+  display: inline-block;
+  position: relative;
+  padding-left: 0.4em;
+}
+.sqrt:before {
+  content: "√";
+  position: absolute;
+  left: 0;
+  top: -0.1em;
+  font-size: 1.2em;
+}
+.sqrt-content {
+  display: inline-block;
+  border-top: 1px solid var(--text-primary);
+  padding: 0 0.2em;
+}
+/* Interactive Demo Styles */
+.interactive-demo {
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: var(--spacing-lg);
+  margin: var(--spacing-lg) 0;
+}
+.interactive-demo h4 {
+  font-size: var(--font-size-lg);
+  margin-bottom: var(--spacing-md);
+  color: var(--accent-primary);
+}
+.interactive-demo p {
+  margin-bottom: var(--spacing-md);
+}
+/* Ensure the grid has proper spacing between rows and columns */
+.stats-row {
+  display: grid;
+  grid-gap: var(--spacing-sm);
+  width: 100%;
+  background-color: var(--bg-secondary);
+  border-radius: 8px;
+  padding: var(--spacing-md);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  position: relative; /* Add positioning context */
 }

data/stock_data.csv CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ba1a04ffe09a116240c3d7bf2dfd1fac2fc817d83727c3d373f89bc23ec5eb2d
-size 14676155

 version https://git-lfs.github.com/spec/v1
+oid sha256:3baa73dc1a237a71c15ac4fcdfe76bc99b4a9bc7729dbdf780bfdedca057ea4c
+size 46134809

data/tickers_by_sector.json CHANGED Viewed

@@ -1,42 +1 @@
-[
-  {
-    "sector": "Technology",
-    "tickers": ["AAPL", "MSFT", "NVDA", "GOOGL", "META", "AVGO", "ORCL", "IBM", "CSCO", "TSM", "ASML", "AMD", "TXN", "INTC", "MU", "QCOM", "LRCX", "NXPI", "ADI"]
-  },
-  {
-    "sector": "Consumer Discretionary",
-    "tickers": ["AMZN", "TSLA", "NKE", "MCD", "SBUX", "YUM", "GM", "F", "RIVN", "NIO", "TTWO", "EA", "GME", "AMC"]
-  },
-  {
-    "sector": "Financials",
-    "tickers": ["JPM", "V", "MA", "GS", "MS", "BAC", "C", "AXP", "SCHW"]
-  },
-  {
-    "sector": "Health Care",
-    "tickers": ["UNH", "JNJ", "LLY", "PFE", "MRNA", "BMY", "GILD", "CVS", "VRTX", "ISRG"]
-  },
-  {
-    "sector": "Consumer Staples",
-    "tickers": ["WMT", "PG", "TGT", "KO", "PEP", "TSN", "CAG", "SYY", "HRL", "MDLZ"]
-  },
-  {
-    "sector": "Energy",
-    "tickers": ["XOM", "CVX", "NEE", "DUK", "SO", "D", "ENB", "SLB", "EOG", "PSX"]
-  },
-  {
-    "sector": "Industrials",
-    "tickers": ["DE", "LMT", "RTX", "BA", "CAT", "GE", "HON", "UPS", "EMR", "NOC", "FDX", "CSX", "UNP", "DAL"]
-  },
-  {
-    "sector": "Real Estate",
-    "tickers": ["PLD", "AMT", "EQIX", "O", "SPG", "VICI", "DLR", "WY", "EQR", "PSA"]
-  },
-  {
-    "sector": "Materials",
-    "tickers": ["ADM", "BG", "CF", "MOS", "FMC"]
-  },
-  {
-    "sector": "Communication Services",
-    "tickers": ["NFLX", "DIS", "PARA", "WBD", "CMCSA", "SPOT", "LYV"]
-  }
-]


1	+ [{"sector": "Technology", "tickers": ["AAPL", "MSFT", "NVDA", "GOOGL", "META", "AVGO", "ORCL", "IBM", "CSCO", "TSM", "ASML", "AMD", "TXN", "INTC", "MU", "QCOM", "LRCX", "NXPI", "ADI", "CRM", "INTU", "ADBE", "SNPS", "PANW", "CRWD", "ARM", "PLTR", "NOW", "DDOG", "MDB", "ZS", "OKTA", "SPLK", "NET", "FSLY", "DOCU", "AKAM", "ANET", "TWLO", "WDAY"]}, {"sector": "Consumer Discretionary", "tickers": ["AMZN", "TSLA", "NKE", "MCD", "SBUX", "YUM", "GM", "F", "RIVN", "NIO", "TTWO", "EA", "GME", "AMC", "HD", "LOW", "BKNG", "MAR", "TJX", "RCL", "RL", "FOXA", "NWSA", "WMT", "TGT", "BBY", "EBAY", "ROST", "DPZ", "ULTA", "EXPE", "DKS", "AZO", "ORLY", "KMX", "LEN", "DHI", "TOL", "PVH", "BBWI"]}, {"sector": "Financials", "tickers": ["JPM", "V", "MA", "GS", "MS", "BAC", "C", "AXP", "SCHW", "WFC", "TD", "RY", "BK", "NTRS", "ICE", "CME", "TW", "SPGI", "MSCI", "BLK", "COF", "DFS", "MTB", "FITB", "CFG", "ALLY", "PGR", "AFL", "PRU", "TRV"]}, {"sector": "Health Care", "tickers": ["UNH", "JNJ", "LLY", "PFE", "MRNA", "BMY", "GILD", "CVS", "VRTX", "ISRG", "MRK", "ABBV", "BSX", "MCK", "CAH", "DGX", "RMD", "PODD", "REGN", "TMO", "BDX", "ZBH", "EW", "IDXX", "IQV", "HUM", "CI", "ABC", "BAX", "ALGN"]}, {"sector": "Consumer Staples", "tickers": ["PG", "KO", "PEP", "TSN", "CAG", "SYY", "HRL", "MDLZ", "KDP", "CELH", "MNST", "CHD", "EL", "SJM", "STZ", "CL", "KMB", "KR", "GIS", "CPB", "HSY", "TAP", "K", "MO", "PM", "BTI", "UL", "NSRGY"]}, {"sector": "Energy", "tickers": ["XOM", "CVX", "NEE", "DUK", "SO", "D", "ENB", "SLB", "EOG", "PSX", "MPC", "VLO", "FANG", "DVN", "PXD", "MRO", "TRGP", "LNG", "BKR", "EQNR", "HAL", "APA", "OVV", "CNQ", "SU", "CEG", "COP", "CVE", "WMB", "OKE"]}, {"sector": "Industrials", "tickers": ["DE", "LMT", "RTX", "BA", "CAT", "GE", "HON", "UPS", "EMR", "NOC", "FDX", "CSX", "UNP", "DAL", "ITW", "GWW", "ODFL", "GEV", "PH", "IR", "TT", "TDG", "ETN", "CNM", "WM", "RHI", "MMM", "FAST", "LUV", "JCI"]}, {"sector": "Real Estate", "tickers": ["PLD", "AMT", "EQIX", "O", "SPG", "VICI", "DLR", "WY", "EQR", "PSA", "WELL", "VTR", "MPW", "STRW", "SILA", "EXR", "AVB", "SBAC", "CCI", "HST", "PEAK", "BXP", "SLG", "KIM", "REG", "ARE", "HIW", "STAG", "UBA", "FRT"]}, {"sector": "Materials", "tickers": ["ADM", "BG", "CF", "MOS", "FMC", "RIO", "NUE", "APD", "EXP", "LIN", "ECL", "CTVA", "DOW", "FCX", "AXTA", "CC", "ATR", "ASH", "SLGN", "DD", "PKG", "IP", "MLM", "VMC", "ALB", "LYB", "AVNT", "MP", "RS", "ATI"]}, {"sector": "Communication Services", "tickers": ["NFLX", "DIS", "PARA", "WBD", "CMCSA", "SPOT", "LYV", "TMUS", "VZ", "T", "CHTR", "BIDU", "TCEHY", "TTD", "RNG", "CXDO", "OOMA", "EVER", "NRDS", "ATVI", "Z", "BMBL", "MTCH", "BILI", "HUYA", "YY", "FWONA", "FWONK", "LSXMA"]}, {"sector": "Utilities", "tickers": ["AEP", "EXC", "SRE", "WEC", "ES", "EIX", "PEG", "XEL", "ED", "NRG", "AES", "AWK", "CMS", "PNW", "ATO", "UGI"]}, {"sector": "Information Services", "tickers": ["FDS", "MCO", "IHS", "TRU", "INFO", "DNB"]}, {"sector": "Semiconductors", "tickers": ["ON", "SWKS", "MPWR", "AMAT", "KLAC", "TER", "WOLF", "RMBS"]}]