Technology: Timeline JS
Demo leader: Tianyi Li
Summary:
TimelineJS is one of the open-source storytelling projects by Knight Lab from Northwestern University. The Lab develops easy-to-use information visualization techniques for journalism, storytelling and content on the internet.
Timeline JS is a Javascript-based tool that enables both non-programmers and technical people to build visually rich, interactive timelines. Beginners can create a timeline using a Google spreadsheet, whereas experts can customize and instantiate timeline on their own webpage. TimelineJS can be embedded as iframe on sites or blogs. You can create your own Timeline on their website and embed the URL in an iframe in your own website, or you can integrate Timeline using javascript in your own front-end code.
Advantage:
Timeline JS can be built on their website by modifying given template Google Spreadsheet. The simple API enables non-programmers to use the tool. Once the Google Spreadsheet is published, you do not have to re-publish it when you update the data. It will be automatically updated in your timeline. In addition, it supports media links from many external websites like youtube and twitter. Timeline JS can also be plugged into javascript and html codes for expert programmers, using JSON data input, or even edit their CSS styles to incorporate personalized design.
Possible misuse and Limitation:
I do not see any significant or unique possibility of misuse of this tool. Any tools that embed links and multi-media sources might be misused to embed malicious links that steals user information.
Also, according to the tips and tricks on the website, the optimal number of slides is around 20, so the tool cannot be scaled for big data time series visualization.
Walkthrough:
[OPTION 1] Using their website:
Step1: create your spreadsheet
Build a new Google Spreadsheet using the template given on the website You’ll need to copy the template to your own Google Drive account by clicking the “Make a Copy” button.
Drop dates, text, and links to media into the appropriate columns.
Note: Don’t change the column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet.
Step2: publish the spreadsheet to the web
Under the File menu, select “Publish to the Web.” In the next window, click the blue “publish” button. When asked, “Are you sure…?” click OK. Close the ‘Publish to the web’ window. Copy the URL for your Timeline from the browser’s address bar. It should look something like this: https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#gid=0
Note: Disregard the URL that appears in the “publish to the web” window. It used to be used below, but changes to Google mean that you’ll get an error if you use it now.
Step3: generate your timeline
Copy/paste spreadsheet URL into the box given on the tutorial walkthrough at step3, you will also be able to configure optional settings there. This is to generate your timeline. (Make sure you’ve published the spreadsheet.)
Once you are done, click “enter” (or “return”) on your keyboard
Step4: share your timeline
The step 4 on their web page will give you both a shareable link and a line of code if you want to embed the timeline in an iframe. You can just click on the “Preview” button to test your timeline on the same page, or “Open preview in a new window”.
[OPTION 2] Using javascript
If you want to integrate timeline on your own website, just load Timeline CSS style, javascript library. Then you will be able to create your own timeline either from Google spreadsheet or a JSON file, by constructing a Timeline object using their javascript library. You can also customize the css style.
Example Code:
<html>
<head>
<title>Timeline JS demo</title>
<!-- There are three key things you need to include on your page to embed a timeline: -->
<!-- 1 A link tag loading the Timeline CSS -->
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<!-- 2 A script tag loading the Timeline javascript -->
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
</head>
<body>
<div id='timeline-embed' style="width: 100%; height: 600px"></div>
<!-- 3 A second script tag which creates a Timeline -->
<script type="text/javascript">
// option 1: use google doc
// The TL.Timeline constructor takes at least two arguments:
// the id of the Timeline container (no '#'), and
// the URL to your JSON data file or Google spreadsheet.
// the id must refer to an element "above" this code,
// and the element must have CSS styling to give it width and height
// optionally, a third argument with configuration options can be passed.
// See below for more about options.
function timeline_googleSpreadsheet(){
timeline_GoogleSpreadsheet = new TL.Timeline('timeline-embed','https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml');
}
// option 2: use json
function timeline_json(){
$.getJSON("timeline3.json", function(json){
window.timeline = new TL.Timeline('timeline-embed', json);
})
}
// timeline_json();
// configureing options
function timeline_option(){
var additionalOptions = {
start_at_end: true,
default_bg_color: {r:0, g:0, b:0},
timenav_height: 250
}
timeline_option = new TL.Timeline('timeline-embed','https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml', additionalOptions);
}
// Uncomment any one of the following three lines to try things out:
// timeline_googleSpreadsheet();
// timeline_json();
// timeline_option();
</script>
</body>
</html>
{
"title": {
"media": {
"url": "//www.flickr.com/photos/tm_10001/2310475988/",
"caption": "Whitney Houston performing on her My Love is Your Love Tour in Hamburg.",
"credit": "flickr/<a href='http://www.flickr.com/photos/tm_10001/'>tm_10001</a>"
},
"text": {
"headline": "Whitney Houston<br/> 1963 - 2012",
"text": "<p>Houston's voice caught the imagination of the world propelling her to superstardom at an early age becoming one of the most awarded performers of our time. This is a look into the amazing heights she achieved and her personal struggles with substance abuse and a tumultuous marriage.</p>"
}
},
"events": [
{
"media": {
"url": "{{ static_url }}/img/examples/houston/family.jpg",
"caption": "Houston's mother and Gospel singer, Cissy Houston (left) and cousin Dionne Warwick.",
"credit": "Cissy Houston photo:<a href='http://www.flickr.com/photos/11447043@N00/418180903/'>Tom Marcello</a><br/><a href='http://commons.wikimedia.org/wiki/File%3ADionne_Warwick_television_special_1969.JPG'>Dionne Warwick: CBS Television via Wikimedia Commons</a>"
},
"start_date": {
"month": "8",
"day": "9",
"year": "1963"
},
"text": {
"headline": "A Musical Heritage",
"text": "<p>Born in New Jersey on August 9th, 1963, Houston grew up surrounded by the music business. Her mother is gospel singer Cissy Houston and her cousins are Dee Dee and Dionne Warwick.</p>"
}
},
{
"media": {
"url": "https://youtu.be/fSrO91XO1Ck",
"caption": "",
"credit": "<a href=\"http://unidiscmusic.com\">Unidisc Music</a>"
},
"start_date": {
"year": "1978"
},
"text": {
"headline": "First Recording",
"text": "At the age of 15 Houston was featured on Michael Zager's song, Life's a Party."
}
},
{
"media": {
"url": "https://youtu.be/_gvJCCZzmro",
"caption": "A young poised Whitney Houston in an interview with EbonyJet.",
"credit": "EbonyJet"
},
"start_date": {
"year": "1978"
},
"text": {
"headline": "The Early Years",
"text": "As a teen Houston's credits include background vocals for Jermaine Jackson, Lou Rawls and the Neville Brothers. She also sang on Chaka Khan's, 'I'm Every Woman,' a song which she later remade for the <i>Bodyguard</i> soundtrack which is the biggest selling soundtrack of all time. It sold over 42 million copies worldwide."
}
},
{
"media": {
"url": "https://youtu.be/H7_sqdkaAfo",
"caption": "I'm Every Women as performed by Whitney Houston.",
"credit": "Arista Records"
},
"start_date": {
"year": "1978"
},
"text": {
"headline": "Early Album Credits",
"text": "As a teen Houston's credits include background vocals for Jermaine Jackson, Lou Rawls and the Neville Brothers. She also sang on Chaka Khan's, 'I'm Every Woman,' a song which she later remade for the <i>Bodyguard</i> soundtrack which is the biggest selling soundtrack of all time. It sold over 42 million copies worldwide."
}
},
{
"media": {
"url": "https://youtu.be/A4jGzNm2yPI",
"caption": "Whitney Houston and Clive Davis discussing her discovery and her eponymous first album.",
"credit": "Sony Music Entertainment"
},
"start_date": {
"year": "1983"
},
"text": {
"headline": "Signed",
"text": "Houston is signed to Arista Records after exec Clive Davis sees her performing on stage with her mother in New York."
}
},
{
"media": {
"url": "https://youtu.be/m3-hY-hlhBg",
"caption": "The 'How Will I Know' video showcases the youthful energy that boosted Houston to stardom.",
"credit": "Arista Records Inc."
},
"start_date": {
"year": "1985"
},
"text": {
"headline": "Debut",
"text": "Whitney Houston's self titled first release sold over 12 million copies in the U.S. and included the hit singles 'How Will I Know,' 'You Give Good Love,' 'Saving All My Love For You' and 'Greatest Love of All.'"
}
},
{
"media": {
"url": "https://youtu.be/v0XuiMX1XHg",
"caption": "Dionne Warwick gleefully announces cousin, Whitney Houston, the winner of the Best Female Pop Vocal Performance for the song Saving All My Love.",
"credit": "<a href='http://grammy.org'>The Recording Academy</a>"
},
"start_date": {
"year": "1986"
},
"text": {
"headline": "'The Grammys'",
"text": "In 1986 Houston won her first Grammy for the song Saving All My Love. In total she has won six Grammys, the last of which she won in 1999 for It's Not Right But It's Okay."
}
},
{
"media": {
"url": "https://youtu.be/eH3giaIzONA",
"caption": "I Wanna Dance With Somebody",
"credit": "Arista Records Inc."
},
"start_date": {
"year": "1987"
},
"text": {
"headline": "'Whitney'",
"text": "Multiplatinum second album sells more than 20 million copies worldwide. With 'Whitney', Houston became the first female artist to produce four number 1 singles on one album including \"I Wanna Dance With Somebody,' 'Didn't We Almost Have It All,' 'So Emotional' and 'Where Do Broken Hearts Go.'"
}
},
{
"media": {
"url": "https://youtu.be/96aAx0kxVSA",
"caption": "\"One Moment In Time\" - Theme song to the 1988 Seoul Olympics",
"credit": "Arista Records Inc."
},
"start_date": {
"year": "1988"
},
"text": {
"headline": "\"One Moment In Time\"",
"text": "The artist's fame continues to skyrocket as she records the theme song for the Seoul Olympics, 'One Moment In Time.'"
}
},
{
"media": {
"url": "",
"caption": "",
"credit": ""
},
"start_date": {
"year": "1989"
},
"text": {
"headline": "Bobby Brown",
"text": "Houston and Brown first meet at the Soul Train Music Awards. In an interview with Rolling Stone Magazine, Houston admitted that it was not love at first sight. She turned down Brown's first marriage proposal but eventually fell in love with him."
}
},
{
"media": {
"url": "https://youtu.be/5Fa09teeaqs",
"caption": "CNN looks back at Houston's iconic performance of the national anthem at Superbowl XXV.",
"credit": "CNN"
},
"start_date": {
"year": "1991"
},
"text": {
"headline": "Super Bowl",
"text": "Houston's national anthem performance captures the hearts and minds of Americans ralllying behind soldiers in the Persian Guf War."
}
},
{
"media": {
"url": "https://youtu.be/h9rCobRl-ng",
"caption": "\"Run To You\" from the 1992 \"Bodyguard\" soundtrack..",
"credit": "Arista Records"
},
"start_date": {
"year": "1992"
},
"text": {
"headline": "\"The Bodyguard\"",
"text": "Houston starred opposite Kevin Costner in the box office hit, The Bodyguard. The soundtrack to the movie sold over 44 million copies worldwide garnering 3 Grammy's for the artist."
}
},
{
"media": {
"url": "https://youtu.be/5cDLZqe735k",
"caption": "Bobby Brown performing \"My Prerogrative,\" from his \"Don't be Cruel\" solo album. Bobby Brown first became famous with the R&B group, New Edition.",
"credit": ""
},
"start_date": {
"year": "1992"
},
"text": {
"headline": "Married Life",
"text": "<p>After three years of courtship, Houston marries New Edition singer Bobby Brown. Their only child Bobbi Kristina Brown was born in 1993.</p><p>In 2003 Brown was charged with domestic violence after police responded to a domestic violence call. Houston and Brown were featured in the reality show, \"Being bobby Brown,\" and divorced in 2007.</p>"
}
},
{
"media": {
"url": "//upload.wikimedia.org/wikipedia/commons/d/dd/ABC_-_Good_Morning_America_-_Diane_Sawyer.jpg",
"caption": "Diane Sawyer ",
"credit": "flickr/<a href='http://www.flickr.com/photos/23843757@N00/194521206/'>Amanda Benham</a>"
},
"start_date": {
"year": "2002"
},
"text": {
"headline": "Crack is Whack",
"text": "<p>Houston first publicly admitted to drug use in an interview with Diane Sawyer. The singer coined the term \"Crack is Whack,\" saying that she only used more expensive drugs.</p>"
}
},
{
"media": {
"url": "https://youtu.be/KLk6mt8FMR0",
"caption": "Addiction expert, Dr. Drew, talks about Whitney's death and her struggle with addiction.",
"credit": "CNN"
},
"start_date": {
"year": "2004"
},
"text": {
"headline": "Rehab",
"text": "<p>Houston entered rehab several times beginning in 2004. She declared herself drug free in an interview with Oprah Winfrey in 2009 but returned to rehab in 2011.</p>"
}
},
{
"media": {
"url": "",
"caption": "",
"credit": ""
},
"start_date": {
"year": "2005"
},
"text": {
"headline": "Being Bobby Brown",
"text": "<p>Being Bobby Brown was a reality show starring Brown and wife Whitney Houston. Houston refused to sign for a second season. A clip of her telling Brown to \"Kiss my ass,\" became a running gag on The Soup.</p>"
}
},
{
"media": {
"url": "",
"caption": "",
"credit": ""
},
"start_date": {
"year": "2010"
},
"text": {
"headline": "A Rocky Comeback",
"text": "<p>Houston's comeback tour is cut short due to a diminished voice damaged by years of smoking. She was reportedly devastated at her inability to perform like her old self.</p>"
}
},
{
"media": {
"url": "//twitter.com/Blavity/status/851872780949889024",
"caption": "Houston, performing on Good Morning America in 2009.",
"credit": "<a href='http://commons.wikimedia.org/wiki/File%3AFlickr_Whitney_Houston_performing_on_GMA_2009_4.jpg'>Asterio Tecson</a> via Wikimedia"
},
"start_date": {
"month": "2",
"day": "11",
"year": "2012"
},
"text": {
"headline": "Whitney Houston<br/> 1963-2012",
"text": "<p>Houston, 48, was discovered dead at the Beverly Hilton Hotel on on Feb. 11, 2012. She is survived by her daughter, Bobbi Kristina Brown, and mother, Cissy Houston.</p>"
}
}
]
}
