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

Life after I Drive: Setting up a website for yourself or your project!

What happened to the I: Drive?

It’s been retired, everything on it is in read only, the hardware has been left to die and will be dead by January 3rd 2018, and everything will go where these things go when they die (that great server in the sky I suppose).

Always free options:

Weebly, Wix, etc. As we’ve discussed before on this blog, Weebly is one of the easiest to use, including WYSIWYG editor with customization based on dragging and dropping components, and still has a professional look. And to learn more about Weebly and other free website platforms, check out these site builder tutorials from the iSchool!

Are there still hosted options on campus?

Yes!

Basic hosted options on campus:

Google Apps
Don’t have a lot of experience building websites and looking for something really really simple?  Definitely check out Google Sites through your Illinois Google Apps. It is possible to get a hosted sites dot google dot illinois dot edu site/[yoursitename]/[pagename]  for yourself or or your organization. Google Sites has a WYSIWYG editor where you can drag and drop site elements such as text and image boxes as well as  elements from your Illinois Google Apps, such as Google Docs and YouTube videos. With Google Sites you have the option to publish either to the web or to Illinois users. For more information check out https://answers.uillinois.edu/illinois/page.php?id=55049

Reminder: Omeka.net

For all our digital humanists, virtual exhibit creators, and potentially anyone looking to make a snazzy portfolio website, we can set up an Omeka.net account through the Scholarly Commons that has more storage than the default account. To learn more and request a page check out http://www.library.illinois.edu/sc/services/Digital_Humanities/Omeka.html 

Publish @ Illinois.edu  (PIE)

To learn more click here for instructions and advice on using PIE at https://answers.uillinois.edu/illinois/page.php?id=54679

Although you or your group’s site will never reach the absolute stunning magnificence of the Commons Knowledge blog, you too can create a micro-site through WordPress at the University of Illinois. WordPress features a WYSIWYG editor and is fairly easy to learn even with limited programming experience. There is a limited amount of space available to save media, luckily you can attach links to images from Box in order to get around these limits. There are also custom designs available to University of Illinois units, these are especially important for meeting our state’s website accessibility standards! You can learn more and request your own small slice of the PIE at https://techservices.illinois.edu/services/publishillinoisedu/details Definitely check out the PIE blog and documentation pages and contact Technology Services for more help.

Setting up a Wiki with Confluence

Need to create a space for members of your team to collaborate on projects or want a site for a course beyond Moodle? Do you have team members from outside of the University of Illinois that you want allowed to contribute to content?  Technology Services can get you set up  with a wiki through Confluence. Check out https://wiki.illinois.edu/wiki/dashboard.action to request and https://wiki.illinois.edu//wiki/display/HELP/Getting+Started+and+Help to learn more and see what one of these wikis looks like in action!

Web services through your college’s IT department:

These sites also provide a lot of information about web resources on campus in general!

More advanced options:

Are you a web developer looking for a server?

Consider looking into the Virtual Server through Technology Services, yes this is a service that costs money and is based on how much space your site uses. However, if you want a more stable hosting solution for the long term this is a great option!

 

Creating a Professional Website on Weebly

One important step to having a good online scholarly presence is to have your own professional website. Weebly is a fairly easy to use and free content management system that you can use to create a customized page for yourself or a team. It is one of the website builders supported by the iSchool, which you can find more information about at this link.

How to Create a Weebly Website

Step 1) Login to Weebly either by creating a new Weebly account or linking to a Facebook or Gmail account. If this is a professional website think very carefully about whether or not you want this in any way connected to your Facebook (after all, future employers don’t care how much fun you had during spring break or want to see those conspiracy theory articles your uncle keeps sharing).

Step 2) Choose a theme! There used to be a lot more themes available on Weebly but those days are over. You have a couple options for very basic themes that with the addition of some images will help you instantly create a classy portfolio page, and any theme is fair game, though the ones under “Portfolio” and “Personal” and “Blog” are more suited for creating a professional website.

Step 3) You will be prompted to choose your web domain. You can have a free dot weebly site. Try to get some variation on your name as your website, you can also use the name of your company or organization.

Image of mothersagainstbearattacks sign up

Note: as of writing (23 Jan. 2017) this Weebly domain name is still available!

However, if this is too much pressure for now you can start creating your site and won’t have to really settle down on a name until you publish the site.

If inspiration strikes before that go to Settings >  Site Address

Step 4) Adding pages. Whichever theme you choose likely comes with Home, Blog, Contact pages that you can click on different elements of to edit. However, to add a new page or a certain type of page:

circled

Step 5) Customizing Pages. For simple edits, simply click on what you want to replace and add new content. To add new content, there’s a sidebar full of options! Even more if you add apps to your site or pay for Weebly. Simply drag and drop and arrange the content types on your site.

As an example, we’ll create a contact page.

If you want people to reach out to you it’s great to have a page where they can do that. We do not recommend writing your email out on pages because that’s a good way for spambots to find you. However, Weebly makes it easy to add a contact form: simply Click “Build” and drag and drop the contact form.

Editing contact information for Weebly contact form

If you have a physical location where you tend to be such as an office (lucky you!) or a coffee shop that pretty much is your office, then you can add a Google map as well to show people what building it is in. Though if your office is in the Armory (or certain parts of Main Library for that matter) you should probably include more specific instructions so that people don’t spend years trying to find it. You can also link your LinkedIn profile to your site by dragging and dropping that icon as well.

And don’t forget to include your ORCID, (if you haven’t created one yet, we suggest you check out this ORCID information)!

Special note: Adding stock images

Of course, your professional website should include at least one picture of you in a professional setting. Weebly has a number of stock images you can choose from that can look very nice. But what if you want something a bit more customized? For your professional website, make sure that you have proper permissions for any images that you use! Copyright infringement is very unprofessional. To learn more about finding copyright friendly stock images check out the Finding and Using Images LibGuide. And please feel free to take a look at our Scholarly Commons copyright resources. For more specific questions, you can reach out to Assistant Professor & Copyright Librarian Sara Benson.

Further Resources:

Still confused about Online Scholarly Presence? We have not one but TWO LibGuides to help you understand: Online Scholarly Presence Seminar and Create & Manage an Online Scholarly Presence.

Here is a video from a few years ago explaining more in general about creating a professional website, hosted by the University of Illinois.

 

Spotlight: Shanti Interactive

sint_logo

If you’re looking for tools that will help you create web-based visualizations, images or maps, Shanti Interactive may have exactly what you need. Shanti Interactive, a suite of tools made available from the University of Virginia’s Sciences, Humanities & Arts Network of Technological Initiatives (SHANTI), is free to use and a helpful resource for individuals seeking to show their data visually.

The Shanti Interactive suite includes five programs: Qmedia, SHIVA, MapScholar, VisualEyes, and VisualEyes 5. Qmedia creates instructional and scholarly videos. SHIVA creates “data-driven visualizations,” such as charts, graphs, maps, image montages and timelines. MapScholar creates geospatial visualizations while VisualEyes — arguably the most well-known tool from the suite — creates historic visualizations by weaving images, maps, charts, video and data into online exhibits. While we could write an entire post on each member of the suite (and maybe someday we will), I will quickly go over some of the main functions of the Shanti Interactive suite.

Qmedia

A screenshot of QMedia's demo video.

A screenshot of Qmedia’s live demo.

Qmedia creates an interactive video experience. The screen is broken up into various, customizable boxes, which the user can then interact with. In its own words, Qmedia “delineraizes” the video, allowing it to be scanned. Tools in Qmedia include table of contents, clickable, searchable transcripts, graphical concept maps, images, live maps, interactive visualizations, web apps and websites! While this list can be a little overwhelming, you can see the incredible results with Qmedia’s live demo.

SHIVA

SHIVA's timeline capability.

SHIVA’s timeline capability.

Think of SHIVA as a multi-faceted data visualization tool. It can create charts, maps, timelines, videos, images, graphs, subway maps, word clouds as well as plain text. SHIVA works with open source and open access web tools, such as Google’s Visualization Toolkit and Maps, YouTube, and Flickr. When a user inputs data, they do so through Google Docs. One fantastic feature in SHIVA is the ability to add on layers of annotations onto your data. For more on SHIVA’s capabilities and partners, see the SHIVA about page.

MapScholar

MapScholar is a great tool for creating what they call digital “atlases,” allowing scholars to use historic maps to compare and contrast how different areas have been depicted by mapmakers through time. For example, here is the base map on the eastern United States:

And here is that map overlayed with a Native American map from 1721:

VisualEyes and VisualEyes 5

VisualEyes is a multi-faceted online exhibit toolkit, which helps create interactive websites to display data. There are two versions: Flash-based VisualEyes, and HTML5-based VisualEyes 5, which is recommended. In many ways, VisualEyes is a combination of the rest of the suite’s tools, providing a platform for some incredible integration of sources. VisualEyes’ current example is a tour of Thomas Jefferson’s life (as the program was created at the University of Virginia), and worth a look if you’re interested in the program’s capabilities! It is far more interactive than one screengrab can communicate.

This project includes historic and modern maps, a timeline, and text, which all work together to create the story of Thomas Jefferson’s life.

Shanti Interactive includes diverse, free resources that can transform the way that you present your data to the world. If you need help getting started, or want to brainstorm ideas, stop by the Scholarly Commons and we’ll have someone ready to chat!

Text Analysis Basics – See Your Words in Voyant!

Interested in doing basic text analysis but have no or limited programming experience? Do you feel intimidated by the command line? One way to get started with text analysis, visualization, and uncovering patterns in large amounts of text is with browser-based programs! And today we have a mega blockbuster blog post extravaganza about Voyant Tools!

Voyant is a great solid browser based tool for text analysis. It is part of the Text Analysis Portal for Research (TAPoR)  http://tapor.ca/home. The current project leads are Stéfan Sinclair at McGill University (one of the minds behind BonPatron!) and Geoffrey Rockwell at the University of Alberta.

Analyzing a corpus:

I wanted to know what I needed to know to get a job so I got as many job ads as I could and ran them through very basic browser-based text analysis tools (to learn more about Word Clouds check out this recent post for Commons Knowledge all about them!) in order to see if what I needed to study in library school would emerge and I could then use that information to determine which courses I should take. This was an interesting idea and I mostly found that jobs prefer you have an ALA-accredited degree, which was consistent with what I had heard from talking to librarians. Now I have collected even more job ads (around December from the ALA job list mostly with a few from i-Link and elsewhere) to see what I can find out (and hopefully figure out some more skills I should be developing while I’m still in school).

Number of job ads = 300 there may be a few duplicates and this is not the cleanest data.

Uploading a corpus:

Voyant Tools is found at https://voyant-tools.org.

Voyant Home Page

For small amounts of text, copy and paste into the “Add Text” box. Otherwise, add files by clicking “Upload” and choosing the Word or Text files you want to analyze. Then click “Reveal”.

So I added in my corpus and here’s what comes up:

To choose a different view click  the small rectangle icon and choose from a variety of views. To save the visualization you created in order to later incorporate it into your research click the arrow and rectangle “Upload” icon and choose which aspect of the visualization you want to save.

Mode change option circled

“Stop words” are words excluded because they are very common words such as “the” or “and” that don’t always tell us anything significant about the content of our corpus. If you are interested in adding stop words beyond the default settings, you can do that with the following steps:

Summary button on Voyant circled

1. Click on Summary

Home screen for Voyant with the edit settings circled

2. Click on the define options button

Clicking on edit list in Voyant

3. If you want to add more words to the default StopList click Edit List

Edit StopList window in Voyant

4. Type in new words and edit the ones already there in the default StopList and click Save to save.

Mouse click on New User Defined List

5. Or to add your own list click New User Defined List and paste in your own list in the Edit list feature instead of editing the default list.

Here are some of the cool different views you can choose from in Voyant:

Word Cloud:

The Links mode, which shows connections between different words and how often they are paired with the thickness of the line between them.

My favorite mode is TextArc based on the text analysis and visualization project of the same name created by W. Brad Paley in the early 2000s. More information about this project can be found at http://www.textarc.org/, where you can also find Text arc versions of classic literature.

Voyant is pretty basic, it will give you a bunch of stuff you probably already knew, such as to get a library job it helps to have library experience. The advantage of the TextArc setting is that it puts everything out there and lets you see the connections between different words. And okay, it looks really cool too.

Check it out the original animated below! Warning this may slow down or even crash your browser:  https://voyant-tools.org/?corpus=3de9f7190e781ce7566e01454014a969&view=TextualArc

I also like the Bubbles feature (not to be confused with the Bubblelines feature) though none of the other GAs or staff here do, one going so far as to refer to it as an “abomination”.

Circles with corpus words (also listed in side pane) on inside

Truly abominable

The reason I have not included a link to this is DEFAULT VERSION MAY NOT MEET WC3 WEB DESIGN EPILEPSY GUIDELINES. DO NOT TRY IF YOU ARE PRONE TO PHOTOSENSITIVE SEIZURES. It is adapted from the much less flashy “Letter Pairs” project created by Martin Ignacio Bereciartua. This mode can also crash your browser.

To learn more about applying for jobs we have a Savvy Researcher workshop!

If you thought these tools were cool, to learn more advanced text mining techniques we have an upcoming Savvy Researcher workshop, also on March 6 :

Happy text mining and job searching! Hope to see some of you here at Scholarly Commons on March 6!