From cc8dda39fc4e6a875ffdbe9f7614d434375fa29b Mon Sep 17 00:00:00 2001 From: schneefux Date: Sat, 2 Apr 2016 17:12:01 +0200 Subject: first impress-ions; add error vis --- code/errorvis.js | 126 +++++++++++++++++++++++++++++++++++++++++++++++ code/weightviswrapper.js | 7 ++- dep/impress.js | 26 ++++++++-- index.css | 41 +++++++++++++++ index.html | 91 +++++++++++++++++++++++++++++++--- 5 files changed, 277 insertions(+), 14 deletions(-) create mode 100644 code/errorvis.js 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); }); diff --git a/dep/impress.js b/dep/impress.js index 2529e26..8115af1 100644 --- a/dep/impress.js +++ b/dep/impress.js @@ -553,15 +553,33 @@ var prev = steps.indexOf( activeStep ) - 1; prev = prev >= 0 ? steps[ prev ] : steps[ steps.length-1 ]; + // when backing through a slide, clear its inner steps + $$('.innerStep.stepped', activeStep).forEach( function (elem) { + elem.classList.remove('stepped'); + }); + return goto(prev); }; + var inner = { + next: function () { + var innerNext = activeStep.querySelector('.innerStep:not(.stepped)'); + innerNext.classList.add('stepped'); + } + }; + // `next` API function goes to next step (in document order) var next = function () { - var next = steps.indexOf( activeStep ) + 1; - next = next < steps.length ? steps[ next ] : steps[ 0 ]; - - return goto(next); + // if there are unshown inner steps, show next one instead of next slide + if(activeStep.querySelectorAll('.innerStep:not(.stepped)').length) { + inner.next(); + triggerEvent(activeStep, "impress:innerstep"); + } else { + var next = steps.indexOf( activeStep ) + 1; + next = next < steps.length ? steps[ next ] : steps[ 0 ]; + + return goto(next); + } }; // Adding some useful classes to step elements. diff --git a/index.css b/index.css index 62639f4..ae81e85 100644 --- a/index.css +++ b/index.css @@ -23,3 +23,44 @@ time, mark, audio, video { h1, h2, h3, h4, h5, h6 { text-align: center; } + +.step { + opacity: 0; + transition: opacity 1s; +} +.step.active { + opacity: 1; +} +.innerStep { + position: absolute; + opacity: 0; + transition: opacity 0.5s; +} +.lastInnerstep { + opacity: 1; +} + +.center { + position: absolute; + left: 0; + right: 0; + margin: auto; + text-align: center; +} +p.center { + top: 50%; + bottom: 50%; +} + +.hidden { + display: none; +} + +.axis path, .axis line { + fill: none; + stroke: rgba(0, 0, 0, 0.87); + stroke-width: 3; +} +.axis text { + font-size: large; +} diff --git a/index.html b/index.html index 8f6bb35..972e889 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,11 @@ +
-
-
-

Künstliche neuronale Netze

-

38 Gewichte in 15 Minuten

+
+

Künstliche neuronale Netze

+

38 Gewichte in 20 Minuten

+
+ +
+

Biologie

+
+

Der Mensch und die Maschine.

+

+ accessibility + 🖥 +

+
+

Wahrnehmung

+

+ remove_red_eye +

+

+ Rezeptor +

+
+
+

Reaktion.

+

+ directions_walk +

+

+ Effektor +

+
+
+ +
+

Abstraktion eines Individuums

+

+ Wahrnehmung ➞ + help_outline + ➞ Reaktion +

+

+ Eingabe ➞ ✨ ➞ Ausgabe +

+
+ + +
+

Abstraktion der Ein- und Ausgabe

+
+ +
+
+

Der Fehler im Verlauf

+
+ +
+ +
@@ -62,7 +141,7 @@ }); }, function(c) { weightsWrapper.remove(c); - }); + }, ".visContainer");
@@ -81,7 +160,7 @@ }); }, function(c) { weightsWrapper.remove(c); - }); + }, ".visContainer");
-- cgit v1.3.1