Move the locations of Viz 4 and 5, modify the text for Viz 5 and 6.

Author: nicolaskarmo

src/components/Viz4.tsx

@@ -478,6 +478,18 @@ const Viz4: React.FC = () => {
   return (
     <div className="section" id="section4">
       <div className="viz-container">
+        <div className="paragraph">
+          <p className="section-badge">/ Visualization 04</p>
+          <h1 className="viz-title">Crashed flight routes around the world</h1>
+          <p>
+            Each line on the globe is a flight that never made it to its destination. Lines connect the
+            departure (white) and arrival (cyan) airports as great-circle arcs, and their colour scales
+            with the number of fatalities, pale yellow for incidents with no deaths, deep red for the
+            deadliest. Drag the globe to rotate it, or let it spin on its own. Brush the year range below
+            to focus on a period. Hover any line to reveal a red X at the crash location (precise where
+            it's known, dashed and labelled <em>approx.</em> when only city-level data is available).
+          </p>
+        </div>
         <div className="widget" ref={widgetRef}>
           <button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
             <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
@@ -528,19 +540,6 @@ const Viz4: React.FC = () => {
             </div>
           </div>
         </div>
-
-        <div className="paragraph">
-          <p className="section-badge">/ Visualization 04</p>
-          <h1 className="viz-title">Crashed flight routes around the world</h1>
-          <p>
-            Each line on the globe is a flight that never made it to its destination. Lines connect the
-            departure (white) and arrival (cyan) airports as great-circle arcs, and their colour scales
-            with the number of fatalities, pale yellow for incidents with no deaths, deep red for the
-            deadliest. Drag the globe to rotate it, or let it spin on its own. Brush the year range below
-            to focus on a period. Hover any line to reveal a red X at the crash location (precise where
-            it's known, dashed and labelled <em>approx.</em> when only city-level data is available).
-          </p>
-        </div>
       </div>
     </div>
   )

src/components/Viz5.tsx

@@ -342,18 +342,6 @@ const Viz5: React.FC = () => {
   return (
     <div className="section" id="section5">
       <div className="viz-container">
-        <div className="paragraph">
-          <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.
-            Hover a node or ribbon for details.
-          </p>
-        </div>
-
         <div className="widget" ref={widgetRef}>
           <button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
             <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
@@ -405,6 +393,19 @@ const Viz5: React.FC = () => {
             </div>
           </div>
         </div>
+
+        <div className="paragraph">
+          <p className="section-badge">/ Visualization 05</p>
+          <h1 className="viz-title">Origin–destination flows: the most perilous routes</h1>
+          <p>
+            Deeping a little further into where the crashes happened, the connections between
+            departure and arrival locations can be explored through this chord diagram. Ribbon
+            thickness encodes crash count. Arrowheads point toward the arrival end. Hover a node or ribbon for details.
+            By filtering between cities, countries or continents, explore the most dangerous routes between two locations.
+            Connections from one location to the same location needed to be omitted for readability, as they
+            represented the vast majority of crashes (e.g. domestic flights within the US).
+          </p>
+        </div>
       </div>
     </div>
   )

src/components/Viz6.tsx

@@ -412,11 +412,11 @@ const viz6: React.FC = () => {
           <p className="section-badge">/ Visualization 06</p>
           <h1 className="viz-title">Modelling your flight's crash risk</h1>
           <p>
-            Using a Poisson process, we model crashes as a rate λ — the mean
-            number of incidents per year for a filtered subset of the data.
-            The chart shows the full probability distribution P(X = k): the
-            chance of exactly k crashes occurring in any given year. Filter by
-            manufacturer, airline, departure city, arrival city, and decade range.
+            Assuming crashes are independent events occurring at a constant average rate, we can model them as a Poisson distribution.
+            This then gives the probability of experiencing k crashes in a year,
+            based on the historical average λ for filtered subset of the data.
+            By leveraging the various filters, you can model the probability of a custom
+            flight of crashing over a given period of time.
           </p>
         </div>
       </div>