towards the Republic



Between the late 19th century and early 20th century, China experienced a series of dynamic changes that led to the full collapsation of the Qing dynasty, and the founding of the Republic of China. Internal corruption and external wars had devoured the huge empire. In these turbulent decades, rulers, gentry, farmers, and scholars all tried to seek new hope in the darkness. The struggle of power, fame, and wealth along with the unpredictable change of history had made this special period full of complexity.

This interactive timeline tried to display the most influential events from 1861 to 1971 China, helping us understand more clearly the forces in this social transformation.


In this project, I used TimelineJS, a free open-source tool to create my visualization. It enables users to build interactive timelines with external media, such as images, videos, and text. It also supports Twitter, Youtube, and other media platforms.


During the information collection progress, I searched the keyword towards the republic and the Rise of the Republic of China and found that Wikipedia has done very impressive work in sorting out the events with a brief explanation during the late 19th century and early 20th century.

In order to generate my project, I used a google spreadsheet template provided by TimelineJS, I made a copy of KnightLab TimelineJS template  and saved it to my Google Drive, as the sheet has been modified into the proper format supported by the TimelineJS. 

   Googlesheet for TimelineJS

After completing filling the google sheet with the event date, name, and description, I went on to add images and background to each of the slides. After reviewing my work on the TimelineJS, I realized that many of my images were not showing up, so I went back again and replaced those corrupted image links. Some of my background image colors were interfering with the text, making the user hard to read therefore I switched to a more transparent version of the image instead.

Once I completed my spreadsheet, I then copied and pasted the URL directly from my web browser into the timeline link generator on the TimeLine JS site and published my work on the site.


Published on the TimelineJS

The TimelineJS demonstrated my work as a slideshow on a horizontal timeline, each event was displayed on the timeline in a small box and the viewer was able to expand the content by simply clicking the content title.  

Result and Reflection

My Timeline started in 1861 all the way to 1917, where the most dramatic events were occurring in China. These series of events lead to a major turning point to the society of modern China.

As for the tool TimelineJS, it is a very handy tool in these types of projects. Understanding how to download and fill the template was straightforward. TimelineJS has the ability to assist the author to visualize a sequence of events in any order, probably also a very powerful tool in novel writing or film creation. However, there were some constraints that limited the design. I was not able to resize the image, change the transparency of the background image, adding multiple images /media to each of the slides. As each of the events was very informative it would be better to include more media that would greatly help the reader to understand better. 

If I were to redo this project, I would probably visualize my timeline based on the perspective of a specific character, the same way as the Game of Thrones novel. The audience would probably be more interested in understanding and establishing bonds with a character, thus creating a sense of involvement rather than reading a story from a subjective view.

For example, I would start my story with the fallen of Xianfeng Emperor, and his successor Tongzhi Emperor was just 5 years old and Xianfeng Emperor’s wife Empress Dowager Cixi gradually wiped out the eight regents assigned by Xianfeng Emperor to assist the young emperor, and eventually came in power. Then from another perspective, I would introduce Li Hongzhang, one of the famous Late Qing politicians under the rule of Cixi, and elaborate on his generally pro-modern stance and importance as a negotiator during a conflicting era.