A state-of-the-art, high-fidelity interactive scatter plot visualizer that allows players to analyze Elden Ring armor stats across multiple dimensions in real-time.
Live App: Elden Ring Armor Visualizer on GitHub Pages
The visualizer features a high-end dark-fantasy aesthetic built directly around in-game assets and tactile feedback systems:
- Datapoint icons render the actual transparent PNG cutout of each armor piece using SVG
<foreignObject>containers. - Avoids clumsy boxed frames, allowing helmets, chest plates, gauntlets, and leg greaves to float cleanly and naturally on the grid background.
- Clean category fallback icons automatically activate when database assets are absent.
- Leverages CSS
filter: drop-shadow()to cast a glowing halo outline exactly to the solid pixels of transparent armor assets rather than their rectangular boundaries. - Pristine Workspace: Unhovered items carry a subtle, clean dark drop shadow (
drop-shadow(0 1px 2px rgba(0,0,0,0.6))) to maximize grid clarity and avoid background noise. - Dynamic Tactile Glow: Hovering over any item smoothly scales it by
15%(scale(1.15)) while bursting into a soft, dynamic aura (drop-shadow(0 0 5px ${color})) matching its active color theme. Non-hovered items drop to0.3opacity to immediately focus attention. - Immediate Mouseoff Recovery: Explicit mouse-leave boundaries clear hover scales, halos, and tooltip cards the millisecond the cursor leaves an item's footprint.
Color datapoints dynamically by literally any dynamic property of an item (categorical or numerical) via the interactive sidebar dropdown:
- Category: Points map to highly recognizable custom HSL colors representing Helms (Amber), Chest Armor (Purple), Gauntlets (Emerald), and Leg Armor (Sky).
- Selecting any numerical stat (e.g. Weight, Poise, Physical/Magic negation, status resistances) automatically triggers the color pipeline to:
- Calculate dynamic bounds (
min/max) across the currently filtered/active dataset using a high-performanceuseMemocache. - Project the relative ratio of each item's value onto a continuous thermal spectrum: Red (Low/Worse) ➔ Orange ➔ Yellow ➔ Green ➔ Cyan ➔ Blue (High/Better).
- The direction flips automatically for stats like Weight where lower values are better — the same intuitive blue = good mapping applies.
- Calculate dynamic bounds (
We introduced a powerful custom build set designer directly integrated within the visualizer workspace:
- Click any transparent armor datapoint directly on the scatter plot to add it to your custom build set.
- Items currently active in your set are rendered on the plot with an increased scale (
36px/1.08x) and a distinct, glowing golden outline aura (drop-shadow(0 0 4px #fbbf24)). - Active build set items remain fully bright and opaque at
1.0even when other datapoints are faded out during hover interaction checks.
- A dedicated "Active Build Set" inspector card automatically renders in the sidebar under the Categories checklist.
- Lists all currently selected pieces as a compact, horizontal flex grid of sleek icon badges, featuring browser-native hover tooltips displaying the item's name.
- Hovering over any icon badge reveals a semi-transparent red overlay with a close icon (
X), indicating that clicking it will cleanly remove it from the build set. - Displays real-time, dynamic aggregates crucial for Elden Ring build planning (Equip Load / Roll speed estimations):
- Total Weight: Summed weight of all active pieces.
- Total Poise: Aggregate physical poise value.
- Total Negation: Summed damage reduction percentages.
- Clicking the
"Compare Set Attributes"button opens an Elden Ring-styled comparison modal centered on the screen. - Dynamically generates a side-by-side table grid mapping of all crucial selected item stats:
- Armor Thumbnails & Category Badges
- Weight
- Damage Negations: Physical, Strike, Slash, Pierce, Magic, Fire, Lightning, Holy.
- Status Resistances & Poise: Immunity, Robustness, Focus, Vitality, Poise.
- Row-Normalized Heatmap: Each stat row is independently scaled (min/max), with cell backgrounds shaded from red (worse) to blue (better), making relative strengths instantly scannable.
- Best-Value Highlighting: The best cell in each row is marked with Frost Blue text and a subtle Tarnished Gold bottom glow.
- Delta Column: When comparing exactly 2 items, a dedicated
Δcolumn appears showing the exact difference, color-coded Frost Blue (better) or Crimson Red (worse) — mirroring Elden Ring's own comparison UI. - Authentic Palette: Styled with the game's actual color scheme — Void Charcoal panels, Tarnished Gold accents, Stormhill Gray labels — defined as centralized CSS theme tokens via Tailwind v4's
@themedirective.
The application is built on top of a highly resilient, modern frontend architecture matching industry best practices:
- Core Framework: React 19 + TypeScript + Vite.
- State & Caching: TanStack React Query v5 for robust, declarative, and cached query states.
- GraphQL Client:
graphql-request@7for lightweight, Promise-based operations. - Type Safety: GraphQL Code Generator (
clientpreset) with automatic type-only import compilations (useTypeImports: true) to comply with strict TypeScript bundler configs ("verbatimModuleSyntax": true). - Resilient Query Fetcher: Sequential page querying inside the hook query function prevents server parallel flooding (socket resets on the public Elden Ring API server).
- Partial-Data Salvage: Catches GraphQL validation errors (e.g. database decimals conflicting with type schemas on specific pages) to extract and render successful items, maintaining a 99.9% render uptime.
- Diagnostic Error Boundary: Custom class boundary wraps the App, displaying custom dark diagnostic logs, component stack traces, and recovery triggers to avoid blank screens.
Install the project dependencies using pnpm:
pnpm installRun the dev server locally:
pnpm run devCompile the GraphQL schema and operations into type-safe generated TypeScript modules:
pnpm run codegenBuild and verify the optimized production bundles:
pnpm run buildThe project is fully integrated with GitHub Pages via native GitHub Actions.
Whenever changes are pushed or merged to the main branch, a GitHub Action automatically triggers, builds the static bundle, uploads the build artifacts, and deploys them directly to the GitHub Pages environment.
You can inspect the active workflow and deployment logs under the Actions tab of the GitHub repository.