From 7e0f414c66bc0350701f5054c2851a581c73648f Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Sat, 22 Jun 2024 16:03:32 +0200 Subject: [PATCH] Better timing and text and layout --- parse_data.py | 4 ++++ src/Viz.svelte | 33 ++++++++++++++++++++++++++++++--- src/lib/types.ts | 3 ++- src/scenes/Scenes.ts | 24 +++++++++++++++++++----- 4 files changed, 55 insertions(+), 9 deletions(-) diff --git a/parse_data.py b/parse_data.py index dc1b4c7..3ffd5fe 100644 --- a/parse_data.py +++ b/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) diff --git a/src/Viz.svelte b/src/Viz.svelte index 0297955..f9ba5e2 100644 --- a/src/Viz.svelte +++ b/src/Viz.svelte @@ -160,6 +160,7 @@ occurences: occurences, }; + let tease_title = writable(true); //.filter((m, i) => i < 100); let drawn_motions = writable([]); //.filter((m, i) => i < 100); $: opacity = Math.max(0.055, Math.min(0.3, 70 / $drawn_motions.length)); let overlay_motions = writable([]); //.filter((m, i) => i < 100); @@ -167,6 +168,7 @@ let current_item = writable(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 @@ }); -

library of motions

+{#if $tease_title} +

library of motions

+{/if}
Work by Ruben van de Ven for the @@ -303,6 +307,7 @@
{#if $current_item}
+

Logbook of

{$current_item.title}

{[$current_item.Date, $current_item.Publisher, $current_item.Place].filter((e) => e).join(', ')}

@@ -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); - stroke-width: 5; + // strokrgba(70, 229, 120, 0.641)41); + stroke: rgba(70, 229, 112, 0.5); + stroke-width: 4; opacity: 1; } diff --git a/src/lib/types.ts b/src/lib/types.ts index a5fe589..77e0d21 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -92,7 +92,7 @@ export function importMovement(idx, orig: Object, locations: Map, drawn_motions: Writable, overlay_motions: Writable, events: Writable, diff --git a/src/scenes/Scenes.ts b/src/scenes/Scenes.ts index 88d127e..5e5b779 100644 --- a/src/scenes/Scenes.ts +++ b/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]))