Easy-to-make, gorgeous timelines.
TimelineJS is definitely an open-source tool that allows one to build aesthetically rich, interactive timelines. Newbies can cause a schedule using absolutely nothing more compared to a Google spreadsheet, just like the one we useful for the Timeline above. Experts can use their JSON skills generate customized installments, while maintaining TimelineJS’s core functionality.
Guidelines & tricks
- Keep it quick. We suggest devoid of significantly more than 20 slides for a audience to click right through.
- Choose tales which have a powerful chronological narrative. It doesn’t work nicely for tales that want to leap around into the schedule.
- Write each occasion being section of a bigger narrative.
- Consist of activities that build as much as major occurrences — not only the events that are major.
Media sources
TimelineJS can pull in news from a number of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Bing Maps, Wikipedia, SoundCloud, Document Cloud and much more!
Mandela: A Life of Function
Chronology associated with 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 Mobile Phone Company
How ISIS Spread to 10 Nations
Reported Sexual Assault Instances by Texas Educators
A brief history of Wine Across The World
The Mystery of Malaysia Airlines Flight 370
Revolutionary Consumer Interfaces
A Brief History of this Banana Business
The Republican Run-Up
Whitney Houston: 1963-2012
Make a schedule
TimelineJS works on any blog or site. Create your very own in four simple steps.
Having difficulty? Watch our movie, or start to see the help part below.
Make your spreadsheet
Create a brand new bing spreadsheet utilizing our template. You will need to duplicate the template to your very own Bing Drive account by clicking the „Make a duplicate“ button.
Drop dates, text and links to media to the appropriate columns. To get more about dealing with our template, see our help docs.
Do not replace the line headers, do not eliminate any columns, plus don’t keep any rows that are blank your spreadsheet.
Publish towards the internet
Beneath the File menu, select “Publish to the Web.”
Next screen, click on the blue „publish“ switch. When expected, „Are you sure…?“ click okay.
Now, copy the Address that seems in the center websitebuilderawards review of the screen. You are going to make use of this into the alternative.
The next 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 web web browser’s target club. It must look something such as this:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#g >
Overlook the Address that seems within the „publish towards the web“ screen. It had previously been utilized below, but changes to Google imply that you will get a mistake if you utilize it now.
Produce your schedule
Copy/paste spreadsheet Address to the field below to come up with your schedule. (ensure you’ve published the spreadsheet.)
Share your schedule
Share Link
Make use of this to connect straight to your schedule.
If you are embedding on Medium.com or other oembed-aware solutions, simply paste this website website link for a line on it’s own for which you want your schedule to look.
Copy this embed code and paste it on your own web site where you would like your schedule to look (the same as a YouTube video).
Preview Embed
Require assistance? First, make sure you be certain to consider our listing of faqs below. If you are completely new to Timeline JS, you might would also like to view our basic video clip.
If you do not there find an answer, decide to try our help discussion boards or utilize our technology help internet kind. Please be clear together with your concern, consist of a web link to your spreadsheet, and when appropriate, a hyperlink to a web page which will show the presssing issue with which you will need assistance. We could just answer help concerns in English. We act as prompt, but please recognize that we do not have a passionate technology help staff.
Look for a bug? if you’re confident you’ve got discovered a bug, please report it being a GitHub problem. Make sure to add instructions that are detailed just how to replicate the bug. If you are unsure, please focus on the technology support system.
Technical documents
Go further with Timeline:
Faq’s
How can I modify my schedule?
What internet explorer does TimelineJS use?
What exactly are my choices for changing just exactly how my schedule appears?
You will findn’t sufficient choices. I would like more control of the font size/color/etc. Could I alter things utilizing CSS?
How do I categorize or group my occasions?
The sl that is first When making use of the Bing Spreadsheet to configure your schedule, in the event that you place the word name when you look at the kind column, that fall is going to be placed in front, regardless of values into the date columns. Begin to see the Bing Spreadsheet paperwork to learn more.
Am I able to make news pictures clickable?
How do I format text line that is(add, bold, italics)?
tags to generate line breaks.
Just how do I enter BCE times?
How do you produce really ancient times?
Who are able to access the information in my own Google spreadsheet?
Privacy is essential if you ask me. Just Just How can I make use of TimelineJS?
Will my spreadsheet get acquired by the search engines?
Am I able to utilize TimelineJS with WordPress?
Is TimelineJS free for commercial use?
Storytelling Tools
We develop 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 audio.
The Northwestern University Knight Lab is group of technologists and reporters working at advancing press innovation through research and experimentation.