I'm working on a solution that requires a special type of chart to visualize results from some elaborate number crunching algorithms. Dundas Chart for .Net has an implementation of the standard polar chart.
That's the closest "buy" option I could find and it might very well do the job. I'm a big fan of using existing software when it can solve a significant portion of the problem domain. When you find a good off-the-shelf option, they're often inexpensive and supported (by someone other than me), two big wins right off the bat. The ultimate solution has a few features that are difficult or impossible in the "buy" option, however they might be deemed insignificant. So the "buy" option might very well win out during the upcoming evaluation of my solution, but as part of my due diligence I had to see what the "build" option could offer me.
When I first envisioned the solution, I had ideas of 3D modeling like the work described by Tim Huckaby at InterKnowlogy for the Scripps Research Institute. They built a cancer research application called the Collective Molecular Environment.
Researchers from around the world can review the same model, zoom in, rotate models and insert annotations of their observations. The screenshot to the left shows one of the sample molecule views that comes with the demo. Spinning the molecule around with your mouse is pretty cool.
It's written in C# using Windows Presentation Foundation. SharePoint tracks the collaboration on the back end, but its invisible to the user. Researchers just launch the application and start clicking on cells in 3D.
Download a demo of the WPF application and twirl cells around on your own computer. The thing that floors me is that the proof of concept took only six weeks to build. WPF and SharePoint were really put to good use here.
Independently, Ben Waldron reminded me of MusicPlasma.com. You enter a band name and it shows related music artists in a 2D model using Flash. The mash-up pulls information from Amazon.com. When you click on another artist, the map adjusts and they become the new "center of the universe". Its a cool way of visualizing relational data.
Then I thought about the specific challenges I would have to solve in order to build the solution myself. I knew my data would have a central point and other points around it at various distances. Related points would have a line connecting them — not all points are related to each other. Each point would also display a short keyword or phrase.
So, to put it in mathematical terms, I had a center point at (0,0) that was surrounded by multiple invisible circles. The solution had to plot an unknown number of points on the appropriate circle. The size of each point could vary between 40 pixels and 4 pixels in size. The unique phrase beside each point could remain the same size. Finally, related points need a line connecting them.
I selected Silverlight for my proof-of-concept vehicle. Its a technology that can extend a web page and draw shapes or play video, like Adobe Flash. I first heard of this technology a while back at the MIX06 conference in Vegas. Silverlight runs on Windows and Mac OS X today and they've announced plans to support Linux so there's no worries about the supported platforms.
I use XAML or Extensible Application Markup Language to express how the Silverlight component appears on the page. The XAML used in Silverlight is a subset of the XAML used in WPF applications since Silverlight is browser based while WPF apps can take advantage of the full Windows platform. Just like a new version of the Adobe Flash player, you have to download and install the Silverlight component the first time. Then any page on the Internet that uses Silverlight can take advantage of the plugin. It takes less than 60 seconds on standard machine to download the 1MB file and install it. Here's the button created with 100% XAML just by launching Visual Studio and clicking File, New Project, Silverlight Project. With just pure XML, Silverlight can draw a fancy glossy button. Pretty cool.
Now my problem was the math. How could I calculate the points on a circle? So I headed straight to The Wife; a number crunching machine with more degrees than that Nick Lachey's boy band.
The Wife taught reminded me about some fundamental principles of algebra and geometry. As she tells it, this is sophomore/junior level high school stuff. First, I needed to calculate the central angle between two consecutive points. We'll call that theta. As it turns out, it doesn't matter where the points are, providing they lie on the same circle. For starters, I just wanted an even distribution, so if "n" equals the number of points on the circle then (2pi)/n gives me theta.
Next, I need to start calculating the exact (x,y) coordinates of the points on the circle. The first point is easy, its just (r,0) where "r" is the radius of the circle.
The second point is a little tougher as it gets into sine and cosine. These are just names for ratios in a triangle. The mnemonic SOHCAHTOA helps you remember this on quiz day. Let's look at a following right triangle.
- Sine is calculated as "opposite over hypotenuse", or the "SOH" part of the mnemonic
- Cosine is calculated as "adjacent over hypotenuse", or the "CAH" part of the mnemonic
- Just for good measure, the tangent is "opposite over adjacent", the "TOA" part
Now that I have all the ingredients, I can bake my pi. Ha! Ok, onto the task of plotting the points. The second and subsequent (x,y) values of my points are calculated by the following formulas.
- P0 = (r,0)
- P1 = (r(cos(θ), r(sin(θ))
- P2 = (r(cos(2θ), r(sin(2θ))
- P3 = (r(cos(3θ), r(sin(3θ))
For the "x" coordinate, I multiply the radius by the cosine of theta. The cosine of theta is "b" divided by "c". For the "y" coordinate, I multiply the radius by the sine of theta. The sine of theta is "a" divided by "c". In case its not obvious, the P2 and subsequent points need multiples of theta, so the formula has that minor adjustment.
To apply this information, I created a simple XML file with some elements that define the number of points to draw and some supporting information. I'll just focus on a single circle or level for now. If I can make one, I can make more really fast.
Next, I created a simple ASP.Net page that reads the XML file and outputs the necessary XAML that will allow Silverlight to draw the chart. My C# code iterates over the list of elements in the XML file can calculates the (X,Y) coordinates using the previous formulas. Just to keep things simple, I linked all the points to the center for now. Later on, it'll be easy enough to link other points together with lines as I have already calculated all of the necessary (X,Y) values. You can download my solution through the link at the bottom of the post.
This XAML block produces the following output in Silverlight shown below. As you can see, XAML is just a special XML syntax that is pretty easy to pick up.
To draw an ellipse shape, you add the <ellipse /> element. To draw a line on the canvas, you add an <line /> element. Of course there is tooling available to abstract these details away, but its important to have a fundamental understanding of the work going on under the covers.
Silverlight translates the XAML markup into pretty images as shown below.
If this "build" solution turns out to be a winner, we'll be able to apply nice gradients to the images, add click() events to the bubbles so more information is available through a pop-up and maybe even add the "wet floor" look the feels so cliche these days. These are easy enough in Silverlight, so I didn't spend anytime on the glossy extras just yet.
So, my entire exploration of the "build" option in Silverlight took about two hours, including the time spent with The Wife — time well spent, indeed. It'll be interesting to see how the evaluation of my solution options pan out. Can you tell I love my job?
Download the solution described in this blog post.