fix: Switch Viz 4 and 5 on website. Resolve undefined errors in Viz 5 and 6.

Author: nicolaskarmo

src/App.tsx

@@ -37,14 +37,14 @@ function App() {
         <Viz3 />
       </section>
 
-      <section id="section4">
-        <Viz4 />
-      </section>
-
       <section id="section5">
         <Viz5 />
       </section>
 
+      <section id="section4">
+        <Viz4 />
+      </section>
+
       <section id="section6">
         <Viz6 />
       </section>

src/components/Viz3.tsx

@@ -383,11 +383,9 @@ const Viz3: React.FC = () => {
           <p className="section-badge">/ Visualization 03</p>
           <h1 className="viz-title">Where in the world do planes crash?</h1>
           <p>
-            Plane crashes are not distributed evenly across the globe. The choropleth map shades each
+            Plane crashes are not distributed evenly across the globe. The choropleth map highlights this by shading each
             country by its incident count, while the treemap below shows the same data grouped by continent,
-            making the relative scale of each region easier to read. The United States alone accounts for
-            roughly a fifth of all recorded incidents, partly because of its vastly larger volume of
-            domestic flights. Switch between incidents and fatalities, narrow the year range, and hover any
+            making the relative scale of each region easier to read. Switch between incidents and fatalities, narrow the year range, and hover any
             country to see the figure highlighted in both views at once.
           </p>
         </div>

src/components/Viz5.tsx

@@ -36,11 +36,6 @@ const PALETTE = [
   '#a3e635','#fb7185','#e879f9','#86efac','#93c5fd','#fca5a5',
 ]
 
-const CONTINENT_IDX: Record<string,number> = {
-          'North America': 0, 'Europe': 1, 'Asia': 2,
-          'South America': 3, 'Africa': 4, 'Oceania': 5,
-        }
-
 // Darken a hex color for the arrival half of each arc
 function darken(hex: string, f = 0.5): string {
   const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16)
@@ -351,6 +346,7 @@ const Viz5: React.FC = () => {
           <p className="section-badge">/ Visualization 05</p>
           <h1 className="viz-title">Origin–destination flows: the most perilous routes</h1>
           <p>
+            
             Each arc segment represents a city, country, or continent. The bright
             portion marks departures; the darker portion marks arrivals. Ribbon
             thickness encodes crash count. Arrowheads point toward the arrival end.

src/components/Viz6.tsx

@@ -100,7 +100,7 @@ const viz6: React.FC = () => {
   }, [])
 
   // ── Filter combinations → compute λ ─────────────────────────────────────
-  const { lambda, totalIncidents, decadesInRange } = useMemo(() => {
+  const { lambda, totalIncidents} = useMemo(() => {
     if (!data) return { lambda: 0, totalIncidents: 0, decadesInRange: 1 }
 
     // Build decade range
@@ -303,8 +303,6 @@ const viz6: React.FC = () => {
 
   // Derived stats
   const p0    = poissonPMF(lambda, 0)
-  const modeK = lambda <= 0 ? 0 : Math.max(0, Math.floor(lambda))
-  const modeP = poissonPMF(lambda, modeK)
 
   // Valid decade range for the "To" selector (must be ≥ decadeFrom)
   const decadeFromOptions = data?.decades ?? []