Easy-to-make, gorgeous timelines.
TimelineJS is definitely an open-source tool that permits one to build visually rich, interactive timelines. Newbies can make a schedule making use of absolutely nothing more than a Google spreadsheet, like the one we utilized for the Timeline above. Specialists may use their JSON skills generate customized installments, while maintaining TimelineJS’s core functionality.
Guidelines & tricks
- Ensure that it it is quick. We advice devoid of a lot more than 20 slides for the audience to click right through.
- Choose tales which have a good chronological narrative. It generally does not work very well for tales that want to leap around into the schedule.
- Write each event as being a right component of a bigger narrative.
- Consist of occasions that develop as much as major occurrences — not only the events that are major.
Media sources
TimelineJS can pull in news from many different sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Bing Maps, Wikipedia, SoundCloud, Document Cloud and much more!
Mandela: a full Life of Function
Chronology regarding the French Presidential Race
Historic Fall at University of Missouri
North Korea’s Nuclear Aspirations
Bulger on test
The Decline of IRS Nonprofit Legislation
Aurora, Colorado Film Theater Shooting
The Collapse of Microsoft and Nokia’s Cellphone Company
How ISIS Spread to 10 Nations
Reported Sexual Assault Situations by Texas Educators
A brief history of Wine Throughout The World
The Mystery of Malaysia Airlines Flight 370
Revolutionary Consumer Interfaces
A Brief History for the Banana Company
The Republican Run-Up
Whitney Houston: 1963-2012
Make a schedule
TimelineJS deals with any website or web log. Create your very own in four steps that are easy.
Having difficulty? View our video clip, or look at help part below.
Make your spreadsheet
Develop a new google spreadsheet making use of our template. You will need to duplicate the template to your very own Google Drive account by pressing the “Make a duplicate” button.
Drop dates, text and links to news in to the columns that are appropriate. For lots more about working together with our template, see our help docs.
Do not replace the line headers, do not remove any columns, and do not keep any blank rows in your spreadsheet.
Publish towards the web
Underneath the File menu, select “Publish towards the Web.”
The blue “publish” button in the next window, click. When expected, “Are you sure…?” click okay.
Now, copy the Address that appears in the center of the screen. You’ll utilize this when you look at the step that is next.
Listed here changed at the time of 18 2017 july!
Near the ‘Publish to your window that is web. Copy the Address for the schedule through the web browser’s target club. It must look something such as this:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#g >
Dismiss the Address that seems when you look at the “publish towards the web” screen. It had previously been utilized below, but changes to Bing signify you’ll receive a mistake it now if you use.
Produce your schedule
Copy/paste spreadsheet Address to the field below to create your timeline. (ensure you’ve published the spreadsheet.)
Share your schedule
Share Link
Utilize this to connect right to your schedule.
If you should be embedding on Medium.com or other oembed-aware solutions, simply paste this link for a line on it’s own for which you want your timeline to show up.
Copy this embed rule and paste it in your site in which you want your schedule to seem (similar to a YouTube video).
Preview Embed
Require assistance? First, make sure you be certain to consider our directory of faqs below. If you should be completely new to Timeline JS, you might would also like to weebly look at our basic video clip.
If you do not there find an answer, decide to try our help discussion boards or utilize our technology help web type. Please be clear along with your question, consist of a hyperlink to your spreadsheet, if appropriate, a hyperlink to a typical page which will show the presssing problem with which you’ll need assistance. We could just answer help concerns in English. We play the role of prompt, but please realize that we would not have a passionate technology help staff.
Locate a bug? if you’re confident you have got discovered a bug, please report it as being a GitHub problem. Make sure to add detail by detail directions on just how to replicate the bug. If you should be unsure, please focus on the tech support system.
Technical paperwork
Go further with Timeline:
Faqs
How do you modify my schedule?
Just just exactly What browsers does TimelineJS make use of?
What exactly are my alternatives for changing exactly how my schedule looks?
You can findn’t sufficient choices. I would like more control of the font size/color/etc. Am I able to alter things making use of CSS?
How to categorize or cluster my occasions?
The sl that is first When utilizing the Bing Spreadsheet to configure your timeline, in the event that you place the word name into the kind column, that fall would be placed in front, whatever the values within the date columns. Start to see the Bing Spreadsheet paperwork to learn more.
Can I make news pictures clickable?
How can I format text line that is(add, bold, italics)?
tags to create line breaks.
Just how do I enter BCE times?
How can I produce extremely dates that are ancient?
Who is able to access the information in my own Google spreadsheet?
Privacy is vital if you ask me. Just Just How can I utilize TimelineJS?
Will my spreadsheet get found by the search engines?
May I utilize TimelineJS with WordPress?
Is TimelineJS free for commercial usage?
Storytelling Tools
We build easy-to-use tools that will help you tell better tales.
Timeline JS
Easy-to-make, gorgeous timelines.
StoryMap JS
Maps that tell stories.
Juxtapose JS
Easy-to-make framework evaluations.
Soundcite JS
Seamless inline sound.
The Northwestern University Knight Lab is just an united group of technologists and reporters working at advancing press innovation through exploration and experimentation.
