Mathematica Box and Whisker Plot

I am trying to find a visualization to describe the distribution of our assessement data.  With a box and whisker plot, I can show the five statistical summary (minimum, maximum, first quartile, median and third quartile) in one chart.  I can create a chart for each assessment dimension, and put them side by side together.

It is surprisingly easy to do it programmatically in Mathematica,  Starting with a list of ratings (raters, ratings of dimension 1, 2, 3 and 4), then one single line of code using BoxWhiskerPlot function.  That's it!

BoxWhiskerPlot[
 Select[ratings[[All, 2]], NumberQ],
 Select[ratings[[All, 3]], NumberQ],
 Select[ratings[[All, 4]], NumberQ],
 Select[ratings[[All, 5]], NumberQ],
 BoxLabels -> {Style[dimensionnames[[1]], 11,
    FontFamily -> "Tahoma"],
   Style[dimensionnames[[2]], 11, FontFamily -> "Tahoma"],
   Style[dimensionnames[[3]], 11, FontFamily -> "Tahoma"],
   Style[dimensionnames[[4]], 11, FontFamily -> "Tahoma"]},
 BoxFillingStyle -> {RGBColor[0.3, 0.6, 0.9, 1],
   RGBColor[0.5, 0.7, 0.3, 1], RGBColor[1, 0.5, 0, 1],
   RGBColor[0.71, 0.22, 0.26, 1]},
 PlotLabel ->
  Style[DisplayForm[
    GridBox[{{"Assessment 2010"}, {"Box covering 50% of data (N=" ~~
        ToString[Nsize] ~~ "Programs)"}, {" "}}]], "Title", 14],
 FrameLabel -> {None, Style["Ratings", 11, FontFamily -> "Tahoma"]},
 BoxOutliers -> Automatic,
 PlotRange -> {Automatic, {0, 6.5}},
 ImageSize -> {520, 300}]
 

Mathematica also has an option to choose whether to show outliers.

I have created a lot more different kinds of visualizations, including an interactive sector chart.  Thanks to the Mathematica's Manipulate (or the MSPManipulate in webMathematica) function.  I will post them here when I have more time.

Mathematica, I am loving it!

Mathematica Bubble Chart

I was trying to show correlation between two dimensions visually in an assessment project.  I didn't feel the regular plot would do enough justice since the dots that overlap only count as 1.  So I experimented in using the bubble chart in Mathematica.

Here is the code:

ratingpairstally = Tally[ratingpairs];
bubbledata = {};
For[i = 1, i <= Length[ratingpairstally], i++,
  AppendTo[bubbledata,
    Join[ratingpairstally[[i, 1]], {ratingpairstally[[i, 2]]}]];
  ];

Show[
    Plot[{fitline}, {x, 0, 6},
  PlotLabel ->
   Style[DisplayForm[
     GridBox[{{"Assessment 2010"}, {dimensionnames[[1]] ~~ " vs " ~~
         dimensionnames[[4]] ~~ "(" ~~ ToString[Nsize] ~~
         "Programs)"}, {" "}}]], "Title", 14],
  AxesLabel -> {Style[dimensionnames[[4]], 11,
     FontFamily -> "Tahoma"],
    Style[dimensionnames[[1]], 11, FontFamily -> "Tahoma"]},
  PlotStyle -> Gray,
  PlotRange -> {{0, 6.5}, {0, 6.5}},
  AspectRatio -> Automatic,
  ImageSize -> {350, 350}]
 ,
 BubbleChart[bubbledata,
  ChartStyle -> RGBColor[0.3, 0.6, 0.9, 1]]
 ]

Basically, I have pairs of ratings stored in a list called ratingpairs.  I then used the Tally function to get the count of all distinct value of rating pairs.  Formatted the output properly into another list called bubbledata, ready to be plotted.  I use the Show function so I can put the bubble chart, and the line of best fit together.  Viola!
 

Radar Chart Gadget verified by Google - Yeah!

Google now requires all custom gadgets to be verified by them in order they can be viewed by collaborators. Refer to the Gadgets: Verifying Custom Gadget Google docs help page for more information.

I had developed a Radar Chart Google Spreadsheet Gadget a while ago. And our department have been using it to visualize the assessment data. So I better submit it to Google for verification as soon as possible.

It took about 3 business days... and YES! As of noon today, Google had verified my radar chart gadget. I hope it will be listed in their gadget gallery soon.

Internet Explorer Strikes Again

Just found out my Radar Chart Google Spreadsheet Gadget did not work on all popular browsers.  Guess which one?!

The error message was:

window.G_vmlCanvasManager is null or not an Object

I swear I had verified it working on Internet Explorer before.
I swear I had not made any change since.
and I swear...
and I swear...

Apparently, there was a problem loading excanvas.js (a javascript to enable HTML5 canvas for Internet Explorer).  As a result, window.G_vmlCanvasManager did not exist.

My original code was:

<content type="html"><![CDATA[

<!--[if IE]><script type="text/javascript" src="http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/excanvas.js"></script><![endif]-->

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

As it turns out, there needs to be something between <![CDATA[ and the conditional comment <!--[if IE]>... even if it is just a <p> or another <script> line.

So I changed the code to:

<Content type="html"><![CDATA[

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<!--[if IE]><script type="text/javascript" src="http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/excanvas.js"></script><![endif]-->

The gadget is working once again.
 

Finished - Radar Chart Google Spreadsheet Gadget, That Is!

I believe I have finished the work on creating a Radar Chart Google Spreadsheet Gadget. Here are the changes since my previous release:

• Added the ability to toggle individual records on and off in the chart. This allows better visual comparison between different records and/or the overall average.
• Added the ability to toggle the competency line on and off. Also, if user does not input a competency value, the line would not be shown at all.
• Added better error handling when any of the user inputs, spreadsheet data is not a number.
• Added a process to determine the real maximum value for scales in radar chart.
• Fixed the alignment problems of labels with various number of radar lines (columns).
• Changed the gadget size to have a default height of 250px so it renders properly in iGoogle.
• Changed the gadget size to use dynamic height for large records set.
• Added a user configurable refresh time for the gadget, and default is 5 minutes.
  
• If "Calculate average" is chosen, then the gadget will draw the radar chart of the overall average by default. Otherwise, it will draw the radar chart of all records.
• Added a comment field.

This is what the current release looks like:

You can use this gadget with your own spreadsheet data. Here is how:

• Open your Google spreadsheet, and choose Gadget on the Insert menu (or right click on the spreadsheet and choose Insert Gadget):
• In the Add a Gadget pop-up window, choose Custom.
• Under URL of your own gadget, put int the following URL: http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/radar-chart.xml?nocache
  
• Click Add.
• Follow the instructions in the gadget interface to configure the gadget.

You can give me feedback via the comments section.

If it looks good, I will submit it to the Google Gadget Gallery in a couple of weeks.

My First Radar Chart Google Spreadsheet Gadget

The charts and gadgets in Google spreadsheet offer a number of interesting ways to help in visualizing our assessment data. Gadgets further offer a way to present the visualization information into a web page or one's iGoogle page. However, Google spreadsheet does not have a radar chart gadget by default which is an important piece in visualizing data harvested in our transformative assessment effort (currently known as the Harvesting Grade Book). For a brief background information, see my post on Using Google Chart API to Implement Harvesting Grade Book.

I started to look into ways to combine the Google Chart API, Spreadsheet API and Gadget API. While searching around, I found that Greg Schechter had made a spider web google spreadsheet gadget and it is listed in the Google Visualization API Gadget Gallery. Great!

But as it turns out, it does not provide all the functionalities we need, such as calculating the overall average, drawing a competency line, drawing the scales, adding a title to the chart and it also does not work in Internet Explorer at all. But it gives me, the first time developer of Google spreadsheet gadget, a good starting point. And I found myself busy with writing a radar chart google spreadsheet gadget these days.

The program logic is not difficult at all. But woe to the existence of Internet Explorer browser. I estimated spending 3 times more effort just to work around it's problems.

First, Internet Explorer does not support the HTML5 canvas tag for 2D command-based drawing. To bring the same functionality to it, I found the ExplorerCanvas javascript which I could include into the code.

Second, Internet Explorer (specifically the ExplorerCanvas script) does not support dynamic creation of canvas using innerHTML. To work around the problem, I need to use createElement and initElement instead.

if(navigator.appName == "Microsoft Internet Explorer")

{

var chartCanvas = document.createElement("canvas");

chartCanvas.id = "radarchart_canvas";

chartMainDiv.appendChild(chartCanvas);
chartCanvas=window.G_vmlCanvasManager.initElement(chartCanvas);

}

Third, Google gadgets run in browser quirks mode as according to Gadget Specifications. What it means to me is that the gadget renders differently in Internet Explorer. This article Quirks mode and strict mode provides more detail information. To work around the problem, I have to change the css accordingly.

Last (at least for now), Internet Explorer would not draw any arc or circle if the center is a floating point value. To fix the problem, I use parseInt to convert the floating point to integer.

This is the first beta release of my radar chart spreadsheet gadget.

If you want to test using this gadget with your own spreadsheet data, you can go to your Google spreadsheet to insert the gadget:

• In the Add a Gadget pop-up window, choose Custom.
• Under URL of your own gadget, put int the following URL:
  http://hosting.gmodules.com/ig/gadgets/file/115560173853763482292/radar-chart.xml?nocache
• Click Add.
• Follow the instructions in the gadget interface to choose your range of spreadsheet data, etc.

Next, I will work on changing the gadget to use checkbox in the selection of graphing data on the right. Then one can choose multiple data (radar area) to be displayed together. This allows easy comparison of one data set to another, or the overall average.

Please give me feedback via the comments section.

SQL Database Point-In-Time Restore of Transaction Log Backup

A Teaching Assistant (TA) deleted all the grades in an assignment in our online learning management system, eLearning (powered by Blackboard Learning System CE). What happened was a series of actions that leaded to this. Here is what was described to me (I'm yet to be able to successfully simulate it):

The TA used the grade book tool to enter the grades of all students in a particular assignment (instead of using the assignment tool). He then changed the due date of that assignment to a later date. The system gave him a warning message, but he simply went ahead to proceed. He subsequently found that all the grades he entered for that assignment were gone.

Now I had to find a way to retrieve the grades from our old backups. But the challenge was he did not remember when (approximate date and time) he entered the grades, and when he modified the assignment properties which caused all the grades to be cleared.

I parsed our web server logs (using Cygwin's gawk) looking for all his POST requests with grade book and other strings in the URL. Yes! I saw the log entires dated April 14 around midnight, with the last update at 0:56am.

Therefore, I restored our elearning database backups (onto a test instance) to the April 14 0:57am state. Here is the SQL script.

restore database webctdatabase from DISK='D:\backupfolder\webctdatabase_backup_200904120005.bak' WITH NORECOVERY, REPLACE

restore database webctdatabase from DISK='D:\backupfolder\webctdatabase_backup_200904140005.dif' WITH NORECOVERY

restore log webctdatabase from DISK='D:\backupfolder\webctdatabase_backup_200904140250.trn' WITH RECOVERY, STOPAT = 'Apr 14, 2009 00:57:00 AM'

restore database webctdatabase$PF from DISK='D:\backupfolder\webctdatabase$PF_backup_200904120005.bak' WITH NORECOVERY, REPLACE

restore database webctdatabase$PF from DISK='D:\backupfolder\webctdatabase$PF_backup_200904140005.dif' WITH NORECOVERY

restore log webctdatabase$PF from DISK='D:\backupfolder\webctdatabase$PF_backup_200904140250.trn' WITH RECOVERY, STOPAT = 'Apr 14, 2009 00:57:00 AM'

A little background info: We ran eLearning full database backup once a week (Sunday), a differential backup nightly (Monday to Saturday), and transaction log backups throughout the day. Therefore, when restoring from backup, I needed to restore the full database backup (as of April 12 Sunday), the last differential backup (as of April 14 Tuesday), and the transaction log backup to the specific point-in-time.

After the restore was completed, I also had to execute the following SQL commands to set the webct and webct$PF users' SID on the test instance properly.

Use webctdatabase

go

sp_change_users_login 'report'

Use webctdatabase

go

sp_change_users_login 'update_one', 'webct', 'webct'

Use webctdatabase

go

sp_change_users_login 'update_one', 'webct$PF', 'webct$PF'

Use webctdatabase$PF

go

sp_change_users_login 'report'

Use webctdatabase$PF

go

sp_change_users_login 'update_one', 'webct', 'webct'

Use webctdatabase$PF

go

sp_change_users_login 'update_one', 'webct$PF', 'webct$PF'

Then I restarted the webct service on the frontend node of the test instance to bring up the application. I logoned to it and could see all the student grades in that section/assignment. We exported them for the TA.

Saved by the transaction log backups.