What this tool is
The Temperature Gauge is a standalone single-file web app (`static/index.html`) that measures market and societal "temperature" using phi-based resonance scoring. It is Kirk's personal tool — a live dashboard that combines financial data with societal indicators to produce a Fractal Resonance score.
The tool has three tabs: Market (price charts with phi MAs), Society (societal temperature indicators), and Resonance (the combined phi-based score). The gauge SVG in the corner shows the current temperature at a glance.
The FSOS connection: The resonance score is computed using phi-based moving averages (MA-6, MA-8, MA-12, MA-50, MA-200). The MA colors are phi-sequence colors. The gauge needle sweeps 180° — a phi-proportioned arc. This tool was built on the same mathematical foundation as the Fractal Garden.
Three tabs
📈 Market
Price chart with phi moving averages (MA-6, MA-8, MA-12, MA-50, MA-200). RSI, MACD, and temperature sub-charts. Symbol input + interval selector. Sidebar with live indicators.
🌍 Society
Societal temperature indicators — economic, political, cultural signals. History chart. Force-refresh button. Data from `/api/societal` endpoint.
🔮 Resonance
The combined phi-based score. Market temp + Society temp → Resonance score + Divergence. State label: Cold/Cool/Neutral/Warm/Hot/Very Hot. Phi note from the API.
API endpoints (backend)
| Method | Path | Description |
|---|
| GET | /api/chart/:symbol?interval=1d | OHLCV data + indicators (EMA-6/8/12/50/200, RSI, MACD, market_temp). Returns {candles[], indicators{}}. |
| GET | /api/societal?force=0 | Societal temperature data. force=1 bypasses cache. Returns {temp, indicators[], timestamp}. |
| GET | /api/societal/history | Historical societal temperature. Returns {history[{date, temp}]}. |
| GET | /api/resonance?symbol=SPY | Combined resonance score. Returns {resonance_score, market_temp, societal_temp, divergence, state_label, state_color, signal, phi_note}. |
The temperature gauge SVG
Temperature scale — 0 to 100
0–30
Cold
30–50
Cool
50–70
Warm
70–85
Hot
85–100
Very Hot
// updateGauge(t) — called after every data load
function updateGauge(t) {
t = Math.max(0, Math.min(100, t));
const color = t<30?'#60a5fa':t<50?'#64748b':t<70?'#4ade80':t<85?'#fbbf24':'#f87171';
// SVG arc: stroke-dashoffset = 188.5 - (t/100)*188.5
const offset = 188.5 - (t/100)*188.5;
arc.setAttribute('stroke-dashoffset', offset);
arc.setAttribute('stroke', color);
// Needle: rotate from -90° (cold) to +90° (hot)
needle.setAttribute('transform', `rotate(${(t/100)*180-90},70,75)`);
}
Key state variables
// Chart instances (LightweightCharts)
let mainChart, mainSeries, maSeries = {};
let rsiChart, rsiSeries, rsiOB, rsiOS;
let macdChart, macdLine, macdSignal, macdHist;
let tempChart, tempSeries;
// Phi MA colors
const MA_COLORS = {
6: '#f472b6', // pink
8: '#fb923c', // orange
12: '#fbbf24', // gold
50: '#60a5fa', // blue
200:'#a78bfa' // phi-purple
};
// Data state
let societyData = null;
let lastData = null; // last loaded chart data
let expandType = null; // 'main' | 'rsi' | 'macd' | 'temp'
Enhancement opportunities
This is Kirk's personal tool. Enhancements should be practical and useful, not decorative.
For Fable — what could be improved
Phi MA crossover alerts: When a short MA crosses a long MA, flash a subtle toast notification with the crossover type (golden cross / death cross). The data is already in `maSeries` — just add a crossover detector in `renderChart()`.
Resonance history chart: The Society tab has a history chart. The Resonance tab could have one too — a simple line chart of resonance_score over time. Would require a `/api/resonance/history` endpoint and a small history chart init.
Temperature gauge animation: The gauge needle currently snaps to position. A smooth `requestAnimationFrame` tween (200ms, ease-out) would make it feel alive. The `updateGauge(t)` function is the right place to add this.
Keyboard shortcuts: `1/2/3` to switch tabs, `Enter` to load symbol, `L` to toggle log scale. The tab switching and load functions are already defined — just add `keydown` listeners.
Mobile layout: The current layout is desktop-first. The sidebar could collapse to a bottom sheet on mobile. The sub-charts could stack vertically. This is a significant change — discuss with Kirk first.
File: `static/index.html` — single file, all CSS/JS/HTML inline. Additive only. Do not change the API endpoint paths or the chart library (LightweightCharts).