Exploring Data Visualization #6

In this monthly series, I share a combination of cool data visualizations, useful tools and resources, and other visualization miscellany. The field of data visualization is full of experts who publish insights in books and on blogs, and I’ll be using this series to introduce you to a few of them. You can find previous posts by looking at the Exploring Data Visualization tag.

U.S. immigration represented by concentric rings like a tree, where outermost ring is the most recent, with colors denoting immigrants' origin primarily by continent

from National Geographic, “200 Years of U.S. Immigration Looks Like the Rings of a Tree”

1) Two Northeastern University professors visualized immigration data for National Geographic by creating a fascinating chart that looks a lot like the growth rings of a tree. They write, “Like countries, trees can be hundreds, even thousands, of years old. Cells grow slowly, and the pattern of growth influences the shape of the trunk. Just as these cells leave an informational mark in the tree, so too do incoming immigrants contribute to the country’s shape.”

two line graphs, one with a legend and one with direct line labeling, demonstrating the advantage of the latter

from StorytellingWithData, “Accessible data viz is better data viz”

2) Accessibility is important in all kinds of communication, and data visualization is no exception. But it’s not always obvious how to make visualizations more accessible. You can find several tips for improving your visualization in “Accessible data viz is better data viz.”

Polar histograms of the streets in major cities across the U.S.

by Geoff Boeing, “Comparing City Street Orientations”

3) Urban planning postdoc Geoff Boeing used open map data to create a series of polar histograms that demonstrate how the streets in various U.S. cities do or don’t follow a neat grid. It’s a great example of a visualization that looks intriguing and also packs a lot of information. Learn more about it in his blog post, Comparing City Street Orientations.

I hope you enjoyed this data visualization news! If you have any data visualization questions, please feel free to email me and set up an appointment at the Scholarly Commons.

Telling Your Story With StoryMap JS

Earlier on the blog, we talked about ways to create story maps so we’re following that up with a tutorial for one of the options on there, StoryMapJS.

StoryMapJS is a web-hosted program that lets you create interactive maps by adding Google slides and images onto a map layout from OpenStreetMap. More advanced users can overlay their own map using the Gigapixel mode. But today we are keeping it simple and creating a map giving an around the world tour of cookies.

Getting Started:

  1. Click “Make a Story Map” and sign in with your Google account and come up with a snazzy title!

Name your map

2. If you come up with an even snazzier title you can change it by clicking “My Maps” and choosing the map and the settings option.

arrow pointing to My Maps in top left corner and arrow pointint to gear icon on

Finally, remember to save your work. StoryMapJS can get a little confusing and better to be safe than sorry.

Creating Your Title Slide:

Slide editing mode StoryMapJS

This is the title slide editing page but it’s not that different from the page to create your slides for the map. You can write a title — I’ve chosen “Cookies, Biscuits and Other Circular Treats” — in the “Headline” section and either write or paste your writing on the right side. You can  use the “Media” side to upload an image, but you also change the background of the slide itself by clicking Slide Background and uploading an image into StoryMapJS. To see how your map is coming so far you can check it out in the Preview section as seen here:

cookies in a plastic bag as background image of title page

If you’ve ever wondered who makes sure that cookies leftover from library events get eaten, you can thank the brave and dedicated graduate assistants of Scholarly Commons for providing this service.

Don’t want it to say “Start Exploring” for your title page instructions? Don’t worry — you can change that, too! Click Options and check “Yes” for “Call to Action” and add a custom call. This is also where you can change the type of map (such as creating a Gigapixel) and other important features.

Options in StoryMap JS

Creating Your First Map Point 

Click “Add Slide”

We’re going to start this journey off knowing that various versions of cookies originated in the ancient world, with National Geographic, a trusted source, saying the first cookies appeared in Persia during the 7th century (B. Patrick, & J. Thompson, 2009). Since there’s no mural, painting or visual documentation of “The First Cookie” (like there should be for such a historically significant event), I am not using an image here, making this similar to a title slide. However, this time we’re using a location!  If you’re not sure exactly where something happened simply search the country and click on the correct date.

Adding a location on the map

Creating A Map Point With Images and More!

Unlike many types of cookies, we know exactly where chocolate chip cookies were invented and we can even look up coordinates in Google Maps. Specifically, they were invented by Ruth Graves Wakefield and were originally sold in Whitman, Massachusetts at the Toll House Inn, which has since burned down (Michaud, 2013). However, we have an address! Simply search the address on the map and it will place a point on the map approximating that location.

Typing in Whitman MA address in StoryMapJS

Upload media into your slide:

For this slide, I will be using a picture of a chocolate chip cookie in the GA office that I took myself. Since I took the picture myself I am the copyright holder, please take at least a minute to think about copyright law especially if you are using your StoryMap as part of, or in lieu of, an article. Go to the “Media” section and simply paste a link to your photo from your preferred photo cloud storage (make sure it you have the share settings so that it is public) or the source hosting the photo or upload an image from your computer. You can write where the photo comes from in the next box and can add a caption below that.

Uploaded media demo

Sharing Your Work:

Alright, so you’ve told your story through slides and map points. You’ve moved your slides into the order you want by dragging and dropping them on the side bar. You’ve edited your text, attributed your photos to their sources, and are ready to go. Simply hit “Share” in the top right corner and choose whether you want to embed your map on your website or share the link itself. A word of warning, these sites use aspects through Google and may have issues with link rot so make sure to back up your text and images elsewhere as well!

For Further GIS Assistance

If you’re looking for a more in-depth approach to GIS, please contact James Whitacre, our GIS specialist.

Works Cited:
Drop Cookies – Oxford Reference. 2017. 1st ed. Oxford University Press. Accessed April 17. doi:10.1093/acref/9780199313396.013.0166.

Michaud, Jon. 2013. “Sweet Morsels: A History of the Chocolate-Chip Cookie.” The New Yorker. The New Yorker. December 19. http://www.newyorker.com/culture/culture-desk/sweet-morsels-a-history-of-the-chocolate-chip-cookie.

Olver, Lynne. 2017. “Food Timeline: Food History Research Service.” Accessed April 17. http://www.foodtimeline.org/index.html.

Stradley, Linda. 2015. “History Of Cookies, Whats Cooking America.” What’s Cooking America. June 28. https://whatscookingamerica.net/History/CookieHistory.htm.

Sweets. (2009). In B. Patrick, & J. Thompson, An Uncommon History of Common Things. Washington, DC: National Geographic Society. Retrieved from http://proxy2.library.illinois.edu/login?url=http://search.credoreference.com/content/entry/ngeouc/sweets/0?institutionId=386

Toll house cookie. (2014). In J. F. Mariani, The Encyclopedia of American Food and Drink (2nd ed.). London, UK: Bloomsbury. Retrieved from http://proxy2.library.illinois.edu/login?url=http://search.credoreference.com/content/entry/bloomfood/toll_house_cookie/0?institutionId=386

Scholarly Smackdown: StoryMap JS vs. Story Maps

In today’s very spatial Scholarly Smackdown post we are covering two popular mapping visualization products, Story Maps and StoryMap JS.Yes they both have “story” and “map” in the name and they both let you create interactive multimedia maps without needing a server. However, they are different products!

StoryMap JS

StoryMap JS, from the Knight Lab at Northwestern, is a simple tool for creating interactive maps and timelines for journalists and historians with limited technical experience.

One  example of a project on StoryMap JS is “Hockey, hip-hop, and other Green Line highlights” by Andy Sturdevant for the Minneapolis Post, which connects the stops of the Green Line train to historical and cultural sites of St. Paul and Minneapolis Minnesota.

StoryMap JS uses Google products and map software from OpenStreetMap.

Using the StoryMap JS editor, you create slides with uploaded or linked media within their template. You then search the map and select a location and the slide will connect with the selected point. You can embed your finished map into your website, but Google-based links can deteriorate over time! So save copies of all your files!

More advanced users will enjoy the Gigapixel mode which allows users to create exhibits around an uploaded image or a historic map.

Story Maps

Story maps is a custom map-based exhibit tool based on ArcGIS online.

My favorite example of a project on Story Maps is The Great New Zealand Road Trip by Andrew Douglas-Clifford, which makes me want to drop everything and go to New Zealand (and learn to drive). But honestly, I can spend all day looking at the different examples in the Story Maps Gallery.

Story Maps offers a greater number of ways to display stories than StoryMap JS, especially in the paid version. The paid version even includes a crowdsourced Story Map where you can incorporate content from respondents, such as their 2016 GIS Day Events map.

With a free non-commercial public ArcGIS Online account you can create a variety of types of maps. Although it does not appear there is to overlay a historical map, there is a comparison tool which could be used to show changes over time. In the free edition of this software you have to use images hosted elsewhere, such as in Google Photos. Story Maps are created through their wizard where you add links to photos/videos, followed by information about these objects, and then search and add the location. It is very easy to use and almost as easy as StoryMap JS. However, since this is a proprietary software there are limits to what you can do with the free account and perhaps worries about pricing and accessing materials at a later date.

Overall, can’t really say there’s a clear winner. If you need to tell a story with a map, both software do a fine job, StoryMap JS is in my totally unscientific opinion slightly easier to use, but we have workshops for Story Maps here at Scholarly Commons!  Either way you will be fine even with limited technical or map making experience.

If you are interested in learning more about data visualization, ArcGIS Story Maps, or geopatial data in general, check out these upcoming workshops here at Scholarly Commons, or contact our GIS expert, James Whitacre!