Show description
Project THRESHOLD: Anomalous Incident Dossier
Project THRESHOLD: Anomalous Incident Dossier
PROJECT: THRESHOLD
Top Secret // Eyes Only
Auth: AGENT_USER_01
Anomalous Incident Dossier
The following archive compiles six distinct events identified as potential "Dimensional Breaches" or high-energy temporal distortions.
Data has been synthesized from field reports, sensor logs, and eyewitness testimony. Proceed with caution.
Select a Case File below to examine specific data signatures and event chronologies.
CASE FILES
Select to view classified details
Global Anomaly Distribution
Spatial plotting of the six identified dimensional rifts. Note the lack of uniform geographic clustering, suggesting a non-localized phenomenon.
SELECT A FILE
DATE: --/--/----
LOC: UNKNOWN
Stability Rating
0.0%
Incident Report
Accessing database...
Key Anomalies Observed
Hypothesis
Loading analysis...
Temporal/Energy Fluctuation
Fig 1.1: Sensor logs during peak event duration.
Multidimensional Signature
Fig 1.2: Comparative analysis of environmental variances.
Analysis: Cross-Event Correlation
Upon reviewing the six incidents, a pattern emerges. The "Philadelphia" and "Siberian" events show massive electromagnetic spikes, whereas the "Quantum Lab" and "Japan Room" incidents exhibit localized spatial shear with minimal radiation. The "Antarctic Signal" remains unique due to its inverted particle flow.
Electromagnetic
Gravitational
Temporal
Project Status:
ACTIVE MONITORING
Last Breach:
[REDACTED]
Threat Level:
CRITICAL
PROJECT THRESHOLD DATABASE // FOR AUTHORIZED PERSONNEL ONLY
Generated for visual analysis. Do not distribute.
Project THRESHOLD: Anomalous Incident Dossier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project THRESHOLD: Anomalous Incident Dossier</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.1/plotly.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Inter:wght@300;400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #F5F2EA; /* Warm neutral background (Manila Folder) */
color: #2D2D2A;
}
h1, h2, h3, .mono-font {
font-family: 'Courier Prime', monospace;
}
.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;
}
}
.folder-tab {
transition: all 0.3s ease;
clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}
.folder-tab:hover {
transform: translateY(-2px);
}
.active-tab {
background-color: #E5E0D5;
border-bottom: 2px solid #F5F2EA;
z-index: 10;
}
/* Custom Scrollbar for panel */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #E5E0D5;
}
::-webkit-scrollbar-thumb {
background: #A8A29E;
}
::-webkit-scrollbar-thumb:hover {
background: #78716C;
}
</style>
<!-- Chosen Palette: Warm Neutrals / Archive Aesthetic (Beige #F5F2EA, Dark Grey #2D2D2A, Muted Taupe #E5E0D5, Alert Red #991B1B) -->
<!-- Application Structure Plan:
1. Header: "Classified" context setting.
2. Dashboard Overview: A global scatter plot (Plotly) showing the temporal/spatial distribution of the 6 events.
3. Case Files (Main Interaction): A tabbed/grid interface where clicking an "Event File" loads specific data.
4. Detail View: Dynamic content area. Updates text description, "Evidence Log", and a Chart.js visualization specific to that event (e.g., Radiation levels, Temporal distortion graphs).
5. Synthesis: A comparison section showing the "Instability Index" of all events side-by-side.
Why: This structure mimics browsing a physical case file, allowing non-linear exploration of each "mystery" while providing a cohesive scientific framework (charts/data).
-->
<!-- Visualization & Content Choices:
1. Overview Map/Plot: Plotly Scatter. Goal: Show global spread. Justification: Plotly handles coordinate-style plotting well on canvas.
2. Event Stability Monitor: Chart.js Line Chart. Goal: Visualize the specific "anomaly" (e.g., light intensity vs time). Justification: Line charts are best for temporal fluctuations.
3. Resonance Signature: Chart.js Radar Chart. Goal: Compare attributes (Thermal, Magnetic, Temporal, Radiation). Justification: Radar charts are excellent for "fingerprinting" distinct events.
4. Textual Content: Synthesized from research on the specific prompts (CERN, Philadelphia Experiment, etc.), presented as "Field Reports" to maintain immersion.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="min-h-screen flex flex-col">
<!-- Navbar / Classification Header -->
<nav class="bg-[#2D2D2A] text-[#F5F2EA] p-4 shadow-md border-b-4 border-[#991B1B]">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<span class="text-2xl font-bold tracking-tighter mono-font">PROJECT: THRESHOLD</span>
<span class="bg-[#991B1B] text-white text-xs px-2 py-1 rounded mono-font uppercase tracking-widest">Top Secret // Eyes Only</span>
</div>
<div class="hidden md:block text-sm opacity-75 mono-font">
Auth: AGENT_USER_01
</div>
</div>
</nav>
<!-- Main Content Container -->
<main class="flex-grow max-w-7xl mx-auto w-full p-4 md:p-6 space-y-8">
<!-- Intro Section -->
<section class="bg-white p-6 rounded-lg shadow-sm border border-[#E5E0D5]">
<h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2A] mb-4">Anomalous Incident Dossier</h1>
<p class="text-lg text-gray-700 leading-relaxed max-w-4xl">
The following archive compiles six distinct events identified as potential "Dimensional Breaches" or high-energy temporal distortions.
Data has been synthesized from field reports, sensor logs, and eyewitness testimony. Proceed with caution.
Select a <strong>Case File</strong> below to examine specific data signatures and event chronologies.
</p>
</section>
<!-- Top Level Dashboard: Timeline/Scatter -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Selector / Case Files List -->
<div class="lg:col-span-1 bg-[#E5E0D5] p-1 rounded-lg flex flex-col h-full shadow-inner">
<div class="p-3 bg-[#2D2D2A] text-[#F5F2EA] rounded-t mb-1">
<h2 class="text-lg font-bold mono-font">CASE FILES</h2>
<p class="text-xs opacity-75">Select to view classified details</p>
</div>
<div class="flex-grow space-y-2 p-2 overflow-y-auto" id="case-list">
<!-- Buttons generated by JS -->
</div>
</div>
<!-- Visualization Panel (Global Context) -->
<div class="lg:col-span-2 bg-white p-6 rounded-lg shadow-sm border border-[#E5E0D5] flex flex-col">
<div class="mb-4">
<h2 class="text-xl font-bold text-[#2D2D2A] border-b border-gray-200 pb-2">Global Anomaly Distribution</h2>
<p class="text-sm text-gray-500 mt-1">
Spatial plotting of the six identified dimensional rifts. Note the lack of uniform geographic clustering, suggesting a non-localized phenomenon.
</p>
</div>
<!-- Plotly Container -->
<div id="global-map" class="w-full h-64 md:h-80 bg-gray-50 rounded border border-gray-200"></div>
</div>
</section>
<!-- Detailed Analysis View (Dynamic) -->
<section id="detail-view" class="hidden">
<div class="bg-white rounded-lg shadow-lg border-t-8 border-[#2D2D2A] overflow-hidden">
<!-- Dynamic Header -->
<div class="bg-gray-100 p-6 border-b border-gray-200 flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<h2 id="event-title" class="text-3xl font-bold text-[#991B1B] mono-font mb-1">SELECT A FILE</h2>
<div class="flex space-x-4 text-sm font-semibold text-gray-600 mono-font">
<span id="event-date">DATE: --/--/----</span>
<span id="event-loc">LOC: UNKNOWN</span>
</div>
</div>
<div class="mt-4 md:mt-0 px-4 py-2 bg-[#E5E0D5] rounded text-center">
<span class="block text-xs uppercase tracking-wide text-gray-500">Stability Rating</span>
<span id="event-rating" class="text-xl font-bold text-[#2D2D2A]">0.0%</span>
</div>
</div>
<!-- Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
<!-- Text Data Column -->
<div class="p-6 md:p-8 space-y-6 border-r border-gray-200">
<div>
<h3 class="text-lg font-bold text-[#2D2D2A] mb-2 uppercase border-b border-gray-300 inline-block">Incident Report</h3>
<p id="event-desc" class="text-gray-700 leading-relaxed mt-2">
Accessing database...
</p>
</div>
<div class="bg-[#F5F2EA] p-4 rounded border border-[#E5E0D5]">
<h4 class="text-sm font-bold text-[#57534E] uppercase mb-2">Key Anomalies Observed</h4>
<ul id="event-facts" class="list-disc list-inside text-sm text-gray-700 space-y-1">
<!-- JS Populated -->
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-[#2D2D2A] mb-2 uppercase border-b border-gray-300 inline-block">Hypothesis</h3>
<p id="event-hypothesis" class="text-gray-600 italic text-sm">
Loading analysis...
</p>
</div>
</div>
<!-- Visualization Column -->
<div class="p-6 md:p-8 bg-gray-50 flex flex-col space-y-8">
<!-- Chart 1: Time/Intensity -->
<div>
<h3 class="text-sm font-bold text-gray-500 uppercase mb-2 text-center">Temporal/Energy Fluctuation</h3>
<div class="chart-container bg-white p-2 rounded shadow-sm border border-gray-200">
<canvas id="mainChart"></canvas>
</div>
<p class="text-xs text-center text-gray-400 mt-2">Fig 1.1: Sensor logs during peak event duration.</p>
</div>
<!-- Chart 2: Signature Radar -->
<div>
<h3 class="text-sm font-bold text-gray-500 uppercase mb-2 text-center">Multidimensional Signature</h3>
<div class="chart-container bg-white p-2 rounded shadow-sm border border-gray-200">
<canvas id="radarChart"></canvas>
</div>
<p class="text-xs text-center text-gray-400 mt-2">Fig 1.2: Comparative analysis of environmental variances.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Comparative Footer -->
<section class="bg-[#2D2D2A] text-[#F5F2EA] p-6 rounded-lg">
<h2 class="text-xl font-bold mono-font mb-4 border-b border-gray-600 pb-2">Analysis: Cross-Event Correlation</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p class="text-sm text-gray-300 leading-relaxed mb-4">
Upon reviewing the six incidents, a pattern emerges. The "Philadelphia" and "Siberian" events show massive electromagnetic spikes, whereas the "Quantum Lab" and "Japan Room" incidents exhibit localized spatial shear with minimal radiation. The "Antarctic Signal" remains unique due to its inverted particle flow.
</p>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Electromagnetic</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Gravitational</span>
<span class="px-2 py-1 bg-gray-700 rounded text-xs">Temporal</span>
</div>
</div>
<div class="bg-gray-800 p-4 rounded text-xs font-mono">
<div class="flex justify-between mb-1">
<span>Project Status:</span>
<span class="text-green-400">ACTIVE MONITORING</span>
</div>
<div class="flex justify-between mb-1">
<span>Last Breach:</span>
<span>[REDACTED]</span>
</div>
<div class="flex justify-between">
<span>Threat Level:</span>
<span class="text-[#991B1B] animate-pulse">CRITICAL</span>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-[#E5E0D5] text-[#57534E] text-center p-4 text-xs mt-auto">
<p>PROJECT THRESHOLD DATABASE // FOR AUTHORIZED PERSONNEL ONLY</p>
<p class="opacity-50">Generated for visual analysis. Do not distribute.</p>
</footer>
<script>
// --- DATA STORE ---
// Research synthesized from user prompts: CERN, Philadelphia Experiment, Tunguska/Siberia, etc.
const incidentData = [
{
id: 1,
title: "The CERN Particle Flash",
date: "2012-07-04", // Higgs discovery date, often conflated with portal theories
location: "Geneva, Switzerland (LHC)",
rating: "Class 4 (Sub-Atomic)",
coords: { x: 46.2, y: 6.1 }, // Approx Lat/Lon
summary: "During high-luminosity proton-proton collisions, sensors detected a 0.04 nanosecond discrepancy in particle decay arrival times, coinciding with atmospheric cloud formations above the facility.",
facts: [
"Coincided with the observation of the Higgs Boson.",
"'Portal' cloud formations photographed above LHC (2015/2016 viral images).",
"Weasel caused power outage (2016), theorized as timeline interference."
],
hypothesis: "High-energy collisions may have momentarily weakened the dimensional membrane, allowing observation of 'super-symmetry' particles typically hidden in higher dimensions.",
chartData: [12, 45, 80, 95, 85, 40, 15], // Intensity over time
chartLabels: ["T-30s", "T-10s", "Impact", "T+0.01ns", "T+0.04ns", "T+10s", "T+60s"],
radarData: [90, 20, 80, 30, 60] // [EM, Thermal, Temporal, Bio, Gravitational]
},
{
id: 2,
title: "The Philadelphia Naval Mist",
date: "1943-10-28",
location: "Philadelphia Naval Shipyard, USA",
rating: "Class 5 (Macro-Object)",
coords: { x: 39.9, y: -75.1 },
summary: "The USS Eldridge, fitted with experimental electromagnetic generators, reportedly became optically invisible and teleported to Norfolk, VA, before returning. Crew members were allegedly fused with the hull.",
facts: [
"Project Rainbow: Attempt at radar invisibility.",
"Green fog reported surrounding the vessel.",
"Reports of crew nausea, disorientation, and phase-shifting."
],
hypothesis: "Unified Field Theory application created a scalar energy bubble, displacing the vessel's matter into a hyperspace manifold, resulting in severe biological reintegration errors.",
chartData: [10, 20, 95, 100, 100, 95, 20],
chartLabels: ["Generator Start", "10%", "Full Power", "Disappearance", "Transit", "Reappearance", "Cool Down"],
radarData: [100, 40, 90, 90, 50]
},
{
id: 3,
title: "The Quantum Lab Time Loop",
date: "2021-07-30",
location: "Santa Barbara, California (Google AI)",
rating: "Class 3 (Temporal)",
coords: { x: 34.4, y: -119.7 },
summary: "Researchers utilizing the Sycamore quantum processor created a 'Time Crystal'—a phase of matter that repeats in time without consuming energy. While stable, local chronometers reportedly lost synchronization.",
facts: [
"First observation of a discrete time crystal.",
"Breaks the second law of thermodynamics (locally).",
"Subjective reports of 'deja vu' among lab staff."
],
hypothesis: "The time crystal represents a localized closed timelike curve. While microscopic, its existence proves that perpetual temporal motion is physically possible within a controlled quantum state.",
chartData: [50, 50, 50, 50, 50, 50, 50], // Flatline represents loop/stability
chartLabels: ["Cycle 1", "Cycle 2", "Cycle 3", "Cycle 4", "Cycle 5", "Cycle 6", "Cycle 7"],
radarData: [30, 10, 100, 10, 10]
},
{
id: 4,
title: "The Siberian Light Ripple",
date: "2017-10-26",
location: "Siberia, Russia",
rating: "Class 2 (Atmospheric)",
coords: { x: 60.0, y: 105.0 },
summary: "A massive, expanding sphere of pale blue light appeared over the northern horizon, dwarfing the moon. It expanded silently before dissipating into a spiral. Initially feared as a portal.",
facts: [
"Visible across thousands of miles.",
"Coincided with Topol-M ICBM test launch.",
"Light caused by exhaust reflecting twilight at high altitude.",
"Locals reported 'sky vibrating'."
],
hypothesis: "While officially a rocket trail, the sheer symmetry and lack of sound propagation suggest an atmospheric ionization event that may have triggered a localized auroral distortion.",
chartData: [0, 10, 40, 90, 60, 30, 0],
chartLabels: ["20:00", "20:05", "20:10", "20:15", "20:20", "20:25", "20:30"],
radarData: [70, 60, 20, 10, 30]
},
{
id: 5,
title: "The Japan Room Distortion",
date: "2009-04-12",
location: "Tokyo, Japan",
rating: "Class 4 (Spatial)",
coords: { x: 35.6, y: 139.6 },
summary: "Police responded to a call in a Setagaya apartment. They entered a room that reportedly measured 400 sq ft on the inside, despite the building blueprint allowing for only 150 sq ft. The geometry appeared non-Euclidean.",
facts: [
"Related to urban legends of the 'Mustard Room' or 'Satoru'.",
"Electronic devices failed inside the threshold.",
"Occupant was never found."
],
hypothesis: "A localized topology failure, possibly a tesseract shadow interacting with 3D space. The room acted as a 'pocket dimension' with expanded internal volume.",
chartData: [150, 150, 200, 300, 400, 350, 150], // Sq Ft perceived
chartLabels: ["Entry", "1m In", "2m In", "Center", "Wall", "Return", "Exit"],
radarData: [20, 10, 60, 50, 100] // High Gravity/Space distortion
},
{
id: 6,
title: "The Antarctic Signal Blink",
date: "2016-01-18",
location: "Antarctica (ANITA Balloon)",
rating: "Class 5 (Inversion)",
coords: { x: -82.8, y: 135.0 },
summary: "The ANITA stratospheric balloon detected high-energy cosmic rays (neutrinos) coming *up* from the ice, at an angle implying they passed through the entire Earth without interacting, which is standard model impossible.",
facts: [
"Particle physics implies these particles shouldn't exist.",
"Tabloids claimed evidence of a 'Parallel Universe' running backward.",
"Signal suggested a CPT symmetric universe."
],
hypothesis: "Evidence of a 'mirror universe' where time runs backward. The detection was a leakage of anti-neutrinos from a CPT-inverted reality interacting with our ice sheet.",
chartData: [5, 5, 80, 5, 5, 5, 5], // Sudden spike
chartLabels: ["Flight Hr 1", "Flight Hr 2", "EVENT", "Flight Hr 4", "Flight Hr 5", "Flight Hr 6", "Flight Hr 7"],
radarData: [50, 0, 90, 0, 40]
}
];
// --- CHART INSTANCES ---
let mainChartInstance = null;
let radarChartInstance = null;
// --- INIT ---
document.addEventListener('DOMContentLoaded', () => {
renderCaseList();
renderGlobalMap();
loadCase(incidentData[0]); // Load first case by default
});
// --- RENDER FUNCTIONS ---
function renderCaseList() {
const listContainer = document.getElementById('case-list');
listContainer.innerHTML = '';
incidentData.forEach((incident, index) => {
const btn = document.createElement('button');
btn.className = `w-full text-left p-3 rounded mb-2 border-l-4 border-transparent hover:bg-white hover:border-gray-400 transition-all duration-200 group folder-tab`;
btn.onclick = () => loadCase(incident);
btn.id = `tab-${incident.id}`;
btn.innerHTML = `
<div class="flex justify-between items-center">
<span class="font-bold text-[#2D2D2A] text-sm mono-font group-hover:text-[#991B1B]">CASE #${incident.id}</span>
<span class="text-[10px] text-gray-500 bg-gray-200 px-1 rounded">${incident.date}</span>
</div>
<div class="text-xs text-gray-600 truncate mt-1">${incident.title}</div>
`;
listContainer.appendChild(btn);
});
}
function renderGlobalMap() {
const trace = {
type: 'scattergeo',
mode: 'markers',
text: incidentData.map(d => d.title),
lon: incidentData.map(d => d.coords.y),
lat: incidentData.map(d => d.coords.x),
marker: {
size: 12,
color: '#991B1B',
line: {
color: 'white',
width: 1
}
}
};
const layout = {
geo: {
projection: {
type: 'orthographic',
rotation: { lon: 10, lat: 20 }
},
showland: true,
landcolor: '#E5E0D5',
countrycolor: '#d1d1d1',
showocean: true,
oceancolor: '#ffffff',
bgcolor: 'rgba(0,0,0,0)'
},
margin: { t: 0, b: 0, l: 0, r: 0 },
paper_bgcolor: 'rgba(0,0,0,0)',
showlegend: false,
hovermode: 'closest'
};
const config = { responsive: true, displayModeBar: false };
Plotly.newPlot('global-map', [trace], layout, config);
}
function loadCase(data) {
// 1. UI Updates
document.getElementById('detail-view').classList.remove('hidden');
document.getElementById('detail-view').scrollIntoView({ behavior: 'smooth', block: 'start' });
// Update Tabs style
document.querySelectorAll('.folder-tab').forEach(t => {
t.classList.remove('active-tab', 'bg-[#E5E0D5]', 'border-[#F5F2EA]');
t.classList.add('border-transparent');
});
const activeBtn = document.getElementById(`tab-${data.id}`);
if(activeBtn) {
activeBtn.classList.add('active-tab');
activeBtn.classList.remove('border-transparent');
}
// Update Text Data
document.getElementById('event-title').textContent = data.title;
document.getElementById('event-date').textContent = `DATE: ${data.date}`;
document.getElementById('event-loc').textContent = `LOC: ${data.location}`;
document.getElementById('event-rating').textContent = data.rating;
document.getElementById('event-desc').textContent = data.summary;
document.getElementById('event-hypothesis').textContent = data.hypothesis;
const factsList = document.getElementById('event-facts');
factsList.innerHTML = '';
data.facts.forEach(fact => {
const li = document.createElement('li');
li.textContent = fact;
factsList.appendChild(li);
});
// 2. Charts Update
updateMainChart(data);
updateRadarChart(data);
}
function updateMainChart(data) {
const ctx = document.getElementById('mainChart').getContext('2d');
if (mainChartInstance) {
mainChartInstance.destroy();
}
mainChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: data.chartLabels,
datasets: [{
label: 'Anomaly Intensity',
data: data.chartData,
borderColor: '#991B1B',
backgroundColor: 'rgba(153, 27, 27, 0.1)',
borderWidth: 2,
tension: 0.4,
fill: true,
pointBackgroundColor: '#2D2D2A'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: { color: '#f3f4f6' }
},
x: {
grid: { display: false }
}
},
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: '#2D2D2A',
titleFont: { family: 'Courier Prime' },
bodyFont: { family: 'Inter' }
}
}
}
});
}
function updateRadarChart(data) {
const ctx = document.getElementById('radarChart').getContext('2d');
if (radarChartInstance) {
radarChartInstance.destroy();
}
radarChartInstance = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Electro-Magnetic', 'Thermal', 'Temporal', 'Biological', 'Gravitational'],
datasets: [{
label: 'Signature',
data: data.radarData,
backgroundColor: 'rgba(45, 45, 42, 0.2)',
borderColor: '#2D2D2A',
pointBackgroundColor: '#991B1B',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: '#991B1B'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: { color: '#e5e7eb' },
grid: { color: '#e5e7eb' },
pointLabels: {
font: {
family: 'Courier Prime',
size: 10
},
color: '#57534E'
},
suggestedMin: 0,
suggestedMax: 100
}
},
plugins: {
legend: { display: false }
}
}
});
}
</script>
</body>
</html>