Page History

create a collaborative, student-crowdsourced timeline in Mandala Visuals. Image Added John Alexander used this timeline for the course he co-taught with Walt Heinecke "Documenting UVA's Future." This course, inspired by the ouster and reinstatement of 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:  Create a Google Spreadsheet Enter your data  Format your spreadsheet  Log in

...

...

Anchor
create create

1. Create a Google Spreadsheet

Visuals pulls data from your Google account to make visualizations. To start making a timeline, put your data into Google Sheets. 

First, go to docs drive.google.com. You'll see the Google log in page.

You can use any Google address as the account. Remember, UVA students have "@virginia.edu" addresses that work with Google Drive.

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).

...

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. 

...

Here, we're making a simple spreadsheet. 

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

If you pull up our Timeline reference guide, you'll see that the first row you filled out contains data labels. We need to “freeze” this row. "Freezing" helps Audio-Video read the data you entered.

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

...

Anchor
log-in log-in

4. Log in to Visuals

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

 Enter your Netbadge credentials to finish logging in. Now we'll make your visualization.

Anchor
create-time create-time

...

5. Create your timeline 

...

Make sure to log in before making your timeline. Then: 

You'll see the visualization editor and a preview of your timeline. Now we need to add your spreadsheet to the editor.

...

...

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

click Allow. You'll see a Google Drive window in Visuals with a list of your files.  

Since your students fill in the events, you won't see any information on the timeline. You might also notice that the range of times in the window dondoesn't suit your needs. You want the timeline to show all the dates your students add your student's events at first view. 

...

...

...

...

However, the scope of the timeline still isn't quite right. The ouster happened over the course of a month, but we are zoomed out to the level of years in the timeline.

We can adjust this scope using "Initial zoom of timelineof 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." 

...

...

...

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 width 50%   Image Added Column width 50%         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.

To finish, make sure that "Minimum zoom of timelineof timeline" and "Maximum zoom of timelineof timeline" are considerably  are considerably smaller and larger, respectively, than the initial zoom value. This lets your students scroll in and out. 

That looks a lot better. Now we can see all the events in the default viewNow you can be sure all your student events will be visible in class. Remember, you can always zoom on the finished timeline. This method just helps you set the general scope. 

The timeline still isn't very informative, however – how will viewers understand the significance of events? Let's make the visualization show a description of the event, which we entered your students enter in column B of our your spreadsheet. 

...

Now we're done .

with the main visualization.

Remember, you can find out more about the different options for your timeline with the Visualization Index. 

To finish making your timeline, give the visualization record a title in the "Title" field at the top of the page, then choose Public under the "Visibility" options at the bottom of the page. Making the timeline public lets you add it to UVaCollab in step 8. 

Switch the status of the timeline from Draft to Published at the top of the page. Then, Save your visualization. You're all ready for your class to create a collaborative timeline together. 7

Anchor
invite invite

 6. Invite student contributions in class

For the class, you should have a way to project your visualization. Once you've set up the projector, you can open your visualization by logging into Visuals, then: 

Before the class, ask your students to bring:

...

Share the timeline spreadsheet with your students. To do this, you should use the URL of the spreadsheet at Share > Copy Link in Google Sheets. If you've followed the spreadsheet setup process correctly, all your students need is the URL of the document to edit it. 

...

You'll see the timeline grow gradually, giving your students a sense of how information flows through time. 

You can make this timeline available to your students after class in UVaCollab. 8

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.

...

...

...

...

...

...

Now you need to fetch your timeline from Visuals. To do this, open the visualization, then click the Share icon (Image Added).

...

To insert the code into the page, you need to switch the UVaCollab editor mode to edit HTML.

...

...

You'll see a form with metadata fields, where you can add a title and restrict access to your HTML page. Then, paste the code from Visuals and Continue.   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. 

...