Data visualisation for the University Library of the University of Amsterdam
Find a file
Ruben van de Ven 8c729708f3 Notes for WIP
2024-09-27 14:27:35 +02:00
.vscode Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
data Smoother animations, and anim for send/receive node. 2024-05-31 22:37:36 +02:00
public/fonts Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
src Dramatic opening 2024-06-22 16:35:01 +02:00
.gitignore Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
index.html Smoother animations, and anim for send/receive node. 2024-05-31 22:37:36 +02:00
package-lock.json Use SCSS as preprocessor and WIP 'scenes' setup 2024-05-26 20:42:15 +02:00
package.json Use SCSS as preprocessor and WIP 'scenes' setup 2024-05-26 20:42:15 +02:00
parse_data.py Better timing and text and layout 2024-06-22 16:03:32 +02:00
poetry.lock Refactor Scenes and Libraries SVG overlay 2024-05-31 12:58:24 +02:00
pyproject.toml Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
README.md Notes for WIP 2024-09-27 14:27:35 +02:00
svelte.config.js Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
tsconfig.json Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
tsconfig.node.json Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00
vite.config.ts Turning ub-movements-test repo into a Svelte project 2024-04-26 15:10:05 +02:00

Movements in the UvA University Library

Usage

Run dev server:

npm run dev

Or, to expose it on the network: npm run dev -- --host.

Update data:

poetry run python parse_data.py

Install

npm install
poetry install

TODO

In progress:

  • Currently drafting the timeline. Events should show up in the timeline, and still need to pass Events and Overlay_Motions to the scene object. Possibly in a data wrapper. Currently timeline pick a relevant Item
  • Scene All:
    • draw according to clock
    • Show date + time in corner (or use timeline as in Inspiration screenshot -- https://codepen.io/noeldelgado/pen/JdbmYW )
    • draw special items (e.g. oldest, most travelled), or just a random title every one in a while
    • Counter per library
    • Full opacity while drawing so it is clearer which is being drawn.
  • Scene timeline
    • Draw in reverse?
    • Put "travelling from" above "Item arrived", and increase the .divider translateY
    • Fade out All movement to highlight the new item
    • Put the title more front and center to make it clear an item is selected
    • "Missing data" when current source != previous target
      • E.g. dotted line.
      • Possibly end with "added to archive"
      • Or another kind of summary at the end

Font options:

  • Sligoil
  • Karla
  • Carlito
  • "Linux Biolinum O"
  • Monor

Ideas:

  • Can we export get borrow moments for scene.timeline log?
  • Can we fill in gaps in travel timeline

TODO: check out https://threlte.xyz/ for moving to Threejs instead of svg.

  • Story
    • Scene
      • Oldest item
      • All items last month, one by one
      • Journey of selected item

Or as middle ground use canvas with paperjs or fabricjs to draw on canvas instead of SVG. Other canvas engines might also work. E.g. Pixi uses webgl