Timeline js что это
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet. Experts can use their JSON skills to create custom installations while keeping TimelineJS’s core functionality.
Learn more
Get up and running in minutes. Learn how to:
Getting stuck?
Technical documentation
Go further with Timeline:
Tips & tricks
- Keep it short. We recommend not having more than 20 slides for a reader to click through.
- Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
- Write each event as a part of a larger narrative.
- Include events that build up to major occurrences — not just the major events.
Need help?
First, please be sure to look at our list of frequently asked questions.
If you don’t find an answer there, we offer tech support via email or a web form. We try to be prompt, but please understand that we do not have a dedicated tech support staff.
Find a bug?
The Northwestern University Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
Using Timeline JS
How to create a timeline with Timeline JS and publish it to your Omeka website
Lesson Level: Beginner
alt=»Creative Commons License» width=»» />
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
About
Last Updated 20 July 2018
Created by Wendy Jordan | Updated by Chelsea Smith-Antonides
Table of Contents
What is Timeline?
Timeline is exactly what it says: it is a tool that allows you to create a web timeline and include it on your website. It is created by Knightlab, and is located at https://timeline.knightlab.com/.
Making a Timeline
- After going to the TimelineJS website, select the Make a Timeline button. This navigates you to the step-by-step instructions on using the website to make a timeline.
- First you need to Get the Spreadsheet Template. You will be asked to Make a Copy of the Timeline template spreadsheet to your Google Drive.
- The template spreadsheet will automatically open. You now have the ability to fill in your information for your timeline.
- DO NOT change any settings in row 1.
- Each row from 2 on will be a new slide in your timeline. If you need more slides, simply select ADD (blank) more rows at bottom. This is located on the bottom left of your timeline chart:
- The columns across the top tell you what information to place:
- Beginning Year/Month/Time and Ending Year/Month/Date/Time (the ending date is optional).
- Headline is the title that will be shown for that particular row’s slide.
- Text is the body text that will be seen.
- Media is the column to include a link to a picture/video you would like to be shown on the timeline.
- Media credit gives credit to where the media came from, and
- Media caption is the caption that will appear directly under the media (in smaller text than the body text).
- The example given, #333333, is a color hex code that represents a specific color. For example, #333333 is a light gray. These hex triplets can be found all around the web. Look around for a neutral color so that your information is easily readable. Bright colors can distract from your information!
- You can also use an image for your background. Place the url of an image Column R, Row 4.
- Here I inserted an image of a flower in Column R Let’s see how it looks below!
- This image is not too distracting, and that’s exactly what you want to look for if you utilize images.
Previewing Your Timeline.
- After filling out your timeline spreadsheet, copy the URL of the page.
- Navigate back to the Knightlab Timeline page. Paste your URL next to Step 3 in the Google Spreadsheet URL box.
Next to Step 4 on the timeline website. Your personalized link and HTML for your timeline has been generated. Click on Preview to preview your timeline below.
Note: If you make any changes to your timeline, they will automatically save and update. Just click on Preview again to regenerate your timeline with the changes.
TimelineJS: An interactive, JavaScript timeline building tool
Matteo Ianeselli. Modified by Opensource.com. CC-BY-3.0.
TimelineJS 3 is an open source storytelling tool that anyone can use to create visually rich, interactive timelines to post on their websites. To get started, simply click “Make a Timeline” on the homepage and follow the easy step-by-step instructions.
TimelineJS was developed at Northwestern University’s KnightLab in Evanston, Illinois. KnightLab is a community of designers, developers, students, and educators who work on experiments designed to push journalism into new spaces. TimelineJS has been used by more than 250,000 people, according to its website, to tell stories viewed millions of times. And TimelineJS3 is available in more than 60 languages.
Joe Germuska, the “chief nerd” who runs KnightLab’s technology, professional staff, and student fellows, explains, «TimelineJS was originally developed by Northwestern professor Zach Wise. He assigned his students a task to tell stories in a timeline format, only to find that none of the free available tools were as good as he thought they could be. KnightLab funded some of his time to develop the tool in 2012. Near the end of that year, I joined the lab, and among my early tasks was to bring TimelineJS in as a fully supported project of the lab. The next year, I helped Zach with a rewrite to address some issues. Along the way, many students have contributed. Interestingly, a group of students from Victoria University in Wellington, New Zealand, worked on TimelineJS (and some of our other tools) as part of a class project in 2016.»
«In general, we designed TimelineJS to make it easy for non-technical people to tell rich, dynamic stories on the web in the context of events in time.”
Users create timelines by adding content into a Google spreadsheet. KnightLab provides a downloadable template that can be edited to create custom timelines. Experts can use their JSON skills to create custom installations while keeping TimelineJS’s core functionality.
This easy-to-follow Vimeo video shows how to get started with TimelineJS, and I used it myself to create my first timeline.
Open sourcing the Adirondacks
Reid Larson, research and scholarly communication librarian at Hamilton College in Clinton, New York, began searching for ways to combine open data and visualization to chronicle the history of Essex County (a county in northern New York that makes up part of the Adirondacks), in the 1990s, when he was the director of the Essex County Historical Society/Adirondack History Center Museum.
«I wanted to take all the open data available on the history of Essex County and be able to present it to people visually. Most importantly, I wanted to make sure that the data would be available for use even if the applications used to present it are no longer available or supported,» Larson explains.
More Great Content
Now at Hamilton College, Larson has found TimelineJS to be the ideal open source program to do just what he wanted: Chronicle and present a visually appealing timeline of selected places.
«It was a professor who was working on a project that required a solution such as Timeline, and after researching the possibilities, I started using Timeline for that project and subsequent projects,» Larson adds.
TimelineJS can be used via a web browser, or the source code can be downloaded from GitHub for local use.
«I’ve been using the browser version, but I push it to the limits to see how far I can go with it, such as adding my own HTML tags. I want to fully understand it so that I can educate the students and faculty at Hamilton College on its uses,» Larson says.
An open source Eagle Scout project
Not only has Larson used TimelineJS for collegiate purposes, but his son, Erik, created an interactive historical website for his Eagle Scout project in 2017 using WordPress. The project is a chronicle of places in Waterville, New York, just south of Clinton, in Oneida County. Erik explains that he wants what he started to expand beyond the 36 places in Waterville. «The site is an experiment in online community building,» Erik’s website reads.
Larson says he did a lot of the “tech work” on the project so that Erik could concentrate on content. The site was created with Omeka, an open source web publishing platform for sharing digital collections and creating media-rich online exhibits, and Curatescape, a framework for the open source Omeka CMS.
Larson explains that a key feature of TimelineJS is that it uses Google Sheets to store and organize the data used in the timeline. «Google Sheets is a good structure for organizing data simply, and that data will be available even if TimelineJS becomes unavailable in the future.»
Larson says that he prefers using ArcGIS over KnightLab’s StoryMap because it uses spreadsheets to store content, whereas StoryMap does not. Larson is looking forward to integrating augmented reality into his projects in the future.
Create your own open source timeline
I plan on using TimelineJS to create interactive content for the Development and Alumni Relations department at Clarkson University, where I am the development communications specialist. To practice with working with it, I created a simple timeline of the articles I’ve written for Opensource.com:
As Reid Larson stated, it is very easy to use and the results are quite satisfactory. I was able to get a working timeline created and posted to my WordPress site in a matter of minutes. I used media that I had already uploaded to my Media Library in WordPress and simply copied the image address. I typed in the dates, locations, and information in the other cells and used “publish to web” under “file” in the Google spreadsheet. That produced a link and embed code. I created a new post in my WordPress site and pasted in the embed code, and the timeline was live and working.
Of course, there is more customization I need to do, but I was able to get it working quickly and easily, much as Reid said it would.
I will continue experimenting with TimelineJS on my own site, and when I get more comfortable with it, I’ll use it for my professional projects and try out the other apps that KnightLab has created for interactive, visually appealing storytelling.
Timeline js что это
Table of Contents
Document history with TimelineJS
There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. Create timelines that are at the same time beautiful and intuitive for users
TimelineJS is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and TimelineJS will format it to fit perfectly. More media types will be supported in the future.
Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.
Add it to your site
Place the embed code where you want the timeline to show in the <body> of your site. See Config Options for a full list of what you can set in the config.
Using a method (advanced)
You could also initialize a new timeline using the createStoryJS method after storyjs-embed.js has been loaded
Here’s a simple example:
Loading the files
If you like, you may load TimelineJS from the KnightLab’s CDN. The examples above demonstrate how to do this using story-embed.js , which is the simplest way to set up a Timeline of your own.
If for some reason you need more fine-grained control over your timeline, load the javascript and CSS files separately. We recommend that you load them from our CDN.
If you need to use the files on an HTTPS server, you can change the beginning of the url from http://cdn.knightlab.com/libs/timeline/ to https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/
If you need to serve copies of the files from your own server, use the entire contents of the "/build/" directory of our GitHub repository. If you use a local copy of story-embed.js it should automatically load the other Timeline resources from your server.
Here are some of the options you can set in the config.
source Should be either the path to the JSON resource to load, or a JavaScript object corresponding to the Timeline model.
Here is an example using a data object:
If source is a string, we will try to automatically recognize resources that are Twitter searches, Google Spreadsheets or Storify stories. Failing that, we assume the source is either JSON or JSONP. If string matches on .jsonp , we will treat it as JSONP, otherwise, we will append ?callback=onJSONP_Data . See more details below.
lang Localization default is en English Languages available:
- af Afrikaans
- ar Arabic
- hy Armenian
- eu Basque
- be Belarusian
- bg Bulgarian
- ca Catalan
- zh-cn Chinese
- hr Croatian / Hrvatski
- cz Czech
- da Danish
- nl Dutch
- en English
- en-24hr English (24-hour time)
- eo Esperanto
- et Estonian
- fo Faroese
- fa Farsi
- fi Finnish
- fr French
- fy Frisian
- gl Galician
- ka Georgian
- de German / Deutsch
- el Greek
- he Hebrew
- hi Hindi
- hu Hungarian
- is Icelandic
- id Indonesian
- ga Irish
- it Italian
- ja Japanese
- ko Korean
- lv Latvian
- lt Lithuanian
- lb Luxembourgish
- ms Malay
- ne Nepali
- no Norwegian
- pl Polish
- pt Portuguese
- pt-br Portuguese (Brazilian)
- ro Romanian
- rm Romansh
- ru Russian
- sr-cy Serbian — Cyrillic
- sr Serbian — Latin
- si Sinhalese
- sk Slovak
- sl Slovenian
- es Spanish
- sv Swedish
- tl Tagalog
- ta Tamil
- zh-tw Taiwanese
- te Telugu
- th Thai
- tr Turkish
- uk Ukrainian
Help us add more. Grab a copy of a language file and replace it with your language Example language file and find your language’s two letter code here
start_at_end set to true to start the timeline on the last date. default is false
start_at_slide You can tell TimelineJS to start at a specific slide number default is 0
Start Zoom Adjust
start_zoom_adjust This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out. default is 0
hash_bookmark set to true to allow bookmarking slides using the hash tag default is false
debug Will log events etc to the console. default is false
Map Style Types
Due to recent changes to the Google Maps API, you need a API Key in order to use custom map types. gmap_key: required in order to use maptype
- toner
- toner-lines
- toner-labels
- watercolor
- sterrain
- ROADMAP
- TERRAIN
- HYBRID
- SATELLITE
- AbrilFatface-Average Abril Fatface & Average
- Arvo-PTSans Arvo & PT Sans
- Bevan-PotanoSans Bevan & Potano Sans
- BreeSerif-OpenSans Bree Serif & Open Sans
- DroidSerif-DroidSans Droid Serif & Droid Sans
- Georgia-Helvetica Georgia & Helvetica Neue
- Lekton-Molengo Lekton & Molengo
- Merriweather-NewsCycle Merriweather & News Cycle
- NewsCycle-Merriweather News Cycle & Merriweather
- NixieOne-Ledger Nixie One & Ledger
- Pacifico-Arimo Pacifico & Arimo
- PlayfairDisplay-Muli Playfair Display & Muli
- PoiretOne-Molengo Poiret One & Molengo
- PTSerif-PTSans PT Serif & PT Sans
- PT PT Sans & PT Narrow & PT Serif
- Rancho-Gudea Rancho & Gudea
- SansitaOne-Kameron Sansita One & Kameron
- Or make your own
Font Combination Preview:
JSON is the native data format for TimelineJS.
Remember, JSON is picky. A misplaced comma or quotation mark can prevent the timeline from loading properly.
Here is the full model:
Timeline can use a variation of JSONP to allow you to easily load data across different domains.
To allow this to happen, the file must end with the extension .jsonp
Here is the full model:
If you don’t want to mess with JSON, fire up Google Docs and build your timeline in a spreadsheet. It’s as simple as dropping a date, text, and links into the appropriate columns in TimelineJS’s template.
There are only a couple things you need to know in order to create a timeline using Google Docs:
- Make the spreadsheet public:
Google Docs are automatically set to private but the spreadsheet must be public.
- Publish to the Web
Under the File menu, select “Publish to the Web.”
- Copy/paste the Web URL into your TimelineJS HTML file
After you publish the spreadsheet, Google Docs will generate a link to the file. Copy the link for the Web Page option (as opposed to PDF, HTML, XLS, etc.), then paste it into the timeline’s HTML file (see Add it to your site )
Support for Storify is still in its early stages. It works though. Just paste a link to the storify story as the source.
Included in the zip file is a kitchen sink example. This timeline shows how to incorporate the different media types from different services like Twitter, YouTube, Flickr, Instagram, TwitPic, Wikipedia, Dailymotion, SoundCloud and Vimeo.
Just copy and paste the address of the media from the browser bar into the media parameter. TimelineJS will auto-magically pull in the media via their api and format it.