From 23796d0099468875fc24feaea626ccc993191a6b Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Wed, 6 Apr 2016 19:46:49 +0200
Subject: add boston slide

---
 index.html | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 078708a..d0e7b28 100644
--- a/index.html
+++ b/index.html
@@ -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 &ndash; 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>
-- 
cgit v1.3.1