fix(story): tighten wrap-up and chart cues

Author: sankalpgambhir

index.html

@@ -35,7 +35,7 @@ <h1>
       <section class="findings-panel" aria-labelledby="findings-title">
         <div class="section-kicker">
           <p class="eyebrow">Key findings</p>
-          <h2 id="findings-title">Europe grew. Public equity gains concentrated in the US.</h2>
+          <h2 id="findings-title">Europe kept growing, but listed-equity gains and index weight shifted toward the US.</h2>
         </div>
         <div class="finding-grid">
           <article class="finding-card">
@@ -111,15 +111,15 @@ <h2>The benchmark is not arbitrary.</h2>
               <p class="eyebrow">Act 3 &middot; Divergence hypothesis</p>
               <h2>The gap opens when we change the measure.</h2>
               <p>
-                This leads us to the hypothesis that it isn't that Europe
-                stopped producing output, it is that output growth diverged from
-                broader market indicators. We apply a break-fit test to find
-                divergence points in various metrics, and find that candidate
-                break years cluster around the 2008 crisis window. The
-                normalization view lets you explore these critical years and
-                view the apparent divergence - much wider for ETF data and
-                market cap, but much narrower for GDP, and especially after
-                adjusting for PPP.
+                This leads to a narrower hypothesis: Europe did not stop
+                producing output, but market-linked indicators pulled away
+                after the crisis. To check that, we fit the log US/Europe gap
+                with the same piecewise trend at each candidate break year from
+                2005 to 2015 and rank those fits by BIC. The best-ranked years
+                cluster around the 2008 crisis window. The normalization view
+                then lets you stress-test the split across base years and
+                lenses: it is widest for ETF and market-cap proxies, narrower
+                for GDP, and narrower still after PPP adjustment.
               </p>
               <div class="story-stat-row">
                 <span><strong>2.51x</strong> US ETF</span>
@@ -181,45 +181,19 @@ <h2>The sectors driving divergence.</h2>
 
             <article class="story-step story-step--explore" data-story-preset="wrap-up">
               <p class="eyebrow">Conclusion &middot; What falling behind means</p>
-              <h2>Europe is not collapsing. Listed-market power moved elsewhere.</h2>
+              <h2>Europe kept growing. Market-linked gains pulled away.</h2>
               <p>
                 The final scatter keeps the comparison narrow: selected Europe
-                versus the US. Output per person is not wildly different, but the
-                market proxy is. Europe did not stop growing; the listed-market
-                upside concentrated elsewhere.
+                versus the US. Output per person remains in the same broad
+                neighborhood, but market proxies do not. The claim is not that
+                Europe stopped producing; it is that listed-equity gains and
+                benchmark index weight accumulated much more strongly in the US.
               </p>
               <div class="story-stat-row">
                 <span><strong>1.18x-1.26x</strong> Europe GDP/person</span>
                 <span><strong>0.43x-1.15x</strong> Europe ETF</span>
                 <span><strong>1.52x</strong> US ETF</span>
               </div>
-              <div class="story-verdict-panel" aria-label="Conclusion verdict">
-                <strong>Final read</strong>
-                <p>
-                  The evidence does not support a simple European collapse
-                  story. It supports a more specific claim: Europe continued to
-                  grow, but was outpaced in capital markets, especially through
-                  listed equity concentration in the US and in technology-heavy
-                  sectors. The divergence is much sharper in market proxies than
-                  in real output, and the gap opens around the 2008 crisis
-                  window.
-                  <!-- Europe kept growing, but the
-                  market values shifted toward the US, especially through
-                  listed equity concentration and technology-heavy sectors. -->
-                </p>
-                <p>
-                  The limitation is equally important: these charts measure output
-                  and listed capital, not the full well-being of households.
-                </p>
-                <p>
-                  It leads to a final question: do market gains and indicators
-                  really represent lived well-being trends? The data
-                  demonstrates a divergence in perceived market values, but the
-                  divergence is much smaller in real output terms. This
-                  necessitates a deeper future focus on how and whether market
-                  trends translate to broader economic welfare.
-                </p>
-              </div>
               <button class="story-preset-button" type="button" data-story-action="wrap-up">
                 Show final comparison
               </button>
@@ -394,28 +368,30 @@ <h3>MSCI ACWI sectors</h3>
         <section class="story-close-panel" aria-label="Conclusion and limitations">
           <div class="section-kicker">
             <p class="eyebrow">Wrap up</p>
-            <h2>Europe is not simply falling behind. It is falling behind in a specific market story.</h2>
+            <h2>Europe kept growing, but listed-equity gains and global index weight shifted toward the US.</h2>
+          </div>
+          <div class="story-verdict-panel story-verdict-panel--close" aria-label="Final read">
+            <strong>Final read</strong>
             <p>
-              The evidence supports a narrower thesis: Europe continued to grow,
-              but the investable-market rewards, sector concentration, and global
-              index weight shifted more strongly toward the United States. The
-              final question is whether these indicators track broad well-being,
-              or mostly the returns to listed capital.
+              The evidence does not support a simple European collapse story.
+              GDP and GDP per capita reject that reading. The sharper divergence
+              appears in ETF, market-cap, and ACWI views, where listed-equity
+              rewards and global benchmark weight shift much more strongly toward
+              the United States.
+            </p>
+            <p>
+              The break-year check compares the same piecewise fit of the log
+              US/Europe gap across candidate years. Those rankings repeatedly land
+              near the 2008 crisis window, which makes the crisis period a
+              plausible turning point for the market story even though the
+              PPP-adjusted output split is milder.
+            </p>
+            <p>
+              The limitation is equally important: these charts measure output
+              and listed capital, not the full well-being of households. The
+              next question is how far market gains track lived economic welfare
+              rather than asset concentration.
             </p>
-          </div>
-          <div class="story-close-grid">
-            <article class="story-close-card">
-              <h3>What the data can say</h3>
-              <p>GDP and GDP per capita reject a simple stagnation story. ETF, market-cap, and ACWI views show the sharper divergence.</p>
-            </article>
-            <article class="story-close-card">
-              <h3>What it cannot fully say</h3>
-              <p>Market data does not measure public services, inequality, household balance sheets, or lived well-being directly.</p>
-            </article>
-            <article class="story-close-card">
-              <h3>How to read the project</h3>
-              <p>Treat the guided story as the argument and the controls as the audit trail: change the indicator, year, and geography to look for exceptions.</p>
-            </article>
           </div>
         </section>
 

src/main.js

@@ -519,6 +519,7 @@ function renderStoryEvidenceCallout(container, callout) {
 
   content.append(title, body);
   container.append(label, content);
+  setStoryEvidenceCalloutCollapsedWidth(container, label);
 
   if (!callout.stats?.length) return;
   const statList = document.createElement("div");
@@ -559,6 +560,24 @@ function resetStoryEvidenceCallout(container) {
   container.replaceChildren();
   container.hidden = true;
   container.removeAttribute("tabindex");
+  container.style.removeProperty("--story-callout-collapsed-width");
+}
+
+/**
+ * Sizes the collapsed callout to the rendered label width.
+ *
+ * @param {HTMLElement} container Callout container.
+ * @param {HTMLElement} label Callout label element.
+ */
+function setStoryEvidenceCalloutCollapsedWidth(container, label) {
+  const collapsedWidth = Math.min(
+    Math.max(Math.ceil(label.scrollWidth + 34), 176),
+    320,
+  );
+  container.style.setProperty(
+    "--story-callout-collapsed-width",
+    `${collapsedWidth}px`,
+  );
 }
 
 /**

src/post-2008-analysis.js

@@ -56,9 +56,14 @@ export function renderBreakFinderAnalysis(rows, container) {
   const wrap = d3.select(container);
   wrap.selectAll("*").remove();
   wrap
-    .append("p")
+    .selectAll("p.story-methodology")
+    .data([
+      "For each metric, we fit the same piecewise-linear model to log(US / Europe) at every candidate break year from 2005 to 2015.",
+      "We then rank those candidates by BIC and rescale the scores within each metric so 1 marks the lowest-BIC fit and 0 the weakest; 2008 is kept as the crisis reference year.",
+    ])
+    .join("p")
     .attr("class", "story-methodology")
-    .text("Candidate break years from 2005-2015. Height shows relative BIC score for a piecewise US/Europe gap model; 1 is the best candidate for that metric.");
+    .text((text) => text);
 
   selectedRows.forEach((row) => {
     const item = wrap.append("div").attr("class", "story-break");
@@ -76,7 +81,7 @@ export function renderBreakFinderAnalysis(rows, container) {
     item
       .append("span")
       .attr("class", "story-break__axis-note")
-      .text("2005 -> 2015, highlighted bar = best fit; 2008 is marked where relevant.");
+      .text("2005 -> 2015, tallest bar = lowest BIC for that metric; 2008 is marked as the crisis reference year.");
   });
 }
 

src/regional-map.js

@@ -65,7 +65,7 @@ export function createIndicatorMap(container, data, onSelectCountry, onSelectReg
   const mapLayer = viewportLayer.append("g").attr("class", "indicator-map");
   const scatterLayer = svg.append("g").attr("class", "scatter-layer");
   const labelLayer = viewportLayer.append("g").attr("class", "map-labels");
-  const legendLayer = svg.append("g").attr("class", "map-legend");
+  const legendLayer = svg.append("g").attr("class", "map-legend").attr("pointer-events", "none");
   const tooltip = d3.select(container).append("div").attr("class", "map-tooltip").attr("hidden", true);
 
   renderBaseMap(baseLayer, geoPath);
@@ -122,7 +122,14 @@ export function createIndicatorMap(container, data, onSelectCountry, onSelectReg
     scatterLayer
       .attr("opacity", options.viewMode === "scatter" ? 1 : 0)
       .attr("pointer-events", options.viewMode === "scatter" ? "auto" : "none");
-    renderLegend(legendLayer, data, options.axis, options.valueMode, finiteValues);
+    renderLegend(
+      legendLayer,
+      data,
+      options.axis,
+      options.valueMode,
+      finiteValues,
+      options.viewMode,
+    );
     renderMap(mapLayer, values, geoPath, colorScale, options, data, onSelectCountry, onSelectRegion, tooltip, container);
     renderLabels(labelLayer, values, options, data);
     renderScatter(
@@ -702,17 +709,34 @@ function createMetricColorScale(values, valueMode) {
  * @param {string} axis Indicator name.
  * @param {"growth" | "absolute"} valueMode Value mode.
  * @param {number[]} values Visible numeric values.
+ * @param {"map" | "scatter"} viewMode Active view mode.
  */
-function renderLegend(layer, data, axis, valueMode, values) {
+function renderLegend(layer, data, axis, valueMode, values, viewMode) {
   const maxValue = d3.max(values) ?? 1;
   const minValue = d3.min(values) ?? 1;
   const stops =
     valueMode === "growth"
       ? getCompoundedLegendStops(minValue, maxValue)
       : [0, maxValue / 2, maxValue];
   const colorScale = createMetricColorScale(values, valueMode);
+  const legendX = viewMode === "scatter" ? SCATTER_PLOT_BOUNDS.left + 18 : 28;
+  const legendY = viewMode === "scatter" ? SCATTER_PLOT_BOUNDS.top + 20 : 46;
+  const legendWidth = Math.max(220, (stops.length - 1) * 78 + 82);
+
+  layer.attr("transform", `translate(${legendX},${legendY})`);
 
-  layer.attr("transform", `translate(${WIDTH - 250},${HEIGHT - 26})`);
+  layer
+    .selectAll("rect.legend-backdrop")
+    .data([0])
+    .join("rect")
+    .attr("class", "legend-backdrop")
+    .attr("x", -16)
+    .attr("y", -34)
+    .attr("width", legendWidth)
+    .attr("height", 56)
+    .attr("rx", 14)
+    .attr("ry", 14)
+    .lower();
 
   layer
     .selectAll("text.legend-title")

src/story-presets.js

@@ -117,8 +117,8 @@ export const STORY_PRESETS = {
     stageFocus: "stage-map",
     callout: {
       label: "Conclusion evidence",
-      title: "Similar output neighborhood, different market outcome.",
-      body: "The final scatter is scoped to Europe + US. Selected European GDP per person growth stays near the US, but every selected European ETF proxy sits below the US.",
+      title: "Similar output range, different market outcome.",
+      body: "The final scatter keeps Europe and the US on the same rich-market frame. Output per person stays relatively close, but every selected European ETF proxy remains below the US.",
       stats: ["Europe + US only", "GDP/person close", "ETF gap large"],
     },
   },

src/story.css

@@ -475,7 +475,7 @@
   z-index: 3;
   display: grid;
   gap: 0;
-  width: min(176px, calc(100% - 44px));
+  width: min(var(--story-callout-collapsed-width, 176px), calc(100% - 44px));
   max-width: min(320px, calc(100% - 44px));
   max-height: 48px;
   overflow: hidden;
@@ -711,6 +711,12 @@
   box-shadow: var(--shadow-soft);
 }
 
+.story-verdict-panel--close {
+  max-width: none;
+  margin-top: 0;
+  padding: 22px;
+}
+
 .story-close-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));

src/style.css

@@ -1762,6 +1762,12 @@ button:active {
   letter-spacing: 0.02em;
 }
 
+.map-legend .legend-backdrop {
+  fill: rgba(7, 16, 29, 0.78);
+  stroke: rgba(255, 255, 255, 0.12);
+  stroke-width: 1;
+}
+
 .scatter-axis path,
 .scatter-axis line {
   stroke: rgba(255, 255, 255, 0.18);