first impress-ions; add error vis

1 files changed, 126 insertions, 0 deletions

diff --git a/code/errorvis.js b/code/errorvis.js
new file mode 100644
index 0000000..9cd87f4
--- /dev/null
+++ b/code/errorvis.js
@@ -0,0 +1,126 @@
+var ErrorVis = (function() {
+    var margins = {
+        "top": 40,
+        "bottom": 40,
+        "left": 40,
+        "right": 40
+    };
+
+    function ErrorVis() {
+        this.container = d3.select("body").append("div").remove();
+        this.svgContainer = this.container.append("div");
+        this.svg = this.svgContainer.append("svg");
+        this.ready = false;
+        this.readyHooks = [];
+
+        this.svgContainer
+            .style("margin-top", "1.5em")
+            .style("margin-bottom", "1em")
+            .style("height", "100%")
+            .style("width", "100%");
+
+        this.spinner = this.container.append("div")
+            .attr("class", "mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active spinner")
+            .style("position", "absolute")
+            .style("left", "50%")
+            .style("top", "50%");
+        componentHandler.upgradeElement(this.spinner.node());
+    }
+
+    ErrorVis.prototype.addPlaceholder = function(el) {
+        el.appendChild(this.spinner.node().cloneNode(true));
+    };
+
+    ErrorVis.prototype.afterLoad = function(cb) {
+        if (!this.ready) {
+            this.readyHooks.push(cb);
+        } else {
+            cb();
+        }
+    };
+
+    ErrorVis.prototype.load = function(url, callback) {
+        var self = this;
+        d3.json(url)
+            .get(function(e, json) {
+                if (e) console.log(e);
+                self.data = Object.keys(json).map(function(k) { return parseFloat(json[k]); });
+                self.ready = true;
+                callback();
+                self.readyHooks.forEach(function(hook) { hook(); });
+            });
+    };
+
+    ErrorVis.prototype.openIn = function(el) {
+        d3.select(el).select(".spinner").remove();
+        el.appendChild(this.svgContainer.node());
+        this.reposition();
+    };
+
+    ErrorVis.prototype.remove = function(el) {
+        this.svgContainer.node().parentNode.appendChild(this.spinner.node().cloneNode(true));
+        this.svgContainer.node().parentNode.removeChild(this.svgContainer.node());
+    };
+
+    ErrorVis.prototype.reposition = function() {
+        var self = this;
+        // TODO may not need to recreate everything
+        this.svg.remove();
+        this.svg = this.svgContainer.append("svg");
+
+        var width = parseInt(this.svgContainer.style("width"))   || 800,
+            height = parseInt(this.svgContainer.style("height")) || 600;
+        this.svg
+            .style("width", width)
+            .style("height", height);
+
+        this.scalerX = d3.scale.linear()
+            .range([margins.left, width-margins.right])
+            .domain([0, this.data.length]);
+        this.scalerY = d3.scale.linear()
+            .range([height-margins.top, margins.bottom])
+            .domain(d3.extent(this.data));
+
+        var xAxis = d3.svg.axis()
+            .scale(this.scalerX);
+        var yAxis = d3.svg.axis()
+            .orient("left")
+            .scale(this.scalerY);
+
+        var gy = this.svg.append("g")
+            .attr("transform", "translate(" + margins.left + ", 0)")
+            .attr("class", "axis")
+            .call(yAxis);
+        var gx = this.svg.append("g")
+            .attr("transform", "translate(0, " + (height-margins.bottom) + ")")
+            .attr("class", "axis")
+            .call(xAxis);
+
+        var line = d3.svg.line()
+            .x(function(d, i) { return self.scalerX(i); })
+            .y(function(d) { return self.scalerY(d); });
+
+        this.svg.append("path")
+            .attr("d", line(this.data))
+            .attr("stroke", "#673ab7")
+            .attr("stroke-width", 5)
+            .attr("fill", "none");
+
+        this.marker = this.svg.append("circle")
+            .attr("display", "none")
+            .attr("r", 10)
+            .attr("fill", "#2962ff");
+    };
+
+    ErrorVis.prototype.showMarker = function(step) {
+        this.marker.style("display", "inherit");
+        this.marker.attr("cx", this.scalerX(step));
+        this.marker.attr("cy", this.scalerY(this.data[step]));
+    };
+
+    ErrorVis.prototype.hideMarker = function() {
+        this.marker.style("display", "none");
+    };
+
+    return ErrorVis;
+})();