Easy-to-make, stunning timelines.
TimelineJS is definitely an open-source tool that permits you to build aesthetically rich, interactive timelines. Newbies can cause a timeline making use of absolutely nothing more than a Google spreadsheet, just like the one we employed for the Timeline above. Experts may use their JSON skills generate customized installations, while maintaining TimelineJS’s core functionality.
Guidelines & tricks
- Keep it brief. We advice lacking a lot more than 20 slides for a reader to click right through.
- Choose tales which have a stronger narrative that is chronological. It generally does not work very well for tales that want to leap around when you look at the schedule.
- Write each event as being section of a bigger narrative.
- Add activities that develop as much as major occurrences — not only the major occasions.
Media sources
TimelineJS can pull in news from many different sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google 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 Business
How ISIS Spread to 10 Nations
Reported Sexual Assault Instances by Texas Educators
A brief history of Wine All Over The World
The Mystery of Malaysia Airlines Flight 370
Revolutionary Consumer Interfaces
A history that is brief of Banana Company
The Republican Run-Up
Whitney Houston: 1963-2012
Make a schedule
TimelineJS deals with any blog or site. Create your very very own in four simple steps.
Having problems? View hyperlink our video clip, or begin to see the help part below.
Make your spreadsheet
Develop A google that is new spreadsheet our template. You will need to duplicate the template to your very own Bing Drive account by pressing the «Make a duplicate» button.
Drop dates, text and links to news to the columns that are appropriate. For lots more about dealing with our template, see our help docs.
Never replace the line headers, never eliminate any columns, plus don’t keep any blank rows in your spreadsheet.
Publish towards the web
Beneath the File menu, select “Publish into the Web.”
Within the next window, click on the blue «publish» switch. When expected, «Are you sure…?» click okay.
Now, copy the Address that appears in the exact middle of the screen. You are going to utilize this when you look at the step that is next.
The next changed at the time of 18 July 2017!
Near the ‘Publish into the web’ screen. Copy the Address for the schedule through the web browser’s target club. It will look something such as this:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#g >
Dismiss the URL that seems into the «publish towards the web» window. It had previously been utilized below, but changes to Bing imply that you’ll receive a mistake if you utilize it now.
Create your timeline
Copy/paste spreadsheet Address in to the field below to come up with your timeline. (be sure you’ve posted the spreadsheet.)
Share your schedule
Share Link
Make use of this to connect right to your schedule.
If you are embedding on Medium.com or any other oembed-aware solutions, simply paste this website website link on a line you want your timeline to appear by itself where.
Copy this embed rule and paste it on the web web site for which you want your schedule to seem (the same as a YouTube video).
Preview Embed
Require assistance? First, be sure to be certain to check out our variety of faqs below. If you are new to Timeline JS, you might would also like to 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 internet kind. Please be clear together with your concern, consist of a hyperlink to your spreadsheet, and in case appropriate, a hyperlink to a full page which will show the presssing problem with which you may need help. We could just answer support concerns in English. We play the role of prompt, but please realize that we would not have a separate technology help staff.
Locate a bug? if you’re confident you have found a bug, please report it being a GitHub problem. Make sure to add instructions that are detailed how exactly to reproduce the bug. If you should be unsure, please focus on the technology support system.
Technical paperwork
Go further with Timeline:
Faqs
How do you edit my timeline?
Exactly exactly just What internet explorer does TimelineJS make use of?
What exactly are my alternatives for changing exactly exactly how my schedule appears?
You will findn’t sufficient choices. I want more control of the font size/color/etc. May I alter things making use of CSS?
How do I categorize or cluster 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 within the kind column, that slide are going to be placed at the front end, no matter what the values within the date columns. Look at Bing Spreadsheet documents to learn more.
Can I make news pictures clickable?
How do I format text line that is(add, bold, italics)?
tags to produce line breaks.
How can I enter BCE times?
How can I produce really ancient times?
Who are able to access the information during my Google spreadsheet?
Privacy is vital for me. Just Exactly How must I make use of TimelineJS?
Will my spreadsheet get found by the search engines?
May I use TimelineJS with WordPress?
Is TimelineJS free for commercial usage?
Storytelling Tools
We develop easy-to-use tools that will help you tell better tales.
Timeline JS
Easy-to-make, stunning 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 an united group of technologists and reporters working at advancing press innovation through exploration and experimentation.