Beta Ray Bill: Anatomy of a Stormbreaker
Beta Ray Bill is a cybernetically enhanced Korbinite, genetically modified to serve as the protector of his race. Notable for being the first non-Norse being deemed worthy to wield Mjolnir. He currently wields the enchanted hammer Stormbreaker, possessing powers comparable to Thor Odinson.
:root {
--primary-accent: #ffa902;
--primary-accent-dark: #CC8702;
--secondary-bg: #48555e;
--body-bg: #1f2529;
--text-main: #b1b8be;
--accent-red: #d9534f;
--accent-blue: #5bc0de;
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--body-bg);
color: var(--text-main);
}
h1, h2, h3 {
font-family: 'Orbitron', sans-serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 350px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
max-height: 400px;
}
}
.plotly-chart-container {
position: relative;
width: 100%;
height: 400px;
max-height: 450px;
}
.stat-card {
background-color: var(--secondary-bg);
border: 1px solid var(--primary-accent);
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
padding: 1.5rem;
text-align: center;
}
.chart-card {
background-color: var(--secondary-bg);
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
padding: 1.5rem;
border-top: 4px solid var(--primary-accent);
}
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
border-radius: 0.5rem;
background-color: #2c353b; /* Slightly darker contrast for steps */
border: 1px solid #606d75;
font-weight: 600;
min-width: 150px;
color: var(--text-main);
}
.flow-arrow {
font-size: 2rem;
font-weight: 700;
color: var(--primary-accent);
margin: 0 0.5rem;
transform: rotate(90deg);
}
@media (min-width: 768px) {
.flow-arrow {
transform: rotate(0deg);
}
}
.text-accent { color: var(--primary-accent); }
.text-secondary { color: var(--accent-blue); }
.text-highlight { color: #ffffff; }
/* Header styling override */
header {
background-color: #262d33; /* Slightly lighter than body for contrast */
border-bottom: 4px solid var(--primary-accent);
}
Subject Analysis: Beta Ray Bill
Classification: Alpha-Level Extraterrestrial Threat/Ally
Executive Summary
Beta Ray Bill is a cybernetically enhanced Korbinite, genetically modified to serve as the protector of his race.
Notable for being the first non-Norse being deemed worthy to wield Mjolnir. He currently wields the enchanted hammer
Stormbreaker, possessing powers comparable to Thor Odinson.
Species Origin
Korbinites
Burning Galaxy System
Enhancements
Cybernetic
Bio-Mechanical Integration
Primary Weapon
Stormbreaker
Uru Metal / Odin Enchantment
Power Class
Class 100+
Planetary Threat Level
Official Power Grid Ratings
Quantitative analysis of subject's capabilities based on observed combat data. Note exceptional ratings in Strength and Energy Projection due to Stormbreaker.
Physical Strength Comparison
Comparative lifting/striking strength analysis against known Alpha-Level entities. Subject is virtually equal to Thor Odinson in raw physical output.
Subject History: The Path to Worthiness
Chronological sequence of events leading to the acquisition of Stormbreaker and status as an Asgardian ally.
1. Modification
Selected as Guardian of Korbinite refugees. Cybernetic enhancement.
➤
2. Encounter
Combat with Thor. Unintentional activation of Mjolnir.
➤
3. The Duel
Defeats Thor in combat in Skartheim but refuses to kill him.
➤
4. Coronation
Odin commissions Eitri to forge Stormbreaker.
Power Source Composition
Breakdown of the subject's total energy output. While biologically strong, the majority of energy projection is derived from the Weapon and Enchantment.
Combat Efficiency in Environments
Performance metrics across variable environments. Subject shows distinct advantage in high-heat environments (e.g., Skartheim) compared to standard Asgardians.
Meta-Human Analysis: Agility vs. Durability
Scatter plot analysis positioning Beta Ray Bill amongst other heroes and cosmic entities. High durability combined with high mass/strength usually correlates with lower agility, yet subject maintains high combat reflexes.
S.H.I.E.L.D. Archival Database // Authorized Personnel Only.
window.onload = function () {
// --- Marvel Echoes HQ Palette ---
const accentColor = '#ffa902'; // Golden Orange
const accentDark = '#CC8702';
const secondaryBg = '#48555e';
const bodyBg = '#1f2529';
const textColor = '#b1b8be';
// --- Accents ---
const blueAccent = '#5bc0de';
const redAccent = '#d9534f';
const gridColor = '#606d75'; // Lighter than card bg for visibility
// --- Helper: Text Wrapping ---
function processLabels(labels) {
const maxLen = 16;
return labels.map(label => {
if (label.length maxLen && currentLine.length > 0) {
lines.push(currentLine.trim());
currentLine = word + ' ';
} else {
currentLine += word + ' ';
}
}
lines.push(currentLine.trim());
return lines;
});
}
// --- Helper: Tooltip Config ---
const tooltipTitleCallback = function(tooltipItems) {
const item = tooltipItems[0];
if (!item) return '';
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
};
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: { title: tooltipTitleCallback },
backgroundColor: bodyBg,
titleColor: accentColor,
bodyColor: textColor,
borderColor: accentColor,
borderWidth: 1
},
legend: {
labels: { color: textColor, font: { family: 'Roboto' } }
}
},
scales: {
r: { // For Radar
angleLines: { color: gridColor },
grid: { color: gridColor },
pointLabels: { color: textColor, font: { size: 12 } },
ticks: { backdropColor: 'transparent', color: 'transparent' }
}
}
};
// --- Chart 1: Radar Power Grid ---
const radarCtx = document.getElementById('powerRadarChart')?.getContext('2d');
if (radarCtx) {
new Chart(radarCtx, {
type: 'radar',
data: {
labels: ['Strength', 'Speed', 'Durability', 'Energy Projection', 'Fighting Skill', 'Intelligence'],
datasets: [{
label: 'Beta Ray Bill',
data: [7, 5, 6, 6, 5, 4],
fill: true,
backgroundColor: 'rgba(255, 169, 2, 0.2)', // Transparent accent
borderColor: accentColor,
pointBackgroundColor: accentColor,
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: accentColor
}]
},
options: {
...commonOptions,
scales: {
r: {
min: 0,
max: 7,
angleLines: { color: gridColor },
grid: { color: gridColor },
pointLabels: { color: textColor, font: { size: 11, weight: 'bold' } },
ticks: { display: false }
}
}
}
});
}
// --- Chart 2: Strength Comparison Bar ---
const strengthCtx = document.getElementById('strengthBarChart')?.getContext('2d');
if (strengthCtx) {
const labels = processLabels(['Beta Ray Bill', 'Thor Odinson', 'Hercules', 'The Thing', 'Spider-Man']);
new Chart(strengthCtx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Strength Class Rating',
data: [100, 100, 100, 85, 25],
backgroundColor: [accentColor, blueAccent, '#eab308', '#fb923c', redAccent],
borderColor: 'rgba(255,255,255,0.1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
plugins: {
legend: { display: false },
tooltip: {
callbacks: { title: tooltipTitleCallback },
backgroundColor: bodyBg,
titleColor: accentColor,
}
},
scales: {
x: {
grid: { color: gridColor },
ticks: { color: textColor }
},
y: {
ticks: { color: textColor }
}
}
}
});
}
// --- Chart 3: Power Source Donut ---
const donutCtx = document.getElementById('sourceDonutChart')?.getContext('2d');
if (donutCtx) {
new Chart(donutCtx, {
type: 'doughnut',
data: {
labels: processLabels(['Bio-Mechanical (Cyborg)', 'Odin Force/Weapon', 'Innate Korbinite Physiology']),
datasets: [{
data: [40, 45, 15],
backgroundColor: [blueAccent, accentColor, '#8a959e'],
borderColor: secondaryBg,
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { color: textColor } },
tooltip: { callbacks: { title: tooltipTitleCallback } }
}
}
});
}
// --- Chart 4: Environment Line Chart ---
const envCtx = document.getElementById('environmentLineChart')?.getContext('2d');
if (envCtx) {
new Chart(envCtx, {
type: 'line',
data: {
labels: ['Vacuum (Space)', 'Standard Earth', 'Jotunheim (Ice)', 'Muspelheim (Fire)', 'Skartheim (Magma)'],
datasets: [
{
label: 'Beta Ray Bill',
data: [95, 98, 90, 100, 100],
borderColor: accentColor,
backgroundColor: accentColor,
tension: 0.4
},
{
label: 'Standard Asgardian',
data: [80, 95, 95, 70, 60],
borderColor: blueAccent,
backgroundColor: blueAccent,
tension: 0.4,
borderDash: [5, 5]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { labels: { color: textColor } },
tooltip: { callbacks: { title: tooltipTitleCallback } }
},
scales: {
y: { grid: { color: gridColor }, ticks: { color: textColor }, min: 0, max: 100 },
x: { grid: { color: gridColor }, ticks: { color: textColor } }
}
}
});
}
// --- Plotly Scatter: Heroes ---
const scatterDiv = document.getElementById('scatterPlot');
if (scatterDiv) {
const heroes = [
{name: 'Beta Ray Bill', x: 65, y: 95, color: accentColor},
{name: 'Thor', x: 60, y: 98, color: blueAccent},
{name: 'Hulk', x: 50, y: 99, color: '#22c55e'}, // Green still fits ok as an exception, or use variant
{name: 'Spider-Man', x: 95, y: 40, color: redAccent},
{name: 'Iron Man', x: 60, y: 70, color: '#facc15'},
{name: 'Silver Surfer', x: 90, y: 90, color: '#cbd5e1'},
{name: 'Daredevil', x: 85, y: 25, color: '#7f1d1d'},
{name: 'Captain America', x: 70, y: 45, color: '#3b82f6'}
];
const data = [{
x: heroes.map(h => h.x),
y: heroes.map(h => h.y),
text: heroes.map(h => h.name),
mode: 'markers+text',
type: 'scattergl',
textposition: 'top center',
marker: {
size: 14,
color: heroes.map(h => h.color),
line: { color: '#fff', width: 1 }
},
hoverinfo: 'text+x+y',
hovertemplate: '%{text}
Agility: %{x}
Durability: %{y}'
}];
const layout = {
paper_bgcolor: secondaryBg,
plot_bgcolor: secondaryBg,
title: { text: 'Correlation: Agility vs Durability', font: { color: textColor, family: 'Orbitron' } },
xaxis: {
title: { text: 'Agility/Reflexes', font: { color: textColor } },
gridcolor: gridColor,
tickfont: { color: textColor },
range: [0, 110]
},
yaxis: {
title: { text: 'Durability/Resilience', font: { color: textColor } },
gridcolor: gridColor,
tickfont: { color: textColor },
range: [0, 110]
},
showlegend: false,
margin: { t: 50, l: 50, r: 50, b: 50 }
};
Plotly.newPlot('scatterPlot', data, layout, {responsive: true, displayModeBar: false});
}
};