diff --git a/client/html/index.html b/client/html/index.html
index 913b238..38aeff3 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -112,24 +112,24 @@
                 </div>
             </div>
 
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
-                <defs>
-                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                        <stop offset="0%" stop-color="#ffffff"/>
-                        <stop offset="100%" stop-color="#000000"/>
-                    </linearGradient>
-                </defs>
+            <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
+                <!-- <defs> -->
+                <!--     <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
+                <!--         <stop offset="0%" stop-color="#ffffff"/> -->
+                <!--         <stop offset="100%" stop-color="#000000"/> -->
+                <!--     </linearGradient> -->
+                <!-- </defs> -->
 
-                <symbol id="graph">
-                    <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/>
-                    <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/>
-                    <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/>
-                    <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/>
-                    <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/>
-                    <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text>
-                </symbol>
+                <!-- <symbol id="graph"> -->
+                <!--     <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> -->
+                <!--     <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> -->
+                <!--     <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> -->
+                <!--     <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> -->
+                <!--     <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> -->
+                <!--     <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> -->
+                <!-- </symbol> -->
 
-                <use xlink:href="#graph" x="0" y="0"/>
+                <!-- <use xlink:href="#graph" x="0" y="0"/> -->
             </svg>
 
             <!-- query output -->
diff --git a/client/scripts/application.js b/client/scripts/application.js
index 7aff541..19cb3a6 100644
--- a/client/scripts/application.js
+++ b/client/scripts/application.js
@@ -71,7 +71,7 @@
             ctx.maxResults   = query.maxResults;
 
             ctx.grapher = new grapher.Grapher({
-                canvas:           null,
+                canvas:           Snap('#svg'),
                 columnRange:      ctx.searchRange,
                 columnWidth:      150,
                 useLocalScale:    true,
diff --git a/client/scripts/grapher.js b/client/scripts/grapher.js
index abaafa1..e087d75 100644
--- a/client/scripts/grapher.js
+++ b/client/scripts/grapher.js
@@ -111,7 +111,12 @@
 
     function Column(params) {
         this.updateShapes = function() {
-
+            var bigCircle = this.canvas.circle(150, 150, 100);
+            bigCircle.attr({
+                fill:        "#bada55",
+                stroke:      "#000",
+                strokeWidth: 5
+            });
         };
 
         this.decimateHints = function(hints, steps, scale) {