SmartFunnyCool

Writing about code

Getting A Date with Wolfram|Alpha Part II: Creating a vis.js Timeline


Last time I wrote about working with the Wolfram|Alpha API I was strugly to parse dates and store them in a meaningful way. I had hoped that the Ruby wolfram-alpha gem could be coaxed into telling me more information about the API query. But this was difficult.

Wolfram|Alpha Dates

Recall that the typical format for a date returned by the Wolfram|Alpha API is:

"release date | July 7, 1987"

or

"date | Thursday, June 18, 1812  to  Saturday, December 24, 1814"

or

"date of birth | Thursday, August 27, 1908 (107 years ago)",
"date of death | Monday, January 22, 1973 (age: 64 years)" 

The first format is the result of asking Wolfram|Alpha about an event (the release of this album) while the second is the response for "War of 1812" and the third for "Lyndon Johnson." To handle these responses I glued a regular expression to some Ruby string methods to get this Frankenstein expression:

date = "date | Thursday, June 18, 1812  to  Saturday, December 24, 1814"  
date.scan(/\|(.[^\(]*)/).flatten.first.split(" to ")  

(I also took note of whether or not the beginning of the string contained the substring "birth" indicating the the query was about a human.)

Then I was able to call the DateTime.parse method on the resulting string and retreive a DateTime object from the query. I then created an Event class that stored the name of the query, the start time (the first date), and the end time (the second date), if there was one. I also included a boolean to keep track of whether the object represented a human.

So with just a little bit of regex I could turn the results of a Wolfram|Alpha API call into a ruby object that I could incorporate into a rails project.

Displaying a Timeline with Vis.js

While it's neat to be able to store ruby DateTime objects, it's even nice to be able to display them in a nice JavaScript timeline. Luckily, vis.js provides a great library for creating timeline data visualizations. I will walk through how to use the library but first a snapshot of the finished applet:

Wonderful! Now a walkthrough to making a vis.js timeline.

Add The vis.js Library to Your Project

In addition to including jQuery in my project I also included a link to the vis.js CDN in my HTML file

  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.13.0/vis.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.13.0/vis.min.js"></script>

Create a container for the timeline

I then created a an empty div to place the timeline.

 <div id="results"></div>

Make sure you include an ID tag so that you can reference the div in your JavaScript file.

Create the Timeline with your Data

Then in the JavaScript file that is called on to construct the timeline include the following:

// Find the container for the timeline in your HTML
var container = document.getElementById('results');

// Import your data
// I gave human beings an 'end' field of the current day if they are still alive
var items = new vis.DataSet([  
  {id: 1, content: "Norbit", start: '2007-02-09'},
  {id: 2, content: "The Matrix", start: '1999-03-31'},
  {id: 3, content: "Justin Bieber", start: '1994-03-01 ', end: '2016-02-04'}
]);

// Configuration for the Timeline
// I added a zoomMin so that if a user only enters one date it is possible to see the surrounding months for context
var options = {zoomMin: 10000000000};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);  

I added some ERB logic to the creation of the dataset so that my program can dynamically generate the timeline but the code above worked to display a timeline. The vis.js library allows for the timeline to be dynamically zoomable with no added configuration. Now whenever Stephen Wolfram and I want, we can grab a few dates.

Share this post: