Smoother animations, and anim for send/receive node.

index.html

@@ -39,6 +39,26 @@
       font-weight: bold;
     }
 
+    /* #libraries g circle{
+      animation-timing-function: easeInOutCubic;
+    } */
+    #libraries g.send circle:nth-child(2){
+        animation: send .5s 1 cubic-bezier(0.22, 1, 0.36, 1); 
+        /* fill: red; */
+    }
+    #libraries g.recv circle:nth-child(2){
+      fill: rgba(199, 162, 217, 0.0)
+    }
+    #libraries g.recv circle:nth-child(2){
+        /* fill: blue; */
+        animation: recv 1s 1; 
+    }
+
+
+  @keyframes send {15% {opacity: 1} 40%{r:25px; opacity:0;} 41% {r:10px; opacity:0.05} 100% {r: 20px; opacity:1}}
+  @keyframes recv {50%{fill: rgba(199, 162, 217, 0.3);}}
+  /* @keyframes recv {50%{transform:rotateY(180deg);}} */
+
     body {
       background: black;
     }

src/LibrariesSvg.svelte

@@ -183,6 +183,7 @@
    id="path1095"
 />
 
+
 <style lang="scss">
    circle:first-child {
       fill: white;
@@ -202,4 +203,5 @@
       fill: none;
       stroke-width: 2px;
    }
+
 </style>

src/Viz.svelte

@@ -59,20 +59,20 @@
 
     // filter nodes with only having both Latitude and Longitude.
     // then map these coordinates to the canvas space
-    const locations = new Map(_nodes
+    const locations = new Map(
-        .filter((n) => n.lat && n.lon)
+        _nodes
-        .map((node) => {
+            .filter((n) => n.lat && n.lon)
-            node["x"] = node_positions[node.code][0];
+            .map((node) => {
-            node["y"] = node_positions[node.code][1];
+                node["x"] = node_positions[node.code][0];
-            return node;
+                node["y"] = node_positions[node.code][1];
-        })
+                return node;
-        .map((d) => [d["name"], d])
+            })
+            .map((d) => [d["name"], d]),
     );
 
-
     _requests
         // remove entries that stay at the same place
-        .filter((n) => n['Owning Library Name'] !=  n['Pickup Location'])
+        .filter((n) => n["Owning Library Name"] != n["Pickup Location"])
         .filter(
             (l) =>
                 locations.has(l["Owning Library Name"]) &&
@@ -94,6 +94,7 @@
                 target: locations.get(r["Pickup Location"]),
                 nr: idx,
                 item: items.get(identifier),
+                date: new Date(r["Request Completion Date"]), // TODO: validate unfortunate M/D/Y format
                 _original: r,
                 d: "", // bit of a hacky workaround, refactor in object
             };
@@ -152,8 +153,8 @@
 
     const occurences = new Map<Item, Movement[]>();
     movements.forEach((movement, idx) => {
-        let movements = occurences.get(movement.item) ?? []
+        let movements = occurences.get(movement.item) ?? [];
-        movements.push(movement)
+        movements.push(movement);
         occurences.set(movement.item, movements);
     });
 
@@ -161,25 +162,27 @@
         locations: locations,
         items: items,
         movements: movements,
-        occurences: occurences
+        occurences: occurences,
-    }
+    };
 
     let drawn_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
-    $: opacity = Math.max(0.055, Math.min(1, 200 / $drawn_motions.length));
+    $: opacity = Math.max(0.055, Math.min(.3, 70 / $drawn_motions.length));
     let overlay_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
     let events = writable(<Log[]>[]); //.filter((m, i) => i < 100);
+    let current_item = writable(<Item | null>null); //.filter((m, i) => i < 100);
 
     const viz_data: VizData = {
         drawn_motions: drawn_motions,
         overlay_motions: overlay_motions,
         events: events,
-    }
+        current_item: current_item,
+    };
 
     import { onMount, onDestroy } from "svelte";
     import { writable } from "svelte/store";
 
     let scenes = [All, Timeline];
-    let currentSceneI = 0;
+    let currentSceneI = parseInt(window.location.hash[1] ?? 0);
     let currentScene: Scene;
 
     function nextScene() {
@@ -188,11 +191,7 @@
         }
 
         console.log("Next scene", currentSceneI);
-        currentScene = new scenes[currentSceneI](
+        currentScene = new scenes[currentSceneI](data, viz_data, nextScene);
-            data,
-            viz_data,
-            nextScene,
-        );
         currentSceneI = (currentSceneI + 1) % scenes.length;
     }
 
@@ -227,8 +226,10 @@
 
 <h1>library of <span id="motiontitle">motions</span></h1>
 <div id="about">
-    <span>Work by <em>Ruben van de Ven</em> for the
+    <span
-    <em>University of Amsterdam Library</em>.</span>
+        >Work by <em>Ruben van de Ven</em> for the
+        <em>University of Amsterdam Library</em>.</span
+    >
     <span>Fonts by <em>Open Source Publishing</em>.</span>
 </div>
 
@@ -236,8 +237,8 @@
     <g id="movements">
         {#each $drawn_motions as m}
             <path
-                in:draw|global={{ duration: m.duration }}
+                in:draw={{ duration: m.duration }}
-                out:fade={{duration: 1000}}
+                out:fade={{ duration: 1000 }}
                 d={m.movement.d}
                 style="opacity: {opacity}"
             ></path>
@@ -245,7 +246,9 @@
     </g>
     <g id="overlay_motions">
         {#each $overlay_motions as m}
-            <path in:draw|global={{ duration: m.duration }} d={m.movement.d}
+            <path out:fade={{ duration: 1000 }}
+            in:draw={{ duration: m.duration }}
+            d={m.movement.d}
             ></path>
         {/each}
     </g>
@@ -261,19 +264,34 @@
     </g>
 </svg>
 
-{#if currentScene?.rendered_elements.indexOf("timeline") >= 0}
+<!-- {#if currentScene?.rendered_elements.indexOf("timeline") >= 0} -->
-    <div id="timeline">
+<div id="timeline">
-        {#each $events as m}
+    {#if $current_item}
+        <div id="current">
+            <h2>{$current_item.title}</h2>
+        </div>
+    {/if}
+    <div id="events">
+        {#each $events as e}
             <div class="entry" in:slide={{ duration: 200 }}>
                 <!-- {m['Title (Complete)']} -->
                 <span class="date"
-                    >{m.movement._original["Request Completion Date"]}</span
+                    >{e.date.toLocaleDateString("en-UK", {
+                        weekday: "long",
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                    })}</span
                 >
-                <span class="location">{m.movement.target.name}</span>
+                <div class="text">
+                    <span class="title">{e.title}</span>
+                    <span class="description">{e.description}</span>
+                </div>
             </div>
         {/each}
     </div>
-{/if}
+</div>
+<!-- {/if} -->
 
 {#if dev}
     <div id="fps">{$_fps}</div>
@@ -315,24 +333,30 @@
         width: 450px;
         text-align: right;
 
-        span{
+        span {
-            display:block;
+            display: block;
         }
     }
 
     path {
         stroke: #bc89ff;
-        stroke-width: 2px;
+        stroke-width: 3px;
         fill: none;
+        animation: highlight-on-insert 1s 1;
     }
+    @keyframes highlight-on-insert{10% {opacity: .7; stroke:#ff89ff}}
     #overlay_motions path {
-        stroke: red;
+        stroke: rgba(255, 255, 0, 0.641);
-        stroke-width: 4;
+        stroke-width: 5;
         opacity: 1;
     }
 
-
     /* path:not(.selected) {
         opacity: 0;
     } */
+
+    #events {
+        max-height: 50px;
+
+    }
 </style>

src/app.css

@@ -6,7 +6,7 @@
   font-weight: 200;
   color: black;
   /* background: linear-gradient(180deg, #3a294c 0%, #62487f 100%); */
-  background: rgb(45, 45, 45);
+  /* background: rgb(45, 45, 45); */
   /* background: linear-gradient(to bottom right, #6fa8d9f7, #cdeed3); */
   border-radius: 40px;
 }

src/lib/types.ts

@@ -19,7 +19,8 @@ export type Movement = {
     item: Item,
     _original: Object
     // also contains additional request data (see requests.csv)
-    d: String
+    d: String, // the svg path
+    date: Date,
 };
 
 export type Occurences = Map<Item, Movement[]>
@@ -49,7 +50,8 @@ export type Log = {
 export type VizData = {
     drawn_motions: Writable<Motion[]>,
     overlay_motions: Writable<Motion[]>,
-    events: Writable<Log[]>
+    events: Writable<Log[]>,
+    current_item: Writable<Item | null>
 }
 
 export function get_path_d(movement: Movement) {
@@ -87,8 +89,8 @@ export function get_path_d(movement: Movement) {
     dy = m.target.y - m.source.y;
     angle = Math.atan2(dx, dy);
 
-    var srcSize = 5; //_mapGraph.getSizeForNode(m.source);
+    var srcSize = 31; //_mapGraph.getSizeForNode(m.source);
-    var tgtSize = 5; //_mapGraph.getSizeForNode(m.target);
+    var tgtSize = 31; //_mapGraph.getSizeForNode(m.target);
 
     // Compute the line endpoint such that the arrow
     // it not in the center, but rather slightly out of it

src/scenes/Scenes.ts

@@ -13,6 +13,34 @@ export class Scene {
         this.nextScene = nextScene;
     }
 
+    drawMovements(movements: Movement[], duration: number, in_overlay = false){
+        let motions: Motion[] = movements.map((m) => ({ duration: duration, movement: m }));
+        // TODO abstract in function drawMovements()
+        // TODO in there, setTimeout for arrival effect on node
+
+        const set = in_overlay ? this.viz_data.overlay_motions : this.viz_data.drawn_motions
+        setTimeout(() => {
+        set.update(items => ([...items, ...motions]))
+        }, 100);
+
+        motions.forEach((motion) => {
+            const movement = motion.movement
+            const srcEl = document.getElementById(movement.source.code)
+            const tgtEl = document.getElementById(movement.target.code)
+            // console.log(srcEl, tgtEl, movement.source.code, movement.target.code)
+            srcEl?.classList.remove('send', 'recv');
+            setTimeout(() => {
+                srcEl?.classList.add('send');
+            }, 200) // very brief to just trigger css anim
+            setTimeout(() => {
+                tgtEl?.classList.remove('send', 'recv');
+            }, duration - 280) // very brief to just trigger css anim
+            setTimeout(() => {
+                tgtEl?.classList.add('recv');
+            }, duration - 250) // very brief to just trigger css anim
+        })
+    }
+    
     stop() {
         console.log("TODO: stop timeout")
     }
@@ -22,6 +50,13 @@ export class All extends Scene {
     interval: number
     step: number = 0
     locationCounts = new Map<Location, { in: number, out: number }>()
+    selected_movements: Movement[];
+    
+    options = {
+        interval_days: .1, 
+        tick_interval: 1000, // ms
+        items_per_tick: 1, 
+    }
 
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
         super(data, viz_data, nextScene);
@@ -30,6 +65,19 @@ export class All extends Scene {
         // when done, trigger parent.done()
         // this.allMovements = data.movements;
         
+        // sorted by date
+        data.movements.sort((a,b) => a.date - b.date);
+        const last_move_date = data.movements[data.movements.length-1].date
+        
+        const interval_ms = this.options.interval_days * 24 * 3600 * 1000
+
+        const range = [new Date(last_move_date - interval_ms), last_move_date]
+        console.log(range)
+        this.selected_movements = data.movements.filter((movement) => movement.date > range[0] && movement.date <= range[1]);
+        console.log(`Draw ${this.selected_movements.length} movements, will take ${this.selected_movements.length / this.options.items_per_tick * this.options.tick_interval / 1000} seconds`)
+        
+        
+
         // TODO: group by hour and have it last nr-of-hours * interval
         // TODO: then, add a timeline
         // TODO: then, add an overlay with relevant events, e.g. 
@@ -38,26 +86,24 @@ export class All extends Scene {
         // TODO: .. and any other filter
         // TODO: then finish with a summary per location
         // TODO:    .. (or add these in small prints as counters under the location names)
-        this.interval = setInterval(this.tick.bind(this), 500);
+        this.interval = setInterval(this.tick.bind(this), this.options.tick_interval);
 
         // clear the motions when kicking off:
         this.viz_data.drawn_motions.update(items => []);
     }
 
     tick() {
-        const n = 10
+        const n = this.options.items_per_tick
-        if (this.step >= this.data.movements.length) {
+        if (this.step >= this.selected_movements.length) {
             console.log('this', 'done')
             // todo: ease out all entries
             this.nextScene()
             return;
         }
-        let movements: Movement[] = this.data.movements.slice(this.step, this.step + n);
+        let movements: Movement[] = this.selected_movements.slice(this.step, this.step + n);
         
         // duration 5000 + Math.random() * 10000
-        let motions: Motion[] = movements.map((m) => ({ duration: 5000, movement: m }));
+        this.drawMovements(movements, 3500)
-
-        this.viz_data.drawn_motions.update(items => ([...items, ...motions]))
         this.step += n;
     }
 
@@ -79,29 +125,49 @@ export class Timeline extends Scene {
     constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
         super(data, viz_data, nextScene);
 
+        // clear canvas
+        // this.viz_data.drawn_motions.update(items => [])
+
         // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
         // when done, trigger parent.done()
-        console.log('s',data.occurences)
+        const min_occurences = 3;
-        const [ item, movements ]= this.pickMovements(data.occurences);
+        const pick = this.pickMovements(min_occurences);
-        this.item = item
+        if( pick === null) {
-        this.movements = movements
+            console.error(`No items which occur at least ${min_occurences} times`)
-        console.log(item, movements)
+            setTimeout(this.nextScene.bind(this), 1000);
+            
+            return;
+        }
+        const [ item, movements ]= pick;
+        this.item = item
+        this.viz_data.current_item.set(item);
+        this.movements = movements
+        console.log('start timeline', item, movements)
 
-        // this.motions = viz_data.drawn_motions
-        this.viz_data.drawn_motions.update(items => [])
 
         this.interval = setInterval(this.tick.bind(this), 3000);
 
 
     }
 
-    pickMovements(occurences: Map<Item, Movement[]>) {
+    /**
+     * Pick a movement
+     * @param min_occurences number The minimum number of occurences an item should have
+     * @returns [Item, Movement[]]
+     */
+    pickMovements(min_occurences: number) {
         
-        const item_movements = [...occurences]
+        const item_movements = [...this.data.occurences]
             // TODO: variable lenght, prefer with most steps
-            .filter(([item, movements]) =>  movements.length > 1)
+            .filter(([item, movements]) =>  movements.length >= min_occurences)
         
-        return item_movements[Math.floor(Math.random() * item_movements.length)]
+        if(!item_movements.length) {
+            return null
+        }
+
+        const pick = item_movements[Math.floor(Math.random() * item_movements.length)]
+        pick[1].sort((a: Movement, b: Movement) => (a.date - b.date))
+        return pick;
     }
 
     tick() {
@@ -114,14 +180,19 @@ export class Timeline extends Scene {
         
         // duration 5000 + Math.random() * 10000
         const mov = this.movements[this.step]
-        const motion: Motion = { duration: 2000, movement: mov };
+        this.drawMovements([mov], 2000, true)
-        const log: Log = { date: new Date, title: `Transfer to ${mov.target.name}`, description: "" };
+        // const motion: Motion = { duration: 2000, movement: mov };
-        console.log(motion, motion.movement.source, motion.movement.target)
+        const log: Log = { date: mov.date, title: `Transfer to ${mov.target.name}`, description: "" };
-        this.viz_data.drawn_motions.update(items => ([...items, motion]))
+        // 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]))
         this.step += 1;
     }
 
     stop() {
+        this.viz_data.current_item.set(null)
+        this.viz_data.events.set([])
+        this.viz_data.overlay_motions.set([])
         clearInterval(this.interval)
     }