Beautiful graphing of grade distribution

thedjpetersen · Jun 15, 2011 · c123a9a · c123a9a
1 parent 1d6ba57
commit c123a9a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/main/templatetags/utilities.py b/main/templatetags/utilities.py
@@ -5,5 +5,3 @@
 @register.simple_tag
 def dict_key_lookup(the_dict, key):
     return the_dict.get(key, '')
-
-
diff --git a/transcript/templates/transcript/report_card.html b/transcript/templates/transcript/report_card.html
@@ -1,5 +1,7 @@
 {% extends "application.html" %}
 
+{% load filters %}
+
 {% block header %}
     <link rel="stylesheet" type="text/css" href="/site_media/stylesheets/report_card.css" />
   <script type="text/javascript" src="/site_media/javascripts/protovis-r3.2.js" ></script>
@@ -58,21 +60,59 @@ <h3>{{term_name}}</h3>
           x = pv.Scale.ordinal(pv.range({{ grade_distribution|length}})).splitBanded(0, w, 4/5)
           y = pv.Scale.linear(0, 15).range(0, h);
 
-          var vis = new pv.Panel().width(w).height(h).bottom(20).left(20).right(5).top(5);
+          var vis = new pv.Panel()
+                    .width(w)
+                    .height(h)
+                    .bottom(20)
+                    .left(20)
+                    .right(5)
+                    .top(5);
+
+
 
-          var bar = vis.add(pv.Bar).data(data).left(function()x(this.index)).width(x.range().band).bottom(0).height(y);
+          var bar = vis.add(pv.Bar)
+                    .data(data)
+                    .left(function()x(this.index))
+                    .width(x.range().band)
+                    .bottom(0)
+                    .height(y)
+                    .fillStyle(pv.colors(
+                      {% for grade in grade_distribution %}
+                        "hsl({{ grade_distribution|length|colorize:forloop.counter }},100%,40%)"
+                        {% if not forloop.last %}
+                        ,
+                        {% endif %}
+                      {% endfor %}
+                          ).by(pv.index));
 
-          bar.anchor("top").add(pv.Label).textStyle("white").text(function(d) d);
+          bar.anchor("top").add(pv.Label)
+              .textStyle("white")
+              .text(function(d) d);
 
           letter_grades = [{% for grade in grade_distribution %}
             {% for key, value in grade.items %}
               "{{key}}",
             {% endfor %}
           {% endfor%}]
 
-          bar.anchor("bottom").add(pv.Label).textMargin(5).textBaseline("top").text(function() letter_grades[this.index]);
+          bar.anchor("bottom")
+              .add(pv.Label)
+              .textMargin(5)
+              .textBaseline("top")
+              .text(function() letter_grades[this.index]);
 
-          vis.add(pv.Rule).data(y.ticks()).bottom(function(d) Math.round(y(d)) - .5).strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000").add(pv.Rule).left(0).width(5).strokeStyle("#000").anchor("left").add(pv.Label).text(function(d) d);vis.render();
+          vis.add(pv.Rule)
+            .data(y.ticks())
+            .bottom(function(d) Math.round(y(d)) - .5)
+            .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
+            .add(pv.Rule)
+            .left(0).width(5)
+            .strokeStyle("#000")
+            .anchor("left")
+            .add(pv.Label)
+            .text(function(d) d);
+
+          vis.render();
 
         </script> 
       </div>