Using Knight Lab's TimelineJS and StoryMapJS from Next.js

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.

Knight Lab

Advancing media through exploration and experimentation.

Northwestern University Knight Lab

Data

We use text data from "Shibusawa Eiichi Biographical Materials" published at the following location.

GitHub - shibusawa-dlab/lab1: 「渋沢栄一ダイアリー」データ

「渋沢栄一ダイアリー」データ. Contribute to shibusawa-dlab/lab1 development by creating an account on GitHub.

GitHub

Repository

Published at the following location.

GitHub - nakamura196/shibusawa: 渋沢栄一伝記資料可視化サイト

渋沢栄一伝記資料可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.

GitHub

StoryMap

By preparing a component like the following, it was possible to use it from Next.js.

shibusawa/src/components/Storymap.tsx at main · nakamura196/shibusawa

渋沢栄一伝記資料可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.

GitHub

For TypeScript usage, I also created the following type definition file.

shibusawa/src/global.d.ts at main · nakamura196/shibusawa

渋沢栄一伝記資料可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.

GitHub

I was able to display it as follows.

shibusawa.vercel.app

Timeline

Similar to the StoryMap, I created a component for the timeline as follows.

shibusawa/src/components/Timeline.tsx at main · nakamura196/shibusawa

渋沢栄一伝記資料可視化サイト. Contribute to nakamura196/shibusawa development by creating an account on GitHub.

GitHub

I was able to display it as follows.

shibusawa.vercel.app

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.

www.npmjs.com

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.