Knight Digital Media Center Multimedia Training

Tutorial: Protovis Templates

By Len De Groot

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/protovis-templates/

Introduction

We created several templates to help you get started with Protovis. They were designed to re-size automatically as you change the data, so they require almost no programming skill. We'll start with the basics and in the coming months, add additional templates with more complexity.

The Protovis JavaScript library is fairly easy to use. If you haven't already, check out our video tutorials or use the text versions to make your own charts.

Worried about compatibility with Internet Explorer? We have that covered.

Not sure which chart to use? Check out our chart picker to see which one best suits your data and your purpose.

Simple Column Chart

Use a column chart to illustrate a change in units over time.

Edit, input your data

Editing the data in the file is fairly strait forward. There are two values you can edit and they are labeled "Date" and "barData". Each is followed by a colon : and a value you can change. The value following Date can be hours, days, months, years, etc. and can be a number or a string (text in quotes). The value following barData must be a number.

Edit basic chart settings

The next section allows you to customize the size, positioning, color and other elements of your chart. Each is explained with a comment in green that will not affect your code.

Advanced settings

This section has information to automatically redraw the chart when the data changes. You shouldn't have to edit here with one exception. If you want to highlight a specific bar, change the activeBar number.

Simple Horizontal Bar Chart

Use a bar chart to illustrate rankings or a change in units over time.

Edit, input your data

Editing the data in the file is fairly strait forward. There are two values you can edit and they are labeled "Date" and "barData". Each is followed by a colon : and a value you can change. The value following Date can be hours, days, months, years, etc. and can be a number or a string (text in quotes). The value following barData must be a number. If you are creating a ranking, it's best to enter the data in descending order.

Edit basic chart settings

The next section allows you to customize the size, positioning, color and other elements of your chart. Each is explained with a comment in green that will not affect your code.

Advanced settings

This section has information to automatically redraw the chart when the data changes. You shouldn't have to edit here with one exception. If you want to highlight a specific bar, change the activeBar number.

Simple Line Chart

Use a line chart to illustrate the change in a rate or index over time.

Edit, input your data

Editing the data in the file is fairly strait forward. There are two values you can edit and they are labeled "Date" and "lineData". Each is followed by a colon : and a value you can change. The value following Date can be hours, days, months, years, etc. and can be a number or a string (text in quotes). The value following lineData must be a number.

Edit basic chart settings

The next section allows you to customize the size, positioning, color and other elements of your chart. Each is explained with a comment in green that will not affect your code.

Advanced settings

This section has information to automatically redraw the chart when the data changes. You shouldn't have to edit here with one exception. If you want to highlight a specific bar, change the activeBar number.

Pyramid Chart (opposing bars)

A pyramid chart may be used to compare two sets of data that share the same categories. Think of this as an alternative to a stacked bar chart.


Edit, input your data

Editing the data in the file is fairly strait forward. There are three values you can edit and they are labeled "sharedLabel", "barData1" and "barData2". Each is followed by a colon : and a value you can change. The value following "sharedLabel" can be a number or a string (text in quotes). The values following "barData1" and "barData2" must be a number.

Edit basic chart settings

The next section allows you to customize the size, positioning, color and other elements of your chart. Each is explained with a comment in green that will not affect your code.

Advanced settings

This section has information to automatically redraw the chart when the data changes. You shouldn't have to edit here with one exception. If you want to highlight a specific bar, change the activeBar number.


A special thanks goes out to Kevin Wiatrowski, one of our Interactive Census Workshop Fellows, who figured out how to put this together.

About this Tutorial

This tutorial was produced as a presentation for the Knight Digital Media Center's Interactive Census Workshop  at the Berkeley Graduate School of Journalism.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.