Digital Tools: Timeline & Map

Story Map


These tools bring back memories from past digital courses like DS106 and Intro to Digital Studies. It was cool getting familiar with them again, but I was a bit disappointed that I could not embed my work on my blog (I even installed the iframe plugin). Other than that small issue, it was pretty straight forward and easy to use as I remembered.

Both my map and timeline are based off the captures/escapes of the notorious drug kingpin, “El Chapo”. Each tool allowed me to add the necessary text and media to present my topic visually and clear.

For my groups project, I think we want to incorporate similar elements on our website, such as a timeline, maps and good quality photos with clear and precise text. Our aim to have a nice clean layout with no clutter.


Using StoryMapJS and TimelineJS

I decided to have a little bit of fun with these tools by using information from my historic preservation thesis on gender and Virginia’s equine landscape. While I don’t think StoryMapJS and TimelineJS are the best tools for analyzing and sharing my research, I enjoyed experimenting.

I liked several aspects of StoryMapJS, including its ability to show locations in relation to each other and its integration of media with text and maps. However, I found the tool to be limited in arranging information about a concept as abstract as gender. Since it organizes the locations in a chronology, I think it would work better as a timeline. I ultimately ended up organizing my information about the horse farms in a manner that shows the male-run farms before the female-run ones. Conveniently, this method forms a clean loop on the map. Had I tried to arrange the farms chronologically, the map would have been more confusing, especially if I added more farms. I also don’t like how the map appears on my blog.

I found TimelineJS to be a better tool for creating a history of some of the women in my study’s racing accomplishments. However, I would have had to add considerably more information about men in racing, U.S. history, and gender roles to develop a meaningful context for these seemingly isolated events. I like the aesthetics of TimelineJS because they are clean, straightforward, and the colors, backgrounds, and media can be manipulated more than in StoryMapJS. However, I wish the images used in the timeline could be enlarged.

Ultimately, I don’t think my group will likely use these tool for our 3D laser scanning project for the James Monroe Museum. However, we could possibly use StoryMapJS to map out the origins of the objects we scan to provide visuals. We could also use TimelineJS to create a map of when the objects were made or when they were acquired by James Monroe, although this information could be broad and defeat the purpose of making a timeline.

Although I find Feedly a little bit difficult to navigate, I hope that it will make it easier to keep up with new blog posts by my classmates and members of the DH Compendium.

Exploring Digital Tools

I thought both the Timeline and StoryMap tools were very easy to use because they both gave clear directions. I never used StoryMap JS before but I used Google Maps in my History 298 class. These two maps tools are very similar as far as the content you can enter but in my opinion the display of StoryMap is clearer. The map I created shows the places I went on a study abroad trip two summers ago. All of the pictures are ones I took on the trip.

I have used Timeline JS before in my History 298 class and think it is a great way to display dates visually. Since I am both a History and Art History major, I particularly like that images and media can be add to clarify what happen on that date. I used the UMW timeline template from google docs and I thought it worked well. The only problem that I had was that if I want something in italics it does not show up in italics. The timeline I created for this project is a timeline of my work experience and education. For our Civil War soldier diary project it would be nice to have a timeline of events or even a timeline of particular entries that are of significance.

I setup an account on Freedly and subscribed to my classmates sites as well as the blogs of Katherine D. Harris and Amanda L. French.




Timeline And Mapping


When I began messing around with MapStoryJS, I decided to do a few events that were a important to World War II and the Cold War. I found the tool itself to be fairly easy to use. You can set a title to a location and even add images to the marker to help viewers get a sense of what occurred at that location. It didn’t take long to create the 5 events that I did, but I do not see my group using this for our project at all because we are just focusing on the history of one building. I do, however, see us using TimelineJS and you will see why in a little bit.


TimeLineJS took a little bit more work to complete, but I love it. You can insert the same information  that could in MapStoryJS and even more. You  obviously can enter the beginning and end dates of events, but if you have the exact time, you can enter that as well. Like I mentioned before, I do see our group using this for the HCC/ITCC project. We can use TimeLineJS  to record and display when the planning for the building began and when the construction finally began. Creating a detailed timeline with this digital tool would be perfect for us and I’m sure we can make it detailed and informative to all future viewers.


I might need to use Feedly a bit more, but I do have to say it is pretty convenient. I created a collection “Digital History Blogs” and easily added everybody to the said collection along with two other websites from the Digital Humanities Compendium.


I’m glad to be learning about even more digital tools, but I only see myself using only one of them for the semester long project. I imagine that some groups can use both, so I look forward to the outcome of each project.

Mapping Tools

I have worked with TimelineJS and StoryMap before for other classes as well as for my job. For Professor Moon’s Immigrant Alexandria course I created both a Story Map as well as a Google Map as a part of a group project.

This is an example of a Timeline JS I made for practice when I first learned how to use the tool.

Here is an example of a Story Map I made for the seminar with Professor Moon. I also have made quiet a few Google maps for other projects.

Since I had already played around with Story Map and Google maps for previous projects I tested out CartoDB. I used the data set from the site that gave an introduction to the program. I did not include a link for the map I made using the Dutch art research, because it was the sample practice tool and not something I independently created. Getting around the learning curve for the site, I think it is awesome how it takes data sets and makes them look so professional and easily interactive. When I had seen the maps by the Digital Scholarship Lab in our earlier class exploration I was so impressed with the interactive maps they had created. Knowing now that they used CartoDB, a tool accessible for me to use in future projects. 

As cool and interesting as the CartoDB maps were I felt that they probably would not work well for my groups site. We are not really dealing with datasets and our primary goal is digitization of the diaries, so collecting datasets possibly goes off course from our goal.

There is the potential that my group would use one of the mapping tools to represent the information from the diaries. This will be more clear once we go through the collection in the digitizing phase, and have a better understanding if we have solid information for a map. It is also possible that we could make a timeline, however I am unsure if that will flow with the way we decide to set up our site.

Feedly and various other triumphs

In addition to the class blogs I added McClurken’s (updated) website from the DH Compendium and a blog called Pelagios that had an interesting set of maps. I’ve had experience with Google MyMaps and TimelineJS so I uploaded a previous class’ example of each. All in all, great for a snow day.

Blog Post #3 – StoryMapJS and TimeLineJS Exercise

For this blog assignment, I decided to use the same information for both the map as well as the timeline. Last semester, I wrote my Senior Thesis on a Major League Baseball pitcher by the name of Dock Ellis. The basis of my argument was correlating him to the counterculture movement of the 1960s. I figured this would be a good topic for this assignment because obviously the length of an athlete’s career is finite which gives a good window to graph since it has a clear beginning and end.

I did have some trouble embedding both the map and the timeline into this post. I Googled some things and discovered that I needed a WordPress plugin named “iFrame” which enables WordPress to embed using a “shortcode” (at least that is how I interpreted it). Eventually I got it to work but there are still some things that I would like to change but I am just not exactly sure how. These changes, such as extending the bottom of the map so the text from the post does not cover up the “StoryMapJS” information at the bottom, are just minor tweaks so I am not too worried about them.

Both the map and the timeline contain the same basic information but the manner in which this information is communicated slightly changes the interpretation. The timeline does a good job of laying out the basics: when he played, who he played for during certain years, and other major events in his career such as the All Star Game and the LSD No-Hitter. The map on the other hand, while still conveying this same information, allows for a more visual experience in which the viewer can see the location of the events change. I do like the option of the timeline to include videos which I think for oral historians especially, would prove invaluable.

Personally, I prefer the timeline to the map. While making the map, the presentation of the information was clean and easy to read. However, after embedding it, the map becomes smushed together and as a result, loses some functionality and readability. For my project on the Civil War diary, I think the timeline would be the most beneficial since the change of location would probably be rare. I could possibly use each slide as a separate diary entry, have a picture of the scanned page of the diary, and then have the transcription in the text box.

knightlab Timeline + Map


<iframe src=’//′ width=’100%’ height=’650′ frameborder=’0′></iframe>

(If the above looks like html, there is a link to the timeline below)


(I could not find a way to embed my Map so here is a URL linking to it).


For the most part, the two tools were easy to use.  The timeline simply required dates and from there I could enter any information I wanted as well as pictures or youtube videos (though I chose not to).  The map was basically the same; enter a location and then any information I want to go along with it.  My main issue with both tools though, is that I expected them to work together but they did not.  If both tools are made by knightlab, it should make sense that I should only have to enter the data once and the two tools could work together and create one smooth timeline/map.  Since they do not work together like this, it may be better to just pick one tool for a project based on if location or general information is more important. (If they do somehow work together and I am not seeing it, then I would like for knightlab to make it clearer that they do work together.)