Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Excerpt

This guide helps you create a collaborative, student-crowdsourced timeline in Mandala Visuals.

John Alexander used this timeline for his course the course he co-taught with Walt Heinecke "Documenting UVaUVA's FuturesFuture." This course, inspired by the ouster and reinstatement of UVa UVA President Teresa Sullivan, documented the event using oral histories.

Since many students were not in Charlottesville for the ouster, John Alexander helped them make a collaborative timeline of the proceedings in class, which included links to primary sources. This helped them understand the flow of information surrounding the ouster. Afterward, he shared the timeline with his students, so that they could reference it throughout the semester.

To make a crowdsourced timeline: 

  1. Create a Google Spreadsheet
  2. Enter your data 

  3. Format your spreadsheet 
  4. Create a collectionLog in to Visuals
  5. Create a new visualization
  6. Invite student contributions in class

  7. Add the visualization to UVaCollab
 

In this guide, Google and the Google logo are registered trademarks of Google Inc., used with permission.

...

Log in with your Netbadge credentials. You'll see the University of Virginia Google Drive page (or the standard Google Drive page if you entered a non-UVa UVA address).

Section
Column
width50%

Google and the Google logo are registered trademarks of Google Inc., used with permission.

Column
width50%

 

 

 

 

Click New, then Google Sheets to make your new spreadsheet.

...

The default setting restricts sharing to UVA viewers. We need to make a few more changes so anyone with a link can access your data. If you're not using a UVA standard "@gmail.com" Google Drive Accountaccount, simply change Anyone at with the link can view to can edit. Then you can skip ahead to the next section. If you're using a UVA-affiliated account, continue reading. 

...

Section
Column
width50%

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 
Column
width50%

 

 

Enter all labels you need on the top row of the spreadsheet. These are:

  • title
  • description
  • startdate
  • link

You'll leave the rows themselves blank. In class, each student will add a row to the spreadsheet, creating a single event. Before they can do that, however, you should make sure rows are formatted correctly. 

Anchor
format
format
3. Format your spreadsheet

The Timeline reference guide has specific data types for each column. Luckily, our example is easy: every column should be in the "plain text" data type.

Section
Column
width50%

Google and the Google logo are registered trademarks of Google Inc., used with permission.

Column
width50%

 

 

 

To set the data type, select your column. Click Format from the menu, then Number. Choose Plain Text. Do this for each column.

Now your spreadsheet is ready for student contributions. Next, you can move to Mandala Audio-Video to set up the basic visualization before class begins.

...


Anchor
log-in
log-

...

in
4.

...

Log in to Visuals

...

Go to Visuals at https://visuals.shanti.virginia.edu

...

Section
Column
width50%

Column
width50%

 

 

 

Click on the Main Menu icon (  ) in the top right corner. Then, Log in via Netbadge. 

 

 Enter your Netbadge credentials to finish logging in. Now we'll make your visualization. To start, you need to create a collection to house it in. 

Section
Column
width50%

 Image Removed

Column
width50%

Click  Image Removed> Collections > Add New Collection.

Section
Column
width50%

Image Removed 

Column
width50%

 

 

Enter a title. You can also add a description if you like.  

Section
Column
width50%

 Image Removed

Column
width50%

 

 

 

Set "Group Visibility" to Public - Accessible To All Site Users. This will let you add the visualization in the collection as a UVaCollab resource later. Then, Save the collection.

Your collection will open. Now you're ready to add your visualization. We'll add it directly from this page. 

...

Anchor
create-time
create-time
5. Create your timeline 

Make sure to log in before making your timeline. Then

...

With your collection open

Section
Column
width50%

 Image RemovedImage Added

Column
width50%

 

 

 

 From your collection's page, click Add ShivanodeClick  Image Added> Collections > Create. A list of visualization types will open.

Section
Column
width50%

Column

 

 

 

 

Choose Relationships, then Create under "Timeline."

...

You'll see a list of your Google Drive accounts. If prompted, log in to the account that holds your data spreadsheet. Google will ask if you give Shanti permission to see your files: click Allow.  You may not have to do the last two stepsteps: you might see your Google Drive files directly.

...

We can adjust this scope using "Initial zoom of timeline." Since the value of this field is tricky to determine, we'll create two reference events for the "beginning" and "end" points of our timeline, then adjust the value of "Initial zoom." 

Section
Column
width50%

Google and the Google logo are registered trademarks of Google Inc., used with permission.Image RemovedGoogle and the Google logo are registered trademarks of Google Inc., used with permission.Image Added 

Column

First, go back to the spreadsheet. We're going to create two events – one with a start date of June 8, 2012 and one with a start date of June 29, 2012. We'll call the first event "start" and the second event "end." Don't worry about names too much – these are temporary reference points, and we'll delete them at the end. Use the DD/MM/Year format for the dates.

 

Now go back to the visualizations editor. Adjust the "Initial zoom of timeline" by small increments, increasing the value to zoom out, decreasing the value to zoom in, until you can see the "start" and "end" events at the opposite ends of the timeline.

...

Notice the text "start" and "end" are a bit large. Remember, you're going to have to have students recording many events on this timeline. To set the size of the font, we're going to make a column called "importance." 

Section
Column
width50%

Google and the Google logo are registered trademarks of Google Inc., used with permission.Image RemovedGoogle and the Google logo are registered trademarks of Google Inc., used with permission.Image Added

Column

 

 

 

Enter "importance" in the first row of column E, then give all rows in the column a value of 20. 

Section
Column
width50%

 

Google and the Google logo are registered trademarks of Google Inc., used with permission.
Column
width50%

 

 

 

 

Now "hide" the column to prevent your students from worrying about this value. Visuals can still read data in hidden columns. To hide column E, select the entire column, then right click on it and choose Hide from the menu.

Section
Column
width50%

 Google and the Google logo are registered trademarks of Google Inc., used with permission.Image RemovedGoogle and the Google logo are registered trademarks of Google Inc., used with permission.Image Added

Column
width50%

 

 

 

 

This is the hidden column. To unhide this data, click on the two arrows (< >) between columns D and F. 

...

Section
Column
width50%

 

Column
width50%

 

 

 

Click Click > My Content > My Visualizations. You'll see a list of all your visualizations. Click on your timeline to open it.

...

Anchor
uvacollab
uvacollab
7. Add the timeline to UVaCollab

Open Now, we'll add the timeline your students created together to UVaCollab. This lets them reference the data throughout the semester. To begin, open your class site in UVaCollab.

...

You'll see a form with metadata fields, where you can add a title and restrict access to your HTML page. Fill out the fields as needed, then Finish. The new page will appear under the Resources. If you click on the site, you'll see the interactive timeline your students created collaboratively

This code also lets you add the visualization to a WordPress course site. Follow the Add an iFrame guide for help

Now you're finished with your project. To learn more about making visualizations, you can use this Visuals in Mandala guide. 

...