<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Blueprint for the Life Drive: Remaking North American Society</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f0f4f8;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.kpi-card {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
padding: 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.kpi-value {
font-size: 3rem;
font-weight: 900;
line-height: 1;
}
.kpi-label {
margin-top: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: #4A5568;
}
.flowchart-node {
border: 2px solid #007EA7;
background-color: #ffffff;
padding: 1rem;
border-radius: 0.5rem;
text-align: center;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.flowchart-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #007EA7;
margin: 0 1rem;
}
.tooltip-custom {
background-color: #003459;
color: white;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 0.875rem;
}
.gemini-button {
background-color: #00A8E8;
color: white;
font-weight: bold;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: background-color 0.3s;
}
.gemini-button:hover {
background-color: #007EA7;
}
.output-box {
background-color: #F0F7FA;
border: 2px solid #00A8E8;
border-radius: 0.5rem;
padding: 1rem;
margin-top: 1rem;
min-height: 50px;
text-align: left;
}
</style>
</head>
<body class="bg-[#F0F7FA] text-[#003459]">
<!-- INFOGRAPHIC NARRATIVE PLAN
This infographic visualizes the "Blueprint for the Life Drive" model.
The narrative flow is as follows:
1. Introduction: Frame the core problem (the "Death Drive" of societal despair) and the proposed solution (the "Life Drive" model). Use a compelling headline and a short intro.
2. Part 1: Universal Capital: Visualize the core economic mechanisms (CCA, UCD, DWC) using donut charts and bar charts to show distribution and limits. ADDED: Gemini Jargon Buster.
3. Part 2: The Life Drive Economy: Show the shift in the workforce using a stacked bar chart to compare old vs. new job sectors. Highlight the UCO with a stylized card.
4. Part 3: True Cost Accountability: Use a radar chart to visualize the NTV score for a hypothetical policy and a flow diagram for the TCTP process. ADDED: Gemini AI Policy Scorer.
5. Part 4: Measuring Success: Display the key "Life Drive Metrics" using large KPI cards to emphasize the new definition of success.
6. Part 5: The 10-Year Action Plan: A horizontal flowchart implemented with HTML/CSS to visualize the three phases of implementation.
7. Part 6: Continental Security: Use icon-like cards to represent the three pillars of resilience.
-->
<!-- PALETTE SELECTION
Palette Name: "Oceanic Vitality"
HEX Codes: #00A8E8 (Accent Blue), #007EA7 (Primary Blue), #003459 (Dark Blue/Text), #9FFFCB (Light Green Accent), #22AAA1 (Teal Accent).
This palette was chosen for its professional yet vibrant feel, aligning with the model's themes of flourishing, clean economy, and systemic health.
-->
<!-- VISUALIZATION CHOICES
1. Data Point: Wealth Distribution (DWC). Goal: Compare. Visualization: Bar Chart (Chart.js). Justification: Clearly shows the vast difference between median wealth and the proposed ceiling, visually representing the concept of wealth containment. NO SVG.
2. Data Point: Life Drive Economy Workforce Shift. Goal: Compare/Change. Visualization: Stacked Bar Chart (Chart.js). Justification: Effectively compares the composition of the old workforce (automatable jobs) vs. the new workforce (high-NTV roles). NO SVG.
3. Data Point: Net True Value (NTV) Policy Score. Goal: Inform/Organize. Visualization: Radar Chart (Chart.js). Justification: Provides a multi-dimensional view of a policy's impact across key Life Drive metrics, making complex trade-offs easy to grasp. NO SVG.
4. Data Point: Life Drive Metrics. Goal: Inform. Visualization: Single Big Number (KPI Cards). Justification: Large, bold numbers create an immediate impact and highlight the most important success metrics of the model. NO SVG.
5. Data Point: 10-Year Action Plan. Goal: Organize. Visualization: Flow Chart (HTML/CSS). Justification: Clearly illustrates the phased, sequential nature of the implementation plan without using prohibited technologies. NO SVG.
6. Data Point: Universal Capital Distribution (CCA). Goal: Compare. Visualization: Donut Chart (Chart.js). Justification: Shows the composition of how the Citizen's Capital Account can be used, emphasizing wealth-building activities. NO SVG.
-->
<!-- CONFIRMATION: NEITHER Mermaid JS NOR SVG were used anywhere in this document. All charts are rendered on HTML Canvas elements via Chart.js, and diagrams are constructed with structured HTML and styled with Tailwind CSS. -->
<div class="container mx-auto p-4 md:p-8">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-6xl font-black text-[#003459] leading-tight">A BLUEPRINT FOR THE LIFE DRIVE</h1>
<p class="mt-4 text-lg md:text-xl text-[#007EA7] max-w-3xl mx-auto">A 10-Year Strategy to Remake North American Society by Replacing the System of Coerced Labor and Hyper-Wealth with One of Autonomous Contribution and Shared Flourishing.</p>
</header>
<main class="space-y-12">
<section id="universal-capital">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-[#003459]">Part I: Universal Capital & Wealth Stabilization</h2>
<p class="mt-2 text-md text-[#007EA7] max-w-2xl mx-auto">The model's foundation is a Demographically-Linked Currency that decouples survival from labor. It provides every citizen a capital floor at birth and prevents the unproductive hoarding of extreme wealth through an automatic, transparent system.</p>
</div>
<!-- GEMINI FEATURE 1: JARGON BUSTER -->
<div class="bg-white rounded-lg shadow-xl p-6 mb-8 border-l-4 border-[#00A8E8]">
<h3 class="font-bold text-2xl mb-4 text-[#003459]">✨ Jargon Buster: Explain the Core Concepts</h3>
<p class="text-sm text-gray-600 mb-4">Use the AI Tutor to get a simple, 10th-grade explanation of any complex term in the model.</p>
<div class="flex flex-col sm:flex-row gap-4">
<select id="jargonSelect" class="flex-grow p-3 border border-gray-300 rounded-md text-gray-700 focus:ring-[#00A8E8] focus:border-[#00A8E8]">
<option value="CCA">Citizen's Capital Account (CCA)</option>
<option value="DWC">Dynamic Wealth Ceiling (DWC)</option>
<option value="APT">Automated Productivity Tax (APT)</option>
<option value="UCD">Universal Citizen Dividend (UCD)</option>
<option value="TCTP">True Cost Transparency Protocol (TCTP)</option>
</select>
<button onclick="explainJargon()" class="gemini-button whitespace-nowrap flex items-center justify-center">
Ask AI Tutor
</button>
</div>
<div id="jargonOutput" class="output-box">
Select a term above to see a simple explanation.
</div>
</div>
<!-- END GEMINI FEATURE 1 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-center">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="font-bold text-xl mb-4 text-center">Citizen's Capital Account (CCA) Uses</h3>
<p class="text-sm text-gray-600 mb-4 text-center">The CCA is restricted to long-term, wealth-building assets to provide a universal economic floor and foster autonomy, not short-term consumption.</p>
<div class="chart-container h-64 md:h-72">
<canvas id="ccaChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 lg:col-span-2">
<h3 class="font-bold text-xl mb-4 text-center">The Dynamic Wealth Ceiling (DWC)</h3>
<p class="text-sm text-gray-600 mb-4 text-center">The DWC establishes a clear boundary between productive upper-middle-class wealth and unproductive hyper-wealth. Upon death, assets exceeding this cap are removed from circulation to stabilize the currency for all.</p>
<div class="chart-container h-80 md:h-96">
<canvas id="dwcChart"></canvas>
</div>
</div>
</div>
</section>
<section id="life-drive-economy">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-[#003459]">Part II: The Life Drive Economy</h2>
<p class="mt-2 text-md text-[#007EA7] max-w-2xl mx-auto">With basic needs met by universal capital, the economy shifts investment toward high-value, human-exclusive work in the Caring, Cultural, and Clean Economy sectors, turning jobs into meaningful contributions.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="font-bold text-xl mb-4 text-center">Workforce Transformation: Labor to Contribution</h3>
<p class="text-sm text-gray-600 mb-4 text-center">The labor market is reoriented from automatable, low-NTV jobs to high-NTV roles that machines cannot perform, fostering a purpose-driven workforce.</p>
<div class="chart-container h-80">
<canvas id="workforceChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-center">
<h3 class="font-bold text-xl mb-4 text-center">Universal Civic Opportunity (UCO)</h3>
<div class="text-center text-6xl mb-4">🌱</div>
<p class="text-gray-600 mb-4">A high-status, voluntary service program providing pathways into the new economy. It's not mandatory, but participation is highly incentivized with significant economic rewards.</p>
<ul class="text-left space-y-2 text-gray-700">
<li class="flex items-start"><span class="text-[#00A8E8] mr-2">▶</span> <strong>Accelerated CCA Access:</strong> Unlock capital funds sooner for a home or business.</li>
<li class="flex items-start"><span class="text-[#00A8E8] mr-2">▶</span> <strong>Permanent UCD Boost:</strong> Receive a lifelong increase to your citizen dividend.</li>
<li class="flex items-start"><span class="text-[#00A8E8] mr-2">▶</span> <strong>High-Status Training:</strong> Gain valuable skills in re-wilding, clean energy, or community care.</li>
</ul>
</div>
</div>
</section>
<section id="accountability">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-[#003459]">Part III & IV: True Cost Accountability</h2>
<p class="mt-2 text-md text-[#007EA7] max-w-2xl mx-auto">Ideological debate is replaced with objective truth. The True Cost Transparency Protocol (TCTP) uses AI to measure the hidden social and environmental costs of all economic actions, guiding policy toward human flourishing.</p>
</div>
<!-- GEMINI FEATURE 2: NTV POLICY SCORER -->
<div class="bg-white rounded-lg shadow-xl p-6 mb-8 border-l-4 border-[#22AAA1]">
<h3 class="font-bold text-2xl mb-4 text-[#003459]">✨ AI Policy Scorer: Test Your Policy Idea</h3>
<p class="text-sm text-gray-600 mb-4">Enter a simple policy idea (e.g., "Tax short-term stock trading") and the AI Policy Scoring Engine will analyze its potential Net True Value (NTV) based on the Life Drive framework.</p>
<div class="flex flex-col sm:flex-row gap-4">
<input type="text" id="policyInput" placeholder="Example: Fund all public libraries using lottery revenue" class="flex-grow p-3 border border-gray-300 rounded-md text-gray-700 focus:ring-[#22AAA1] focus:border-[#22AAA1]">
<button onclick="scorePolicy()" class="gemini-button bg-[#22AAA1] hover:bg-[#1A877E] whitespace-nowrap flex items-center justify-center">
Get NTV Score
</button>
</div>
<div id="policyOutput" class="output-box border-[#22AAA1]">
Policy analysis will appear here.
</div>
</div>
<!-- END GEMINI FEATURE 2 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="font-bold text-xl mb-4 text-center">Policy Scoring: The Eros Voting Index</h3>
<p class="text-sm text-gray-600 mb-4 text-center">Every major law must publish its AI-calculated Net True Value (NTV) Score, allowing citizens to vote based on objective data, not polarized rhetoric.</p>
<div class="chart-container h-80">
<canvas id="ntvChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="font-bold text-xl mb-4 text-center">How the TCTP Works</h3>
<p class="text-sm text-gray-600 mb-6 text-center">AI aggregates data from millions of sources to calculate a real-time "True Cost Factor" for any economic activity.</p>
<div class="space-y-4">
<div class="flowchart-node">
<span class="font-bold">1. Data Aggregation</span>
<span class="text-sm text-gray-500">AI monitors environmental sensors, supply chains, labor metrics.</span>
</div>
<div class="text-center text-2xl text-[#007EA7]">↓</div>
<div class="flowchart-node">
<span class="font-bold">2. TCF Calculation</span>
<span class="text-sm text-gray-500">AI quantifies negative externalities (pollution, precarity).</span>
</div>
<div class="text-center text-2xl text-[#007EA7]">↓</div>
<div class="flowchart-node">
<span class="font-bold">3. NTV Scoring</span>
<span class="text-sm text-gray-500">Economic Output - True Cost Factor = Net True Value.</span>
</div>
</div>
</div>
</div>
</section>
<section id="metrics">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-[#003459]">Part VI: Measuring Success with Life Drive Metrics</h2>
<p class="mt-2 text-md text-[#007EA7] max-w-2xl mx-auto">Success is no longer measured by GDP alone. We track metrics that quantify flourishing, autonomy, and contribution, ensuring the system is achieving its core purpose of supporting the Life Drive.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="kpi-card">
<div class="kpi-value text-[#007EA7]">1:10</div>
<div class="kpi-label">Wealth Distribution Index</div>
<p class="text-xs text-gray-500 mt-2">Target ratio of Median CCA to the DWC, ensuring wealth is contained.</p>
</div>
<div class="kpi-card">
<div class="kpi-value text-[#22AAA1]">>60%</div>
<div class="kpi-label">Autonomy Rate</div>
<p class="text-xs text-gray-500 mt-2">Target % of workforce in TCTP-positive roles (Caring, Clean, Cultural).</p>
</div>
<div class="kpi-card">
<div class="kpi-value text-[#00A8E8]">>0</div>
<div class="kpi-label">Eros Voting Index</div>
<p class="text-xs text-gray-500 mt-2">Target average NTV Score of all passed legislation must be positive.</p>
</div>
<div class="kpi-card">
<div class="kpi-value text-[#9FFFCB] text-shadow-lg"><span class="text-[#003459]">+5%</span></div>
<div class="kpi-label">Net True Value (NTV) Growth</div>
<p class="text-xs text-gray-500 mt-2">Annual growth of NTV must exceed GDP growth, proving true progress.</p>
</div>
</div>
</section>
<section id="action-plan">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-[#003459]">Part VII: The 10-Year Action Plan</h2>
<p class="mt-2 text-md text-[#007EA7] max-w-2xl mx-auto">A phased, decade-long strategy to move from local experiments to a fully integrated, nationwide system.</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex-1 flowchart-node m-2">
<span class="font-bold text-lg text-[#003459]">Phase I: Foundations</span>
<span class="font-semibold text-sm text-[#007EA7]">(Years 1-3)</span>
<p class="text-xs text-gray-600 mt-2">Launch pilot "Baby Bond" programs, standardize initial TCTP metrics, and fund local UCO service jobs.</p>
</div>
<div class="flowchart-arrow hidden md:flex">→</div>
<div class="flowchart-arrow flex md:hidden my-2">↓</div>
<div class="flex-1 flowchart-node m-2">
<span class="font-bold text-lg text-[#003459]">Phase II: Integration</span>
<span class="font-semibold text-sm text-[#007EA7]">(Years 4-7)</span>
<p class="text-xs text-gray-600 mt-2">Pass national APT/UCD Act, mandate NTV scoring for all laws, and roll out Universal Portable Benefits.</p>
</div>
<div class="flowchart-arrow hidden md:flex">→</div>
<div class="flowchart-arrow flex md:hidden my-2">↓</div>
<div class="flex-1 flowchart-node m-2">
<span class="font-bold text-lg text-[#003459]">Phase III: Full Flourishing</span>
<span class="font-semibold text-sm text-[#007EA7]">(Years 8-10)</span>
<p class="text-xs text-gray-600 mt-2">Fully enforce the DWC, make NTV Civics a national standard, and promote the TCTP globally.</p>
</div>
</div>
</div>
</section>
</main>
</div>
<script>
const apiKey = "";
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
const palette = {
accentBlue: '#00A8E8',
primaryBlue: '#007EA7',
darkBlue: '#003459',
lightGreen: '#9FFFCB',
teal: '#22AAA1'
};
const performGeminiRequest = async (systemInstruction, userQuery, outputElementId, loadingText = 'Analyzing...') => {
const outputElement = document.getElementById(outputElementId);
outputElement.innerHTML = `<span class="text-gray-500 italic">${loadingText}</span>`;
outputElement.style.borderColor = palette.accentBlue;
const payload = {
contents: [{ parts: [{ text: userQuery }] }],
systemInstruction: { parts: [{ text: systemInstruction }] },
};
const maxRetries = 5;
let lastError = null;
for (let i = 0; i < maxRetries; i++) {
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
if (text) {
outputElement.innerHTML = text.replace(/\n/g, '<br>');
outputElement.style.borderColor = palette.teal;
return;
} else {
throw new Error('No text generated by LLM.');
}
} catch (error) {
lastError = error;
if (i < maxRetries - 1) {
await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
}
}
}
console.error("Gemini API request failed after multiple retries:", lastError);
outputElement.innerHTML = `<span class="text-red-600">Error: Could not connect to the analysis engine. Please try again later.</span>`;
outputElement.style.borderColor = 'red';
};
window.explainJargon = () => {
const term = document.getElementById('jargonSelect').value;
const systemPrompt = "You are an expert economic tutor for high school students. Explain the provided complex term from a societal model in a single paragraph, using simple, clear, 10th-grade language. Focus on the core function and benefit to the average citizen.";
const userQuery = `Explain this concept: ${term}`;
performGeminiRequest(systemPrompt, userQuery, 'jargonOutput', 'Thinking about the economy...');
};
window.scorePolicy = () => {
const policy = document.getElementById('policyInput').value.trim();
if (!policy) {
document.getElementById('policyOutput').innerHTML = `<span class="text-red-600">Please enter a policy idea to score.</span>`;
document.getElementById('policyOutput').style.borderColor = 'red';
return;
}
const systemPrompt = `You are the AI Policy Scoring Engine of the True Cost Transparency Protocol (TCTP). Analyze the user's policy concept based on the Life Drive (Eros: supports autonomy, stability, contribution) vs. Death Drive (Todestrieb: supports polarization, hyper-wealth, precarity, externalized costs) framework. Provide a two-paragraph response: 1) Estimate a hypothetical Net True Value (NTV) score (e.g., NTV Score: +15 or NTV Score: -10) and briefly justify the number based on TCTP principles. 2) List the main Life Drive components it supports and the main Death Drive components it reinforces/avoids.`;
const userQuery = `Analyze this policy proposal: ${policy}`;
performGeminiRequest(systemPrompt, userQuery, 'policyOutput', 'Calculating Net True Value...');
};
const wrapLabel = (str, maxWidth = 16) => {
if (str.length <= maxWidth) {
return str;
}
const words = str.split(' ');
const lines = [];
let currentLine = '';
for (const word of words) {
if ((currentLine + ' ' + word).length > maxWidth && currentLine.length > 0) {
lines.push(currentLine);
currentLine = word;
} else {
if (currentLine.length > 0) {
currentLine += ' ' + word;
} else {
currentLine = word;
}
}
}
lines.push(currentLine);
return lines;
};
const defaultTooltipConfig = {
plugins: {
tooltip: {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
},
backgroundColor: palette.darkBlue,
titleColor: 'white',
bodyColor: 'white',
borderColor: palette.primaryBlue,
borderWidth: 1
},
legend: {
labels: {
color: palette.darkBlue
}
}
}
};
document.addEventListener('DOMContentLoaded', function () {
const ccaCtx = document.getElementById('ccaChart');
if (ccaCtx) {
new Chart(ccaCtx, {
type: 'doughnut',
data: {
labels: ['First Home Down Payment', 'Education & Training', 'Entrepreneurship', wrapLabel('Family Caregiving Leave')],
datasets: [{
label: 'CCA Approved Uses',
data: [40, 30, 20, 10],
backgroundColor: [palette.primaryBlue, palette.accentBlue, palette.teal, palette.lightGreen],
borderColor: '#ffffff',
borderWidth: 2,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
...defaultTooltipConfig,
plugins: {
...defaultTooltipConfig.plugins,
legend: {
position: 'bottom',
labels: {
color: palette.darkBlue,
boxWidth: 15,
padding: 15
}
}
}
}
});
}
const dwcCtx = document.getElementById('dwcChart');
if (dwcCtx) {
new Chart(dwcCtx, {
type: 'bar',
data: {
labels: ['National Median Wealth', 'Dynamic Wealth Ceiling'],
datasets: [{
label: 'Allowed Wealth',
data: [1, 10],
backgroundColor: palette.primaryBlue,
stack: 'stack1'
},
{
label: 'Wealth Returned to Society',
data: [0, 5],
backgroundColor: palette.lightGreen,
stack: 'stack1'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: {
stacked: true,
title: { display: true, text: 'Wealth Multiple (1x = National Median)', color: palette.darkBlue },
ticks: { color: palette.darkBlue }
},
y: { stacked: true, ticks: { color: palette.darkBlue } }
},
...defaultTooltipConfig
}
});
}
const workforceCtx = document.getElementById('workforceChart');
if (workforceCtx) {
new Chart(workforceCtx, {
type: 'bar',
data: {
labels: ['Current Workforce', 'Life Drive Workforce'],
datasets: [
{
label: 'Automatable/Low-NTV Jobs',
data: [65, 15],
backgroundColor: '#D1D5DB',
},
{
label: 'Caring & Cultural Economy',
data: [15, 35],
backgroundColor: palette.accentBlue,
},
{
label: 'Clean Economy & Re-wilding',
data: [5, 30],
backgroundColor: palette.teal,
},
{
label: 'Human-Augmented & Creative',
data: [15, 20],
backgroundColor: palette.primaryBlue,
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { stacked: true, ticks: { color: palette.darkBlue } },
y: {
stacked: true,
max: 100,
title: { display: true, text: '% of Workforce', color: palette.darkBlue },
ticks: { color: palette.darkBlue }
}
}
},
...defaultTooltipConfig
});
}
const ntvCtx = document.getElementById('ntvChart');
if (ntvCtx) {
new Chart(ntvCtx, {
type: 'radar',
data: {
labels: [wrapLabel('Environmental Impact (TCF)'), 'Societal Resilience', 'Wealth Distribution', wrapLabel('Sublime/Awe Access'), wrapLabel('Economic Output')],
datasets: [{
label: 'Hypothetical Clean Infrastructure Bill (NTV Score: +18)',
data: [9, 8, 7, 7, 6],
fill: true,
backgroundColor: 'rgba(0, 168, 232, 0.2)',
borderColor: palette.accentBlue,
pointBackgroundColor: palette.accentBlue,
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: palette.accentBlue
}, {
label: 'Hypothetical Deregulation Bill (NTV Score: -25)',
data: [2, 3, 2, 3, 8],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: { color: '#d1d5db' },
grid: { color: '#e5e7eb' },
pointLabels: {
color: palette.darkBlue,
font: {
size: 10
}
},
ticks: {
backdropColor: 'transparent',
color: palette.primaryBlue,
stepSize: 2
},
suggestedMin: 0,
suggestedMax: 10
}
},
...defaultTooltipConfig,
plugins: {
...defaultTooltipConfig.plugins,
tooltip: {
...defaultTooltipConfig.plugins.tooltip,
callbacks: {
title: function(tooltipItems) {
return tooltipItems[0].dataset.label.split('(')[0].trim();
},
label: function(context) {
let label = context.chart.data.labels[context.dataIndex];
if (Array.isArray(label)) {
label = label.join(' ');
}
return `${label}: ${context.raw}`;
}
}
}
}
}
});
}
});
</script>
</body>
</html>