Viewing feedback/comments on your assignment

I have used a web-annotation service called Diigo to provide contextual feedback on your blogs.  In the feedback column on grade book you will see one or more urls that looks something like

If you click on them you will be taken to a saved version of your blog pages with various sections highlighted and commented like so:

Posted in Info, KIB230 | 2 Comments

Accessing your public_html folder from within the QUT network

On a Mac:

  1. Open Finder
  2. In the menu bar at the top, click Go –> Connect to server
  3. type the following server address: smb://cifhome
  4. Click “connect”
  5. If it asks for login details, use your QUT username and password.

On a PC

  1. Open a new Windows explorer window (windows key + e)
  2. In the address bar type the following: \\cifhome
  3. Press enter
Posted in Info, KIB230 | Leave a comment

Sharing files too large for email

During the production phase of your major assignment you will likely need to send me files that are too large for email.  I would suggest signing up for a free online storage account such as Dropbox so that we can share large files easily.  If you use this link –> when signing up we will both get extra storage space.

Posted in KIB230, KIB309, Tools, Tools | Tagged | Leave a comment

Accessing your public_html folder from outside QUT

If you’re not at QUT then use a FTP (File Transfer Protocol), such as FileZilla,  to connect to your home drive.

Open up FileZilla (or any other FTP client) and connect with the following details

  • Host: (e.g.
  • User: Your QUT student number (e.g. n1234567)
  • Password: Your QUT password

Once you have uploaded your files to the server, you can view them in a web browser by going to (replace with your student number).

The ~ character is called “tilde.” You type it by holding down shift and pressing the key to the left of the number 1 key.



Posted in Info, KIB230 | 2 Comments

Adding Multitouch capabilities to a data visualisation


Download the example files for this week here.

Multitouch displays

We have access some multitouch display test units that will eventually form part of a much larger touch screen display, called “The Cube”, which will be built as part of the new QUT Science and Technology precinct.

The multitouch technology we are using is by a company called “Multitouch LTD“.

Have a look at some of the case studies to see what people are doing with this technology.

Multitouch Flash SDK

The multitouch display technology communicates touch events over a standard network protocol called TUIO so you could feasibly develop in any environment you like.  To reduce a lot of the work to do with processing touch events we can use the provided Flash SDK for creating multitouch applications called “Cornerstone“.

Normally you need a special account to download the flash sdk, but I have provided a link for you to download it here.  I have also included the sdk along with the downloadable example files.

Emulating the Multitouch Hardware with a Mouse and Keyboard

See here for instructions on emulating multitouch events with a mouse and keyboard when you are testing without access to the multitouch display technology.

Example 1

This example displays multiple different information graphics and allows the user to move and resize each with multitouch gestures for side-by-side comparison.

Information graphics are from *note these graphics are used for the purpose of demonstrating functionality only. For your assignment you must create all the information graphics.

Example 2

This example uses multitouch gestures to enable the user to zoom in and out of a very large information graphic that is too big to comfortably fit on the screen all at once.

Posted in KIB230, Tutorials | Tagged , , , | Leave a comment

Flocking algorithms

The seminal example of flocking simulation has to a program called Boids.

The rules that govern the movement of Boids

Useful links:

Posted in KIB309 | Tagged , | Leave a comment

Posted in Data Sources, KIB230 | Leave a comment

Loading large data sets into flash from CSV files

Hard coding your data sets into arrays works fine if you have relatively small data sets.  If however your data sets are large it is more time-efficient to automate the process of importing the data.

CSVLIB – Actionscript 3 CSV parsing library

To help us with the CSV file parsing, we will be using csvlib.  You can download it from though I have included it already within the exercise files.

Exercise Files

Download all of today’s exercise files here. (includes csvlib files in a folder called “src”)

Data sources for these exercises

I sourced the data for these exercises from  If you search for “co2” you will find the files I am using.  You can download any of the data sets from Gap Minder as an excel spreadsheet (xls) file.  To convert the xls file to a csv file do the follwing:

  1. Open the xls file in excel
  2. Choose file -> save as
  3. Save the file as Comma Separated Values (CSV) format
  4. Press ok to any warnings that come up

I have already done this process for today’s exercises.  You will find the csv files in a folder called “data”.

Example 1

This example loads all the data from the CSV files, but uses only simple coloured bars and text labels to represent values.

Example 2

This example again loads the same data from the CSV files, but uses a more complex visualisation:

  • Each country is represented by a generic animated factory/power plant.
  • Countries are identifiable by their national flag.
  • CO2 emissions are represented by the height of the smoke stack as well as the rate at which the smoke animation particles are produced.

Posted in KIB230, Tutorials | Leave a comment

Interactive – National Geographic Magazine

Interactive – National Geographic Magazine.

Posted in Infodesign Examples, KIB230 | Leave a comment

Displaying temporal (time-based) data using the slider component

… but before we get into that we need to finish off the filtering and scaling from the previous example…

Download the template files for that here.

…now to this week’s examples…

For more information on Flash’s slider component, see the following links:

Example 1

Download the template files
Download the completed example

In this example the value of the slider component is used to control the playhead on a separate “display” movieclip.

The slider component properties:

The slider component has an event called SliderEvent.CHANGE that is triggered whenever the value of the slider changes:

timeline.addEventListener(Event.CHANGE, setYear);

We can then write an event handler function to take the value of the slider and use it to control the playhead on the movieclip that holds our information graphics:

function setYear(e:Event):void
	display_mc.gotoAndStop("year" +;

The display movieclip is composed of a series of static information graphics on different frames:

This example would be suitable for a smaller dataset with a visually complex display.

Example 2

Download the completed example.

The data for this example was sourced from here.  You can see this same data visualised in the gapminder tool here.

This example again uses the slider component to control the year.  This time the data is stored in arrays: = [8.68, 16.67, 21.52, 19.45, 19.27]; = [11.06, 9.99, 11.74, 9.98, 9.38] = [2.72, 6.63, 11.66, 17.22, 18.36]; = [0, 0.14, 0.94, 2.13, 4.66] = [0, 0, 61.14, 28.1, 53.62];

The value of the slider determines the index of the data array to use:

function update(index)
	for(var i = 0; i < countries.numChildren; i++)
		var country = countries.getChildAt(i);

	year_txt.text = years[index].toString();

Most of the code in is to do with generating the smoke animation (if you’re really interested in this google “actionscript 3 smoke effect tutorial”).  The important part is the updateData function, which updates the visual properties (e.g. smoke stack height and rate of smoke production) for each country movieclip:

function updateData(index:int)
	var newHeight =[index] * 5;
	new Tween(this.smokeStack, "height", Strong.easeOut, this.smokeStack.height, newHeight, 1, true);

	var smoke_container_newY = this.smokeStack.y - newHeight;
	new Tween(this.smoke_container, "y", Strong.easeOut, this.smoke_container.y, smoke_container_newY, 1, true);

	if([index] <= 0)
		this.timer.delay = 5000 / Math.pow([index], 2/3);
		//addSmoke(); // first puff

	co2_txt.text =[index] + " tons CO2 per person";
	var co2_txt_newY = Math.min(-100, this.smokeStack.y - newHeight);
	new Tween(this.co2_txt, "y", Strong.easeOut, this.co2_txt.y, co2_txt_newY, 1, true);
Posted in KIB230, Tutorials, Uncategorized | Leave a comment