SB VIZ: Creating a New Visualization and iOS App in under 3 Days using NUCLiOS

I'm going to walk you through how my colleague Tommy Rausch, our Chief Creative Officer, and I came up with a brand new visualization and created an iOS application to show case it in under 3 days!

Before we get started, if you have an iPhone and/or an iPad, GO GET IT NOW!! (It's 100% Free)

Now, if you want to follow along and use the amazing controls we used to make this app, you should grab them as well!  It's also worth noting that while i'm going to talk about the code in objective-c the controls are also 100% compatible in C# via Xamarin.iOS.

Let's start off by talking about the visualization. Basically, it's a brand new way to visualize a football game. You break the circle into 4 quadrants. Each quadrant represents a single quarter in the game and you read it like you would a clock. So the first quarter is the top right, followed by the second quarter in the bottom right and so on. 

There are 2 teams represented in each chart, they are each identified by a color. Every slice represents a single drive. And from that slice you can see a lot of different things. The width of the slice represents how long that particular drive took. A very wide slice means they used a lot of the clock, while a very thin slice means they had the ball for a very short time. Then there is the length of the slice,how tall it is. That tells you how far they travelled with the ball. Every drive reads from the inner part of the circle to the outer. So, if the slice starts from the inner most circle, then they started on their own 1 yard line. However, if they started on the 2nd outer most ring, that means they were on their opponent's 10 yard line. At the end of each slice is a circle with a letter. Those letters represent the outcome of the drive. For example a "P" means they punted, while a "FG" means they scored a field goal. 

So, when Tommy came up with this awesome idea, he immediately came to me, and asked me if we could build this with our controls as they exist today. 

My first reaction was to say.....um, no. After all, this is something brand new. It's like a Radial Pie chart, except that a slice can begin from anywhere(like a scatter chart), and also each slice can have a variable width(like a pie chart). He was basically asking for a Scatter, Radial Pie, and PieChart all in one. Now, we have all 3 in Nuclios, however, nothing like that combined. 

Thus he walked away defeated with his head down, Charlie Brown style. :(

Here's the thing though. I love challenges, so while i may have said no at first. I really was just buying some time to figure out if it was actually possible. 

For the time being though, i went back to work, with this new chart slowly scratching it's way out of the back of my mind.

Roughly an hour later, out of nowhere, it hit me, "I think we can do this!" Not only did I think we could do this, i was 90% sure we could do this with our latest release and no modification to our source code.

The first thing i needed to do though was pull an actual game's data. Now, there isn't anywhere on the web that gives you a breakdown of each game's drives. So i had to comb through a bunch of various data to put together the information in a usable format. Once i did that, i dove into the code. 

So....I bet you're asking yourself, what control could i have possibly used to create this chart, and how much code did it actually take to write it. 

Well, believe it or not, it was VERY LITTLE code. And the control i used was our very own IGGaugeView.

If you've ever used our controls, or even heard of them, you've probably seen our Samples Browser, which is also in the iOS App Store. If you haven't, what are you waiting for?!?! Go get it now!! :)

Anyways, one of the samples i wrote showed off what the Gauge was capable of, and if i do say so myself, it came out pretty amazing. I basically created a clock by overlaying 3 gauges on top of each other:

Now, i know you're thinking, "Thats all well and good, but that looks nothing like the chart above, are you just showing off?" 

And my answer to you is that it does and it doesn't and yes, maybe i'm showing off a little. ;)

You see, the gauge is very com-posable. And one of the truly powerful and understated features of it is the ability to add Ranges. 

Now a range is basically made up of 4 parts. The start value, the end value, the inner Extent and outer Extent. 

So, what I wound up doing is very simple. The gauge's minimum value is 0 and it's maximum value is 60. I chose the number 60, b/c there are 60 minutes in a football game.

Each slice/drive is represented by a single range in the gauge, and thus its start value and end values can be tied to the specific time over 60 minutes that it occurred. As for the inner and outer extents, that basically just means where the drive begins and where it ends. So, if you consider a football field is 100 yards long, then the lower bounds of innerExtent is basically where the zero line begins (i.e. the offensive team's end zone) and the upper bounds of the outer extent is the 100 yard marker(i.e. the defensive team's end zone). And thus the inner extent and outer extent just fall somewhere in between those values. 

Once i had the data, it took me about 30 minutes to get the visualization up and running.That's CRAZY!

You can imagine how shocked Tommy was once I showed him his drawing brought to life. He immediately said, "We need to make this an App!"

Unfortunately for me, Tommy never sleeps! Which is actually great, because I was constantly being fed design ideas and we had a constant channel open for communication. And that is key to bringing engineering and design together, especially with such a short time frame.

Once we had the rest of the data, putting together the app was rather trivial. We used the IGGridView in NucliOS for the navigation. Believe it or not, the main screen has 2 grids in it. Both horizontal, one for the charts and the other for the numbers. The control is actually super simple to work with, just hooked up the data and listened to a few delegate methods and thats pretty much it. Filtering was just as easy.

By the third day we just had to put some finishing touches, such as the Share and Help buttons. Then we submitted it to Apple and within a week it was published!

So, why am I sharing this? Well there is one really important thing to take away from this and thats "Do not let your tools limit your imagination". Thats probably one of the coolest things about what my colleagues and I get do here at Infragistics. We leave doors open so that you can create something beyond what we've even imagined.

One last thing, I left out probably one of the coolest things of all. I may have written this in iOS using Nuclios, but we as a company actually created a pretty cool technology that allows us to build controls simultaneously for multiple platforms. So this kick-ass Gauge that i've been gushing about, is actually available in our Xaml platforms as well as our HTML 5 product:

So seriously, go check it out:

iOS IGGaugeView

HTML5 Radial GaugeView

WPF Radial Gauge

Silverlight Radial Gauge

By Stephen Zaharuk (SteveZ)