diff --git a/productMods/js/menupage/browseClassGroupsPiePeople.js b/productMods/js/menupage/browseClassGroupsPiePeople.js
new file mode 100644
index 00000000..e35c3f9c
--- /dev/null
+++ b/productMods/js/menupage/browseClassGroupsPiePeople.js
@@ -0,0 +1,39 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+// This file extends and proxies the default behavior defined in vitro/webapp/web/js/menupage/browseByClassGroupsPie.js
+
+// Saving the original graphClasses function from browseClassGroups
+var graphPersonClasses = graphClasses.piechart;
+
+// Assigning the proxy function
+graphClasses.piechart = function(values, labels, uris) {
+    // Clear the existing pie chart
+    $('#menupage-graph').empty();
+    
+    // Create the canvas
+    var r = Raphael("menupage-graph", 300, 300);
+    
+    // Setup the colors for the slices
+    // colors = ['#192933', '#26404E', '#294656', '#194c68', '#487A96', '#63A8CE', '#67AED6','#758A96', '#9DB9C9' ];
+    colors = ['#143D52', '#1F5C7A', '#297AA3', '#3399CC', '#5CADD6', '#85C2E0', '#ADD6EB', '#ADCBDD', '#D6EBF5', '#E9F1F5' ];
+    // Reverse colors to see how it looks with larger slices in lighter hues:
+    // colors = colors.reverse();
+    
+    // Now draw the pie chart
+    var pie = r.g.piechart(100, 80, 70, values, {legend: labels, legendmark: "square", legendpos: "south", colors: colors});
+    pie.hover(function () {
+        this.sector.stop();
+        this.sector.scale(1.1, 1.1, this.cx, this.cy);
+        if (this.label) {
+            this.label[0].stop();
+            this.label[0].scale(1.5);
+            this.label[1].attr({"font-weight": 800});
+        }
+    }, function () {
+        this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
+        if (this.label) {
+            this.label[0].animate({scale: 1}, 500, "bounce");
+            this.label[1].attr({"font-weight": 400});
+        }
+    });
+};
\ No newline at end of file
diff --git a/productMods/templates/freemarker/body/menupage/menupage--classgroup-people.ftl b/productMods/templates/freemarker/body/menupage/menupage--classgroup-people.ftl
index 7242e8c0..f85e79bb 100644
--- a/productMods/templates/freemarker/body/menupage/menupage--classgroup-people.ftl
+++ b/productMods/templates/freemarker/body/menupage/menupage--classgroup-people.ftl
@@ -12,7 +12,7 @@
             <#include "menupage-vClassesInClassgroup.ftl">
             
             <section id="menupage-graph" class="people" role="region">
-                <img src="${urls.images}/menupage/visual-graph.jpg" alt="" />
+                <#-- Graph will be dynamically rendered via RaphaelJS library -->
             </section>
         </section>
         
@@ -45,7 +45,7 @@
     
     <#include "menupage-scripts.ftl">
     
-    ${scripts.add("/js/menupage/browseByVClassPeople.js")}
+    ${scripts.add("/js/menupage/browseByVClassPeople.js", "/js/menupage/browseClassGroupsPiePeople.js")}
 <#else>
     ${noDataNotification}
 </#if>
\ No newline at end of file
diff --git a/themes/wilma/images/visual-graph-generic-class.jpg b/themes/wilma/images/visual-graph-generic-class.jpg
deleted file mode 100644
index 8749a5a7..00000000
Binary files a/themes/wilma/images/visual-graph-generic-class.jpg and /dev/null differ
diff --git a/themes/wilma/images/visual-graph.jpg b/themes/wilma/images/visual-graph.jpg
deleted file mode 100644
index 2b9634b2..00000000
Binary files a/themes/wilma/images/visual-graph.jpg and /dev/null differ