← back to Ventura Corridor
public/atlas.html
229 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ventura Boulevard · atlas</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>(function(){try{var t=localStorage.getItem('vc-theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:'dark';}catch(e){document.documentElement.dataset.theme='dark';}})();</script>
<link rel="stylesheet" href="/theme.css">
<script src="/theme.js" defer></script>
<style>
:root {
--noir: #0a0a0c; --noir-rise: #131316; --ink: #f0ece2;
--ink-mute: #888475; --metal: #b89968; --metal-glow: #d4b683;
--rule: #2a2622;
--serif: 'Cormorant Garamond', 'Times New Roman', serif;
--sans: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@200;300;400;600&family=JetBrains+Mono:wght@200;300;400&display=swap');
html, body { margin: 0; background: var(--noir); color: var(--ink); font-family: var(--sans); font-weight: 300; }
* { box-sizing: border-box; }
header {
position: sticky; top: 0; z-index: 10;
background: linear-gradient(180deg, rgba(10,10,12,.97) 70%, rgba(10,10,12,0));
padding: 22px 40px 16px; border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
}
header h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
header h1 em { font-style: italic; color: var(--metal); }
.sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
nav.tabs a { font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--ink-mute); text-decoration: none; padding: 6px 12px; border: 1px solid var(--rule); }
nav.tabs a.active, nav.tabs a:hover { color: var(--metal); border-color: var(--metal); }
.hero { padding: 44px 40px 28px; text-align: center;
background: radial-gradient(ellipse at center top, rgba(184,153,104,0.08), transparent 70%);
border-bottom: 1px solid var(--rule); }
.hero h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 40px; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.1; }
.hero h2 em { color: var(--metal); font-style: normal; }
.hero p { color: var(--ink-mute); max-width: 600px; margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; }
/* Big stat grid */
.grid { padding: 32px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { background: var(--noir-rise); padding: 22px 24px; }
.stat b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 44px; color: var(--metal); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
.stat span { display: block; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.stat.featured b { color: var(--metal-glow); font-size: 56px; }
.stat .sub { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; color: var(--ink-mute); margin-top: 6px; text-transform: none; }
/* Two-col panels */
.panels { padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .panels { grid-template-columns: 1fr; } }
.panel { background: var(--noir-rise); border: 1px solid var(--rule); padding: 22px 24px; }
.panel h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; margin: 0 0 14px; color: var(--ink); }
.panel h3 em { color: var(--metal); font-style: normal; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; vertical-align: middle; margin-left: 8px; }
.row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--rule); }
.row .lbl { font-size: 12px; color: var(--ink); }
.row .lbl small { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); margin-left: 6px; }
.row .meter { background: var(--rule); height: 10px; width: 100px; position: relative; }
.row .meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--metal); }
.row .ct { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--metal); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.row.v-1 .meter > i { background: #555; opacity: 0.6; }
.row.v-2 .meter > i { background: #b8b3a2; }
.row.v-3 .meter > i { background: var(--metal); }
.row.v-4 .meter > i { background: var(--metal-glow); }
footer { padding: 24px 40px 40px; border-top: 1px solid var(--rule);
font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 12px; text-align: center; }
.meta-line { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--ink-mute); margin-top: 6px; }
</style>
</head>
<body>
<header>
<div>
<h1>Ventura <em>Boulevard</em> · atlas</h1>
<div class="sub">the corridor at a glance — every dimension in one frame</div>
</div>
<nav class="tabs">
<a href="/">map</a>
<a href="/3d.html">3d</a>
<a href="/timeline.html">timeline</a>
<a href="/pantone.html">pantone</a>
<a href="/headlines.html">voices</a>
<a href="/tongues.html">tongues</a>
<a href="/chains.html">chains</a>
<a href="/atlas.html" class="active">atlas</a>
<a href="/eulogy.html">eulogy</a>
<span class="theme-toggle-host" style="display:inline-flex;align-items:center;margin-left:6px"></span>
</nav>
</header>
<section class="hero">
<h2>One <em>street</em>, in numbers.</h2>
<p>Every licensed business along 9.4 miles of Ventura Boulevard. Some advertise; most don't. Some have voices; most don't. Read the boulevard's whole shape on one page.</p>
<div id="empty-state" style="display:none;margin-top:24px;padding:18px 22px;border:1px solid var(--metal);background:rgba(184,153,104,0.04);max-width:680px;margin-left:auto;margin-right:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute);text-align:left;line-height:1.55">
<div style="color:var(--metal-glow);text-transform:uppercase;letter-spacing:.26em;font-size:9px;margin-bottom:8px">Enrichment pipeline pending</div>
No ad signals · headlines · voices · chambers in this database yet. Run the pipelines to populate:<br>
<span style="color:var(--ink)">npx tsx src/enrich/ad_signals.ts</span><br>
<span style="color:var(--ink)">npx tsx src/enrich/extract_headlines.ts</span><br>
<span style="color:var(--ink)">npx tsx src/enrich/score_headlines_heur.ts</span><br>
<span style="color:var(--ink)">npx tsx src/enrich/chambers.ts</span>
</div>
</section>
<section class="grid" id="grid">
<div class="stat featured"><b id="s-total">—</b><span>businesses on corridor</span></div>
<div class="stat"><b id="s-website">—</b><span>have a website</span></div>
<div class="stat"><b id="s-crawled">—</b><span>crawled</span></div>
<div class="stat"><b id="s-paid">—</b><span>paying for ads</span></div>
<div class="stat featured"><b id="s-confirmed">—</b><span>confirmed live advertisers</span></div>
<div class="stat"><b id="s-liveads">—</b><span>total live Google creatives</span></div>
<div class="stat"><b id="s-chamber">—</b><span>chamber-tagged</span></div>
<div class="stat"><b id="s-headline">—</b><span>extracted headlines</span></div>
</section>
<section class="panels">
<div class="panel">
<h3>Voice distribution<em>headline classification</em></h3>
<div id="p-voice"></div>
</div>
<div class="panel">
<h3>Paid pixels<em>which platforms are present</em></h3>
<div id="p-pixels"></div>
</div>
<div class="panel" style="grid-column:1/-1">
<h3>Top categories<em>by NAICS-style tag</em></h3>
<div id="p-cats"></div>
</div>
<div class="panel" style="grid-column:1/-1">
<h3>Data freshness<em>last successful run per pipeline</em></h3>
<div id="p-fresh"></div>
</div>
</section>
<footer>Local Postgres aggregate — refreshes every 60s. <span class="meta-line" id="generated">—</span></footer>
<script>
function fmt(n) { n = Number(n); if (!isFinite(n)) return '—'; if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/,'') + 'M'; if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/,'') + 'K'; return n.toLocaleString(); }
function escapeHtml(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); }
fetch('/api/atlas').then(r => r.json()).then(d => {
const s = d.stats;
// Empty-state: if every enrichment number is zero/null, say so explicitly
const enrichmentEmpty = !Number(s.crawled) && !Number(s.paid_advertisers) && !Number(s.confirmed_live) && !Number(s.with_headline);
if (enrichmentEmpty) document.getElementById('empty-state').style.display = 'block';
document.getElementById('s-total').textContent = fmt(s.total_businesses);
document.getElementById('s-website').textContent = fmt(s.with_website);
document.getElementById('s-crawled').textContent = fmt(s.crawled);
document.getElementById('s-paid').textContent = fmt(s.paid_advertisers);
document.getElementById('s-confirmed').textContent = fmt(s.confirmed_live);
document.getElementById('s-liveads').textContent = fmt(s.total_live_ads || 0);
document.getElementById('s-chamber').textContent = fmt(s.chamber_tagged);
document.getElementById('s-headline').textContent = fmt(s.with_headline);
document.getElementById('generated').textContent = 'generated ' + new Date(d.generated_at).toLocaleString();
// Voice
const VOICE = { TEMPLATE: 1, FUNCTIONAL: 2, SHARP: 3, EXCEPTIONAL: 4 };
const voiceMax = Math.max(...d.voice_mix.map(v => v.n));
const voiceOrder = ['TEMPLATE','FUNCTIONAL','SHARP','EXCEPTIONAL'];
document.getElementById('p-voice').innerHTML = voiceOrder.map(label => {
const r = d.voice_mix.find(x => x.label === label) || { n: 0 };
const w = (r.n / voiceMax * 100).toFixed(1);
return `<div class="row v-${VOICE[label]}">
<div class="lbl">${label.toLowerCase()}</div>
<div class="meter"><i style="width:${w}%"></i></div>
<div class="ct">${r.n}</div>
</div>`;
}).join('');
// Pixels
const px = d.paid_pixel_mix;
const pxOrder = [
['google_ads','Google Ads'],['meta_pixel','Meta'],['linkedin_insight','LinkedIn'],
['bing_uet','Bing UET'],['tiktok_pixel','TikTok'],['snap_pixel','Snap'],
['pinterest_tag','Pinterest']
];
const pxMax = Math.max(...pxOrder.map(([k]) => Number(px[k])));
document.getElementById('p-pixels').innerHTML = pxOrder.map(([k, label]) => {
const n = Number(px[k]);
const w = pxMax ? (n / pxMax * 100).toFixed(1) : 0;
return `<div class="row">
<div class="lbl">${label}</div>
<div class="meter"><i style="width:${w}%"></i></div>
<div class="ct">${n}</div>
</div>`;
}).join('');
// Categories
const catMax = Math.max(...d.top_categories.map(c => c.n));
// Freshness
if (d.freshness) {
const FRESH_LABELS = {
last_crawl: 'Last front-page crawl',
last_signals_run: 'Last ad-signals scan',
last_headline_extract: 'Last headline extract',
last_voice_classify: 'Last voice classify',
last_block_flag: 'Last crawl-blocked flag',
};
const now = Date.now();
const ageStr = (iso) => {
if (!iso) return '—';
const ms = now - new Date(iso).getTime();
const d = Math.floor(ms / 86400000), h = Math.floor((ms % 86400000) / 3600000), m = Math.floor((ms % 3600000) / 60000);
if (d > 0) return `${d}d ${h}h ago`;
if (h > 0) return `${h}h ${m}m ago`;
return `${m}m ago`;
};
document.getElementById('p-fresh').innerHTML = Object.entries(FRESH_LABELS).map(([key, label]) => {
const iso = d.freshness[key];
const stale = iso && (now - new Date(iso).getTime() > 7 * 86400000);
return `<div class="row" style="grid-template-columns:1fr auto auto">
<div class="lbl">${label}${stale ? ' <small style="color:var(--metal-glow)">stale</small>' : ''}</div>
<div class="lbl" style="font-family:var(--mono);font-size:10px;color:var(--ink-mute);text-align:right">${iso ? new Date(iso).toLocaleString() : 'never'}</div>
<div class="ct" style="min-width:90px">${ageStr(iso)}</div>
</div>`;
}).join('');
}
document.getElementById('p-cats').innerHTML = d.top_categories.map(c => {
const w = (c.n / catMax * 100).toFixed(1);
return `<div class="row">
<div class="lbl">${escapeHtml(c.category)}</div>
<div class="meter" style="width:160px"><i style="width:${w}%"></i></div>
<div class="ct">${c.n.toLocaleString()}</div>
</div>`;
}).join('');
});
</script>
</body>
</html>