diff options
| -rw-r--r-- | code/bostonset.js | 21 | ||||
| -rw-r--r-- | code/weightviswrapper.js | 1 | ||||
| -rw-r--r-- | index.css | 9 | ||||
| -rw-r--r-- | index.html | 37 |
4 files changed, 66 insertions, 2 deletions
diff --git a/code/bostonset.js b/code/bostonset.js index 50b9d38..f5f1264 100644 --- a/code/bostonset.js +++ b/code/bostonset.js @@ -9,6 +9,7 @@ var Bostonset = (function() { this.dataScaler.setScales([[0.00632, 0.0, 0.46, 0.0, 0.385, 3.561, 2.9, 1.1296, 1.0, 187.0, 12.6, 0.32, 1.73], [88.9762, 100.0, 27.74, 1.0, 0.871, 8.78, 100.0, 12.1265, 24.0, 711.0, 22.0, 396.9, 37.97]]); this.targetScaler = new MinMaxScaler(); this.targetScaler.setScales([5.0, 50.0]); + this.readyHooks = []; } Bostonset.prototype.load = function(url) { @@ -22,15 +23,33 @@ var Bostonset = (function() { } self.data.push(arr); }); + self.readyHooks.forEach(function(hook) { hook(); }); }); }; + Bostonset.prototype.afterLoad = function(cb) { + if (!this.ready) { + this.readyHooks.push(cb); + } else { + cb(); + } + }; + + Bostonset.prototype.attributes = function() { + console.log(attrs); + return attrs; + }; + Bostonset.prototype.length = function() { return this.data.length; }; + Bostonset.prototype.rawData = function(row) { + return this.data[row]; + }; + Bostonset.prototype.rawInputs = function(row) { - return this.data[row].slice(0, -1); // leave out MEDV + return this.rawData(row).slice(0, -1); // leave out MEDV }; Bostonset.prototype.inputs = function(row) { diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js index 1f17b55..94f6306 100644 --- a/code/weightviswrapper.js +++ b/code/weightviswrapper.js @@ -199,6 +199,7 @@ var WeightVisWrapper = (function() { /* helps with impress.js' stepenter/stepleave events */ // TODO move into its own file +// TODO must be a step's direct child var VisIntegrater = (function() { function VisIntegrater(enterCb, leaveCb, selector) { var self = this; @@ -51,6 +51,9 @@ p.center { top: 50%; bottom: 50%; } +table.center { + margin: auto; +} .hidden { display: none; @@ -64,3 +67,9 @@ p.center { .axis text { font-size: large; } + +#overview { display: none; } +.impress-on-overview .step { + opacity: 1; + cursor: pointer; +} @@ -140,7 +140,7 @@ </div> </div> - <div class="step slide" data-x="4000" data-y="0" data-z="2500"> + <div class="step slide" data-x="2000" data-y="6000" data-z="2500"> <h1>Künstliche neuronale Netze</h1> <div class="innerStep stepped lastInnerstep center"> <h3>Neuron - künstliches Neuron</h3> @@ -153,6 +153,41 @@ <img style="width: 60%;" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" /> </div> </div> + + <div class="step slide" data-x="4000" data-y="0" data-z="5000"> + <h1>Das Problem – Die Boston-Häuserdatenreihe</h1> + <div class="center"> + <p class="emoji scale">:homes:</p> + <table id="boston-example"></table> + </div> + <script type="text/javascript"> + bostonset.afterLoad(function() { + var table = d3.select("#boston-example"); + table.attr("class", "center mdl-data-table mdl-js-data-table"); + var htr = table.append("thead").append("tr") + bostonset.attributes().forEach(function(attr) { + var th = htr.append("th") + .html(attr) + .attr("class", "mdl-data-table__cell--non-numeric"); + if (attr == "medv") th.attr("class", function(d) { return d3.select(this).attr("class") + " table-highlight"; }); + }); + // TODO highlight medv + table.append("tbody"); + for(c=0; c<8; c++) { + var row = Math.floor(Math.random()*bostonset.length()); + var tr = table.select("tbody").append("tr"); + bostonset.rawData(row).forEach(function(val) { + tr.append("td").text(val); + }); + } + componentHandler.upgradeElement(table.node()); + }); + </script> + </div> + + <div id="overview" class="step" data-x="2000" data-y="2500" data-scale="12"> + <!-- overview --> + </div> <!-- <div class="mdl-layout mdl-js-layout step slide" data-x="-1000" data-y="0" data-z="1000"> <h1 class="mdl-layout__header">Biologie</h1> |