Initial commit: Markov Economics Simulation App
This commit is contained in:
286
app/templates/about.html
Normal file
286
app/templates/about.html
Normal file
@@ -0,0 +1,286 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-4">🎯 About Markov Economics</h1>
|
||||
<p class="lead">Understanding how capitalism "eats the world" through Markov chain analysis</p>
|
||||
</div>
|
||||
|
||||
<!-- Theoretical Foundation -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h4 class="mb-0">📚 Theoretical Foundation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Marx's Economic Cycles</h5>
|
||||
<p>Karl Marx identified two fundamental economic circulation patterns:</p>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h6><strong>M-C-M' (Capitalist Circuit)</strong></h6>
|
||||
<p class="mb-2">Money → Commodities → More Money</p>
|
||||
<small>
|
||||
Capital is invested in production to generate surplus value.
|
||||
The goal is accumulation - turning M into M' where M' > M.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<h6><strong>C-M-C (Consumer Circuit)</strong></h6>
|
||||
<p class="mb-2">Commodities → Money → Commodities</p>
|
||||
<small>
|
||||
Goods are sold to acquire money to purchase other goods.
|
||||
The goal is consumption and use-value satisfaction.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Piketty's Inequality Principle</h5>
|
||||
<p>Thomas Piketty demonstrated that wealth inequality increases when:</p>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<h6><strong>r > g</strong></h6>
|
||||
<p class="mb-2">Capital Return Rate > Economic Growth Rate</p>
|
||||
<small>
|
||||
When capital generates returns faster than the overall economy grows,
|
||||
wealth concentrates among capital owners, leading to increasing inequality.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<h6>Key Parameters:</h6>
|
||||
<ul>
|
||||
<li><strong>r:</strong> Rate of return on capital (stocks, real estate, business)</li>
|
||||
<li><strong>g:</strong> Economic growth rate (GDP growth)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Markov Chain Implementation -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h4 class="mb-0">⚙️ Markov Chain Implementation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This simulation models economic behavior as Markov chains with state-dependent transition probabilities:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Capitalist Chain States</h5>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
<strong>Money (M)</strong>
|
||||
<br><small>Initial capital seeking investment opportunities</small>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<strong>Commodities (C)</strong>
|
||||
<br><small>Capital invested in production/goods</small>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<strong>Enhanced Money (M')</strong>
|
||||
<br><small>Capital with accumulated returns</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h6>Transition Probability Matrix:</h6>
|
||||
<pre class="bg-light p-2">
|
||||
M → C: r (capital rate)
|
||||
C → M': 1 (always)
|
||||
M' → M: 1 (reinvestment)
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Consumer Chain States</h5>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
<strong>Commodities (C)</strong>
|
||||
<br><small>Goods available for consumption</small>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<strong>Money (M)</strong>
|
||||
<br><small>Liquid currency from sales</small>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<strong>New Commodities (C')</strong>
|
||||
<br><small>Purchased goods for consumption</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<h6>Transition Probability Matrix:</h6>
|
||||
<pre class="bg-light p-2">
|
||||
C → M: g (growth rate)
|
||||
M → C': 1 (always)
|
||||
C' → C: 1 (consumption cycle)
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simulation Mechanics -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h4 class="mb-0">🔬 Simulation Mechanics</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h5>How the Simulation Works</h5>
|
||||
<ol>
|
||||
<li><strong>Agent Initialization:</strong> Each economic agent starts with equal capital and consumption capacity</li>
|
||||
<li><strong>Dual Chain Operation:</strong> Every agent runs both capitalist (M-C-M') and consumer (C-M-C) chains simultaneously</li>
|
||||
<li><strong>Wealth Accumulation:</strong> Capitalist chains multiply wealth by (1 + r) on each complete cycle</li>
|
||||
<li><strong>Consumption Growth:</strong> Consumer chains grow by (1 + g) on each complete cycle</li>
|
||||
<li><strong>Inequality Emergence:</strong> When r > g, capital wealth grows faster than consumption, concentrating among fewer agents</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h5>Key Metrics</h5>
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item px-0">
|
||||
<strong>Gini Coefficient</strong>
|
||||
<br><small>Measures inequality (0 = perfect equality, 1 = perfect inequality)</small>
|
||||
</div>
|
||||
<div class="list-group-item px-0">
|
||||
<strong>Top 10% Share</strong>
|
||||
<br><small>Percentage of total wealth held by richest 10%</small>
|
||||
</div>
|
||||
<div class="list-group-item px-0">
|
||||
<strong>Capital Share</strong>
|
||||
<br><small>Proportion of wealth from capital vs consumption</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experimental Parameters -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h4 class="mb-0">🧪 Experimental Parameters</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Try These Scenarios</h5>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<h6>Scenario 1: Stable Economy (r ≈ g)</h6>
|
||||
<ul class="mb-0">
|
||||
<li>Capital Rate: 3%</li>
|
||||
<li>Growth Rate: 3%</li>
|
||||
<li>Expected: Moderate inequality growth</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<h6>Scenario 2: Modern Capitalism (r > g)</h6>
|
||||
<ul class="mb-0">
|
||||
<li>Capital Rate: 5%</li>
|
||||
<li>Growth Rate: 2%</li>
|
||||
<li>Expected: Increasing inequality</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger">
|
||||
<h6>Scenario 3: Extreme Inequality (r >> g)</h6>
|
||||
<ul class="mb-0">
|
||||
<li>Capital Rate: 8%</li>
|
||||
<li>Growth Rate: 1%</li>
|
||||
<li>Expected: Rapid wealth concentration</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Historical Context</h5>
|
||||
<p>Real-world examples of r vs g:</p>
|
||||
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>r (Capital)</th>
|
||||
<th>g (Growth)</th>
|
||||
<th>Inequality</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gilded Age (1870-1914)</td>
|
||||
<td>4-5%</td>
|
||||
<td>1-1.5%</td>
|
||||
<td>Very High</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Post-War Era (1950-1980)</td>
|
||||
<td>2-3%</td>
|
||||
<td>3-4%</td>
|
||||
<td>Decreasing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modern Era (1980-2020)</td>
|
||||
<td>4-6%</td>
|
||||
<td>1-2%</td>
|
||||
<td>Increasing</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technical Implementation -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<h4 class="mb-0">⚡ Technical Implementation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Technology Stack</h5>
|
||||
<ul>
|
||||
<li><strong>Backend:</strong> Python Flask with SocketIO</li>
|
||||
<li><strong>Modeling:</strong> NumPy for matrix operations</li>
|
||||
<li><strong>Visualization:</strong> Chart.js for real-time charts</li>
|
||||
<li><strong>Frontend:</strong> Bootstrap 5 with responsive design</li>
|
||||
<li><strong>Real-time:</strong> WebSocket connections for live updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Performance Characteristics</h5>
|
||||
<ul>
|
||||
<li><strong>Scalability:</strong> Up to 10,000 agents</li>
|
||||
<li><strong>Speed:</strong> Real-time visualization of state transitions</li>
|
||||
<li><strong>Accuracy:</strong> Precise Markov chain calculations</li>
|
||||
<li><strong>Export:</strong> JSON and CSV data export</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="text-center">
|
||||
<a href="{{ url_for('main.index') }}" class="btn btn-primary btn-lg">
|
||||
🚀 Start Your Simulation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
90
app/templates/base.html
Normal file
90
app/templates/base.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{{ title }}{% endblock %}</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<!-- Socket.IO -->
|
||||
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ url_for('main.index') }}">
|
||||
<strong>📈 Markov Economics</strong>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('main.index') }}">Simulation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('main.about') }}">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<span class="navbar-text">
|
||||
<small>When r > g, capitalism eats the world</small>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container-fluid mt-4">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-light py-4 mt-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h6>Markov Economics Simulation</h6>
|
||||
<p class="mb-0">
|
||||
<small>
|
||||
Demonstrating Marx's M-C-M' model using Markov chains and Piketty's inequality principle (r > g).
|
||||
Built with Flask, SocketIO, and Chart.js.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<p class="mb-0">
|
||||
<small>
|
||||
<strong>M-C-M':</strong> Money → Commodities → More Money<br>
|
||||
<strong>C-M-C:</strong> Commodities → Money → Commodities
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
35
app/templates/error.html
Normal file
35
app/templates/error.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="text-center">
|
||||
<div class="card shadow">
|
||||
<div class="card-body p-5">
|
||||
<div class="mb-4">
|
||||
<i class="text-danger" style="font-size: 4rem;">❌</i>
|
||||
</div>
|
||||
|
||||
<h2 class="card-title text-danger">Oops!</h2>
|
||||
<p class="card-text lead">{{ error_message }}</p>
|
||||
|
||||
<div class="mt-4">
|
||||
<a href="{{ url_for('main.index') }}" class="btn btn-primary btn-lg me-2">
|
||||
🏠 Go Home
|
||||
</a>
|
||||
<button onclick="history.back()" class="btn btn-outline-secondary">
|
||||
← Go Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<small class="text-muted">
|
||||
If this problem persists, the simulation may have encountered an unexpected error.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
295
app/templates/simulation.html
Normal file
295
app/templates/simulation.html
Normal file
@@ -0,0 +1,295 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.parameter-card {
|
||||
border-left: 4px solid #007bff;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.metrics-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.inequality-warning {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-custom {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.simulation-status {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.btn-simulation {
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<!-- Parameter Controls Panel -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<div class="card parameter-card shadow-sm">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0">📊 Simulation Parameters</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Capital Return Rate (r) -->
|
||||
<div class="mb-4">
|
||||
<label for="capitalRate" class="form-label">
|
||||
<strong>Capital Rate (r)</strong>
|
||||
<span class="badge bg-info ms-1" data-bs-toggle="tooltip"
|
||||
title="Rate of return on capital investment">?</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="capitalRate"
|
||||
min="0" max="25" step="0.1" value="{{ default_params.r_rate * 100 }}">
|
||||
<span class="input-group-text" id="capitalRateValue">{{ "%.1f"|format(default_params.r_rate * 100) }}%</span>
|
||||
</div>
|
||||
<small class="text-muted">Higher values increase wealth accumulation</small>
|
||||
</div>
|
||||
|
||||
<!-- Economic Growth Rate (g) -->
|
||||
<div class="mb-4">
|
||||
<label for="growthRate" class="form-label">
|
||||
<strong>Growth Rate (g)</strong>
|
||||
<span class="badge bg-info ms-1" data-bs-toggle="tooltip"
|
||||
title="Overall economic growth rate">?</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="growthRate"
|
||||
min="0" max="20" step="0.1" value="{{ default_params.g_rate * 100 }}">
|
||||
<span class="input-group-text" id="growthRateValue">{{ "%.1f"|format(default_params.g_rate * 100) }}%</span>
|
||||
</div>
|
||||
<small class="text-muted">Affects consumption growth</small>
|
||||
</div>
|
||||
|
||||
<!-- Number of Agents -->
|
||||
<div class="mb-4">
|
||||
<label for="numAgents" class="form-label">
|
||||
<strong>Population Size</strong>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="numAgents"
|
||||
min="10" max="1000" step="10" value="{{ default_params.num_agents }}">
|
||||
<span class="input-group-text" id="numAgentsValue">{{ default_params.num_agents }}</span>
|
||||
</div>
|
||||
<small class="text-muted">Number of economic agents</small>
|
||||
</div>
|
||||
|
||||
<!-- Simulation Length -->
|
||||
<div class="mb-4">
|
||||
<label for="iterations" class="form-label">
|
||||
<strong>Time Steps</strong>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="iterations"
|
||||
min="100" max="5000" step="100" value="{{ default_params.iterations }}">
|
||||
<span class="input-group-text" id="iterationsValue">{{ default_params.iterations }}</span>
|
||||
</div>
|
||||
<small class="text-muted">Simulation duration</small>
|
||||
</div>
|
||||
|
||||
<!-- Inequality Indicator -->
|
||||
<div class="alert alert-warning" id="inequalityAlert" style="display: none;">
|
||||
<strong>⚠️ r > g Detected!</strong><br>
|
||||
<small>Wealth inequality will increase over time</small>
|
||||
</div>
|
||||
|
||||
<!-- Control Buttons -->
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-success btn-simulation" id="startBtn">
|
||||
▶️ Start Simulation
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-simulation" id="stopBtn" disabled>
|
||||
⏸️ Stop
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-simulation" id="resetBtn">
|
||||
🔄 Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Simulation Status -->
|
||||
<div class="mt-3">
|
||||
<div class="simulation-status bg-secondary text-white text-center" id="simulationStatus">
|
||||
Ready to start
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mt-3" id="progressContainer" style="display: none;">
|
||||
<div class="progress progress-custom">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
id="progressBar" role="progressbar" style="width: 0%">
|
||||
<span id="progressText">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Info Card -->
|
||||
<div class="card mt-3 shadow-sm">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<h6 class="mb-0">💡 Theory</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<small>
|
||||
<strong>M-C-M':</strong> Capitalist cycle where money (M) is invested in commodities (C) to generate more money (M').<br><br>
|
||||
|
||||
<strong>C-M-C:</strong> Consumer cycle where commodities (C) are exchanged for money (M) to buy other commodities (C).<br><br>
|
||||
|
||||
<strong>When r > g:</strong> Capital returns exceed economic growth, leading to increasing wealth inequality.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualization Area -->
|
||||
<div class="col-lg-9 col-md-8">
|
||||
<!-- Key Metrics Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card metrics-card text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Total Wealth</h6>
|
||||
<h4 id="totalWealthMetric">$0</h4>
|
||||
<small>System-wide</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card metrics-card text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Gini Coefficient</h6>
|
||||
<h4 id="giniMetric">0.00</h4>
|
||||
<small>Inequality measure</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card inequality-warning text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Top 10% Share</h6>
|
||||
<h4 id="top10Metric">0%</h4>
|
||||
<small>Wealth concentration</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card inequality-warning text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Capital Share</h6>
|
||||
<h4 id="capitalShareMetric">0%</h4>
|
||||
<small>vs Consumption</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Row -->
|
||||
<div class="row">
|
||||
<!-- Wealth Evolution Chart -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">📈 Wealth Evolution Over Time</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="wealthEvolutionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inequality Metrics Chart -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">📊 Inequality Metrics</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="inequalityChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wealth Distribution Chart -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">🏛️ Wealth Distribution Histogram</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="distributionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export and Actions -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6>📥 Export Simulation Data</h6>
|
||||
<small class="text-muted">Download results for further analysis</small>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-outline-primary me-2" id="exportJsonBtn" disabled>
|
||||
📄 JSON
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success" id="exportCsvBtn" disabled>
|
||||
📊 CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden fields for data storage -->
|
||||
<input type="hidden" id="currentSimulationId">
|
||||
<input type="hidden" id="defaultParams" value="{{ default_params | tojson }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', filename='js/simulation.js') }}"></script>
|
||||
<script>
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Initialize simulation interface
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeSimulation();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user