305 lines
13 KiB
HTML
305 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}
|
|
|
|
{% block meta_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}
|
|
|
|
{% block og_title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}
|
|
{% block og_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}
|
|
|
|
{% block twitter_title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}
|
|
{% block twitter_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}
|
|
|
|
{% 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 %} |