streamlit_timelineを使って、streamlitで年表を作ってみた

はじめに

Pythonの簡易Webアプリ作成ツールのstreamlitに、Timeline.jsと呼ばれる年表を作るJavaScriptのライブラリを組み込んだ、streamlit-timelineというライブラリがあります。

このTimelineの使い方を簡単に説明します。

インストール

streamlitをまだインストールしていない場合

pip install streamlit

steamlit_timlineをインストール

pip install streamlit_timeline

タイムラインの作り方

# Streamlit Timeline Component Example

import streamlit as st
from streamlit_timeline import timeline


# use full page width
st.set_page_config(page_title="Timeline Example", layout="wide")

# load data
with open('example.json', "r") as f:
    data = f.read()

# render timeline
timeline(data, height=800)

このexample.jsonは、 https://timeline.knightlab.com/docs/json-format.html のフォーマットに従って書きます。

{
  "title": {
    "media": {
      "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/The_Fabs.JPG/150px-The_Fabs.JPG"
    },
    "text": {
      "headline": "The Beatles",
      "text": "<p>The Beatles - Discography</p>",
    }
  },
  "events": [
    {
      "media": {
      "url": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/PleasePleaseMe_audio_cover.jpg/150px-PleasePleaseMe_audio_cover.jpg"
    },
    "start_date": {
      "year": 1963,
      "month": 1,
    },
    "text":{
      "headline":"<a href="https://en.wikipedia.org/wiki/Please_Please_Me">Please Please Me</a>",
      "text":""
    }
  },
...

また、jsonファイルを読み込むだけでなく、辞書型のオブジェクトを json.dumps(dic) として、timelineの引数とする方法でも、実行が可能なので、動的にタイムラインを作りたい場合は、その方法のほうが良いです。

以下のURLに、動作のデモページを作っています。

こんな感じのインタラクティブなタイムラインが出来上がります。