// ── PASTE THIS ENTIRE BLOCK INTO ONE OBSERVABLE JAVASCRIPT CELL ── // observablehq.com → New notebook → + → JavaScript → paste → Shift+Enter { // ── Styles ────────────────────────────────────────────────── const style = document.createElement('style'); style.textContent = ` .fg { max-width:780px; margin:0 auto; background:#0D1117; padding:28px 20px 32px; font-family:Georgia,serif; color:#E6EDF3; border-radius:14px; } .fg-head { text-align:center; margin-bottom:6px; } .fg-head h1 { font-size:20px; font-weight:700; color:#E6EDF3; margin-bottom:5px; letter-spacing:-.3px; } .fg-head p { font-size:13px; color:#8B949E; font-style:italic; } .fg-svg { width:100%; height:auto; display:block; overflow:visible; } .fg-zone { cursor:pointer; transition:opacity .2s,filter .2s; } .fg-needle { transition:transform .55s cubic-bezier(.34,1.4,.64,1); } .fg-panel { background:#161B22; border:1px solid #30363D; border-radius:12px; padding:22px 24px; margin-top:10px; min-height:190px; } .fg-ihead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .fg-ztitle { font-size:19px; font-weight:700; letter-spacing:-.3px; } .fg-badge { font-family:'Courier New',monospace; font-size:12px; padding:3px 12px; border-radius:20px; font-weight:700; border:1.5px solid; } .fg-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:16px; } .fg-card { background:#0D1117; border:1px solid #21262D; border-radius:8px; padding:12px 14px; } .fg-clabel { font-size:9px; text-transform:uppercase; letter-spacing:1.8px; color:#6E7681; font-family:Arial,sans-serif; margin-bottom:7px; font-weight:700; } .fg-ctext { font-size:13px; line-height:1.65; color:#C9D1D9; } .fg-moment { background:#0D1117; border:1px solid #21262D; border-left:3px solid; border-radius:0 8px 8px 0; padding:13px 16px; } .fg-mlabel { font-size:9px; text-transform:uppercase; letter-spacing:1.8px; color:#6E7681; font-family:Arial,sans-serif; font-weight:700; margin-bottom:5px; } .fg-mdate { font-size:15px; font-weight:700; margin-bottom:2px; } .fg-mstat { font-family:'Courier New',monospace; font-size:12px; color:#8B949E; margin-bottom:6px; } .fg-mctx { font-size:13px; color:#C9D1D9; font-style:italic; line-height:1.55; } .fg-hint { display:flex; flex-direction:column; align-items:center; justify-content:center; height:145px; gap:10px; color:#8B949E; } .fg-hint span { font-size:14px; font-style:italic; } .fg-dots { display:flex; gap:6px; } .fg-dot { width:8px; height:8px; border-radius:50%; animation:fgpulse 1.8s ease-in-out infinite; } @keyframes fgpulse { 0%,100%{opacity:.3;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} } .fg-foot { text-align:center; margin-top:14px; font-size:11px; color:#484F58; font-family:Arial,sans-serif; } `; document.head.appendChild(style); // ── Zone data ──────────────────────────────────────────────── const Z = [ { name:'Extreme\nFear', flat:'Extreme Fear', score:'0 – 24', color:'#E53935', s:0, e:36, psych:'Capitulation. Panic is at peak. Every headline predicts zero. Holders sell at any price just to make the pain stop.', crowd:'Selling everything. Expecting further collapse. Telling themselves they should have sold higher.', contra:'Accumulating. This is where long-term positions are built — when the crowd can no longer tolerate holding.', date:'June 2022', stat:'Score: 6 · Bitcoin: $17,800', ctx:'The index hit its lowest reading since the COVID crash. Most retail had already exited. Bitcoin was at $69k seven months earlier.' }, { name:'Fear', flat:'Fear', score:'25 – 44', color:'#FF7043', s:36, e:72, psych:"Pessimism. Recovery seems impossible. Doom narratives dominate. People who didn't sell at the bottom question everything.", crowd:"Staying out. Waiting for 'more clarity.' Telling themselves they'll buy lower — then watching it recover without them.", contra:'Building positions gradually. Dollar-cost averaging through the discomfort, without waiting for the perfect entry.', date:'July 2021', stat:'Score: ~30 · Bitcoin: $31,000', ctx:"The mid-year dip after China's mining ban. Felt catastrophic at the time. Bitcoin hit $69k four months later." }, { name:'Neutral', flat:'Neutral', score:'45 – 55', color:'#FFC107', s:72, e:108, psych:"Cautious optimism. The market stabilizes but conviction is low. Neither bulls nor bears feel confident enough to act boldly.", crowd:"Watching. Monitoring the situation for 'a few more weeks' before deciding. Paralyzed by uncertainty.", contra:'Holding positions. Reassessing the thesis quietly. No strong directional pressure in either direction.', date:'September 2020', stat:'Score: ~50 · Bitcoin: $10,800', ctx:"Quiet accumulation phase before the 2020–2021 bull run. Most people weren't paying attention yet. The cycle was already turning." }, { name:'Greed', flat:'Greed', score:'56 – 74', color:'#66BB6A', s:108, e:144, psych:'Confidence spreading. Positive narratives fill media. FOMO begins. Casual investors start paying attention for the first time.', crowd:'Buying in. Feeling validated by rising prices. Recommending crypto to friends and family at dinner.', contra:'Trimming positions. Taking profit. Watching for signs the rally is losing momentum beneath the surface.', date:'October 2021', stat:'Score: ~72 · Bitcoin: $55,000', ctx:'One month before the all-time high. The market felt healthy and rational to most participants. It was already late.' }, { name:'Extreme\nGreed', flat:'Extreme Greed', score:'75 – 100', color:'#00897B', s:144, e:180, psych:"Euphoria. Everyone 'knows' it's going higher. Mainstream coverage peaks. New buyers enter at any price, FOMO is total.", crowd:"All-in. Using leverage. Buying altcoins. Dismissing anyone who raises concerns as someone who 'doesn't get it.'", contra:'Exiting. The marginal buyer willing to pay more is running out. The hallucination is near its structural peak.', date:'November 2021', stat:'Score: 84 · Bitcoin: $68,000', ctx:'The all-time high. Three months later Bitcoin was at $35k. Six months later, below $20k. The index was telling you.' } ]; // ── SVG helpers ────────────────────────────────────────────── const CX=400, CY=370, OR=320, IR=190, GAP=1.5; function pt(r, deg) { const rad = deg * Math.PI / 180; return { x: CX - r * Math.cos(rad), y: CY - r * Math.sin(rad) }; } function arc(s, e) { const f = v => v.toFixed(2); const a=pt(OR,s+GAP), b=pt(OR,e-GAP), c=pt(IR,e-GAP), d=pt(IR,s+GAP); return `M${f(a.x)} ${f(a.y)} A${OR} ${OR} 0 0 0 ${f(b.x)} ${f(b.y)} L${f(c.x)} ${f(c.y)} A${IR} ${IR} 0 0 1 ${f(d.x)} ${f(d.y)}Z`; } function el(tag, attrs, ns) { const e = ns ? document.createElementNS('http://www.w3.org/2000/svg', tag) : document.createElement(tag); Object.entries(attrs || {}).forEach(([k,v]) => e.setAttribute ? e.setAttribute(k,v) : (e[k]=v)); return e; } function sel(tag, attrs) { return el(tag, attrs, true); } // ── Build wrapper ──────────────────────────────────────────── const wrap = el('div', { className:'fg' }); wrap.innerHTML = `

The Fear & Greed Cycle

Every crypto rally and crash follows the same psychological arc — hover each zone

`; // ── Build SVG ──────────────────────────────────────────────── const svg = sel('svg', { viewBox:'0 0 800 390', class:'fg-svg' }); // Background track svg.appendChild(sel('path', { d:'M 80 370 A 320 320 0 0 1 720 370', fill:'none', stroke:'#1C2128', 'stroke-width':'130', 'stroke-linecap':'butt' })); // Zone segments + labels const segG = sel('g', {}); Z.forEach((z, i) => { const p = sel('path', { d:arc(z.s,z.e), fill:z.color, class:'fg-zone', 'data-i':i }); segG.appendChild(p); const mid = (z.s + z.e) / 2; const lp = pt(OR + 32, mid); const txt = sel('text', { x:lp.x.toFixed(2), y:lp.y.toFixed(2), 'text-anchor':'middle', 'dominant-baseline':'middle', 'font-size':'11', 'font-family':'Arial,sans-serif', 'font-weight':'700', fill:z.color }); const lines = z.name.split('\n'); if (lines.length === 1) { txt.textContent = lines[0]; } else { lines.forEach((l, li) => { const ts = sel('tspan', { x:lp.x.toFixed(2), dy: li === 0 ? '-8' : '16' }); ts.textContent = l; txt.appendChild(ts); }); } segG.appendChild(txt); }); svg.appendChild(segG); // Inner border ring svg.appendChild(sel('path', { d:'M 210 370 A 190 190 0 0 1 590 370', fill:'none', stroke:'#0D1117', 'stroke-width':'3' })); // Zone boundary ticks + score labels [0,36,72,108,144,180].forEach((deg, i) => { const o = pt(OR+2,deg), inn = pt(IR-2,deg); svg.appendChild(sel('line', { x1:o.x.toFixed(2),y1:o.y.toFixed(2), x2:inn.x.toFixed(2),y2:inn.y.toFixed(2), stroke:'#0D1117','stroke-width':'3' })); const sp = pt(IR-20, deg); const st = sel('text', { x:sp.x.toFixed(2),y:sp.y.toFixed(2), 'text-anchor':'middle','dominant-baseline':'middle', 'font-family':'Courier New,monospace','font-size':'9', fill:'#484F58' }); st.textContent = ['0','25','45','56','75','100'][i]; svg.appendChild(st); }); // Center score display const cNum = sel('text', { x:'400',y:'332','text-anchor':'middle','dominant-baseline':'middle','font-family':'Georgia,serif','font-size':'48','font-weight':'700', fill:'#E6EDF3', opacity:'0' }); cNum.textContent = '—'; svg.appendChild(cNum); const cLbl = sel('text', { x:'400',y:'362','text-anchor':'middle','dominant-baseline':'middle','font-family':'Arial,sans-serif','font-size':'10','font-weight':'600','letter-spacing':'2', fill:'#8B949E', opacity:'0' }); cLbl.textContent = 'SCORE'; svg.appendChild(cLbl); const cHint = sel('text', { x:'400',y:'290','text-anchor':'middle','font-family':'Arial,sans-serif','font-size':'11', fill:'#484F58','letter-spacing':'1.5' }); cHint.textContent = '← HOVER A ZONE →'; svg.appendChild(cHint); // Needle const needleG = sel('g', { class:'fg-needle', style:'transform-origin:400px 370px;transform:rotate(0deg)' }); needleG.appendChild(sel('line', { x1:'400',y1:'370',x2:'400',y2:'110', stroke:'#E6EDF3','stroke-width':'2','stroke-linecap':'round',opacity:'0.85' })); needleG.appendChild(sel('circle', { cx:'400',cy:'370',r:'12', fill:'#161B22',stroke:'#30363D','stroke-width':'2' })); needleG.appendChild(sel('circle', { cx:'400',cy:'370',r:'5', fill:'#E6EDF3' })); svg.appendChild(needleG); wrap.appendChild(svg); // Info panel const panel = el('div', { className:'fg-panel' }); wrap.appendChild(panel); // Footer const foot = el('div', { className:'fg-foot' }); foot.innerHTML = 'Fear & Greed Index · Alternative.me · Behavioral Finance: Kahneman, Tversky, Keynes'; wrap.appendChild(foot); // ── Interaction ────────────────────────────────────────────── function setNeedle(deg) { needleG.style.transform = `rotate(${deg - 90}deg)`; } function midScore(z) { const p = z.score.split('–').map(s => parseInt(s.trim())); return Math.round((p[0] + p[1]) / 2); } function showZone(i) { const z = Z[i]; setNeedle((z.s + z.e) / 2); segG.querySelectorAll('.fg-zone').forEach((p, j) => { p.style.opacity = j === i ? '1' : '0.3'; p.style.filter = j === i ? 'brightness(1.15)' : 'none'; }); cNum.textContent = midScore(z); cNum.setAttribute('fill', z.color); cNum.setAttribute('opacity', '1'); cLbl.setAttribute('opacity', '1'); cHint.setAttribute('opacity', '0'); panel.innerHTML = `

${z.flat} Score ${z.score}

Psychology

${z.psych}

The Crowd

${z.crowd}

The Contrarian

${z.contra}

Real Market Moment

${z.date}

${z.stat}

"${z.ctx}"

`; } function reset() { segG.querySelectorAll('.fg-zone').forEach(p => { p.style.opacity='1'; p.style.filter='none'; }); cNum.setAttribute('opacity', '0'); cLbl.setAttribute('opacity', '0'); cHint.setAttribute('opacity', '1'); setNeedle(90); panel.innerHTML = `

${Z.map((z,i) => `

`).join('')}

Hover over any zone above to explore the psychology behind it

`; } let active = null; segG.addEventListener('mouseover', e => { const seg = e.target.closest('[data-i]'); if (!seg) return; const i = parseInt(seg.dataset.i); if (i === active) return; active = i; showZone(i); }); segG.addEventListener('mouseleave', () => { active = null; reset(); }); segG.addEventListener('touchstart', e => { e.preventDefault(); const t = e.touches[0]; const seg = document.elementFromPoint(t.clientX, t.clientY)?.closest?.('[data-i]'); if (seg) showZone(parseInt(seg.dataset.i)); }, { passive: false }); reset(); return wrap; }