Data visualisation for the University Library of the University of Amsterdam
.vscode | ||
data | ||
public/fonts | ||
src | ||
.gitignore | ||
index.html | ||
package-lock.json | ||
package.json | ||
parse_data.py | ||
poetry.lock | ||
pyproject.toml | ||
README.md | ||
svelte.config.js | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
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
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
- Scene
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