Getting Started with Digital Exhibits provides an introduction to digital exhibit creation. Much of the information here originated with a workshop (see slides) and is related to Introduction to Digital Exhibits found in the Digital Scholarship Handbook.

• This tutorial is not platform-specific. These Omeka instructions, however, will help you get started on the commonly used platform where you can apply what you learn here.

What is a Digital Exhibit?

Digital exhibits are a form of online exhibit that, like their physical counterparts, use objects to tell stories, make arguments, and demonstrate ideas. Attributes include:

• Objects can be digitized or “born digital” media of various types (e.g., digitized photographs, rare books, films, or born digital government documents).

• Special attention is given to the organization of both the objects and the site in which the exhibit lives.

• They might include a digital collection(s) component or interactive elements such as maps and timelines.

Before starting the exhibit creation process, you need to consider closely your topic, desired effects, and objectives with the understanding that the decisions you make might change as you progress.

1.) Determine the Topic

What is the main focus or theme of the exhibit?

• Some examples: a historical period or movement, an event, a person's biography, a process or technique (e.g., silk screen printing), an idea or concept (e.g., the law of gravity), an industry (e.g., whaling), a single object (e.g., a specific book, painting, or musical instrument)

2.) Determine the Desired Effect

Effects to consider (as cited in Barth, et al. 2018):

• Aesthetic: designed to showcase the beauty of objects

• Emotive: designed to elicit an emotion in the viewer

• Evocative: designed to create a specific atmosphere

• Didactic: designed to teach the viewer about a specific topic

• Entertaining: designed for the amusement or enjoyment of the viewer

3.) Determine the Objectives

What do you want people "walking away" with? This means considering things like:

• What is the motivation for creating the exhibit? (Why this exhibit?)

• What are the intended learning outcomes?

• How do you want visitors to be able to apply what they learn beyond the exhibit?

References

Barth, G. L., Drake Davis, L., Mita, A. (2018). "Digital Exhibitions: Concepts and Practices". Mid-Atlantic Regional Archives Conference Technical Leaflet Series no. 12.

In addition to the design and structuring of the exhibit site, usability and accessibility are also necessary aspects to consider when building your project.

• Usability means how effectively users can interact with and navigate a site.

• Accessibility means how effectively users with disabilities or technological disadvantages (e.g., slow internet access) can use a site and how equivalent their experience is with the experience of users who do not have such challenges. Often steps taken to better serve the disabled also serve those who are technologically disadvantaged, e.g., video transcripts can serve the hearing impaired and those who do not have the internet bandwidth to play a video.

Key Basics

Visual Design - A good rule to follow is to keep it simple. A lot of different colors, decorative elements, and busy layouts can make the exhibit more difficult to navigate and the information more difficult to process. This is especially true for those with disabilities.

Page Organization and Layout - Breaking up the text into logical sections makes it easier to read. (Avoid having a "wall" of text.)

Headers - Use headers and subheaders to help logically break up the content on a page and to introduce/frame the information to come. This will make the page more readable and easier for screen readers to navigate.

Contrast - There needs to be strong contrast between the background and text. This means the colors need to have enough difference between them (both in intensity and hue) and that text is not on top of an image that makes it difficult to read. (There are browser extensions for checking contrast.)

Fonts - Avoid using ornate and difficult to read fonts and avoid using all caps.

Alt Text - Images should have alt text. Read more:

• Web Accessibility Initiative

• Harvard Digital Accessibility Guidelines

Captions - Videos should have captions.

Transcripts - Audio files (e.g., podcasts) should have transcripts; having transcripts for videos is also helpful and necessary if captions are not possible.

Resources

The following resources provide more helpful information on accessibility:

• Essential Components of Web Accessibility (full guidelines)

• "Usability" from the Interaction Design Foundation

• Usability.gov

• Web browser extensions list for checking accessibility, e.g., contrast and screen reader functionality

While every digital tool on this site can be used for "digital storytelling," the following are tools that have been specifically designed with storytelling in mind. Also, see the Multimedia Production Guide for information on video and podcast creation.

After considering the topic, desired effects, and objectives follow the steps below. (The order is suggested and not entirely necessary.)

1.) Select the objects that will be featured

• The object selection process requires careful consideration and includes determining whether any digitization is needed and whether there are any intellectual property concerns. (See the Intellectual Property libguide for more on the topic.)

2.) Determine how you want to organize your objects

• The order objects will go in, the way they are grouped, and how they are juxtaposed are major components of the curation process. It is helpful to play around with the order, even if only to ensure your chosen order is the best one.

3.) Select your exhibit platform

• Choose the platform most appropriate for the content and the desired type of interactivity.

  • You may already know which platform you plan to use or the one you have to use based on what is available to you. If not, it can be helpful to base your platform selection on the content you have as opposed to shaping your content to fit into a given platform.

4.) Write your text

• Write exhibit content for the introduction page, object labels, and group labels. (Also see "writing for the web," a topic that applies when writing for an online audience.)

  • Introduction page: Information that introduces or "sets the scene" of the exhibit

  • Object labels: Information that describes and contextualizes exhibit objects

  • Group labels: Information that explains how a group of objects are related, contextualizes the objects, or simply introduces them as a whole

  • This step requires consideration of the intended audience: Is the exhibit intended for a general audience? Or, is it intended for an audience with preexisting knowledge about the topic? The answer to these questions will help determine how much explanation is needed and will influence word choices.

• Write accessibility text, i.e., alt text, video captions, transcripts (see Usability & Accessibility).

5.) Determine the site organization

• Design the site's information architecture (structure, navigation, taxonomy, page layout, etc.) (See Site Organization).

  • The choices made here shape the flow of the exhibit and the interactive experience.

• Organization choices have a major impact on exhibit usability and accessibility.

6.) Make Design Decisions

• Make design decisions, e.g., choose fonts, colors, landing page image(s), etc. (Read Visual Design Basics).

• Design decisions have a major impact on tone and usability and accessibility.

BCDS' DS Learn provides digital scholarship learning resources created by the Boston College Libraries Digital Scholarship Group. Visit our website to learn more about BCDS learning opportunities and our DS Handbook to learn more about DS methods and concepts. For questions or comments, please email us.

CC BY-NC-SA

Major Concepts

The following are some major concepts that should be considered when creating the site in which the exhibit lives.

Information Architecture (IA) - The structure of the site (e.g., the site hierarchy, the way pages link to each other) and the labeling of information so that it is understandable and navigable. (Read Information Architecture Basics and see below.)

Taxonomy - A component of IA that involves the language chosen to label menus/navigation bars, page headers, etc. (Read Website Taxonomy Guidelines and Tips.)

Navigation - The means by which one moves within a site and finds specific information, e.g., the site navigation menu. (Read Supporting Navigation and Wayfinding.)

• Wayfinding - Related to navigation, wayfinding is how one knows where they are within a site and if they are able to find their way back to information to which they previously navigated.

Page Organization and Layout - The way content (text, images, video, etc.) is organized on a page. (Read What Do Common Web Layouts Contain? and see below.)

Planning Your Organization

When planning your site, it is helpful to sketch out your information architecture in diagram form and draw wireframes to plan page organization and layout.

Information Architecture

The following provides an example of an information architecture diagram for an exhibit on the history of cats. Looking at the diagram, you can get a sense of how the curator decided to organize the exhibit's content logically (which could have been done in a multitude of ways) and structure the site in which the exhibit lives accordingly.

The exhibit site has a hierarchy of only two levels: the Home page is the top level and the rest of the pages are the second level. The terms History, Breeds, Culture, and Readings are part of the site's taxonomy and will be the labels in the navigation menu that users click to find their way to the various pages.

Accessibility image description: The diagram shows the structure of the site, which is made up of ten different web pages. At the top (or the first level of the hierarchy) is the Home page, represented by a rectangle with the word home written on it. Below that is a row of terms that run left to right. They are History, Breed, Culture, and Readings. Lines make them look as if they are branching off of the Home page. (These terms will be the labels in the navigation menu.) Branching off of these terms and situated below them are rectangles that represent pages. These pages make up the second level in the site's hierarchy. Branching off of the term History are the pages Wild Ancestors and Domestication. Branching off of the term Breeds are the pages Short Hair, Medium Hair, and Long Hair. Branching off of the term Culture are the pages Cats in Art, Cats in Literature, and Cats in Animation. Branching off of the term Readings is the page Further Readings.

Page Organization and Layout

Wireframes are simple drawings of web pages that help with planning the organization of content and layouts. Below is an example of a wireframe for a page in the History of Cats exhibit. Here you can see that when one clicks on Culture, options for the pages for cats in art, literature, and animation appear.

Cats in Art is the page's main header (also known as header 1 or h1) and lets users know the page's title and the overarching topic. The other headers, Ancient Representations and Classical Cats, are second-level subheaders (also known as header 2 or h2). Each subheader introduces or frames the content to follow and is assumed to apply until a new header is used. If Ancient Representations, for example, had subsections like Ancient China and Ancient Greece those would be header 3 or h3. Notice the pattern forming? Like the structuring of sites, pages are also structured using a hierarchy.

Accessibility image description: The image shows a barebones black and white drawing of a web page. At the top is the exhibit's title, The History of Cats. Below that is the navigation menu, which has the options Home, History, Breeds, Culture, and Readings. As if someone is clicking on the term Culture, a dropdown menu appears just below the word and has the list of links Cats in Art, Cats in Literature, and Cats in Animation. The featured page is Cats in Art. Those words appear as the main header on the top left of the page just below the navigation menu and are in the largest font on the page. Below this header are large rectangles that function as placeholders for what will be three images in the future. On the right side of the page just below the navigation menu is the subheader Ancient Representations, which is in the second largest font on the page. Below this subheader, there are lines that abstractly represent a block of textual content that will be added later. Below that content is another subheader, Classical Cats, which is the same font size as the previous subheader, and below it are also lines that represent a block of textual content.

All tutorials were created by .

Contents

The platform you select will influence decisions about exhibit organization and design, among other things. You may start out knowing what platform you want to use, or you may change your mind about the chosen platform based on the way you want to organize your exhibit, the way you want visitors to interact with it, and whether you want to have the object available in digital collection form as well.

Some things to keep in mind while considering platforms include:

• Ease of use and customization

• Whether there needs to be a searchable collections component

• Whether exhibits should be navigable linearly, non-linearly, or both

• The types and level of interactivity desired

• Accessibility for the disabled

Some common platform options:

• Omeka ( and ) []

• - []

• Wordpress (. and .) []

• []

• For more information, see by Dr. Pamella Lach

Below are several tutorials focused on different aspects of 3D modeling, AR, and VR project creation. We will be expanding on these in the coming months, so if there is a particular topic you are interested in feel free to contact the BC Digital Scholarship Team at digitalscholarship@bc.edu!

TimelineJS is an easy-to-use timeline visualization tool that uses Google Spreadsheets. (See examples.)

How it Works

Timelines created in TimelineJS are data visualization. The data is input in the spreadsheet and the TimelineJS platform translates that data into a visual representation.

Getting Started

The tool's site provides instructions. Simply click "Make a Timeline."

From there you will be walked through four major steps:

1. Making a copy of a Google spreadsheet. (You can use your BC or personal Google account.)

2. Publishing the spreadsheet, which is necessary for it to be visualized

3. Cutting and pasting the spreadsheet link to visualize the timeline

4. Getting the timeline link and embed code for sharing the timeline or embedding it into a site

Using the Spreadsheet

The spreadsheet contains a template that will guide you through the information entry process. Do not make edits to the spreadsheet's headers as they are formatted specifically for the TimelineJS platform.

The headers represent the kind of information that should go in each column. The spaces where you put the information are fields. Two of these fields, Year and Headline, have to have an entry in order for the timeline to work. The rest are optional.

Field explinations:

• Year, Month, Day, Time (Year is required) - Sets the date/time to varying degrees of granularity

• End Year, End Month, End Day, End Time (optional) - Sets end date/time to varying degrees of granularity

• Display Date (optional) - How you want the date to appear on the timeline

Text fields:

• Headline (required) - The title or name of the event

• Text (optional) - The or narrative information

Media fields:

• Media (optional) - Media URL (web address)

• Media Credit (optional) - Text that gives credit to media creator and/or distributor; here you can create a link that takes users back to where the media originated (see "Creating Links in Fields" below)

• Media Caption (optional) - Text that describes the media

• Media Thumbnail (optional) - Link to a thumbnail image

Additional fields:

• Type (optional) - Indicates which slide is the title slide.

• Group (optional) - A way to show slides are related

• Background (optional) - Change the background to a color (use hexadecimal color code ) or an image (use an image URL)

The spreadsheet is where the majority of the digital aspects of the labor occur, be it intellectual or technical, as it takes time to fill in and to do so with accuracy. The other labor-intensive aspects are selecting the events that will be addressed, the research component, writing the text, and finding or creating the media.

Visualizing the Timeline

It's a good idea to go ahead and visualize the timeline while working on it so you can keep an eye on how it is looking and to make sure there aren't any errors. To visualize the timeline you follow step 3 "Generate your timeline" and 4 "Share your timeline" as directed on the TimelineJS site. Keep a copy of the timeline URL generated during this process as this is how you will access and share the timeline. This is also how you get the embed code for embedding the timeline in things like websites.

Errors

When the timeline does not work after having attempted to visualize it, it is most likely an error in the spreadsheet. Common errors include a row that sits between filled in rows is left blank or a year or headline is not included for at least one of the entries. After fixing these errors by deleting the blank row or adding the missing year(s) or headline(s), try visualizing it again.

Adding Media

Media must be hosted online as it cannot be uploaded to TimelineJS. Adding media requires that you use the specific media URL that links directly to the image or video.

To get a video found on YouTube or a similar platform, select “Share,” which is right below the video, copy the URL, and paste it in the Media field.

How to get an image URL:

• On a Mac hold down the control key and click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

• On a PC right-click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

It will look something like the following:

It's easy to make mistakes with images and get the page URL or a thumbnail version instead. If you get the page URL an error will appear where the image should be in the timeline. If the image appears too small, you have clicked on a smaller version of the image and copied the URL. In this case, go back and make sure you click on the larger version to get the address.

Creating Links in Fields

You can create hyperlinked text in the Headline, Text, and Media Caption fields using the basic HTML tags:

<a href="Source URL">Hyperlinked text</a>

For example, if you want to add a media caption like, Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons), and you want to have Wikicommons be a hyperlink to where the image can be found on the site you would write:

Mary Wollstonecraft by John Heath, circa 1797 <a href="https://commons.wikimedia.org/wiki/File:Mary_Wollstonecraft_by_John_Opie_(c._1797).jpg">(Wikicommons)</a>

In the timeline caption location, the above will appear as:

Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons)

StoryMaps provides a number of content block styles to choose from. Please note that public ArcGIS accounts do not have the embed, audio, and image gallery available.

• View this StoryMap for a demonstration of the different kinds of content blocks.

Adding a New Content Block

To add a new content block, click in the area just above or below an existing content block. (The plus sign is automatically there when first launching a new story.) It will look like the following:

You will see the various content block and element options:

Content Block Types

Below are descriptions of the different content blocks with links to instructions created by ArcGIS. They are organized as "Basic," "Media," and "Immersive," which is how they are organized in Story Maps.

Basic

• Text - a text block for general textual content, headers, bullet point, lists, quotes, etc.

• Button - adds a button that can be linked to outside sources.

• Separator - adds a line to break up content on the page, used to make content more readable and navigable

ArcGIS instructions:

• See Add narrative text

Media

• Map - create "express maps" in Story Maps or bring in ArcGIS map

• Image - upload or link to images

• Image gallery* - create an image gallery in the form of a grid of images

• Video - upload or link to videos

• Audio* - upload or embed sound clips

• Embed* - embed different types of media (e.g., a TimelineJS timeline or a 360 degree photograph)

• Swipe - create a swiping effect between two images or online maps

*Not available with the free version.

ArcGIS instructions:

• See ArcGIS's Getting started with ArcGIS StoryMaps sections: "Building a Narrative," "Add an Embed," and "Make a Map"

• Also, see: Add maps, Add media, and Add swipe blocks

Immersive

• Slideshow - create a more traditional slideshow

• Sidecar - create a moving side panel for text and media independent of the main panel, also allows for text blocks to overlay and move across media

• Map tour - create an interactive map that combines images, text with a map

Note that the Slideshow option has been incorporated into the Sidecar layouts.

ArcGIS instructions:

• See ArcGIS's Getting started with ArcGIS StoryMaps sections: "Add Immersives"

• Also see, Add sidecars, Add slideshows, Add map tours

The David Rumsey Historical Map Collection has a broad collection of historical maps that you might use as the base map for your ArcGIS StoryMap. These steps will walk you through the process.

1) Go to and log in with your free account.

2) Locate the map in the database that you'd like to import to ArcGIS; the maps can be filtered by location and date. Note that for the map to be imported directly into ArcGIS Online, it must already be georeferenced within David Rumsey (indicated by the orange "View in Georeferencer" button).

3) Click the orange "View in Georeferencer" button and the map will open up as an overlay. From here, click the orange "What Next" button in the bottom-right corner of the screen followed by "Go to this Map page" button.

4) A page containing map metadata and other information about the map will appear. In the section on the left called "Use in GIS apps," click on "Get links" and then copy the URL under "XYZ link".

6) To add your map from David Rumsey, click the "Add" button followed by "Add Layer from Web".

7) This will open the add layer from web dialog box. When it asks what type of data you are adding in a drop-down box, choose "A Tile Layer". This will expand the box and create a place for you to paste the XYZ URL from David Rumsey. Do so, and add the proper title and credits for your map.

8) Click "Add Layer" and the layer should be added to your map (you may have to move to the location to see it depending on the size of your map. Save by pressing the Save button in the top menu bar. Finally, make your map public by clicking the "Share" button and choosing "Everyone (public)".

10) In your new blank tour, click the "Map Options" button in the top right corner of your empty map, then "Select Basemap" in the left-hand pane that opens up, followed by "Browse More Maps". This will open up a window showing all your self-created maps, including the one you just created

Now you can start adding points to your map tour on you historical map!

ArcGIS StoryMaps allows you to use a variety of maps, text, and multimedia elements to present interactive narratives. Since ArcGIS has a number of helpful StoryMap tutorials and instructions available, the information here is relatively brief and often links out to those resources.

Planning Your StoryMap

Creating a good storymap requires good planning. You may find it helpful to sketch out your ideas on paper (in the form of a diagram, an outline, or a rough illustration) prior to working in the actual technology.

Creating Your Content Blocks

StoryMaps uses "content blocks," which include objects ranging from text blocks to interactive maps to images. See content for examples of content blocks.

Add Alternative Text (Alt Text)

When adding media of any kind, you are given the opportunity to add alternative text for the visually impaired. You want to do this unless the image is purely decorative and does not add to the content/narrative. ()

To add alt text, hover over the media and then click on "Options" (the gear icon). Depending on the content block type, you will see either a field that says, "Alternative text" or you will see a choice to click on "Display" or "Properties." Click on "Properties" and you will then see an "Alternative text" field.

Design Decisions

StoryMaps lets you adjust the look/design within a limited range.

Publishing and Sharing

The URL (web address) that you get when you "View published story" is your project's front-facing URL and is the link you share out.

With the use of a couple of plugins, both Omeka S and Omeka Classic allow you to incorporate 3D models into your digital exhibits. Getting both your site and the 3D models in the proper form, however, takes a bit of work, particularly for Omeka S.

Install Necessary Plugins

While both Omeka S and Omeka Classic display 3D models using the Universal Viewer plugin, there are a few others that are necessary to ensure the framework is properly set up.

Plugins/Modules to Install in both Omeka S and Omeka Classic

• Universal Viewer - This is the actual viewer that can display both 3D models and normal images/pdfs/etc. Its design is much nicer than the standard Omeka presentation view.

• Archive Repertory - Keeps original names of imported files and puts them in a hierarchical structure (collection/item/files) in order to get readable URLs for files and to avoid overloading the file server.

Additional Modules for Omeka S

• IIIF Server: Integrates the IIIF specifications to allow you to share instantly images, audio, and video.

• Image Server: A simple and IIIF-compliant image server to process and share instantly images of any size in the desired formats.

Preparing Models for Omeka

To display 3D models, we use the Universal Viewer plugin, which uses the ThreeJS library to display the models. This means that the model needs to be in a .json format to upload the file to Omeka. There are a variety of ways to do this, but an easy method is to use the ThreeJS editor.

1. Open the ThreeJS Editor Link.

2. Upload your 3D model (OBJ, gltf, etc.) by going to File --> Import and navigating to your 3D file.

3. The mesh (geometry) of your model will appear. The next step is to attach the texture (color overlay) to the model, if it is not already integrated into your file. To do this, click the "+" next to the name of your file on the top of the right sidebar and select the material associated with it (generally "material_0"). Then choose the "Material" tab below.

4. From here, where it says "Type," select "MESHBASICMATERIAL," which should be at the top of the list of choices. Next, click the dark rectangle next to "Map" a bit further down the sidebar, and navigate to your texture (usually a .jpg, if you are uploading an obj). Finally, check the small box next to "Map" and the texture should appear.

5. Your model should look good now! The last step in the editor is to go to File--> Export Scene, and the model should be exported as a .json to your downloads folder.

Uploading your Model to Omeka

Your model is now in the correct format (.json) to be uploaded to Omeka. In each case, you will want to be sure that JSON extension and the application/JSON file type are allowed (in Omeka Classic, go to Settings--> Security from the top of the Admin dashboard; in Omeka S, go to Settings in the Admin sidebar and scroll down to the Security section).

Now just create a new Item as you would any other item in Omeka, with the .json file as your main file upload! Note that if you want a proper thumbnail in Omeka Classic, you should upload two files for your item, first a normal jpg of the thumbnail you want to use, and then the .json file of your 3D model. In Omeka S, there is an option when creating your item for adding a thumbnail image if you wish.

Blender is a free and open source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, video editing, and animation.

Before you start

In this tutorial, we will be using 3 programs, all of which are free to download:

• (available on PC, Mac, or Linux)

• (free on App Store or with Apple ID for MacBook)

• (free on App Store with Apple ID for MacBook)

The Blender Home Screen

When starting a new Blender project, this is the first screen you seen. While it may look daunting, we will only be using a few tools in this tutorial to create new objects and perform minor edits on them.

Basic Object Manipulation

The vertical toolbar on the left side of the screen is where we'll find most of the options we need for object manipulation.

This toolbar is very similar to what you might see in Photoshop. When an object is selected, these buttons let you edit its basic properties in the viewer window. Most important for our purposes are the Move, Rotate, Scale, and Transform buttons (3rd-6th buttons counting down, in the group of four tools). These let you edit your object in the standard ways you would expect.

Extruding

A slightly more advanced tool that may be useful is the Extrude tool, which allows you to take a single face of your object and pull it outward. To access this tool, you must first change the mode you are in from Object Mode to Edit Mode from the drop down just above the manipulation tools.

Now, extruding our default cube once we are in edit mode takes just a few steps. First, just to the right of Edit Mode on the toolbar are 3 options that let us choose whether we want to select points, edges, or faces. The third option allows us to choose a face to extrude.

Now pick which face of our default square we want to pull outward:

Finally, one of the choices on the expanded Object Manipulation toolbar on the left is called Extrude Region. Choosing this tool will let you pull outward, expanding your object in one direction.

Scene Objects and Object Properties

The toolbar on the right displays both the collection of objects within our current scene and the properties of that object.

The top of the pane lists all the objects in the current scene and allows you to select them or make them visible/invisible (again, very similar to Photoshop). The lower window displays the object properties, which can be edited directly here. This includes the manipulation properties which you can also edit in the viewing frame itself. There are many other properties, but we don't need to worry about them for now.

Adding Basic Objects

Blender comes with a number of pre-created basic objects that you can then manipulate to create what you want. To add a new object, just go to Add on the toolbar next to Object Mode.

Once you have chosen your mesh, you can manipulate it or extrude it as needed to create the object you want.

Exporting your Object for AR

Apple's Reality Composer program allows you to import .usdz 3D files. Unfortunately, Blender doesn't let you automatically export files in this format. I recommend exporting your object as a .glb file, as this will let you keep the texture, then you have two options for a quick conversion:

StoryMap JS allows presenters to tell a story or present an idea through interactive maps and images.‌ Tutorial created by Emma Grimm, BC Class of 2022.

Creating an Account

2. Click on Make a StoryMap

3. Before you can make a StoryMap, you will be directed to sign into your Google account. By doing this, all of your information will be saved and you can easily edit any of your projects.

Making Your First StoryMap

Once you have created your account, you will be able to make your first StoryMap or choose from one of your existing projects to edit. If you would like to start a new project, click the button in the bottom right-hand corner.

As you can see, I have two projects already started. Since I am starting a new project, I will press "new" in the corner.

Then, you will have to title your project before you can continue. In my example, I will title my project "Boston," as I will be creating an interactive map that displays different locations in Boston, Massachusetts.

Once you have named your new project, you will be ready to customize your map. Press "create" to start. Below, you can find more information about how to navigate StoryMap and customize your project.

Navigating StoryMap

Once you create a new story map, the standard display seen below will appear. It is from here that you will begin to create your story.

Select Options to Choose and Customize Your Map

By clicking on Options in the top left corner, you can choose the map you would like to use for your presentation. As shown above, you can customize your map by selecting the

• StoryMap size

• Language

• Fonts

• Call to Action

• Map Type

In my example, I will choose the "Stamen Maps: Watercolor" as the map for my project. The font that I chose for my project was "Clicker & Garamond". I will also define my call to action as "Start Your Tour". All of the other settings I left as the default.

In the Media box, Design Your Cover Page

For your cover page, you can choose to either upload an image from your computer or insert a URL address from online. Then, you can insert credit for your image and a caption.

In my example, I chose to upload a picture of the skyline of Boston that I had saved to my computer in "Downloads". Then, I gave credit to my source by providing the URL in the designated box. My changes are shown below.

Title Your Project Using the Headline Box

The headline for the first slide will serve as the title for your project. For each subsequent slide, the headline will act as the subtitle for each section of your presentation. You can provide a brief description in the box below the title box to describe your slide and the point on the map that you are describing.

In my example, I chose my headline to be "Tour of Boston". I also provided a brief caption to describe my presentation, which says "Through this presentation, I will show you some of my favorite places in Boston, Massachusetts!". You can view my changes below.

Underneath the Headline Box, Choose the Background for Your Project

You can customize the color and image that will be displayed in the background of each slide.

In my example, I chose an image of the skyline of Boston as my background image. I chose not to change my background color, though it is an option.

Now that you have finished your Cover Slide, press "Preview" at the top of the screen to view your work and make edits as you see fit.

Notice in my presentation, some of the map that we selected under "Options" is displayed on the left side. Then, on the right side, my background image of the Boston skyline is shown in the back. The street view of Boston is then shown on top as the media image. The title of my presentation is also presented with my caption, as well as my "Call to Action".

Adding New Slides to Your Presentation

On the left hand side of the screen, you can add new slides to your presentation. Just like a PowerPoint or Google Slides presentation, each slide shows the new place on the map that you would like to focus on.

Once you establish what map you will be choosing, on each slide you can decide where you want the map to focus on by typing in a location or coordinate from that map, or by placing the marker over the area you want to focus on.

In my example below, I searched for "Boston" on the map and it gave me locations throughout the world. You can also choose more specific locations or terms, such as "Boston College".

For each slide, you can customize the background and media, just like with your Cover Slide. Additionally, you can choose to customize the Marker.

Customize the Marker for Your Map

On each slide, you can choose an image URL or upload a file from your computer to act as the marker for the areas you have designated on the map. The default marker is a red tag.

On the cover slide, it will show which areas of your map have been selected by displaying your marker, such as the one in the image below.

In my project, I chose to customize my marker to the location I was describing in the slide. As you can see below, I chose to talk about Faneuil Hall Marketplace as my first destination in Boston and I chose the marker that displayed the market.

Once you have selected multiple places on the map, the locations will appear connected by a red dotted line. This way, you can display how your story will travel through the different locations. See how my locations connect down below.

Changing Your View

You can switch between the editing view or preview by clicking on the tabs at the top of the screen. By doing this, you can see the progress that you have made on your StoryMap, and view your project from the reader’s perspective.

The preview of my presentation displays each slide. The viewer of your presentation can click the arrow on each slide to move through your presentation.

Save and Share

When you have finished your project, make sure to save and share! When you click on share in the upper right hand corner, it will provide a link which you can copy and send through email, text, or other platforms of social media. You can also provide a description and featured image that will be viewed first when clicking on the link.

Questions? Contact the Digital Scholarship Team in O'Neill library (digitalscholarship@bc.edu)!

Meshlab is a powerful open source tool for processing and editing 3D meshes. It provides a set of tools for editing, cleaning, healing, inspecting, rendering, texturing, and converting these 3D models. This very short introduction covers downloading the tool, importing an .obj 3D file downloaded from SketchFab, and taking basic measurements.

Downloading Meshlab

As an open-source tool, Meshlab is easy to download and install in just a few simple steps!

1. Head to the .

2. Choose your operating system (Win/Mac/Linux) and click to download.

3. Navigate to the download folder on your computer and double-click to start the installation.

Downloading a Model from Sketchfab

Sketchfab is a hosting platform for 3D models. Many of these models are free to download and are listed under a Creative Commons license. Here are a few simple steps to download a model from the site:

4. A few choices of download types will appear: (a) the original format the file was uploaded in (in this case an "obj" file); (b) gITF, which is useful for web-viewing frameworks; and (c) UZDZ which is for alternate reality (AR) frameworks. For opening in Meshlab, the original format (.obj) is a good choice. Click "Download" and a zip file containing the .obj will download.

5. Once downloaded to your computer, unzip the file. Once unzipped, you will need to go into the unzipped folder (skull-a), open the folder called "source", and then unzip a second folder called "SkullA" which contains three files, including our .obj. Now you are ready to import the obj into Meshlab.

Importing a Mesh into Meshlab

Once Meshlab is installed and you have downloaded and unzipped the model you want to open, start up the program. Your opening screen should look like this:

Once open, importing a model is easy. Go to File --> Import Mesh and navigate to the location where you unzipped your .obj file (in my case, the file location seen below). Select "SkullA_scaled.obj" and the file will open in Meshlab. It should look something like the screenshot below.

Meshlab Basics and Measuring

Meshlab is a powerful tool, but we are only going to be using the very basics for now. To start, you simply need to be able to rotate, zoom, and measure the object.

• To look more closely at the skull, simply click and drag to rotate the model in various directions.

• To zoom in and out, use two fingers on the trackpad or the scroll wheel on the mouse.

• Finally, to measure the object, click on the little measuring tape in the main toolbar, which will look something like this:

Click on endpoints of the distance you want to measure. In the case below, I measured across the eyes of a different model, Skull B, with the result of approximately .095 meters, or 9.5 centimeters! Keep in mind that the units of measurement in Meshlab are in meters, so be sure to convert if need be.

This is a guide to installing and running Tableau Desktop on your personal computer. Please note that all workstations in the Digital Studio (on the second floor of O'Neill Library) already have Tableau Desktop installed.

Tableau has versions for both Windows and Mac. Detailed system requirements for Tableau here: .

Tableau Desktop is a visualization software used to create data visualizations and interactive dashboards. If you are a student, instructor, or researcher, you can request a free, renewable, one-year license for Tableau Desktop through . For instructor and researcher, the individual license is valid for one year and can be renewed each year if you are teaching Tableau in the classroom or conducting non-commercial academic research; The student license expires after one year; you can request a new license each year as a full-time student.

If you are a member of the public, please consider using instead, which is the free version of Tableau Desktop.

Here are the steps for students: (Installation process for instructors and researchers is similar. Just follow the instructions on the screen.)

Step 1: Go to (.)

Tableau Student

Step 2: Click on Get Tableau for Free.

Step 3: A web form will pop up. Complete all of the requested information, using your official BC email address when you fill out the form.

Step 4: Next, click on Verify Student Status.

Step 5: You will receive an email with a product key and link to download the software.

Step 6: Click on Download Tableau Desktop from your email and copy the product key.

Step 7: Follow the installation instructions to install Tableau to your computer.

Step 8: Activate your Tableau with your license key.

For instructor and researcher, click on Request Individual License on the screen.

The pop up request form is similar to the student one described above, but additionally asks "I plan to use Tableau Desktop for..." Under that popup, you can select "Teaching only," "Noncommercial academic research only," or both. Select the option that fits your needs best. You do not need to be an instructor to get a Tableau copy.

​

Tableau Public

Following are the general steps to download Tableau Public:

2. Enter your email address and click "Download the App".

3. Once the installation file has been downloaded to your computer, run it and follow the prompts to install Tableau on your Mac or PC.

​

​

​Tableau Community​

Join the Tableau Community Forums to find solutions for what you need to accomplish. Ask questions to receive help and feedback.

​Tableau Visual Gallery​

Get inspired by the many interactive visualizations in the Visual Gallery. Download the workbooks to play with on Tableau Desktop

Tableau training: How-to Videos​

​Lynda.com --Lynda.com has a great variety of training videos about Tableau.

Note: Lynda.com can be accessed with a Boston Public Library Card. Anyone residing in the state of Massachusetts can apply for a free e-library card. Once you have a Boston Public Library account, you can use your credentials to log in.

More reading about data visualization:

• The Big Book of Dashboards

• Visual Reporting and Analysis: Seeing is Knowing Whitepaper

• Visual Analysis Best Practices: A Guidebook Whitepaper

• Data Storytelling: Using visualization to share the human impact of numbers Whitepaper

• Beautiful Evidence – Edward Tufte

• Information Dashboard Design – Stephen Few

• Information Visualization – Colin Ware

Starter Kit for Text Analysis

https://www.kenflerlage.com/2019/09/text-analysis.html

Search for “Digital Humanities” in Tableau Public

https://public.tableau.com/en-us/search/all/digital%20humanities

3 Easy Steps to Make Graphs

https://digitalhumanities.berkeley.edu/blog/17/06/26/3-easy-steps-make-graphstableau

Add Image of Google Maps and OpenStreetMap as Background Images in Tableau https://help.tableau.com/current/pro/desktop/en-gb/bkimages_maps.htm

U.S. Census Bureau Vizzes

https://public.tableau.com/profile/us.census.bureau?eml=gd&utm_medium=email &utm_source=govdelivery#!/

Simple calculation using Pandas

import pandas as pd
#Simple Calculation
#Count
count_1 = df['var1'].count()   #Count of one column (example: cases)
count_2 = df[['var1','var2']].count()   #Count of more than one columns (example: cases, deaths)
count_all = df.count()    #Count all varialbes in the table

#mean
mean_value =  df['var1'].mean()
# mean = round(df['var1'].mean(),2)         #If decimal places are needed
#standand deviation
std_value =  df['var1'].std()


print('Descriptive statistics of cases')
print('Count:',count_1)
print('Mean',mean_value )
print('Stand Deviation',std_value)

Descriptive statistics

import pandas as pd
#Descriptive Statistics of one varialbe
descriptive_stats_1 = df['var1'].describe()
#Descriptive Statistics of more than one varialbes
descriptive_stats_2 = df[['var1','deaths']].describe()
#Descriptive Statistics of all numbercal varialbes in a dataframe
descriptive_stats_all = df.describe()

Extract a subset by columns and rows

subset_1 = df[['var1','var2','var3']]   #Subset by column name(s)
subset_2 = df[df["var1"] > 100]  #Select rows by value (example: value =100)

Data aggregation

#Collapse
#Collapse data by one varialbe, one aggregation method
df_1 = df.groupby(['var1'], dropna=True).sum().reset_index()

#Collapse data by one varialbe, by more than one aggregation methods
df_2 = df.groupby(['var1']).agg({'var2':['sum'], 'var3':['mean']}).reset_index() #var2, var3 need to be numeric data

In this tutorial, you will learn how to install Google Colab in your Google Drive, and use Colab to perform a number of data tasks including:

• Google Colab Installation

• Data Import

• Data Wringing

• Visualization

• Results Export

When creating 3D models from photographs, taking the photos is more than half the battle! Here are some tips and tricks to make your processing a breeze.

Equipment

Having the right equipment will greatly speed up your processing time. Fortunately, in today's world nearly any camera is good enough to take your photos. A few things to keep in mind:

• Use a camera with at least 5 MPix resolution

• Avoid ultra-wide angle and fish-eye lenses if possible (it is possible to compensate for these effects, but better to not worry about it)

• Fixed lenses are preferred, if possible, but using a zoom lens is fine as long as you stick with one focal length (that is, don't change the zoom levels during the photo-taking process)

Other Equipment

If you are making models of objects, some bonus equipment may prove helpful, even if it is not required:

• A lightbox may be used to spread even, diffuse light across the object being modeled, helping to avoid the effects of shadows (see Environment below)

• A turntable will rotate an object so you can get pictures of all sides, in case you don't have the room to move around the object. The lightbox available in the digital studio has marks at around 10-degree intervals, allowing you to rotate evenly around the object and know where you began and ended.

• A tripod keeps your camera steady at various angles, and will make the process of using a turntable smoother.

Each of these items is available in the O'Neill Digital Studio for you to reserve in the space.

Environment

The environment in which you take the photos is almost as important as the equipment you use. Here are a few things to think about, whether you are taking photos of a fixed feature outdoors or in a controlled, indoor environment:

• Shadows are bad; even, diffuse light is good. If you are working outdoors, a cloudy day is best, though this is obviously not always possible. If you are working inside, using a lightbox (see above) can help to avoid unwanted shadows

• A consistent background color can be helpful, particularly if you end up needing to mask your photos during processing. Again, a lightbox can help with this. Otherwise, it is good practice to position your object in front of a consistent and contrasting backgroun.

• Consistency is key, whether indoors or out. You don't want any objects or people moving around in the background of your images. This can confuse the processing software and make it more difficult to align your photos.

Overlap

For successful 3D modeling of objects with photogrammetry, overlapping images are key, as the object itself is reconstructed through matching pixel groups across photos. Indeed, you ultimately want images of each face of an object from multiple angles in order to make your processing as simple as possible.

The images below suggest a basic process for taking photos of a small object. It combines two factors for each photo, the angle at which the photo is taken and the rotation of the turntable on which the object is sitting. It is recommended to take photos at multiple angles of each side of the object, rotate the object ~10 degrees, and repeat the process until you have taken photos of the entire object.

Check out the Digital Scholarship Sketchfab collection for the final results of the BC eagle model, created using ~100 photos (around 36 photos at 3 angles).

In order to put your own 3D models into Apple's AR QuickView, they must be converted to a .usdz file from the more traditional .obj file. Two methods are outlined below:

What you need

• the model you want to put into AR

• to download Reality Composer, free from the app store for iPad or iPhone, or as part of the free XCode for Mac iOS on a Mac laptop/iMac (Apple Account Required)

• either a Sketchfab account or to download Reality Converter (Mac iOS only, Apple Account Required)

Do you want to play around with converting models but don't have any of your own? Feel free to use our example model below or download one from Sketchfab or from our Digital Scholarship Collection (see Sketchfab instructions below)

Whether you have created an original 3D digital object or generated a model from a real-world subject, many times the software you are using does not allow for a direct export to .usdz, the file format required by Apple for use in its AR toolkit. While there are many plugins and tools available that can make the conversion from different platforms, here we discuss two simple workflows using Apple's Reality Converter and the online 3D repository Sketchfab.

Converting your model in Sketchfab

Sketchfab makes it very easy to convert your model; in fact, it is automatically converted when you upload the model to the site!

1. Go to sketchfab.com and click the Sign Up button in the top-right of the page. Choose your username and confirm with an email and password.

2. Once signed in, click the orange Upload button in the top-right. This will bring up a page that lets you drag and drop a wide variety of files for upload. If you are uploading an .obj that includes a texture, the easiest way is to zip the .obj, .mtl, and .jpg files associated with the model together, and drop the entire zip file into the uploader.

3. Click Upload Files and wait. Depending on how large your model is, it will take some time for the processing to complete. While you wait, you can add a variety of metadata to make your model more findable, including placing it in categories and tagging it with keywords. At this point, it is also necessary to click Free under the Download section on the right side of the page, unless you have an upgraded account on the site.

4. Once the processing is done, the orange Publish button in the bottom-right corner will become available. Click it, and your model is now published!

Once published, you will be able to access your model's Object Page, which allows you and others to manipulate your model, see options for embedding it in another site, and see other model information. This is also where you can download your model as a .usdz. Just below your username beneath the model is a Download 3D Model button; click the button, and a variety of download types are available, including Augmented Reality Format (USDZ). Hit download and you're done!

Converting your model in Reality Converter

Reality Converter is Apple's 3D conversion tool for creating .usdz files. Its process is quite easy as well and allows your models to remain private (if that is important to your project).

1. Download Reality Converter to your Mac (Apple ID required for download) or from the App Store to your iPad/iPhone.

2. Once downloaded and installed, open the program on your device.

3. As with Sketchfab, Reality Converter accepts a variety of files and opens with a Drop files here screen. Drop your .obj file to be converted here.

4. Your 3D model will convert and should appear in the window, yet it will probably only be a view of your mesh with no texture. To add the texture, select Materials in the top-right, click Base Color and then navigate to the texture file (usually a .jpg) associated with your .obj.

5. Your model should be looking better now! To save your file as a .usdz, simply go to File --> Export and choose where to save your converted model

Opening your model in Reality Composer

Reality Composer is Apple's no-coding-required platform for creating basic AR experiences. Here we will talk about how to open your model using this app and create a simple experience that allows your model to appear in AR and when tapped.

1. Download Reality Composer, free from the app store for iPad or iPhone, or downloaded as part of the free XCode for Mac iOS (Apple Account Required)

2. After installing and opening Reality Composer, the first screen asks you to choose an anchor for your model. We won't go into all the details here (see the full guide for more), so simply choose a horizontal anchor so it will act as if your model is sitting on the table or floor.

3. A grid surface will appear with a little square box, along with a small placard sitting in front of it. Feel free to delete this sample object (or keep the placard if you want; if you click on it and scroll down in the properties pane on the right you can change its text to fit your model). To add your converted model, click the + sign in the middle of the top toolbar and click the Import button (Mac) or the large plus sign beneath the word import (iPad/iPhone). Navigate to your converted .usdz file and select it.

4. Your model should appear in the window! At this point, you may need to rotate, scale, or resize your model. Clicking on the model will open up the Properties pane, which allows you to change the scale. It also creates x-, y-, and z-axes around your object, allowing you to move it around your window. Clicking on the arrow header of each axis allows you to rotate the object along that axis. For now, simply make sure your object is rotated so that it makes sense for viewing.

Bonus: want your object to move about when viewed? Select the object and click the Behaviors button on the toolbar (looks like an exploding arrow pointing to the right). Click the + sign to add a new behavior and click Tap and Flip to automatically set up this behavior. See more about behaviors in the full tutorial!

Exporting your Scene

Now you are ready to export and share your model in AR!

On an iPad/iPhone

It's very easy to share your model from your iPhone or iPad. Simply click the ... button (triple dots) in the top-right corner of the toolbar and select Export. At this point, you can choose to share an entire project or just this scene. As we only have one scene right now, select Current Scene and then Export. Depending on what apps you have installed on your device, you can now share via Messages, Gmail, AirDrop, or a variety of other methods

On a Mac

On a Mac, go to File --> Export and again you have the option for Current Scene or whole project. Choose where to save, and it will save a .reality file to that location, which can then be shared in whatever way you wish. Reality files can be opened directly by iOs devices in AR or be imported into Reality Composer by whomever you share it with to be used in their own projects.

Example 1: Tableau Chart Catalog

This catalog provides a list of different chart types with links to actual visualizations built in Tableau and published on Tableau Public. This was developed as a resource for the Tableau community for inspiration and to assist in the understanding of how these chart types might be used in actual use cases. All visualizations on this page are being provided with the permission of the original author and are available for download from Tableau Public. Click on the image to open the actual visualization in a separate browser window. (Note: inclusion does not mean the chart is the best choice for the data represented. Also note that the originator of each chart may not necessarily be represented; these are simply examples).

Tableau Chart Catalog

Example 2: Napoleon’s Invasion of Russia 1812-181

The best statistical graphic ever drawn“, is how statistician Edward Tufte described this chart in his authoritative work ‘The Visual Display of Quantitative Information’. The chart above also tells the story of a war: Napoleon’s Russian campaign of 1812. It was drawn half a century afterwards by Charles Joseph Minard, a French civil engineer who worked on dams, canals and bridges. He was 80 years old and long retired when, in 1861, he called on the innovative techniques he had invented for the purpose of displaying flows of people, in order to tell the tragic tale in a single image. This visualization shows 6 type of data (Number of Solider remaining, Army's direction, Geographic information, Distance, Dates, and Temperature) in 2 dimensions.

Here is the interactive version of this visualization on Tableau public:

https://public.tableau.com/en-us/gallery/recreating-charles-minards-napoleons-march

Example 3: Diagram of the causes of mortality in the army

Example 4: A Pie Chart Redesign in Tableau

Explore this visualization: link

Example 5: Information Wanted

Here is an example that I created in Tableau:

More about his project:

Example 6: Bubble Art with Tableau

Source: https://www.flerlagetwins.com/2017/12/geometric-art-in-tableau_17.html

Introduction

Reality Composer (RC) for iOS, iPadOS, and macOS makes it easy to build, test, tune, and simulate AR experiences for iPhone or iPad. With live linking, you can rapidly move between Mac and iPhone or Mac and iPad to create stunning AR experiences, then export them to AR Quick Look or integrate them into apps with Xcode. This tutorial will introduce the basic functionality of the app and review the interface.

Installing Reality Composer

Reality Composer is free to download from the app store for iPad or iPhone, or downloaded as part of the free XCode for Mac iOS (Apple Account Required). Be aware that XCode is quite a larger program for developing applications, so may not be feasible for older MacBooks or those without much storage space. Running Reality Composer on a MacBook also requires you to send your project to an appropriate iPad/iPhone for testing (see below) or open it in an emulator using xCode.

Note that Reality Composer projects (i.e. what opens in Reality Composer) are saved as .rcprojects while sharable experiences that open directly onto an iPhone or iPad with the Quick Look tool are .reality files.

Getting Started: Anchors

When you first open up a new Reality Composer project, your first decision to make is what kind of anchor you want for the project. The Anchor type will determine what requirements are needed to open your scene in AR.

There are 5 realtively-straightforward anchor types to chose from in Reality Composer:

1. Horizontal: will look for any horizontal surface (e.g. a table or the floor) to open your experience on

2. Vertical: will look for any vertical surface (e.g. a wall) to open your experience

3. Image: will look for a specific defined image that you determine (e.g. a painting or business card) to open your experience around

4. Face: will look for a person's face (as recognized by Apple's camera) to open your experience around

5. Object: will look for a previously scanned physical object (see details at the end of this workshop) to open your experience around

Getting Started: Main Window

Once you have chosen an anchor, the main window of Reality Composer will open, which changes slightly based on the anchor type you have chosen (pictured above is the horizontal anchor view ). You can also change your anchor in the right window Properties pane (as well as change the overall physics of the scene, e.g. to allow things to fall through the floor. This can also be set object-by-object later).

The window opens with two objects already present: a cube and a little placard showing some text. Before checking those out, take moment to familiarize ourselves with the other options on the main toolbar. The most important ones for us will be the Add, the Behaviors, and the Properties buttons, but we can quickly review them all.

1. The Scenes option opens up a sidebar that allows you to name the "scene," or AR view, you are currently working in, as well as create new scenes that can be linked by certain actions (see below).

2. The Frame button just lets you navigate more easily around your scene by allowing you to zoom in on certain objects or on the scene as a whole.

3. The Snap tool will snap objects to other objects or to certain horizontal/vertical lines within the scene (similar to the Photoshop snap tool).

4. The Modify tool allows you to swap between adjusting an object's position/rotation and adjusting its length/width/size (this can also be done in the properties pane, as we will see).

5. The Space button swaps between "global" and "object-oriented" coordinates, allowing you to move an object along various axes within your scene.

6. The Add button adds more models to your scene, of lots of different types.

7. The Play button (also AR button when working on an iPad/iPhone) allows you to test our your scene on a device.

8. The Send to button (Mac only) allows you to send your scene directly to a linked iPad for testing.

9. The Info button checks for updates to your models/scenes.

10. The Behavior button allows you to assign different behaviors to your object based on specific prompts (e..g. if the object is tapped, it flies in the air).

11. The Properties button allows you to edit the properties of a specific model or of the scene as a whole.

Adding and Editing Object Properties

Exploring and playing around with objects is a good way to learn, starting with what comes in our default scene.

Clicking on the cube will automatically open the Properties pane, allowing you to directly edit its various properties like width, height, color, etc. You can also name the object, transform it in space (if you have exact specs you want), and decide if it will obey the laws of physics (e.g. fall to the surface if it appears up in the air). You can also edit directly in the viewing window once an object is selected: arrows pointing along axes allow you to move an object, while clicking the tip of an arrow will allow you to rotate an object around that axis. Give it a try!

Clicking on the placard will open a similar pane, though this one also allows you to edit the text appearing on the sign. Each object you add will have its own individual properties that you can edit.

If you want to add a new object, just click the + Add button. You have the option of many pre-installed 3D objects to work with, as well as signs that can hold text and "frames" which can hold attached images. You can also introduce your own objects by following our tutorial on the subject.

I can drop a plane into our scene by clicking and dragging it or by double clicking.

Adding a Behavior

You can make your scenes dynamic with actions and reactions by adding behaviors to your objects. I'm going to select the plane, and then click the Behaviors button on the toolbar, and a new pane will open up along the bottom of the page

Clicking the + button will open the new behavior pane, where there are several pre-set behaviors you can choose from; if you scroll down to the bottom, you can create a custom behavior. For now, I will choose Tap and Add Force so we can give our plane some movement.

The behavior pane has its first behavior! You can rename the behavior (currently called Behavior) in the left pane; the Trigger pane allows you to determine what action will make the behavior start (in this case, tapping), as well as which affected objects have the trigger attached (in this case, the plane, but you could add more).

Finally, the action sequence allows you to create a series of effects that happen, either simultaneously or one after another, when the behavior is triggered. In this case, we are going to have the plan start moving forward at a certain velocity

Our plane will move forward along one axis when triggered, but that's not really taking off. Adding a second force in an upward trajectory after a moment will make this takeoff look a bit more realistic. To add further actions to the sequence, simply tap the + button next to the words Action Sequence in the Behaviors window. This will then pop up different pre-coded behaviors you can choose from.

In the image above, I added two new behaviors, a Wait Behavior and a second Add Force behavior in a 45 degree upward angle. Importantly, I directly attached the Wait behavior to the first Add Force behavior (with a drag and drop) which means that these two actions will begin simultaneously, and the second Add Force will not start until the first set is complete. This means our plane will move forward a certain amount before briefly "taking off".

Testing your Experience

Now that we have an experience, we need to test it out to see if it functions correctly. There are a few ways to do this:

If you are working on an iPad or iPhone, it's easy. Just tap the AR button on the top toolbar to open the experience in AR, and then the Play button to start the experience from the beginning.

If you are working on a Mac, it's a bit more difficult. On the one hand, if you hit the Play button on the top toolbar, the experience will start, but will obviously not be in AR, making testing a little bit difficult (though you could still test the functionality in the building screen, as pictured below).

There are other options for testing from a Mac, however. If you have an iPhone or iPad handy that has Reality Composer installed, you could connect it via a USB/USB-C cable to your computer. If you then open Reality Composer on both devices and hit the Send To button on your Mac, the file will open in Reality Composer and be editable/testable on your iPad!

Another option is to export the file and share it as a .reality file. To do this, go to File --> Export, and pick either to export the entire project or just the current scene. After saving it on your computer, you can navigate to that folder, select the .reality file, again go to File --> Share in the Finder menu, and choose how you want to share the file (text, AirDrop, etc) to your iPad or iPhone. Opening it on your iPhone or iPad in this way does not require Reality Composer, as it is using the built-in Apple Quick Look platform (you can also share your experience with other people in this way!).

One Last Step

We are going to add one last behavior that will make our action "replayable": returning the plane to its original location after a certain amount of time. Otherwise, once we tap the plane the first time, it's gone.

This can be done by adding one more action to our action sequence, a Move, Rotate, Scale To action that will move our object back home. Adding this action to the end of our action list, and then selecting the plane as our affected object, will allow you to choose where you want the plane to return to. In this case, I will adjust it so it ends up back where it started (by moving the plane in the image back to the left to the starting place). Also note that I added one more Wait action so that the plane will wait one second after it stops being impacted by the force to return home.

And that's it! Now the plane will return to its original location. Project testing videos and the files created with this tutorial can be found below. There is obviously a ton of other behaviors and models to play with, so give it a try!

The Tableau COVID-19 Data Hub contains resources to help people visualize and analyze the most recent data on the coronavirus outbreak.

In this tutorial, we will learn:

1. How to connect data to Tableau

2. How to create worksheets

3. How to create an interactive dashboard

4. How to save and publish your visualization

Download the Data

In this tutorial, we will work the COVID-19 data from the European Centre for Disease Prevention and Control website.

Data preview in Excel:

The data fields are described below:

Connect to Data Source

Startup Tableau desktop, you will get the start page showing various data sources. Under the “Connect” on the left side of the screen, you have options to connect to a file or server data source. Under to a File, choose Text file. Then navigate to the CSV file you just download from the last step:

Creating Views and Analysis

At the bottom of the Tableau desktop, click on a sheet (sheet 1) and you will see the following screen:

Tableau automatically separates the data into Dimensions and Measures. Dimensions are the categorical fields. Measures are the quantitative fields, such as death count, positive cases count

We will create a bar chart tracking number of new positive cases per day. Drag “People Positive New Cases” from Measures and drop it into the “Rows” section. Drag" Report Date" from Dimensions to "Columns". Select “Days” from the shortcut menu.

Note that it defaults to YEAR(Date). To format how the date is displayed, right-click on YEAR(Date) and select Day, specifically the option that has the example "8th May, 2015".

We can also add some filters to the bar chart so that a user could filter to see a certain country or date range. From Dimensions, drag Country Short Name to the Filters shelf. Click on All and then OK.

Next, right-click on the Country Short Name on the Filters shelf and select Show Filter. Now you will see a list of countries on the right.

Double click on Sheet 1, rename the worksheet title to "New Positive Cases"

Next, we will create a map. First, open a new workbook, double click "Country Short Name", Tableau has placed the longitude and latitude coordinates in the columns and rows, respectively, a point map will show on the design canvas.

Drag and drop "People Positive Cases Count" to Size under Marks.

Double click on Sheet 2, rename the worksheet title to "New Positive Cases by Country"

Now we will create the third worksheet, open a new worksheet.

We’ll create a vertical bar chart tracking confirmed case per country.

Drag “People Positive Cases Count” from measures and drop it into the “Columns” section. Drag Country Short Name from Dimensions to "Measures".

Go to the bottom of the chart and click on the sorting icon. Sort the number of positive cases in descending order.

Go to Marks, you customize the chart color by using the color pilates.

Name the worksheet “Positive Cases by Country.”

​

Create an interactive dashboard

Let’s create a dashboard to pull all of these visualizations together. The dashboard will combine our three visuals we have made in the previous steps. Click on the new dashboard icon at the bottom of the page to create a new dashboard.

Our three worksheets are on the left. Drag “worksheet 1" into the drop area on the right.

Combine 3 worksheets:

In this tutorial, we will look at a few advanced graphs that go beyond the show me feature in Tableau.

Tableau is a great tool for data analysis and visualization. It has some powerful tools to make the visualizations appealing and interactive. The Show Me feature can be used to apply a required view to the existing data in the worksheet. Those views can be a pie chart, a line graph, a scatter plot, or a simple map. Whenever a worksheet with data is created, it is available in the top right corner as shown in the following figure. Some of the view options will be greyed out depending on the nature of selection in the data pane.

One such awesome feature is animated data visualization.

Toolbar

At the top of the page you can see a toolbar where you can find different options for creating a report.

Pages, names

First of all, your report needs a title. You can simply name it at the top left corner and the changes will be automatically saved. Then you can add multiple pages to the report which you can also name and easily switch between them.

Types of data visualization

The next part of the toolbar is the data visualization tools. You can select the graph type you want to build.

For example, a bar chart requires you to select one dimension and at least one metric. If you add multiple metrics, you will see multiple bars for each category.

Inserting text and images

You can insert text, images, rectangles, and circles to the report depending on your purpose.

Selecting layout and theme

Layout and theme give you the possibility to play with the style of your report. You can change the background, colors, text styles, and display options and create a unique style that can represent the style of your company.

Styling and controlling menu

Styling and controlling menu is a great help in the process of creating a report. You can select the chart type, experiment with metrics and dimensions, change data sources, apply a filter, etc.Now let’s switch between view and edit mode to see how our sample report looks like:

Sharing the visualization

You can do a few things with the share feature. You can collaborate on the visualization with your team or clients. Depending on their level of access, they can view or edit the reports through an invitation or a shared link.

The visualizations also can be shared by embedding them into online and offline content, from websites and blog posts to annual reports.

Step 1: Navigate to

Step 2: Click on "use it for free button

Step 3: Sign in with your Google account and password. You should now see the home page of the Data Studio

Step 4: click on 'Create' button on the top left:

Step 5: Click on 'data source'

Step 6: Find and Click on Google sheet connector

Step 7: Find and Click on the Google sheet

Step 8: Once you select the worksheet, there are still some decisions to make. You have three options:

1. Use the first row as headers. Selected by default. Does what it says on the tin.

2. Include hidden and filtered cells. Selected by default. If you want to keep data out of Data Studio by hiding its columns in Google Sheets, deselect this.

3. An optional range of cells containing your data. Data Studio looks at the entire worksheet by default. If your table lies in a certain range, specify that here.

Step 9: Click “Connect” to give Data Studio access to the Sheet:

Step 10: You should now see a screen like the one below. Next we need to help Data Studio understand what kind of data you’ve given it.

Step 11: Google Data Studio doesn't always determine the correct data type for each field. so you need to make sure that each field is of the correct data type.

Step 12: Create calculated fields (optional)

Data Studio allows you to add custom fields to a data sources. So instead of adding all sorts of columns and formulas to your sheet, you can add them to your data source. That’s great because you can add calculated fields on the fly, without modifying your source data. Your new fields will be accessible in any reports that use this data source.

Step 13: Once everything looks right then click on the "create report" button, this will create an empty report with your Google Sheets data source connected to it:

Step 14: Charts in this report will use your new data source by default. Now you’ve got a data source and report to work with. The rest is up to you!

Google Colab Installation

Step 1: Go to your Google Workspace Marketplace and search for "colab"

Step 2: Locate "Colaboratory" and click add to drive

Step 3: Access Colab as using a regular Google doc

Basic Layout in Google Colab

The Problem

is an excellent tool for quickly and easily creating basic storymaps, which combine spatial data with text and various multimedia. One feature that makes it particularly useful is the ability to import high-resolution imagery as tiles from sites like the or the . However, when importing these maps, Knightlab StoryMap automatically sets the maximum zoom level to what it thinks is "appropriate" based on the size of the map. This does not allow the user or the creator to take advantage of such high-resolution images.

The solution has three steps:

1. To create your own high-resolution map tiles

2. To host your tiles on Github

3. To import your tiles as a Gigapixel map into Knightlab

To Create Tiles of your Map...

...using Adobe Photoshop (2020 and earlier)

There are two ways to go about creating your own tiles. If you have access to Adobe Photoshop, the process is quick and easy.

• Download your image as a .tiff/.geotiff file from a site like David Rumsey or the NYPL, or use your own image.

• Open your image in Adobe Photoshop.

• Write down the size of your image in pixels. This can be seen by going to Image-->Image Size in the main toolbar. The width and height should then be displayed; make sure your units are in pixels! You'll need this information for adding your tiles to your storymap later.

• It's time to Zoomify your map! Just go to File --> Export--->Zoomify and the Zoomify export menu will pop up. Here you can set the export folder where your tiles will be sent to, as well as the Image Quality. For high-res images, you might as well use the highest quality possibly. Once you are ready, hit Ok. A web browser may pop up, but you can close it. If you navigate to the location where you saved your files, you should now see a series of folders containing your tiles!

...using Zoomify Free (Windows only)

If you do not have access to Photoshop, don't despair! Zoomify has a free tool you can download which will perform the same tiling as photoshop does.

• Once downloaded, open the Zoomify Free Converter application on your computer

• After downloading your high-resolution image, drag and drop the downloaded file onto the converter (or use File-->Open). The tiling will begin automatically and will save to the folder where your image is located. And you are done!

...using OSgeo4W/gdal2tiles (Windows)

To tile your image using OSgeo4w, follow these steps:

2. Save your georeferenced map to a known location on your computer by exporting it from ArcGIS, QGIS, or MapWarper (see our tutorial for georeferencing maps in MapWarper).

3. Open up the Osgeo4w command line from the start menu

4. Navigate the command line to the folder where your raster image is stored using the cd ('change directory') command (e.g. cd c:\temp\saved\testImageFolder)

5. Type “gdal2tiles -geodetic imageToBeTiled.tif FolderName” where imageToBeTiled.tif is your exported georeferenced image and FolderName is the Folder you want to be created to hold the tiles

   1. To add control for what zoom levels are created add: -z 2-15 after -geodetic. This example would create tiles for zoom levels 2 through 15

6. Your image is now tiled! A variety of test maps are automatically created in your folder holding the tiles which you can drag and drop into a browser. In some cases, tiling a .jpg may work better than tiling a .tiff, especially if you have self-georeferenced the image.

...using Maptiler (Windows and Mac)

The free version of Maptiler restricts the size of your image in pixels (10k x 10k) and file size (30 MB), as well as creates a watermark on your tiles. It also does not let you control the zoom levels which are created, meaning that smaller maps (e.g. portions of a city) cannot be tiled appropriately. It also requires spatial data for the map, meaning that you must georeference your image either within the platform or on software like ArcGIS or QGIS.

Yet, it is quite user-friendly otherwise. Simply drop your image into the window after opening...

...and you will be asked about spatial data. If you previously georeferenced your image in ArcGIS, it will automatically detect the spatial data; otherwise, you will need to match up your map with a full-world map using control points. This is, however, quite easy for larger maps, just click the location on your image, then on the world map, and those locations will be linked together. It is recommended to choose at least 4 points scattered across your map.

Once you have added enough points and hit "Continue," you will be asked how you want to export your map. For our purposes, a "Folder with tiles" is fine (MBtiles is for Mapbox, OGC GeoPackage is for SQL databases, neither of which we are concerned with here.

Once you choose your folder, your image tiles will be exported!

To Host your Tiles on GitHub

• Sign up to create an account on Github.

• Start a new project either by pressing the “Start a project” button or, if you already have a Github account, clicking on the plus sign in the top right and selecting “New repository.” Give it an identifying name and make sure it is set to "Public"

• Once your repository is open in Github Desktop, you can open the folder in your Finder/Explorer window by clicking the "Show in Explorer" button on the right side of the screen. This folder is often located in a folder named "Github" in the Documents section of Explorer in Windows. Once you’ve located the folder on your computer, move all the files and folders generated by Zoomify into your repository folder.

• Once your files are copied, return to the Github Desktop application. You should now see a series of files that have been changed in your repository, all the files you just copied over! In the “Summary” field, type a descriptive message of your content. Then click “Commit to Main” to upload your files. This process may take a few minutes depending on the size of your files. Finally, when a blue button appears, click "Push Origin" to push your files to the online version of the repository.

• Once your sync has completed, return to your online github repository and you should see your tile folders. The final step is to make these files publicly available with a URL. Navigate to the "Settings" tab and scroll down to the “Github Pages” section. Create a page for your project by selecting the source branch (main) and clicking “Save.” After the page refreshes, scroll back down to the Github Pages section and you will find the url you can use to create your Gigapixel (Note: clicking on this link directly will take you to an error page saying that Github can’t find what you’re looking for. This is normal.).

To Load your Tiles in Knightlab StoryMap JS

Now you have made your tiles and hosted them on Github; the last step is to load them into Knightlab. (Note: this tutorial assumes you are familiar with StoryMap JS; if you are not, see our tutorial on StoryMap JS here)

• From the Options menu, where you select your background map image, change the Map Type to Gigapixel, insert the URL for your github tiles into the Zoomify URL box, and finally, under Max Image Size, insert the width and height of the original image in pixels. This can be found by opening the file in Photoshop (see above) or by looking at the Details tab under the Properties of the original image.

• Make sure "Image" is chosen under the "Treat As" option, as we are using a map that does not have any real spatial data attached

And you are done! You should now be able to zoom in much closer into your high-resolution image on each slide of your storymap.

Exemplar data: COVID-19 case and death data (date: 202012006)

Bar Chart

Tutorial:

Line Chart

Scatter Plot Chart

Create New report on Airbnb Boston reviews

To create a new report from scratch, a portion of the has been uploaded into a to be used as data source for Google Data Studio.

• the full Kaggle dataset of the Airbnb reviews in Boston is available at

• the Google Sheets, with approximately 10k reviews, to be used as data source is available at

• Spend some time to understand the data by reading their description on Kaggle and looking at the table on Google Sheets.

• The data-source table has been created by joining the “Listings” and “Reviews” original tables provided by Kaggle, and exporting the first 10k joined rows sorted by ascending “listing_id”.

Create a new report

• Go to the Data Studio home page

• Click on “Start a new report” (Blank)

• Rename the “Untitled Report” with a name of your choice by clicking on the name itself

• Create a new data source by clicking on the blue button on the bottom right, or select the Airbnb data source if it is already present in the right-pane list

Connect to the Google Sheet data source by using its URL:

• Choose the “Google Sheets” connector in the list of connectors on the left

• Choose the “URL” option in the first column

• Choose the “Reviews Query DW” worksheet in the next column

• Tick the option to “use the first row as headers” if it is not ticked yet

• Click on the “Connect” button to execute the connection to the data source

Dimensions, metrics, and transformations

• Check the type and aggregation of each field and that all the fields are correctly interpreted as either dimension or metric.

• • CONCAT(latitude, CONCAT(', ', longitude)) → to generate a (lat, long) field useful for map charts; before generating this new field, set “Aggregation=None” for latitude and longitude fields, so that they become dimensions (by default, Data Studio considers them as metrics)

After creating new fields and updating the existing ones, click on “Add to report”

Analyze the data

Analyze the data by building the following visualizations. Then, explore and create new visualizations to find interesting insights on your own.

• Analysis (1): Number of Records over time

Analysis (2):

• analyzing the number of different reviewers for each (lat, long) locationnote that the Kaggle dataset of the Airbnb reviews is in Boston, Massachusetts, US

Allow end-users to filter the data under analysis by selecting a date range and city name.

API: Application Programming Interface “An API is a set of definitions and protocols for building and integrating application software.”

REST API: “Representational State Transfer API”

API is basically a set of functions and procedures that allow one application to access the features of other applications, REST is an architectural style for networking applications on the web. It is limited to client-server based applications. REST is a set of rules or guidelines to build a web API. There are many ways to build a web API, and REST is a standard way that will help in building it faster and also for third-parties to understand it better.

1. API call use “candidate” in OpenFEC Developer page, and the first API builder “/candidate​/{candidate_id}​/”

2. Input the value (candidate id) from A2 in sheet tab "person"

3. Make the API call and retrieve data of candidate's name, party and office.

4. Output the data to sheet tab "live".

function CandidateData() {
  
  var key = "YOUR API KEY"    //API Key
  var ss = SpreadsheetApp.getActiveSpreadsheet()    //Assign Google Sheets (including all tabs) to varialbe ss
  var wsName = ss.getSheetByName("person")    //Assign tab "person" to varialbe wsName
  var name = wsName.getRange("A2").getValue()  ////Extract candidate id from tab "person"

  let apiURL = 'https://api-stage.open.fec.gov/v1/candidate/'+ name + '/?api_key=' + key
  var resText = UrlFetchApp.fetch(apiURL).getContentText()   //Make the API call to extract data in JSON file format
  var resJSON = JSON.parse(resText)      //Parse JSON data

  var record = resJSON["results"][0]
  var can_name = resJSON["results"][0]["name"]                         
  var party = resJSON["results"][0]["party_full"]
  var office_f = resJSON["results"][0]["office_full"]


  //*****Output Results**********//
  var wsLiveData = ss.getSheetByName("live")   //**SETUP OUTPUT SHEET

  var candidate_name =  wsLiveData.getRange("A2")    //SETUP A2 for Candidate Name
  var party_full = wsLiveData.getRange("B2")         //SETUP B2 for Party Name
  var office_full = wsLiveData.getRange("C2")        //SETUP C2 for Office 

  candidate_name.setValue(can_name)               //SEND extracted value to var candidate_name
  party_full.setValue(party)                      //SEND extracted value to var party_full
  office_full.setValue(office_f)                  //SEND extracted value to var office_full
}

1. API call use “candidate” in OpenFEC Developer page, and the first API builder “/candidate​/{candidate_id}​/”

2. Input the value (candidate id) from A1: A20 in sheet tab "id_list"

3. Iterate the ID list to make the API call, and retrieve data of candidate's name, party and office.

4. Output the data of 20 candidates to sheet tab "result".

function CandidateData() {
  //API Key
  var key = "YOUR API KEY"
  var ss = SpreadsheetApp.getActiveSpreadsheet()

  var wsResult = ss.getSheetByName("result")  //Setup Output Sheet 
  var sheet = ss.getSheetByName('id_list').getRange("A1:A20").getValues()  //Setup Input Sheet & Data range

  var toAddTable =[]    
  for (i = 0; i < sheet.length; i++) {
    //console.log(sheet[i][0])
    var toAddArray = []
    var name = sheet[i][0]

    let apiURL = 'https://api-stage.open.fec.gov/v1/candidate/'+ name + '/?api_key=' + key
    var resText = UrlFetchApp.fetch(apiURL).getContentText()
    var resJSON = JSON.parse(resText)

    var record = resJSON["results"][0]
    var can_name = resJSON["results"][0]["name"]
    var party = resJSON["results"][0]["party_full"]
    var office_f = resJSON["results"][0]["office_full"]

  //**********Add Values to the Created Table Array ********//
    toAddArray.push(can_name)
    toAddArray.push(party)
    toAddArray.push(office_f)
    toAddTable.push(toAddArray)
    }
  //console.log(toAddTable)
  wsResult.getRange("A2:C21").setValues(toAddTable)
  
}

Map Warper is an open source map warper/map georectifier, and image georeferencer tool developed, hosted, and maintained by Tim Waters.

Creating an Account

In Map Warper, it is possible to browse and download maps others have uploaded into Map Warper without an account. To georectify your own map, however, you must make one. This also allows you to easily return to your maps later.

1. On the top right corner of the page, click "Create Account"

2. Select a username and password and enter an active email address.

3. Click "Sign up"! You should quickly receive an email to confirm your account

Upload a Map with any Available Metadata

Now that you are logged in, you can upload your own images to the Map Warper server in order to georeference them.

1. Clicking “Upload Map” on the main toolbar (note if you are not yet logged in, it will ask you to do so at this point)

2. Insert any available metadata and a description of the map. This is useful both for your own records and for anyone else searching for similar maps on the Map Warper server.

3. At the bottom of the page, choose to Upload an Image File from your local computer or from a URL. Once the file has been selected, click "Create"

Once the upload is complete, a new page will appear informing you that the map was successfully created as well as providing an image of the uploaded map.

Rectify a Map with Control Points

Now the map is on the platform, but it does not yet have any spatial information associated with it. The next step is to use what are called "control points" to place your map in a “real-world” coordinate system where it can interact with other types of spatial data.

Understanding the Georectifying Window

1. Once your image is displayed, select "Rectify" on the main toolbar.

2. This opens up the Georectifying page, the most important page in this tutorial. It is composed of two windows, one showing your map and one showing a “basemap” which you will be using to geolocate your map.

3. In the top right corner of each map there are a series of buttons that help you navigate the map and add control points

4. The goal here is to create what are called, “control points,” or points that are corresponding between your uploaded map and the basemap. This is done by simply zooming in on each map in turn and creating a control point as close to the same point as possible in each map.

The last two icons appear only on the basemap and are used to adjust it as needed to help with georeferencing

Creating Control Points on your maps

1. Navigate on your map to an easily identifiable location. In this example, I have chosen the tip of the island in the middle of Paris that the Notre Dame Cathedral is on. Note that an external mouse with a scroll wheel can make the zooming/moving process easier; zoom and pan buttons are also provided in each window.

2. Click the “Add Control Point” icon, then click again on your map in the desired location. A little control point should pop up!

3. Swap to the basemap and click the “Pan” tool (the hand) to find the proper location, then again select the “Add Control Point” tool and click on the corresponding point on the Basemap.

4. Once you have created a control point on each map, scroll down and click the “Add Control Point.” This will add the control point coordinates to a list of points below, which you can see by clicking the words “Control Points."

Check for Error and Warp the Map

1. After you add the 4th control point, your table of points will start including error information, as the points are triangulated against one another. Note that this error may not mean that you are doing anything wrong, particularly in an older map that is not as spatially accurate as something more modern! On the other hand, if your error is quite high and you believe your map is relatively accurate, you may have misplaced a control point somewhere. Usually, high error is caused by a single point being misreferenced.

2. When you feel like you have enough points scattered around your map, we are ready to georectify the map! Remember you can always come back later and add new points or remove old ones if you feel like the result is not to your liking. To georectify your map, just click “Warp Image!” at the bottom of the page and you’ll get a notice that your rectifier is working.

When the map is finished rectifying, you will get a notification that rectification is complete. Now, you should be able to see your map overlaid on the Basemap, as well as be able to turn it on and off or more or less opaque to check for accuracy!

Exporting your Map

If the map is to your liking, you are ready to export. Map Warper offers a variety of ways to export your map depending on your needs

1. To export your map, Select the Export tab on the toolbar. A window like that seen below will pop up, giving you a variety of choices for exporting

Some exporting options:

• GeoTiff:

  • public domain standard; easily imported into a wide variety of spatial platforms like ArcGIS or QGIS; good for backing up your georeferenced map on your local computer or in cloud storage like Google Drive

• .kml:

  • Easy import directly into GoogleEarth

• Tiles (Google/OSM scheme)

  • Useful for loading into tools like ArcGIS online and Knightlab StoryMap JS. Remember to ensure a backup of your files elsewhere though in case your map is eventually removed from Map Warper.

What is JSON file format?

• JavaScript Object Notation

• JSON is a syntax for storing and exchanging data

• Main data format for API data exchange.

This tutorial goes along with the tutorials Tiling High-Resolution Images for Knightlab StoryMapJS.

Problem

So, you have some tiles of a high-resolution image, now you need to allow other people to see those high-resolution images in a zoomable viewer. While the previous tutorial (linked above) allowed you to import your image into KnightLab StoryMap JS, sometimes you want to display the image on your personal site. This tutorial will show you how to create an iFrame embed that can be used on sites like CampusPress or Omeka, with your tiles hosted in GitHub (as with the StoryMap example).

Here we will review 3 tools that can help you achieve this goal: Zoomable, Zoomify, and Leaflet

Using Zoomable

Zoomable (https://zoomable.ca) allows users to quickly create zoomable images, but it is free version is limited (5 uses per email). Various plugins for sites like WordPress and Knightlab do exist but must be purchased individually. The free version also does not allow you to host your own images, so you are beholden to their servers functioning. However, it is a very quick process if you only have a few images.

1. Go to the free Zoomable upload page (https://srv2.zoomable.ca/upload_new.php)

2. Upload your image (30MB max; supports JPG/PNG/TIF) and enter your email address

3. An email containing your zoomable image will be sent to you; once it has, click on the included link (Example from San Francisco Chinatown Image)

4. In the top-right corner is the "embed image" button. Clicking this button will give you an iFrame embed code that you can copy and paste into your website html (for information on iFrame html code, see this page for examples)

Pros: Very fast and very little coding required (only iFrame embed); don't need to tile the images yourself

Cons: Minimal free service, don't control your own tiles

Check out our example CampusPress page for what this embed looks like

Using Zoomify

Our old friend Zoomify (last seen in the previous tutorial where we used Zoomify Free to tile an image) also provides us the basic information we need to host our image on a site like GitHub. When you download Zoomify free, it comes with a variety of other files, including a javascript file (ZoomifyImageViewerFree-min.js) and an HTML file (TemplateWebPage.htm). The files are linked below for your reference.

In order to visualize our image using the Zoomify web viewer, we need to create a GitHub repository that contains (1) our tiles, (2) the javascript file linked above, and (3) an HTML file specific for our image.

First, we need a GitHub repository to put our image. If you are unfamiliar with GitHub, the previous tutorial walks you step by step on how to create an account, create a repository, and download Github Desktop to make everything easier. It also shows you how to upload your tiles, which we will do again here.

For this tutorial, I've created a Tiling and Mapping GitHub repository and linked it to my Github Desktop. I will now copy into it the tiles created in the previous tutorial and the Javascript file linked above.

Now we need to create an HTML file that will contain our zoomable image. Luckily, this is easier than it might sound because Zoomify has already done most of the work for us! First, open up a blank text document to create your file. I reccomend using Atom (any iOs) or Notepad++ (PC only) as these text editors are helpful for coding. I'm going to save mine as zoomifySanFran.html in my repository folder (make sure you save it as an html file and not a text file!)

Copy the following code into your html file, which is directly copied from the example html file supplied by Zoomify and save your file.

<!DOCTYPE html>
<html xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<!--COPY ME INTO HEAD--><script type="text/javascript" src="ZoomifyImageViewerFree-min.js"></script>
		<!--COPY ME INTO HEAD--><script type="text/javascript"> Z.showImage("myContainer", "ZoomifyImageExample"); </script>

	</head>

	<body>

		<!--COPY ME INTO BODY--><div id="myContainer" style="width:900px; height:500px; margin:auto; border:1px; border-style:solid; border-color:#696969; background-color:#000000;" ></div>


	</body>
</html>

In order to load your file into the viewer, you only need to change 1 line of code! In line 8, where it says ZoomifyImageExample, change the name of the folder to the folder containing your tiles; in my case, that is sanFran (see above), so the code line 8 ends up looking like:

		<!--COPY ME INTO HEAD--><script type="text/javascript"> Z.showImage("myContainer", "sanFran"); </script>

Save your HTML file, and sync it with GitHub as described in the previous tutorial (Commit to Main-->Push Origin in your Github Desktop window). Once synced, your GitHub repository will look something like this:

Now if you have published your page in the settings tab, your image should now be viewable in the viewer using the HTML page for your site + the name of the webpage you created; in my case, this is: https://bcdigschol.github.io/tilingMappingWorkshop/zoomifySanFran

Once it is hosted on GitHub, you can embed it as an iFrame on any website you want, with the syntax being as follows (where you can replace the URL with your own file URL, and the title with your own title)

<iframe src="https://bcdigschol.github.io/tilingMappingWorkshop/zoomifySanFran" title="Self-tiled San Francisco Chinatown Image" width="900px" height="500px"></iframe>

To see an example iFrame embed, see our Test CampusPress Page.

And that's it! You can use the same repository for all of your images if you wish, just make a separate .html file that you can use for your iFrame embed!

Using Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

For more details about setting up an interactive leaflet map and adding spatial data, check out our tutorial on the subject. Here we will just be using the viewer to view a tiled image.

Let's return to our depository, but this time we will download the leaflet javascript package as well as a plugin for viewing tiled images

• Download Leafletjs and the Zoomify leaflet plugin (Code --> Download .zip file). Drop them into your repository folder with your tiled images.

• Like the previous example, this plugin comes with a nice example script for your html. You can find it in the downloaded folder (example.html) or can copy it from below. As before, you want to create a new html file. I called mine "leafletZoomifySanFran.html"

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 1.0.0-b1 Zoomify Demo</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
    <style type="text/css">
        html, body, #photo {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="photo"></div>
    <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet-src.js"></script>
    <script type="text/javascript" src="L.TileLayer.Zoomify.js"></script>  
    
    <script type="application/javascript">
		var map = L.map('photo', {
        	maxZoom: 15, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
	        minZoom: 0,
   	     	crs: L.CRS.Simple //Set a flat projection, as we are projecting an image
    	});
    	
    	//Loading the Zoomify tile layer, notice the URL
    	var layer = L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/{g}/{z}-{x}-{y}.jpg', {
			width: 5472,
			height: 3648,
			attribution: '&copy; Photo: Bjørn Sandvik'
		}).addTo(map);

		//Setting the view to our layer bounds, set by our Zoomify plugin
		map.fitBounds(layer.options.bounds);
    </script>
</body>
</html>

Now, there are a few changes we want to make to alter the code for our needs.

1. On lines 5, you can change the Title of the page to whatever is appropriate for your image

2. On lines 6 and 19, you should change the URL to point to the local version of leaflet you have downloaded into your repository. This means it will look something like "./leaflet/leaflet.css" and "./leaflet/leaflet-src.js" depending on the name of your leaflet directory inside your repository

3. On line 20, make sure "src" points to the location of the downloaded Leaflet Zoomify Plugin. In my case, I changed it to "./Leaflet.Zoomify-master/L.TileLayer.Zoomify.js"

4. On line 30, you need to change the URL to your github repository folder containing the tiled images. In my case, this was "https://bcdigschol.github.io/tilingMappingWorkshop/sanFran/{g}/{z}-{x}-{y}.jpg"

5. Finally, on lines 31, 32, and 33, change the information to the width, height, and attribution of your image, which can be found in the Properties or Info of your image.

The final version of my script is as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet Zoomify San Fran Demo</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css" />
    <style type="text/css">
        html, body, #photo {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="photo"></div>
    <script src="./leaflet/leaflet-src.js"></script>
    <script type="text/javascript" src="./Leaflet.Zoomify-master/L.TileLayer.Zoomify.js"></script>

    <script type="application/javascript">
		var map = L.map('photo', {
        	maxZoom: 15, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
	        minZoom: 0,
   	     	crs: L.CRS.Simple //Set a flat projection, as we are projecting an image
    	});

    	//Loading the Zoomify tile layer, notice the URL
    	var layer = L.tileLayer.zoomify('https://bcdigschol.github.io/tilingMappingWorkshop/sanFran/{g}/{z}-{x}-{y}.jpg', {
			width: 13463,
			height: 5952,
			attribution: 'David Rumsey'
		}).addTo(map);

		//Setting the view to our layer bounds, set by our Zoomify plugin
		map.fitBounds(layer.options.bounds);
    </script>
</body>
</html>

Sync your repository and then your image should be visible on the web (https://bcdigschol.github.io/tilingMappingWorkshop/leafletZoomifySanFran.html)

And the iFrame works the same way as previously!

<iframe src="https://bcdigschol.github.io/tilingMappingWorkshop/leafletZoomifySanFran" title="Self-tiled San Francisco Chinatown Image" width="900px" height="500px"></iframe>

See the results on our embed test page!

That's all for now. Please contact Matt Naglak, Digital Scholarship Librarian (naglak@bc.edu) if you have questions or come across any errors. And check out our other tutorials!

API - Application Programming Interface. REST API - Representational State Transfer API. SERVER: the place has the resources. Client call (API call) -> Server - Data back over HTTP protocol. API Key - interface to identify its user, developer or calling program to a website, which is normally used to assist in tracking and controlling how the interface is being utilized.

Four API Call Types:

• Post: Create

• Get: Read

• Put: Update

• Delete: Delete

Compose the API Call through https protocol:

/Resource/ {Required parameter} (Optional parameter) API Key

The following covers setting up your map, adding data, and popups.

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance, and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API, and a simple, readable source code that is a joy to contribute to.

Leaflet offers much more flexibility for story-mapping than many other tools used for such projects; on the other hand, it does demand a basic knowledge of coding in JavaScript.

Here, we walk through the basic steps of setting up a Leaflet map, adding spatial data, and creating popup boxes that go along with that data. Though there are many ways to organize your map files, here we will first create a basic HTML file that will hold your map and then a second JavaScript file that will contain the code for the map and spatial data. To download all the tutorial files discussed in this lesson, click below or visit our GitHub page!

How to Set Up the Leaflet JS Library and your HTML page

Your map needs to be situated on an HTML page in order for it to function. Luckily, it only takes a few steps to get this up and running.

Create an empty folder to hold your map files, and then in the folder new text file in a text editor and save it as index.html. I recommend using Notepad++ (Windows only) or Atom, as your text editor, as these are designed for coding, rather than regular Notepad or Word. At the top of your file, put the following introductory code to set up your HTML and name your map. Each line is commented to let you know how it is functioning.

<!doctype html> <!-- This says your file is in .html -->
<html lang="en"> <!-- This says your file is in English -->

<head>	<!-- This opens your header. Your header is where different libraries and plugins are loaded -->
  <meta charset="utf-8">
  <title>Put the Title of Your Map Here</title> <!-- Put the title of your map here -->
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

Next, you need to tell your HTML to access the Leaflet JavaScript library and its associated CSS stylesheet. You have two options for this, as you can either host the files locally on your computer or call them from their already-hosted location on the web.

• To call them from the web, simply copy these lines into the <head> section of your HTML

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
 crossorigin=""/>
   
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
 
 </head>

• To host the files locally, download and unzip Leaflet, placing the entire Leaflet folder into the folder with your HTML file. Now, you simply need to change the "href=" and the "src=" links from the above code to the current location of your file. It should end up looking something like this. You can also close your header at this point.

 <!-- Load Leaflet files locally -->
 <link rel="stylesheet" href="./leaflet/leaflet.css"/> <!--Put the path to the leaflet.css  you downloaded here -->
 <script src="./leaflet/leaflet.js"></script>  <!-- Put the path to the leaflet.js you downloaded here -->
 </head>

Finally, you need to create the container that will hold your map and set its size on the html page, as well as call the JavaScript file that will be your map itself. This will take place in the <body> of your code. And that's it, your html file is done for now!

<!-- In the body of the code, you need to create the division on the page for your map and call the map.js file you will make next -->
<body>
	<div id = "map" style = "width:900px; height:580px;"></div> <!--set the size of your map -->
  <script type="text/javascript" src="nameOfYourMap.js"></script> <!--call the javascript file for your map -->
</body>
</html>

Starting your Map Javascript File and Loading a World Map Tilelayer

So you've got an HTML file with a map container, but that container is currently totally empty. In this step, we will walk through how to load up an externally hosted world map and show you how to open the HTML file on your own computer. It only takes a few lines of code!

First, create a new empty text file and save it as a javascript file, making sure to use the same file name that you referred to in the HTML file. The first step is to define your map options and create the map object itself. There are a variety of default mapOptions you can set; here we simply choose the center of the map, its initial zoom, and its max zoom level.

var mapOptions = {
 center: [42.336004, -71.169212], //set center Lat/Long of your area of interest
 zoom: 16, //set initial zoom level
 maxZoom : 24,  //set max zoom level
 tap : false //fix popup bug on Safari
 }

//Creates map object according to map options
var map = new L.map('map', mapOptions);

Now you need to load a background map. While it is possible to load a locally hosted tiled map as a background map (which will be discussed in a different tutorial), here we will simply use one of the maps hosted online already by ArcGIS online. Notice that the basemap variable is made up of a few parts: a variable name, a URL for where the layer is located, and attribution information. Other layer options are also possible here, similar to the map options above.

//Example of an externally called basemap
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
			attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'});

Esri_WorldImagery.addTo(map);

The last line of this code is key; for each variable, you must add it to your named map variable (in this case the "map" defined above) in order for it to appear on your map.

Now it's time to open your map! This is simple enough: just drag your index.html file into a browser window, and your map should appear, centered on your favorite university library!

Adding Spatial Data to Your Map

Now, we have some background imagery, but what about adding other spatial data? There are lots of ways to add spatial data to your map, depending on what form you want it to take. Here we will talk about two methods: adding points individually and importing points from an excel file or a CSV (comma-separated list) exported from excel.

Adding point data directly to your map via code

Adding point data individually is as easy as one line of code! Just give your point variable a name (here bcLibrary), add the coordinates, and add it to your map!

var bcLibrary= L.marker( [42.336004, -71.169212] ).addTo(map);
//adds marker at designated lat/long

Adding a polygon is just as easy! You just need the coordinates for its corners, like this one which is roughly situated around the library.

var libraryPolygon = L.polygon([
    [42.336477, -71.169550],
    [42.336569, -71.169126],
    [42.335788, -71.168826],
    [42.335728, -71.169314]
]).addTo(map);

Now open your map again, and it should look similar to that below!

Adding point data from an external source

Sometimes you already have your spatial data in an external location (either in an excel file or on another platform) and you want to import it fully formed into your map. In order to do this, you need to convert your data into a geoJSON format, a standard spatial format for data that is able to be easily imported into Leaflet.

• For spatial software like ArcGIS or QGIS, such a transformation is easy. You can export files like shapefiles or geodatabase files directly into GeoJSON files to import into Leaflet. Check out the linked pages for more information.

• From software like GoogleEarth, you first want to export your data as a .kml file. From here, there are many free online platforms like MyGeodataConverter that can convert the files to GeoJSONs for you!

• Finally, you can convert your data even if it is in a simple excel file. The key here is to export your file as a .csv. Then, similar to .kml files, there are opensource tools online that will convert it for you.

Great! Now you've got your .geojson file; it's time to get it into your map.

• First, make sure a copy of your .geojson file is in the folder with your HTML and map javascript files.

Now, there are 2 different ways forward here:

• You can simply copy and paste the entire .geojson into your code, if desired (see an example here). Simply set it equal to a variable and you are good to go. On the downside, this approach both clutters up your code, potentially making it very long, and makes it more difficult to find and change any desired attributes

//example code from leafletjs.com, in this case inserted directly into your map code
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

• A second approach is to enter the GeoJSON file itself, set the data equal to a variable (same as was done above), and then resave the file as a .js Javascript file. If this approach is taken, you must also call the javascript file in the header of your .html page, just as you called the Leaflet javascript file. In doing this, you make your variable accessible within your map. The below spatial data was created in google earth, exported as a .kml file, converted to a .geojson using the method described above for KML files, and then saved as a .js Javascript file after adding the variable name. Each file in this process can be seen in the files associated with this tutorial

//this looks the same as above, but now is done directly in the
//geojson file, which should be resaved as a .js file
var bcKMLTest = {

    "type": "FeatureCollection",
    "name": "Temporary Places",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

    "features": [
        {   "type": "Feature", 
            "properties": { 
                "Name": "Chestnut Hill Reservoir", 
                "description": "Water! " }, 
                "geometry": { "type": "Point", "coordinates": [ -71.160451098751224, 42.335235738372397 ] } },
        
        {   "type": "Feature", 
            "properties": { 
                "Name": "Football!", 
                "description": "Go Eagles!" }, 
                "geometry": { "type": "Point", "coordinates": [ -71.166387763840049, 42.335024576048127 ] } },
        
        {   "type": "Feature", 
            "properties": { 
                "Name": "Basketball and Hockey", 
                "description": "Go Sports!" }, 
                "geometry": { "type": "Point", "coordinates": [ -71.16777265141657, 42.335122222222218 ] } }
    ]
}

//example of html header to call your spatial data
<script src="./bcKMLTest.js"></script>

Now, your external data is linked within your map's code, but it still needs to be added to the map! Whichever of the above two methods you used, the following line of code will add the data to your map

//with the external js holding your data, only this line of code needs to be added to add your data to the map
L.geoJSON(bcKMLTest).addTo(map);

Adding Popups

So now you have some points, lines, or polygons on your map, but what do they mean? For example, in Google Earth, we added names and descriptions to our points, but that information is not yet visible in our Leaflet map. Popup boxes attached to your data can offer more information to those using your maps. And making them is quite simple!

Let's look back at the first marker we used to indicate the O'Neill Library (named bcLibrary). To create a popup box for this, we simply use one line of code. Then clicking on the point creates our popup!

bcLibrary.bindPopup("<b>I'm the Boston College Library</b>");

Note how you can use HTML styling methods like <b> to style your text (in this case, to make it bold).

If you are importing large amounts of spatial data, sometimes it already has attribute data attached to it. For example, in our GeoJSON data imported from Google Earth above, each point already had a "Name" and "description" attribute. Instead of retyping that into our code, we can call the attribute directly in our popups!

When importing your spatial data, you can automatically create a popup for every piece of spatial data in your dataset. We do this by adding the "onEachFeature" option when adding the GeoJSON to the map; here, this calls a function called "popUp" which will use to define our popup.

var ourImportedData = L.geoJSON(bcKMLTest, {
    onEachFeature: popUp
}).addTo(map);

Now you can write and customize a function called popUp to create whatever type of popup information you want!

//if your features come with various attributes already attached to them,
//this function will create your popup box based on those features!

function popUp(feature, layer) {
    var out = [];
		if (f.properties){
		     out.push("The name of location is is: " + feature.properties.Name);
		     out.push("The description of the location is:" + feature.properties.description);
		     out.push("Have a nice day!");
		}
		layer.bindPopup(out.join("<br />"));
}

Now every piece of spatial information in your Google Earth geojson will have a popup box saying the name of the space it is associated with (assuming it has an attribute titled "name" that it was imported with, such as a header from an excel spreadsheet) and its description, and it will wish you a nice day!

Sharing your map online

The easiest way to immediately share your map online is to upload it to GitHub.

1) Create a GitHub account

2) Click Start a Project, which will then ask you to name your project and provide a brief description.

3) Upload your entire mapping folder into the project depository by clicking Upload an existing file on the main repository page

Now that your map files are in, anyone with access to your repository can download your mapping files. You can also set up a unique url to display your map in just a few easy steps

1) Go to Settings on the central toolbar

2) Scroll down to the Github Pages portion of the settings

3) Under "Source" select Branch: main to set your main branch as the viewable page. Then hit Save.

4) The page will refresh. If you scroll back down, you should now see a statement in the Github Pages portion saying: Your site is ready to be published at YYY. Now you have a URL for your map! You can share this URL with others or put it on the main page of your repository in the About or Readme sections.

That's all for now! In the future, there will be tutorials on how to add new raster layers to your map, turn on and off layers, and other functions!

1. Go to Tools -> Script editor to get started with your function

2. Enter your script within the function

Note: For the first time to run the function, you need to give permission to this script through your designated Google account.

The Introduction to Text Analysis tutorial, created by , BC Digital Scholarship Librarian, provides a basic introduction to text analysis concepts, the tools Voyant and Lexos, and how to create a corpus. Example texts are humanities-oriented, but text analysis can be used in any disciplinary field.

In this tutorial, the tools and are being used. They have been chosen because they are "out of the box," meaning they don't require any coding, they are relatively easy to use, and they have many capabilities. As such, they are great tools for getting started in text analysis.

Generally speaking, "out of the box" tools tend to be blunter instruments in that they do not allow for the level of customization and specificity that using coding and scripting languages like Python and R do. Consequently, if you want to run more in-depth text analysis queries, you would eventually need to gain some coding and scripting skills. If tools like Voyant and Lexos serve all of your text analysis requirements, then they might be all you need.

Lexos, which is more complex than Voyant, allows some more in-depth work and can be used for scraping, scrubbing, and cutting text in addition to conducting analyses. Voyant has a flexible and friendly interface that provides a lot of different ways into a text. In this tutorial, you will learn about a way in which Lexos and Voyant work well together.

When first using Voyant and Lexos, it is good to look over their guides and other helpful information. Voyant has an , with the and tool instructions being particularly helpful. The question marks on the Voyant interface also provide information. Lexos has helpful information within the tool. Click on a question mark to learn what something does, or click on "Help" in the top right of the navigation bar to open the help window on the left.

When conducting a text analysis, it is important to keep in mind that:

1.) Word meaning changes over time.

While it might be understood, it's important not to forget that word meaning changes. One can use a source like the Oxford English Dictionary to look up the particular meaning of a word at a particular time.

2.) The word context is key.

In many, if not most, text analysis undertakings, word context is crucial to the analysis. Exceptions can occur when, for example, one is only interested in the number of times a word appears and not in the way the word is used.

3.) There may be issues of omission in the corpus.

It's important to keep in mind when exploring or creating a corpus that there may be issues of omission. People of color, women, and other marginalized groups have been published less throughout history and, therefore, a massive corpus--like Google Books or HathiTrust--will skew white and male. (Other areas of omission can be based on things like language, geography, time period, etc.) Moreover, it's important to consider what gets digitized. There can be (and no doubt is) bias in the decisions that drive the selection and funding of what ends up online.

4.) There can be quality issues with the corpus.

Often texts used in text analysis come from books and documents that have been OCR'd. (or optical character recognition) converts images of text into digital (machine-readable) text. Due to things like the quality of images and scanning mistakes, there can be OCR quality issues and, therefore, text errors.

Below are two examples of how OCR errors can occur. The one on the left is from a first edition of the 18th-century novel, The Life and Opinions of Tristram Shandy, Gentleman. With books from this period, you get characters such as the long s ( ſ ) and, often, ink bleed through, and foxing (all of the little dots that come from age) which can impact OCR. (These kinds of issues used to be much more of a factor before advancements in OCR technology.) The example on the right shows a scanning mistake made when the book was moved during the process. (Even with the advancements of technology, OCR issues are unavoidable in this case.) When working with a large or massive corpus, these kinds of errors might be inconsequential as long as there is a small enough number of them. With smaller corpora, such errors can have a greater impact and skew text analysis results.

The following resources provide text for text analysis projects.

• (includes plain-text [“full text”] access to books, issues of magazines, etc.)

• (BC library resource)

• (large number of texts available in variety of forms, including plain text; texts are accessed one at a time)

• (16 million volumes, mostly in English)

• (12.8 million pages of American newspapers)

• (narratives & literature from the American South)

• (large collection of classical texts, much of it encoded in TEI/XML)

• (ca. 50,000 early English books, many encoded in TEI/XML)

• (197,745 London criminal trials, 1674-1913)

• (debates & journals of the Canadian Senate & House of Commons)

• (Parliamentary debates, 1901-1980)

• (UK Parliamentary debates)

• (see also ; 10,000 premodern Islamicate texts)

• and (efforts to use computer vision to recognize handwriting)

• (557 classical texts linked with a gazetteer of the ancient world)

• (widely used corpora of American English)

• (American adult fiction, 1774–1900)

• (170K hours of captioned news programs; see for information on access)

• (nearly 2 million pages of media-related books and articles, 1875-1995)

• (classic Christian texts)

• (1.8 million NYT articles + NYT-supplied metadata)

• (many datasets from European libraries & archives, from papyri to photographs to newspapers)

• (nearly complete run of Foreign Relations of the United States; see to obtain full text)

• (a huge collection of websites, texts, audio, and other media, available for bulk download via wget)

• (a catalog of Twitter datasets that are publicly available on the web)

• (an effort to develop tools to analyze features of digital texts)

• (“220,579 conversational exchanges between 10,292 pairs of movie characters”)

• (repository of life sciences books, articles, and preprints)

• (565 million documents collected by the National Library of Australia, including a sizeable collection of newspapers)

• (4 million-word sub corpus of the 100 million-word British National Corpus, with parts-of-speech tagging in XML)

TEI-Encoded

Roadmap of Constellate - Top Level

Constellate provides: 1. access to over 29 million documents, including JSTOR, Portico and etc. 2. Research Notebooks (Jupyter Notebooks) provides pre-built code snippets for a number of text analysis tasks. Text data and notebooks can be utilized together or separately; data downloaded in JSON format.

Roadmap of Constellate - function details with features

Time: 9am - 5pm (Days will go no later than 5pm, but we expect that most will end at 4pm or sooner.)

Description: Each day will consist of a variety of presentations, discussions, and hands-on activities. Breaks are scheduled throughout and lunch will be an hour. There will be 20-30 minute DS-related presentations or participant lightning talks during lunches. Advanced topics will be covered at the end of the day and attendance is optional.

Monday, June 6 - Laying a Foundation

Topics: Welcome and Orientation, Introduction to DS Methodologies & Issues of Justice, Anatomy of a Digital Scholarship Project, Project Evaluation, User Experience, Tools Account Creation and Installation

• Lunch topic: Digital Pedagogy and Lightning Talks (Jess and Marina)

Tuesday, June 7 - Data & Mapping

Topics: Introduction to Data, Mapping

Advanced Topic: QGIS

• Lunch topic: Lightning Talks (Isabel, Lyn, and Christy)

Wednesday, June 8 - Data Visualization

Topics: Data Visualization, Network Analysis

Advanced Topic: Mapping in Tableau

• Lunch topic: Open Access, Data, and Education

Thursday, June 9 - Text Analysis & 3D/Immersive

Topics: 3D Modeling and Immersive, Text Analysis

Advanced Topic: Text Analysis with Python

• Lunch topic: Intellectual Property

Friday, June 10 - Digital Exhibits & Project Planning

Topics: Digital Exhibits, Story Maps, Project Planning

• Lunch topic: Center for Innovation in Learning

The following information will be covered on the first day and will help us prepare for the days to follow.

Documents

• Spreadsheet - Please add your info on the first day when you arrive

• Shared notes & detailed schedule doc - This is our group notes doc

Accounts to Create

• ArcGIS Online (Select the "Public Account" option)

• MapWarper

• Google Colab (for the optional Advanced Text Analysis session)

Software to Install

• Tableau Public

• QGIS (for the optional Advanced Mapping session)

Leaders

Melanie Hubbard, Digital Scholarship Librarian, incubator organizer (contact)

• Topics: Introduction to DS Methodologie, User Experience; Digital Pedagogy; Open Access, Data, and Education; Text Analysis; Digital Exhibits; Story Maps

Matt Naglak, Digital Scholarship Librarian (contact)

• Topics: Anatomy of a Digital Project, Project Evaluation, Mapping, 3D/AR, Project Planning

Allison Xu, Data and Visualization Librarian (contact)

• Topics: Introduction to Data, Data Visualization, Network Analysis

Contributors

Gabe Feldstein, Digital Publishing and Outreach Specialist (contact)

• Topic: Open Access, Data, and Education

John FitzGibbon, Associate Director of Digital Learning Innovation (contact)

• Topic: Center for Digital Innovation in Learning

Elliott Hibbler, Scholarly Communication Librarian (contact)

• Topic: Intellectual Property

Participants will be creating projects after the incubator week and presenting on them in early fall 2022 during which participants will receive feedback to help them further develop their work.

It is understood that some participants will be able to get further with their projects than others. The DS Group will provide workshops that dive deeper into DS tools, consultations, and other types of project support.

Projects may be one of the below. (The descriptions are deliberately open-ended as we want you to get out of the process what is most meaningful to you.)

• A well-articulated plan for a researched-based DS project and a prototype that demonstrates aspects of how the project will work.

• A well-articulated plan for further developing an existing researched-based DS project and a prototype that demonstrates aspects of how the new developments will work.

• A digital pedagogy/DS-based lesson and a prototype that demonstrates digital component(s). A "lesson" may involve the creation of an assignment, a learning digital object, or both.

In the Digital Studio, we have access to equipment for both 3D modeling and laser scanning. The aim of this hands-on experiment is to explore and try to create 3D models, perhaps for use in the Alternate Reality (AR) scene to be created in the next part of the incubator.

Equipment Available

• Photogrammetry setup with Lightbox and basic DSLR camera, good for objects down to about the size of your fist

• Hand-held Laser Scanner (borrowed from Schiller), good for quick scanning of larger models (and people!)

• Hand-held laser Scanner with roundtable setup, good for objects down to 3cm

Build a dataset >>

• Multiple Collections: Anchor collections from JSTOR and Portico, with additional content sources continually added.

• Data Download in JSON.

• Open content - bibliographic metadata, full-text, unigrams, bigrams, trigrams.

• Dataset Dashboard: Easily view datasets you have built or accessed.

Example of one extraction (examples)

• Dataset ID: unique identifier of the extracted dataset, can be used for retrieval in research notebooks.

• Analyze: tutorials version for leaning how to use the research notebooks.

• Download metadata in CSV file format, raw text data in JSON file format.

• Built-in visualizations available by clicking the link under word cloud.

Research Notebook: Exploring Word Frequencies for Research

Explore word frequency of your own extracted data

Create a bar chart for the 20 most frequently used words

import matplotlib.pyplot as plt 

a = transformed_word_frequency.most_common(20)
bar_values = list(list(zip(*a)))

x_val = list(bar_values[0])
y_val = list(bar_values[1])

plt.figure(figsize=(12,8))    #Customize plot size
plt.barh(x_val, y_val, color='blue',height=0.3)
plt.xlabel("Word Counts")
plt.gca().invert_yaxis()

Create a wordcloud chart for the extracted text data

Modify 4 Find Word Frequencies by:

#4 Find Word Frequencies
word_str = " "

# from collections import Counter

# # Hold our word counts in a Counter Object
# transformed_word_frequency = Counter()

# # Apply filter list
# for document in tdm_client.dataset_reader(dataset_file):
#     if use_filtered_list is True:
#         document_id = document['id']
#         # Skip documents not in our filtered_id_list
#         if document_id not in filtered_id_list:
#             continue
#     unigrams = document.get("unigramCount", [])
#     for gram, count in unigrams.items():
#         clean_gram = gram.lower() # Lowercase the unigram
        word_str += " " + clean_gram  #Added: string of all words
#         if clean_gram in stop_words: # Remove unigrams from stop words
#             continue
#         if not clean_gram.isalpha(): # Remove unigrams that are not alphanumeric
#             continue
#         transformed_word_frequency[clean_gram] += count

#Install wordcloud
pip install wordcloud

#Install matplotlib for word plot cloud
from wordcloud import WordCloud, STOPWORDS 
import matplotlib.pyplot as plt 

#Added: plot word cloud
wordcloud = WordCloud(width = 800, height = 800, 
                background_color ='white', 
                stopwords = stop_words, 
                min_font_size = 10).generate(word_str) 
  
# plot the WordCloud image                        
plt.figure(figsize = (8, 8), facecolor = None) 
plt.imshow(wordcloud) 
plt.axis("off") 
plt.tight_layout(pad = 0) 
plt.show() 

Create a stopwords list from the Natural Language Tookit (NLTK)

Research Notebook: Creating a Stopwords List for Research

Download the stopwords list to your local device:

Step 1: Click "Jupyter" and go to the main directory Step 2: Go to folder "Data" Step 3: Check "stop_words.csv" and click Download