viz_711_index = { const W = 980; const H_MAIN = 520; const W_MAP = 640; const GAP = 24; const W_SIDE = W - W_MAP - GAP; const finite = x => Number.isFinite(x); const fmt2 = d3.format(".2f"); // ---- inputs assumed already defined ---- // thai (FeatureCollection), storesWithProvince (Array), provinceAreaKm2 (Map) const swp = Array.isArray(storesWithProvince) ? storesWithProvince : []; const areaMap = provinceAreaKm2 instanceof Map ? provinceAreaKm2 : new Map(); const features = (thai?.features || []).filter(Boolean); // ---- count stores per province ---- const countsMap = new Map(); for (const d of swp) { const p = d?.province; if (!p) continue; countsMap.set(p, (countsMap.get(p) || 0) + 1); } // ---- province table ---- const provinceTable = features .map(f => { const province = f?.properties?.NAME_1; if (!province) return null; const storesCount = countsMap.get(province) || 0; const areaKm2 = areaMap.get(province) || null; const density = areaKm2 ? (storesCount / areaKm2) * 1000 : null; // stores / 1,000 km² return { province, stores: storesCount, area_km2: areaKm2, density }; }) .filter(Boolean); // ---- index: z-score of density (unbounded) ---- const densVals = provinceTable.map(d => d.density).filter(finite); const mean = d3.mean(densVals) ?? 0; const sd = d3.deviation(densVals) ?? 1; for (const d of provinceTable) { d.index = finite(d.density) ? (d.density - mean) / sd : null; } // ---- robust map domain (2nd–98th percentile for color only) ---- const idxVals = provinceTable .map(d => d.index) .filter(finite) .slice() .sort(d3.ascending); const q = p => d3.quantileSorted(idxVals, p); const lo = q(0.02) ?? -2; const hi = q(0.98) ?? 2; const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); // ---- geo join ---- const lookup = new Map(provinceTable.map(d => [d.province, d])); const geo = features.map(f => { const province = f?.properties?.NAME_1; const r = lookup.get(province) || {}; const idx = finite(r.index) ? r.index : null; return { type: "Feature", geometry: f.geometry, properties: { ...f.properties, province, stores: r.stores ?? 0, density: r.density ?? null, index: idx, indexC: finite(idx) ? clamp(idx, lo, hi) : null, // only for coloring tooltip: `${province}` + `\nStores: ${(r.stores ?? 0).toLocaleString()}` + (finite(r.density) ? `\nStores / 1,000 km²: ${r.density.toFixed(2)}` : "") + (finite(idx) ? `\n7-Eleven Index (z): ${idx.toFixed(2)}` : "") } }; }); // ---- Top 5 / Bottom 5 by index ---- const withIndex = provinceTable .filter(d => d.province && finite(d.index)) .slice() .sort((a, b) => d3.descending(a.index, b.index)); const topIndex5 = withIndex.slice(0, 5).map((d, i) => ({ ...d, rank: i + 1 })); const bottomIndex5 = withIndex .slice() .sort((a, b) => d3.ascending(a.index, b.index)) .slice(0, 5) .map((d, i) => ({ ...d, rank: i + 1 })); // ---- normalization for "Relative" bars ---- // Use panel-level scaling so bars are meaningful within each list. const maxTop = d3.max(topIndex5, d => d.index) ?? 1; const maxAbsBottom = Math.abs(d3.min(bottomIndex5, d => d.index) ?? -1); // ---- palette ---- const COLOR_SCHEME = "PuOr"; // alternative: "BrBG" // ---- map ---- const map = Plot.plot({ width: W_MAP, height: H_MAIN, projection: { type: "mercator", domain: thai }, inset: 12, style: { fontFamily: "system-ui, sans-serif", fontSize: 12 }, color: { legend: true, label: "7-Eleven Index (density z-score)", scheme: COLOR_SCHEME, domain: [lo, hi], clamp: true, ticks: 7 }, marks: [ Plot.geo(thai, { fill: "#f6f6f6", stroke: "none" }), Plot.geo(geo, { fill: d => d.properties.indexC, stroke: "#2f2f2f", strokeWidth: 1.2, title: d => d.properties.tooltip }), Plot.geo(thai, { fill: "none", stroke: "#111", strokeWidth: 2.2 }) ] }); // ---- helper: build a fixed-column HTML ranking table (no clipping names) ---- const rankingTable = (rows, { title, mode }) => { // mode: "top" -> bar based on index/maxTop // mode: "bottom" -> bar based on abs(index)/maxAbsBottom const body = rows.map(d => { const rel = mode === "bottom" ? (maxAbsBottom > 0 ? (Math.abs(d.index) / maxAbsBottom) * 100 : 0) : (maxTop > 0 ? (d.index / maxTop) * 100 : 0); // For bottom list, show negative values explicitly const val = fmt2(d.index); return html`

#${d.rank}

${d.province}

${val}

`; }); return html`

${title}

Province

Relative

Index

${body}

`; }; // ---- side panel ---- const side = html`

Province Rankings

7-Eleven Index is the z-score of stores per 1,000 km² (higher means denser). Map colors use the 2nd–98th percentile range so outliers do not wash out the country.

${rankingTable(topIndex5, { title: "Top 5 provinces by 7-Eleven Index (descending)", mode: "top" })} ${rankingTable(bottomIndex5, { title: "Bottom 5 provinces by 7-Eleven Index (ascending)", mode: "bottom" })}

Notes: Counts come from OpenStreetMap POIs matched to provinces. Province land area is used to convert counts into density. This is a descriptive infrastructure density index, not a measure of demand or economic impact.

`; return html`

Figure 2. Thailand 7-Eleven Index (density): Province Map

${map}

${side}

`; }