summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorschneefux <schneefux+commit@schneefux.xyz>2016-04-01 16:30:52 +0200
committerschneefux <schneefux+commit@schneefux.xyz>2016-04-01 16:30:52 +0200
commitba70aac92b1db9420fca1fb29d2fe832c2d03051 (patch)
tree4e75a36d3930e6cab114c8e835be9b1c11d819c5 /index.html
parent4668e546b33a9cb2ff044af55ba9c1c2c067d6da (diff)
downloadvortrag-knn-ba70aac92b1db9420fca1fb29d2fe832c2d03051.tar.gz
vortrag-knn-ba70aac92b1db9420fca1fb29d2fe832c2d03051.zip
integrate into mdl + impress.js
Diffstat (limited to 'index.html')
-rw-r--r--index.html176
1 files changed, 132 insertions, 44 deletions
diff --git a/index.html b/index.html
index 456ad87..c1858fd 100644
--- a/index.html
+++ b/index.html
@@ -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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-02 04:15:05 +0000