diff options
Diffstat (limited to 'code')
| -rw-r--r-- | code/errorvis.js | 126 | ||||
| -rw-r--r-- | code/weightviswrapper.js | 7 |
2 files changed, 129 insertions, 4 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; +})(); diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js index eec2a84..ad33092 100644 --- a/code/weightviswrapper.js +++ b/code/weightviswrapper.js @@ -1,3 +1,4 @@ +// TODO rename classes (weightVis etc.) var WeightVisWrapper = (function() { var attributeNames = ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"]; @@ -136,8 +137,6 @@ var WeightVisWrapper = (function() { this.svgContainer.node().parentNode.removeChild(this.controlContainer.node()); this.svgContainer.node().parentNode.appendChild(this.spinner.node().cloneNode(true)); this.svgContainer.node().parentNode.removeChild(this.svgContainer.node()); - this.container.node().appendChild(this.controlContainer.node()); - this.container.node().appendChild(this.svgContainer.node()); this.netVisualizer.stopAnimation(); this.slider.node().MaterialSlider.change(0); }; @@ -162,10 +161,10 @@ var WeightVisWrapper = (function() { /* helps with impress.js' stepenter/stepleave events */ var VisIntegrater = (function() { - function VisIntegrater(enterCb, leaveCb) { + function VisIntegrater(enterCb, leaveCb, selector) { var self = this; this.slide = document.currentScript.parentElement; - this.container = d3.select(this.slide).select(".visContainer"); + this.container = d3.select(this.slide).select(selector); this.slide.addEventListener("impress:stepenter", function() { enterCb(self.slide); }); |