| Excerpt |
|---|
This guide walks you through making a dynamic timeline in Mandala Visuals. We'll show you how to set up your spreadsheet, then use that data in Visuals. Then, you'll use customization settings to make your timeline look the way you want. The final timeline will look something like this:
|
- Create a Google Spreadsheet
- Format your spreadsheet
- Log in to Visuals
- Connect your Google Drive to Visuals
- Create a new visualization
- Invite student contributions in class
...
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 Google Drive Account, simply change Anyone at with the link can view to can edit. Then you can skip ahead to the next section.
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
...
Here, we're making a simple spreadsheet.
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
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.
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
...
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.
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
| Anchor | ||||
|---|---|---|---|---|
|
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
You'll see a preview of your timeline in the editor. Now we'll use the options in the sidebar to customize your timeline.
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
The default timeline view doesn't show all the events. You can see that the events "Last Visit" and "Building the Rotunda" are cut off on the left, while there is plenty of empty space on the right. Let's fix that.
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
That looks a lot better. Now we can see all the events in the default view.
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
The timeline still isn't very informative, however – how will viewers understand the significance of the letter to Dr. Priestly, for example? Let's make the visualization show a description of the event, which we entered in column B of our spreadsheet.
| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
You can then enter the name of the icon you want to add: here we're using "plus_green.png." Check the Visualization Index to see all your icon options.
...
|
...
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
Now we're done.
| Section | |||||||
|---|---|---|---|---|---|---|---|
|
...
To finish making your timeline, give the visualization 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.
Save your visualization. You're all ready for your class to create a collaborative timeline together.
7. Invite student contributions in class
For the class, you should have a way to project your visualization.
Before the class, ask your students to bring:
- their laptops,
- a title for their event,
- a URL source for the event,
- a description of the event.
Share the timeline spreadsheet with your students. To do this, you should use the URL of the spreadsheet at Share > Copy Link. If you've followed the spreadsheet setup process correctly, all your students need is the URL of the document to edit it.
In class, you can ask each of your students to add their event in a new row of the spreadsheet, like so:
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. Add the timeline to UVaCollab
Open your class site in UVaCollab.
Go to Resources in the sidebar.
Find the folder where you want to add the timeline. Next to the folder's name, click Actions, then Create HTML Page.
An editing tool will open.
Now you need to fetch your timeline from Visuals. To do this, open the visualization then click the Share icon. From the window that opens, click iFrame. This tab contains HTML code that will let you embed your timeline directly into the new UVaCollab HTML page. Copy the code and return to UVaCollab.
To insert the code into the page, you need to switch the UVaCollab editor mode to edit HTML. To do so, click Sources <> from the editor toolbar. 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.
Now you're finished with your project. To learn more about making visualizations, you can use this Visuals in Mandala guide.