Overview
This is a memo on how to use Knight Lab’s TimelineJS and StoryMapJS from Next.js.
Background
Knight Lab’s TimelineJS and StoryMapJS are open source tools for digital storytelling.
https://knightlab.northwestern.edu/
Data
We use text data from “Shibusawa Eiichi Biographical Materials” published at the following location.
https://github.com/shibusawa-dlab/lab1
Repository
Published at the following location.
https://github.com/nakamura196/shibusawa
StoryMap
By preparing a component like the following, it was possible to use it from Next.js.
https://github.com/nakamura196/shibusawa/blob/main/src/components/Storymap.tsx
For TypeScript usage, I also created the following type definition file.
https://github.com/nakamura196/shibusawa/blob/main/src/global.d.ts
I was able to display it as follows.
https://shibusawa.vercel.app/storymap/1868-08-02
Timeline
Similar to the StoryMap, I created a component for the timeline as follows.
https://github.com/nakamura196/shibusawa/blob/main/src/components/Timeline.tsx
I was able to display it as follows.
https://shibusawa.vercel.app/timeline/1868
However, I later noticed that ES6 modules/webpack are published at the following location for the timeline. I plan to investigate how to use this separately.
https://www.npmjs.com/package/@knight-lab/timelinejs
Summary
I hope this serves as a useful reference for data visualization and narrative construction using TimelineJS and StoryMapJS, which are widely used in the Digital Humanities (DH) field.
Note that these tools can also create visualization apps using Google Spreadsheets as input without any programming. I hope this information is also helpful.