Better timing and text and layout

parse_data.py

@@ -39,10 +39,14 @@ def filter_date(date: str):
     return date
     
 
+def clean_title(title: str) -> str:
+    return title.removesuffix('/').strip()
+
 with open("data/batch2/Rapport_transit_1.csv", encoding='utf-8-sig') as fp:
     # items
     reader = csv.DictReader(fp, delimiter=",")
     for item in reader:
+        item['Title'] = clean_title(item['Title'])
         item['Publication Date'] = filter_date(item['Publication Date'])
         item['Sort Date'] = item['Publication Date'][-4:] # some dates are ranges, only sort by last year
         items.append(item)

src/Viz.svelte

@@ -160,6 +160,7 @@
         occurences: occurences,
     };
 
+    let tease_title = writable(true); //.filter((m, i) => i < 100);
     let drawn_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
     $: opacity = Math.max(0.055, Math.min(0.3, 70 / $drawn_motions.length));
     let overlay_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
@@ -167,6 +168,7 @@
     let current_item = writable(<Item | null>null); //.filter((m, i) => i < 100);
 
     const viz_data: VizData = {
+        tease_title: tease_title,
         drawn_motions: drawn_motions,
         overlay_motions: overlay_motions,
         events: events,
@@ -219,7 +221,9 @@
     });
 </script>
 
-<h1>library of <span id="motiontitle">motions</span></h1>
+{#if $tease_title}
+    <h1 in:fade={{duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
+{/if}
 <div id="about">
     <span
         >Work by <em>Ruben van de Ven</em> for the
@@ -303,6 +307,7 @@
     </div>
     {#if $current_item}
         <div id="current">
+            <h3>Logbook of</h3>
             <h2>{$current_item.title}</h2>
             <p>{[$current_item.Date, $current_item.Publisher, $current_item.Place].filter((e) => e).join(', ')}</p>
         </div>
@@ -334,6 +339,13 @@
         .entry {
             display: flex;
             flex-direction: row;
+            h3{
+                margin-bottom: 10px;;
+            }
+            p{
+                margin:0;
+            }
+            
             .date {
                 width: 180px;
             }
@@ -350,6 +362,7 @@
                     height: var(--divider-width);
                     width: var(--divider-width);
                     background-color: rgb(79 70 229);
+                    // background-color: rgba(70, 229, 112, 1);;
                     border-radius: calc(var(--divider-width) / 2);
                     // border: solid 5px black;
                     flex-grow: 0;
@@ -375,9 +388,22 @@
                 }
                 p {
                 }
+                padding-bottom: 30px;;
             }
         }
     }
+    h1{
+        animation: fadeout;
+        animation-duration: 3s;
+        animation-delay: 10s;
+        animation-timing-function: ease-in;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+    }
+    @keyframes fadeout{
+        0%{opacity: 1;}
+        100%{opacity: 0;}
+    }
     #fps {
         position: absolute;
         top: 10px;
@@ -420,8 +446,9 @@
         }
     }
     #overlay_motions path {
-        stroke: rgba(255, 255, 0, 0.641);
+        // strokrgba(70, 229, 120, 0.641)41);
-        stroke-width: 5;
+        stroke: rgba(70, 229, 112, 0.5);
+        stroke-width: 4;
         opacity: 1;
     }
 

src/lib/types.ts

@@ -92,7 +92,7 @@ export function importMovement(idx, orig: Object, locations: Map<string, Locatio
         target: target,
         item: item,
         start_date: new Date(orig["Event Start Date and Time"]), // TODO: validate unfortunate M/D/Y format
-        end_date: new Date(orig["Event Start Date and Time"]), // TODO: validate unfortunate M/D/Y format
+        end_date: new Date(orig["Event End Date and Time"]), // TODO: validate unfortunate M/D/Y format
         _original: orig,
         d: "", // bit of a hacky workaround, refactor in object
     };
@@ -125,6 +125,7 @@ export type Log = {
 
 // Type used by the scenes with all reactive Writables for drawable objects 
 export type VizData = {
+    tease_title: Writable<Boolean>,
     drawn_motions: Writable<Motion[]>,
     overlay_motions: Writable<Motion[]>,
     events: Writable<Log[]>,

src/scenes/Scenes.ts

@@ -61,6 +61,8 @@ export class All extends Scene {
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
         super(data, viz_data, nextScene);
 
+        viz_data.tease_title.set(true)
+
         // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
         // when done, trigger parent.done()
         // this.allMovements = data.movements;
@@ -130,6 +132,8 @@ export class Timeline extends Scene {
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
         super(data, viz_data, nextScene);
 
+        viz_data.tease_title.set(false)
+
         // clear canvas
         // this.viz_data.drawn_motions.update(items => [])
 
@@ -150,7 +154,7 @@ export class Timeline extends Scene {
         console.log('start timeline', item, movements)
 
 
-        this.interval = setInterval(this.tick.bind(this), 3000);
+        this.interval = setInterval(this.tick.bind(this), 5000);
 
 
     }
@@ -171,15 +175,16 @@ export class Timeline extends Scene {
         }
 
         const pick = item_movements[Math.floor(Math.random() * item_movements.length)]
-        pick[1].sort((a: Movement, b: Movement) => (a.end_date - b.end_date))
+        pick[1].sort((a: Movement, b: Movement) => (b.end_date - a.end_date)) // reverse order
         return pick;
     }
 
     tick() {
         if (this.step >= this.movements.length) {
-            console.log('this', 'done')
+            clearInterval(this.interval)
+            setTimeout(this.nextScene.bind(this), 5000)
             // todo: ease out all entries
-            this.nextScene()
+            // this.nextScene()
             return;
         }
 
@@ -188,7 +193,16 @@ export class Timeline extends Scene {
         this.drawMovements([mov], 2000, true)
         // const motion: Motion = { duration: 2000, movement: mov };
         // TODO: also consider end date
-        const log: Log = { date: mov.start_date, title: `Transfer to ${mov.target.name}`, description: "" };
+
+        let title = this.step === 0 ? 
+            `'${mov.item.title}' arrived at ${mov.target.name}`:
+            `Item arrived at ${mov.target.name}`;
+        let description = `Travelling from ${mov.source.name}`;
+        
+
+        const log: Log = { date: mov.end_date, title: title, description: description };
+
+        // const log2: Log = { date: mov.start_date, title: title_send, description: "" };
         // console.log(motion, motion.movement.source, motion.movement.target)
         // this.viz_data.overlay_motions.update(items => ([...items, motion]))
         this.viz_data.events.update(items => ([...items, log]))