diff --git a/client/html/index.html b/client/html/index.html
index 38aeff3..d902388 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -112,26 +112,6 @@
-
-
-
+
diff --git a/client/scripts/application.js b/client/scripts/application.js
index 19cb3a6..282de7b 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: Snap('#svg'),
+ canvas: new Snap('#svg'),
columnRange: ctx.searchRange,
columnWidth: 150,
useLocalScale: true,
@@ -92,9 +92,9 @@
var useRelativeScale = $('#useRelativeScale').is(':checked');
ctx.grapher.setUseRelativeScale(useRelativeScale);
});
- // $('#input').fadeOut(function() {
- // $('#output').fadeIn();
- // });
+ $('#input').fadeOut(function() {
+ $('#output').fadeIn();
+ });
});
}
diff --git a/client/scripts/grapher.js b/client/scripts/grapher.js
index e087d75..639b75a 100644
--- a/client/scripts/grapher.js
+++ b/client/scripts/grapher.js
@@ -111,12 +111,14 @@
function Column(params) {
this.updateShapes = function() {
- var bigCircle = this.canvas.circle(150, 150, 100);
- bigCircle.attr({
- fill: "#bada55",
- stroke: "#000",
- strokeWidth: 5
- });
+ var gradient = this.canvas.gradient('l(0, 0, 0, 1)#000-#fff');
+
+ this.canvas.rect(5, 0, 90, 490).attr({'stroke': '#d3d7cf', 'fill': '#eeeeec'});
+ this.canvas.rect(5, 0, 90, 245).attr({'fill': '#cc0000'});
+ this.canvas.rect(90, 0, 10, 490).attr({'stroke': '#d3d7cf', 'fill': gradient});
+ this.canvas.rect(0, 490, 100, 20).attr({'fill': '#d3d7cf'});
+ this.canvas.line(0, 245, 5, 245).attr({'stroke': '#888a85'});
+ this.canvas.text(55, 500, this.name).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
};
this.decimateHints = function(hints, steps, scale) {