A Practical Timeline for Streamlit

Rob van Zoest
Level Up Coding
Published in
3 min readFeb 10, 2021

--

The details you need to create a package for a Streamlit component. An example for a timeline visualization!

Streamlit is a Python library that let’s you build and share data apps in a fast way. You can turn data scripts into shareable web apps, with no front-end experience required.

TimelineJS is an open-source JavaScript tool that enables anyone to build visually rich, interactive timelines. It is a project from the Northwestern University Knight Lab.

Why?

By wrapping the one into the other, it will be easy to create a timeline for everyone. Streamlit has specially developed the component structure for this purpose. The JavaScript and HTML code can be wrapped into a Python
package that can be easily rendered in any Streamlit app.

Understanding TimelineJS

TimelineJS has the option to feed it Google spreadsheets. To be able to write code to dynamically create or update the timeline we will load JSON into the timeline tool. You have to follow the JSON-format. Below an example:

--

--

Founder @ innerdoc.com | NLP Expert-Engineer-Enthusiast | Writes about how to get value from textual data | linkedin.com/in/robvanzoest/