diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 176 |
1 files changed, 132 insertions, 44 deletions
@@ -10,53 +10,141 @@ <body> <script src="dep/d3.js" type="text/javascript"></script> <script src="dep/material.min.js"></script> + <script src="dep/impress.js"></script> + <script type="text/javascript"> + var resizeHooks = []; + document.addEventListener("DOMContentLoaded", function() { + impress().init(); + }, false); - <script src="code/weightvis.js" type="text/javascript"></script> + function sizeSlides() { + d3.selectAll(".slide") + .style("width", parseInt(window.innerWidth) * 0.8 + "px") + .style("height", parseInt(window.innerHeight) * 0.8 + "px"); + resizeHooks.forEach(function (hook) { hook(); }); + }; + window.addEventListener("resize", sizeSlides); + document.addEventListener("DOMContentLoaded", sizeSlides); + </script> - <div id="visContainer" /> - <script type="text/javascript"> - var svg = d3.select("#visContainer").append("svg"); - svg - .attr("width", "100%") - .attr("height", "100%"); - svg.append("rect") - .attr("width", "100%") - .attr("height", "100%") - .attr("fill", bgColor); - var visualizer = new Visualizer(svg); + <div id="impress"> + <div class="step slide" data-x="0" data-y="0"> + <div class="title mdl-layout mdl-js-layout"> + <h1 class="mdl-layout__header">Künstliche neuronale Netze</h1> + <h3>38 Gewichte in 15 Minuten</h3> + </div> + </div> - var attrFontSize = 20; - function placeAttributes() { - var inputNodes = d3.selectAll(".layer-1")[0]; - var attrs = d3.selectAll(".attribute")[0]; - for (node=0; node<inputNodes.length; node++) { - var iNode = d3.select(inputNodes[node]); - d3.select(attrs[node]) - .attr("x", iNode.attr("cx")) - .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2)); - } - } + <div class="step slide mdl-layout mdl-js-layout" data-x="0" data-y="1000"> + <div class="mdl-layout__header"> + <h2>Die Gewichte im Verlauf</h2> + </div> - visualizer.load("data/log.json", function(){ - var attributeNames = - ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"]; - var inputNodes = d3.selectAll(".layer-1")[0]; - for (node=0; node<inputNodes.length; node++) { - var iNode = d3.select(inputNodes[node]); - svg - .append("text") - .attr("class", "attribute") - .attr("text-anchor", "middle") - .attr("font-weight", "bold") - .attr("font-size", attrFontSize + "px") - .attr("pointer-events", "none") // disable hovering - .attr("cursor", "default") - .text(attributeNames[node]); - } - window.addEventListener("resize", placeAttributes, true); - placeAttributes(); - //visualizer.animate(10, 20); - }); - </script> + <div id="visContainer" class="svgContainer"> + <div id="svgLoader" class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active contentLoader"></div> + </div> + <div class="center" style="width: 50%"> + <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" id="visPlayButton" data-pressed="false" style="float: left;"> + <i class="material-icons" id="visPlay">play_arrow</i> + <i style="display: none" class="material-icons" id="visPause">pause</i> + </button> + <p style="margin-top: 1.4em"> + <input id="visSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="1" value="0" tabindex="0"> + </p> + </div> + + <script src="code/weightvis.js" type="text/javascript"></script> + <script type="text/javascript"> + var thisStep = document.currentScript.parentElement; + + document.addEventListener("DOMContentLoaded", function() { + var svg = d3.select("#visContainer").append("svg").remove(); + svg + .attr("width", "100%") + .attr("height", "100%"); + svg.append("rect") + .attr("width", "100%") + .attr("height", "100%") + .attr("fill", bgColor); + var visualizer = new Visualizer(svg); + var loaded = false; + + var attrFontSize = 20; + function placeAttributes() { + var inputNodes = d3.selectAll(".layer-1").node(); + var attrs = d3.selectAll(".attribute").node(); + for (node=0; node<inputNodes.length; node++) { + var iNode = d3.select(inputNodes[node]); + d3.select(attrs[node]) + .attr("x", iNode.attr("cx")) + .attr("y", Math.floor(parseInt(iNode.attr("cy")) + attrFontSize / 2)); + } + } + + visualizer.load("data/log.json", function(){ + d3.select("#svgLoader").remove(); + d3.select("#visContainer").node().appendChild(svg.node()); + var attributeNames = + ["CRIM", "ZN", "INDUS", "CHAS", "NOX", "RM", "AGE", "DIS", "RAD", "TAX", "PTRATIO", "B", "LSTAT"]; + var inputNodes = d3.selectAll(".layer-1").node(); + for (node=0; node<inputNodes.length; node++) { + var iNode = d3.select(inputNodes[node]); + svg + .append("text") + .attr("class", "attribute") + .attr("text-anchor", "middle") + .attr("font-weight", "bold") + .attr("font-size", attrFontSize + "px") + .attr("pointer-events", "none") // disable hovering + .attr("cursor", "default") + .text(attributeNames[node]); + } + resizeHooks.push(visualizer.reposition); + resizeHooks.push(placeAttributes); + visualizer.hookStepper(function(step) { + d3.select("#visSlider").node().MaterialSlider.change(step); + }); + visualizer.hookStop(function() { + d3.select("#visPlayButton").attr("data-pressed", "false"); + d3.select("#visPlay").style("display", ""); + d3.select("#visPause").style("display", "none"); + var slider = d3.select("#visSlider").node(); + if (slider.value >= slider.max * 0.95) { + slider.MaterialSlider.change(0); // wrap at right end + } + }); + visualizer.reposition(); + placeAttributes(); + var slider = d3.select("#visSlider").attr("max", visualizer.getSteps() - 1); + slider.node().addEventListener("input", function() { + visualizer.showStep(this.value); + }); + d3.select("#visPlayButton").node().addEventListener("click", function() { + var btn = d3.select(this); + if (btn.attr("data-pressed") != "true") { + var step = d3.select("#visSlider").node().value; + visualizer.animate(15, 10, step); + btn.attr("data-pressed", "true"); + d3.select("#visPlay").style("display", "none"); + d3.select("#visPause").style("display", ""); + } else { + visualizer.stopAnimation(); + btn.attr("data-pressed", "false"); + d3.select("#visPlay").style("display", ""); + d3.select("#visPause").style("display", "none"); + } + }); + + loaded = true; + }); + + document.addEventListener("impress:stepenter", function(e) { + if (!loaded || e.target != thisStep) return; + visualizer.animate(10, 20); + }); + }); + </script> + </div> + </div> </body> </html> |