summaryrefslogtreecommitdiff
path: root/index.html
blob: 8f6bb357b3a7dd60cbb7f7e3711f8e40c57af5c4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="dep/material-icons.css">
    <link rel="stylesheet" href="dep/material.deep_purple-blue.min.css">
</head>
<body>
    <script src="dep/d3.js" type="text/javascript"></script>
    <script src="dep/material.min.js"></script>
    <script src="dep/impress.js"></script>

    <script src="code/weightvis.js" type="text/javascript"></script>
    <script src="code/weightviswrapper.js" type="text/javascript"></script>

    <script type="text/javascript">
        var weightsWrapper = new WeightVisWrapper();

        document.addEventListener("DOMContentLoaded", function() {
            impress().init();

            d3.selectAll(".visContainer")[0].forEach(function(el) {
                weightsWrapper.addPlaceholder(el.parentNode);
            });
            weightsWrapper.load("data/weights.json", function() {
                weightsWrapper.reposition();
            });
            sizeSlides();
        }, false);

        /* responsive deck */
        function sizeSlides() {
            d3.selectAll(".slide")
                .style("width", parseInt(window.innerWidth) * 0.9 + "px")
                .style("height", parseInt(window.innerHeight) * 0.9 + "px");
        };
        window.addEventListener("resize", sizeSlides);
    </script>

    <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>

        <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>

            <div class="visContainer"></div>

            <script type="text/javascript">
                new VisIntegrater(function(c) {
                    weightsWrapper.afterLoad(function() {
                        weightsWrapper.openIn(c);
                        weightsWrapper.animate(10, 10);
                    });
                }, function(c) {
                    weightsWrapper.remove(c);
                });
            </script>
        </div>

        <div class="step slide mdl-layout mdl-js-layout" data-x="2000" data-y="1000">
            <div class="mdl-layout__header">
                <h2>Gewichte und Fehler</h2>
            </div>

            <div class="visContainer"></div>

            <script type="text/javascript">
                new VisIntegrater(function(c) {
                    weightsWrapper.afterLoad(function() {
                        weightsWrapper.openIn(c);
                        weightsWrapper.animate(10, 10);
                    });
                }, function(c) {
                    weightsWrapper.remove(c);
                });
            </script>
        </div>
    </div>
</body>
</html>