The latest federal elections introduced some new tools for site visitors to use on our site.

You were able to use your postal code to get riding information, view real time results on an interactive map, view live video, and talk politics by posting comments.

I will be talking about these applications in detail in the next few posts.

Blackout
Providing these features proved to be a challenge. The Elections Act doesn’t allow us to broadcast results to areas of the country where the polls haven’t yet closed. Therefore we were not publishing any results on the website until 10PM ET. This is known as the “blackout” period.

Flash Crowd
Because of the blackout wasn’t over until 10pm ET, that’s when the majority of users came to the site. Let’s take a look at the traffic graph for that particular evening.

The date/time in the graph is in Eastern Time. To give you an idea of the scale of the graph the top of the Y axis would be a value 3.8 times higher than at the bottom. The red arrow indicates the peak, which lasted for approx 10 minutes. As the evening progressed the traffic subsided.

“Elections Mode”
Because of the blackout we had to figure out a way to display results on the site the instant 10PM rolls around. Here’s how we did it:

All of the site assets were uploaded to the webservers hours in advance. We were able to control the display of these assets using Server Side Includes (SSIs).

SSIs allows us to hide or display certain html based on the existence of a variable by using if statements. Here’s an example:

<!–#if expr=”${electionsmode} = on”–>
<results related HTML goes here>
<!–#endif–>

We include a file called “vars.html” at the top of every page which defines the “electionsmode” variable. When it’s time to go live, we just change the “electionsmode” variable in vars.html from “off” to “on” and the new content appears instantly on the site.

Getting The Data
The elections results are delivered to us from another IT department. It is the exact same data feed that is used on-air. We process the results every 30 seconds and spit out XML data for our applications to use. The process works like this:

1. IT FTPs the raw election data results to our server.
2. CBC.ca’s Java application sucks in the raw data.
3. The application applies business rules, calculates percentages, then outputs XML files.
4. Process is repeated again in 30 seconds.

The XML files are used for the flash map and riding result pages. Because this process only happens every 30 seconds, you might see a delay from what you see on Television. This is because TV does not have this post-processing and transforming that we do.

The Flash Map
The flash map was developed by Tom Klepl, a very talented flash developer. He worked closely with the system administrators to ensure that the map was designed in such a way that it played well with our CDN (Akamai).

The map allows users to zoom in to their riding and see real time results of who is winning the race. As well, it gives a general overview of all the ridings in Canada. One of our interface engineers, David Raso, produced the following time lapse video of how the country voted on election night.

In Part Two
In my next post, we’ll go into further detail on how the postal code search works (hint: no php, java, or database required!) as well as how we dealt with users who would post election results in comments!

	Email This Post
	, CBC.ca web site, Under the Hood