Video Documentation:


Still Images:


At Risk is a data visualization housed inside a black podium (2’6” wide by 2’4” deep by 6’ tall) that includes a 25” screen and a touch-sensitive trackpad. The data it uses is of over 1800 species of mammals catalogued by the International Union for the Conservation of Nature (IUCN) that are in danger of becoming extinct, or are in danger of suffering unrecoverable population losses.

Through the use of the touch-sensitive trackpad, a user can manipulate data through a graphical user interface, which will allow the user to examine large datasets with ease; each animal is represented by a dot and sorted based on its taxonomic order, and is therefore grouped with similar animals. A user can choose to view all at risk animals, or narrow down the scope to a single category of risk. This scope can be narrowed further by toggling certain population trends on and off, showing population trends of all species at a glance. The scope of exploration can become even more precise; a user can hover over a species, which reveals the species name. Tapping on a species will bring up a picture of that species as well as its information.

As human beings, we are stewards of the earth. Over the last couple centuries, we have neglected that responsibility to safeguard all flora and fauna on our beautiful planet, and the results are staggering; extinction rates have skyrocketed and animal populations worldwide are plummeting at alarming rates. At Risk, through the marriage of interactive data visualization techniques and a touch-sensitive interface, will allow people to draw their own connections about the futures that over 1800 species on our planet face, hopefully garnering feelings of concern that will blossom into actions of compassion, environmental stewardship, and most importantly, awareness.

A couple people at the opening night of Meta (my fourth-year show) commented that they were very impressed with how smooth everything moved in my project, so I figured I’d share how. This is pretty simple stuff, but useful. The language I use is processing, but you can pretty much do this with anything. If you want a transition to be smooth, wether it is comething getting bigger/smaller, or moving from point a to b, this is the way to do it.

In this example:
float INCREMENT= 0.5;
float TARGET= 20;
float DIAMETER= 10;


INCREMENT is the speed at which we want our transition to take place. 0.5 is pretty fast.
TARGET is the end result we want. E.g. say we want a circle to become 20 pixels in diameter. So, our target is 20.
DIAMETER is the value we want to change. The diameter of the circle in this example starts at 10 pixels.
DIFF represents the difference between the TARGET value and the ORIGINAL value.

By taking the difference between the two values, multiplying them by the increment, and adding it to the CURRENT diameter, we get a nice smooth animation of the circle getting larger.

Here is an example sketch I made in processing to demonstrate the concept:

/* delcare your variables. I will be toggling a circle’s diameter between two values,
so I have a MINTARGET and a MAXTARGET variable. INCREMENT is how fast the transition
occurs, 0.1 or 0.2 are pretty good; quick but not too quick. DIA represents the diameter
iof the circle. This is the variable that will be changing.
float INCREMENT= 0.1;
float MAXTARGET= 100;
float MINTARGET= 10;
float DIA= 10;

void setup() {
size(300, 300);

void draw() {

/* just to display the effect, I’m using the dist() function to
trigger the min and maxtargets. dist takes 4 arguments: the xy coordinates
of your first point, and the xy coordinates of your second point.
It calculates the distance between them. In this case, I am calculating the
distance between the mouse and the circle.
float distance= dist(mouseX, mouseY, width/2.0, height/2.0);

//if distance is less than 10, make the circle grow:
if ( distance < 10) {
}//end if

//if distance is greater than or equal to 10, make it shrink back:
else if ( distance >= 10) {
}//end if

// we draw our circle at the end.
ellipse(width/2.0, height/2.0, DIA, DIA);

The interior of the podium is finalized, and painting has begun! These pictures show it with its one coat of black primer (matte finish) but we have since then put two coats of satin (soft gloss) black latex paint on it. The matte finish really marked up easy (if I touched it with lightly with my hand it would leave a ghostly image of my fingers!) so we opted for more of a gloss finish, since gloss tends to stand up to marking better.

Here is my test run of the program with it:

The inline fan we bought for airflow was too loud (as I knew from the start- my Dad argued with me and said it would quiet up when we put it in the podium, but holy sound batman did it ever drone! It sounded like a small plane was revving up in there) so I got a computer fan and rigged it into a 12V DC power adapter we had kicking around. It has some pretty lights.

I will take a photo of the podium when the paint is done drying and the back is on. The back is made of a thinner material (to save on weight) since it isn’t structural. There is an access panel on the back (MDF + hinge) that allows access to the laptop and monitor. A lower intake vent is also on the back, along with an exit hole for the outgoing cord that will power everything. One modular, self-contained unit if I do say so myself!

I’ve added a population trend menu for further top-down exploration, so you can get an overall picture much quicker than clicking through each animal.

Check it out!

It was easy to implement, I just had to fix some code bugs in order to do it.

How do you set up for a gallery? For me, these were the most important things to consider:

  1. Theft: Everything had to be secure. Nothing can be stolen, yanked, or otherwise damaged. Everything must be in a self-contained unit that protects the technology inside.
  2. Ventilation: Overheating is a problem for my monitor and laptop. A fan is essential to help move hot air up and out of my setup. Intake and outflow vents for airflow were also important.

With these things in mind, I have started constructing my podium for my thesis, with my dad’s invaluable help!

Materials Used

  • MDF; Medium Density Fiberboard >> MDF makes up the bulk of the podium. It is good as a structural medium, being able to support a lot of weight, and also can sand to a very smooth finish (unlike plywood, which is harder to finish to a smooth polish). It is basically heavy duty cardboard! It is pretty heavy though, and although this helps with stability- it is not easy to knock over- it makes it a pain to move.
  • Melamine >> To help reduce weight, the back end of the podium will be a simple melamine sheet about an 1/8 inch thick. The back end of the podium is not load bearing, so that is why we chose to make it out of a lighter material.
  • Vent covers >> To help with proper cooling, large vent covers are going to be used to allow for air intake and outflow.
  • GFIC; Ground Fault Interrupt Circuit >>You know those dandy outlets in your bathroom, the ones witha reset button on them? They are there to protect you from getting electrocuted! A GFIC basically checks the outgoing current with what it expects to receive back, and if what it is expects is different by 5 milliamps, it trips the system and power is shut down (read more about GFIC’s here). This will protect the electronics from a surge or short that could lead to a fire or other hazard. It is more economical that a fuse because a GFIC doesn’t need to be replace if it is tripped; it just needs to be reset.
  • Particle Board Screws >>You can’t use any old screw or nail with MDF, you have to use special ones designed for the material. Be sure to make drill holes, THEN insert your screws, otherwise the pressure/friction will mess up the MDF.
  • In-line Fan >> This fan is designed to run 24/7 all year round as part of an airflow unit for housing. This makes it a durable item when it comes to constant use in a gallery. It it encased in metal (pretty safe) and can be wired directly into my GFIC.

Electrical Setup

electrical setup for at risk by alex jordan meta fourth year thesis project ryerson

What I’ve Built so far… (with Dad’s help!)

How do you plan a gallery setup? There are so many things to consider. I’m trying to keep it all organized in my head!

First up, I made a detailed sketch-up diagram of my ‘podium’ that will house my monitor, trackpad, and laptop.

Alex Jordan At Risk- Podium design, to scale.

At Risk- Podium design, to scale.


  • Power for monitor
  • Power for laptop/computer
  • Power for wireless trackpad battery charger
  • Power for cooling fans

I think I can buy a good quality power bar (those have fuses/surge protection , right?) and have only one outgoing power plug. Then the power bar could power everything else.

My wireless magicpad from apple is a problem. Apple, despite many customer complaints and pleas, has not made a wired trackpad for mac. So how do I deal with batteries running out of power during the gallery? This technology does not NEED to be wireless, so it is a horrible handicap on my piece and its longevity. What other track pads are available? Is there an alternative that will work with a macbook pro that is wired? How much will this cost? These are all things I have to consider.

Heating & Fire Hazards

Laptop and monitor overheating are big concerns. I have a few strategies to combat this:

  • Fan/vent pairings. 4 fans placed on either side of my box should create airflow and suck in cool air, helping to regulate heat.
  • A prop-up for my laptop, so it sits elevated on its stand, should help it dissipate heat better.
  • A heat-sink of some sort for my laptop? Needs further review.


I am going to have the back panel nailed shut so I can avoid theft. However, if I need to get at anything this could be a problem, so I may have to create a panel/door than I can swing open for maintenance. This means I need a padlock on the door.

Compliance with Gallery Regulations

What are the gallery rules? I have no idea! This needs further consideration.


Make sure my box is not top-heavy! I dont want it falling on anyone. Sharp edges and corners are a concern too.

This was At Risk, as it was shown for the Showcase on March 1st (Although, it was on a larger HDMI monitor that did not cut anything off due to lack of screen space). I got into Meta (my fourth year show) based on my datavis.

Artist Statement for At Risk

Imagine that the entire asian continent is one massive graveyard devoid of all humans, taking over half of humanityʼs population of seven billion people with it. Now imagine that when your grandchildren are born, they will be the last generation of humans to ever walk this earth.

This is the future that over thirty-six percent of mammals on this planet face.

My piece, At Risk, will address this concern. At Risk is a data visualization of 1805 species of mammals catalogued by the International Union for the Conservation of Nature (IUCN) that are in danger of becoming extinct, or are in danger of suffering unrecoverable population losses. Using data-mining and parsing techniques, I have extracted all species and inserted them into a programmed visualization that allows a user to explore it through the use of a touch-sensitive trackpad. A user can manipulate data through a graphical user interface (GUI), which will allow the user to examine large datasets with ease; each animal is sorted based on its taxonomic order, and is therefore grouped with similar animals. A user can choose to view all at risk animals, or narrow down the scope to a single category of risk. The scope of exploration can be narrowed further; a user can hover over a species, which reveals the species name. Tapping on a species will bring up a pop-up that details the full taxonomy of that particular species, its common name, conservation status, and population trend.

Through the marriage of these interactive data visualization techniques and a touch-sensitive interface, users will be able to draw their own connections about the futures that 1805 species on our planet face, hopefully garnering feelings of concern that will blossom into actions of compassion, environmental stewardship, and most importantly, awareness.

BEWARE CUSTOM SEARCH USERS. I made the mistake of paying google so that I could avoid daily limits of 100 queries with my custom search engine. I had a free Custom Search Engine (CSE) with google, which means that results are limited to 100 queries per day, and that adds are displayed with the search results. I did not care about the ads at all because I am using thier CSE with a program, and grabbing only what I need from the results. However, my program is a datavis of over 1800 mammals, and the daily limit was killing me. I needed to grab 1800 images all in one go to just save the images in a database and have it done.

Google does NOT make this easy. Through my own stupidity or Google’s lack of clarity, the only option for getting rid of the 100 daily limit seemed to be by paying them for an annual amount of queries (e.g, $100.00 = 20 000 queries annually) and even though 20 000 queries was way more than I needed, I decided it would be worth it to save my time and I shelled out the cash.

But I was still hitting the 100 query limit. Why? I sent an email to Google asking about this (by the way, Google does not provide email support until AFTER you have made a purchase- if I had been able to inquire about my needs before doing this I could have saved myself a lot of time and money), and to their credit, they gave me an incredibly detailed response with a bunch of links to different APIs and references, explaining that I had basically purchased the wrong thing. The purchase of annual queries gives you something called a ‘Google Site Search License. (GSSL)’ The GSSL gives you an annual amount of queries, no ads on the results pages, and limits you to searching only certain sites, instead of the entire web. However, it is run off a completely different API. When google gives you the option to ‘switch’ or ‘convert’ to a google site search, their terminology is entirely misleading. You are not switching or converting at all, you are buying a completely new service from google. You have to completely recode the part of your program that deals with google’s earch API, because the CSE and GSS search APIs are different. This is no conversion, this is a separate entity TIED to the ID that your former GSE had.

  • Google Custom Search (CS) API:
  • Google Site Search (GSS) API: (Notice the URL? It is still referred to as a CUSTOM SEARCH. Both the URLs could be mistaken for the same thing, but they are both different. This had caused me some problems when I first started with my free search engine, because I kept using this API by mistake. My professor had told me that this was a ‘depreciated’ (old, defunct) CSE API and to use the ‘new’ one instead, and my code worked. Little did he and I know that this is not depreciated at all, but a separate (albeit similar) API reserved for paying customers only.

Even after making my ‘conversion’ to a GSS, my search engine (redListSearch) is placed under a misleading ‘Custom Search’ heading. It is not a custom search engine. It is a google site search engine. It uses a different API.

Misleading stuff from google.

The google help email informed me that:

Custom Search API license is query volume based, on monthly billing. Where as, GSS license is annual query volume license with no ads in search results…

So apparently there is Custom Search billing? Is there a CS license I can buy instead? This would have been exactly what I wanted. But I struggled, for weeks trying to find out how to pay to get more queries. I came across dozens of people, asking the same question on google help forums (since free GCS users are literally left in the dark by google help-wise… they don’t even list a support email publicly, you only get the address once you’ve paid them something). No one had the answer. Peope were willing to literally throw money at google and get per-query billing, but didn’t know how to do it. Talk about bad design! There was no easy PAY HERE TO ENABLE PER-QUERY BILLING button under the settings tab, there was only a run-around of links referring to links referring to links that talked ABOUT referring to billing that was mentioned somewhere in the google developers help section three years ago etc etc.

Searching now, I can still not for the life of me find a ‘per query’ billing option.

I got it working!(I used silly variable names since I was frustrated with this– you can see it in the video!)

Here is the code with some commenting:


I was playing around with this for a while, and couldn’t quite zero in on anything. Then I decided to do what I’m good at: Illustrate. This is an example of what makes a species considered Critically Endangered.

What it means to be critically endangered