405 lines
15 KiB
HTML
405 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Variance Attribution Model | Brian Beaulieu</title>
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--primary: #1a1a2e;
|
|||
|
|
--secondary: #16213e;
|
|||
|
|
--accent: #0f3460;
|
|||
|
|
--gold: #c9a227;
|
|||
|
|
--text: #e8e8e8;
|
|||
|
|
--muted: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|||
|
|
background: var(--primary);
|
|||
|
|
color: var(--text);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variance-header {
|
|||
|
|
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
|||
|
|
padding: 3rem 2rem;
|
|||
|
|
border-bottom: 3px solid var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variance-header h1 {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
letter-spacing: -0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variance-header .subtitle {
|
|||
|
|
color: var(--gold);
|
|||
|
|
font-weight: 300;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.variance-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grounding-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(201, 162, 39, 0.2);
|
|||
|
|
border: 1px solid var(--gold);
|
|||
|
|
padding: 0.4rem 1rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
color: var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tool-description {
|
|||
|
|
background: var(--secondary);
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
border-left: 4px solid var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tool-description h3 {
|
|||
|
|
color: var(--gold);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.control-grid { grid-template-columns: 1fr; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-section, .output-section {
|
|||
|
|
background: rgba(22, 33, 62, 0.7);
|
|||
|
|
padding: 2rem;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid rgba(201, 162, 39, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-section h3, .output-section h3 {
|
|||
|
|
color: var(--gold);
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 1.2rem;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row label {
|
|||
|
|
min-width: 140px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row input {
|
|||
|
|
flex: 1;
|
|||
|
|
background: var(--primary);
|
|||
|
|
border: 1px solid var(--accent);
|
|||
|
|
color: var(--text);
|
|||
|
|
padding: 0.6rem 1rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row input:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sigma-display {
|
|||
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
|
|||
|
|
padding: 2.5rem;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
border: 2px solid var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sigma-value {
|
|||
|
|
font-size: 4rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--gold);
|
|||
|
|
line-height: 1;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sigma-label {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metrics-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-card {
|
|||
|
|
background: rgba(15, 52, 96, 0.4);
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border-left: 3px solid var(--gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-card .label {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-card .value {
|
|||
|
|
font-size: 1.8rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-preview {
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
padding: 2rem;
|
|||
|
|
background: var(--secondary);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid rgba(201, 162, 39, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-preview img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
filter: brightness(0.85) contrast(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.methodology-note {
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background: rgba(201, 162, 39, 0.1);
|
|||
|
|
border-left: 4px solid var(--gold);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-link {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
color: var(--gold);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-link:hover {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.calculate-btn {
|
|||
|
|
background: var(--gold);
|
|||
|
|
color: var(--primary);
|
|||
|
|
border: none;
|
|||
|
|
padding: 1rem 2.5rem;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button.calculate-btn:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<a href="index.html" class="back-link">← Return to Dashboard</a>
|
|||
|
|
|
|||
|
|
<div class="variance-header">
|
|||
|
|
<h1>Variance Attribution Model</h1>
|
|||
|
|
<p class="subtitle">Signal vs. Noise in Interstellar Supply Chains</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="variance-container">
|
|||
|
|
<div class="grounding-badge">
|
|||
|
|
📚 Grounded in Six Sigma (Q236908) | Statistical Process Control Methodology
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tool-description">
|
|||
|
|
<h3>The Problem</h3>
|
|||
|
|
<p>When a Mars colony reports 23% yield loss on wheat hydroponics, is it random noise—or a systematic flaw? This model decomposes total variance into attributable components: transport latency, atmospheric variance, nutrient drift, equipment degradation, and operator error. Each source gets a sigma level. We don't patch leaks—we eliminate them.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="control-grid">
|
|||
|
|
<div class="input-section">
|
|||
|
|
<h3>Input Parameters</h3>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Baseline Yield (tons)</label>
|
|||
|
|
<input type="number" id="baselineYield" value="100" step="0.1" min="0">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Observed Yield (tons)</label>
|
|||
|
|
<input type="number" id="observedYield" value="77" step="0.1" min="0">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Transport Lag Variance (%)</label>
|
|||
|
|
<input type="number" id="transportVar" value="8" step="0.1" min="0" max="100">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Atmospheric Density Var (%)</label>
|
|||
|
|
<input type="number" id="atmosphereVar" value="5" step="0.1" min="0" max="100">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Nutrient Drift Var (%)</label>
|
|||
|
|
<input type="number" id="nutrientVar" value="4" step="0.1" min="0" max="100">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Equipment Degradation (%)</label>
|
|||
|
|
<input type="number" id="equipmentVar" value="3" step="0.1" min="0" max="100">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<label>Operator Error (%)</label>
|
|||
|
|
<input type="number" id="operatorVar" value="2" step="0.1" min="0" max="100">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="calculate-btn" onclick="calculateVariance()">Compute Sigma Profile</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="output-section">
|
|||
|
|
<h3>Attribution Results</h3>
|
|||
|
|
|
|||
|
|
<div class="sigma-display">
|
|||
|
|
<div class="sigma-value" id="sigmaLevel">—</div>
|
|||
|
|
<div class="sigma-label">Process Capability</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="metrics-grid">
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="label">Total Variance</div>
|
|||
|
|
<div class="value" id="totalVariance">—%</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="label">Defect Rate</div>
|
|||
|
|
<div class="value" id="defectRate">— ppm</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="label">Largest Contributor</div>
|
|||
|
|
<div class="value" id="largestSource">—</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="label">Control Status</div>
|
|||
|
|
<div class="value" id="controlStatus">—</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-preview">
|
|||
|
|
<h3>Visual Reference: Industrial Control Environment</h3>
|
|||
|
|
<p style="color: var(--muted); margin-bottom: 1rem;">Precision begins where measurement ends. NASA wind tunnel instrumentation—the gold standard for variance isolation.</p>
|
|||
|
|
<img src="https://images-assets.nasa.gov/image/GRC-1973-C-01775/GRC-1973-C-01775~medium.jpg" alt="NASA supersonic wind tunnel data recording room showing precision instrumentation">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="methodology-note">
|
|||
|
|
<strong>Methodology:</strong> This model applies Six Sigma's DMAIC framework (Define, Measure, Analyze, Improve, Control) to galactic logistics. Total variance = Σ(component variances). Sigma level derived from Z-score: σ = ½ × (Upper Spec Limit − Lower Spec Limit) / Standard Deviation. Defects per million opportunities (DPMO) calculated as: DPMO = (Total Defects / (Units × Opportunities)) × 10⁶. Values benchmarked against terrestrial aerospace standards (Boeing, NASA) adapted for extraterrestrial constraints.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function calculateVariance() {
|
|||
|
|
const baseline = parseFloat(document.getElementById('baselineYield').value);
|
|||
|
|
const observed = parseFloat(document.getElementById('observedYield').value);
|
|||
|
|
|
|||
|
|
const transport = parseFloat(document.getElementById('transportVar').value);
|
|||
|
|
const atmosphere = parseFloat(document.getElementById('atmosphereVar').value);
|
|||
|
|
const nutrient = parseFloat(document.getElementById('nutrientVar').value);
|
|||
|
|
const equipment = parseFloat(document.getElementById('equipmentVar').value);
|
|||
|
|
const operator = parseFloat(document.getElementById('operatorVar').value);
|
|||
|
|
|
|||
|
|
// Calculate total variance percentage
|
|||
|
|
const totalLossPercent = ((baseline - observed) / baseline) * 100;
|
|||
|
|
const totalVariance = transport + atmosphere + nutrient + equipment + operator;
|
|||
|
|
|
|||
|
|
// Find largest contributor
|
|||
|
|
const sources = [
|
|||
|
|
{ name: 'Transport Lag', value: transport },
|
|||
|
|
{ name: 'Atmospheric Density', value: atmosphere },
|
|||
|
|
{ name: 'Nutrient Drift', value: nutrient },
|
|||
|
|
{ name: 'Equipment Degradation', value: equipment },
|
|||
|
|
{ name: 'Operator Error', value: operator }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const largest = sources.reduce((max, curr) => curr.value > max.value ? curr : max);
|
|||
|
|
|
|||
|
|
// Calculate sigma level (simplified approximation)
|
|||
|
|
// Using Z-score approximation: higher variance = lower sigma
|
|||
|
|
let sigmaLevel;
|
|||
|
|
if (totalVariance <= 2) sigmaLevel = 6.0;
|
|||
|
|
else if (totalVariance <= 5) sigmaLevel = 5.0;
|
|||
|
|
else if (totalVariance <= 10) sigmaLevel = 4.0;
|
|||
|
|
else if (totalVariance <= 15) sigmaLevel = 3.0;
|
|||
|
|
else if (totalVariance <= 25) sigmaLevel = 2.0;
|
|||
|
|
else sigmaLevel = 1.0;
|
|||
|
|
|
|||
|
|
// Calculate DPMO (defects per million opportunities)
|
|||
|
|
// Approximation: higher loss % = higher defect rate
|
|||
|
|
const dpmo = Math.round(totalLossPercent * 10000);
|
|||
|
|
|
|||
|
|
// Determine control status
|
|||
|
|
let controlStatus;
|
|||
|
|
if (sigmaLevel >= 4.0) controlStatus = 'In Statistical Control';
|
|||
|
|
else if (sigmaLevel >= 3.0) controlStatus = 'Marginally Stable';
|
|||
|
|
else controlStatus = 'Out of Control — Immediate Action Required';
|
|||
|
|
|
|||
|
|
// Update displays
|
|||
|
|
document.getElementById('sigmaLevel').textContent = σ + 'σ';
|
|||
|
|
document.getElementById('totalVariance').textContent = totalVariance.toFixed(1) + '%';
|
|||
|
|
document.getElementById('defectRate').textContent = dpmo.toLocaleString() + ' ppm';
|
|||
|
|
document.getElementById('largestSource').textContent = largest.name;
|
|||
|
|
document.getElementById('controlStatus').textContent = controlStatus;
|
|||
|
|
|
|||
|
|
// Color-code the sigma display
|
|||
|
|
const sigmaDisplay = document.querySelector('.sigma-display');
|
|||
|
|
if (sigmaLevel >= 5) sigmaDisplay.style.border = '2px solid #4ade80';
|
|||
|
|
else if (sigmaLevel >= 4) sigmaDisplay.style.border = '2px solid #c9a227';
|
|||
|
|
else if (sigmaLevel >= 3) sigmaDisplay.style.border = '2px solid #fb923c';
|
|||
|
|
else sigmaDisplay.style.border = '2px solid #ef4444';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Auto-calculate on load for demo
|
|||
|
|
window.onload = calculateVariance;
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|