Two more regression samples & fix bug on thumbnail upside down

index.html

@@ -163,6 +163,12 @@ <h4>
           <div class="dataset" title="Spiral">
             <canvas class="data-thumbnail" data-dataset="spiral"></canvas>
           </div>
+          <div class="dataset" title="Maximum">
+            <canvas class="data-thumbnail" data-regDataset="reg-maximum"></canvas>
+          </div>
+          <div class="dataset" title="ArgMax">
+            <canvas class="data-thumbnail" data-regDataset="reg-argmax"></canvas>
+          </div>
           <div class="dataset" title="Plane">
             <canvas class="data-thumbnail" data-regDataset="reg-plane"></canvas>
           </div>

package.json

@@ -31,6 +31,7 @@
     "http-server": "^0.9.0"
   },
   "dependencies": {
+    "browserify": "^16.2.0",
     "catw": "^1.0.1",
     "d3": "^3.5.16",
     "material-design-lite": "^1.1.3",

src/dataset.ts

@@ -70,6 +70,42 @@ export function classifyTwoGaussData(numSamples: number, noise: number):
   return points;
 }
 
+export function regressArgMax(numSamples: number, noise: number):
+  Example2D[] {
+  let radius = 6;
+  let labelScale = d3.scale.linear()
+    .domain([-10, 10])
+    .range([-1, 1]);
+  let getLabel = (x, y) => Math.max(x,y)==x?0:1;
+
+  let points: Example2D[] = [];
+  for (let i = 0; i < numSamples; i++) {
+    let x = randUniform(-radius, radius);
+    let y = randUniform(-radius, radius);
+    let label = getLabel(x , y);
+    points.push({x, y, label});
+  }
+  return points;
+}
+
+export function regressMaximum(numSamples: number, noise: number):
+  Example2D[] {
+  let radius = 6;
+  let labelScale = d3.scale.linear()
+    .domain([-10, 10])
+    .range([-1, 1]); 
+  let getLabel = (x, y) => Math.max(x,y);
+
+  let points: Example2D[] = [];
+  for (let i = 0; i < numSamples; i++) {
+    let x = randUniform(-radius, radius);
+    let y = randUniform(-radius, radius);
+    let label = getLabel(x , y);
+    points.push({x, y, label});
+  }
+  return points;
+}
+
 export function regressPlane(numSamples: number, noise: number):
   Example2D[] {
   let radius = 6;

src/playground.ts

@@ -999,7 +999,7 @@ function drawDatasetThumbnails() {
     let data = dataGenerator(200, 0);
     data.forEach(function(d) {
       context.fillStyle = colorScale(d.label);
-      context.fillRect(w * (d.x + 6) / 12, h * (d.y + 6) / 12, 4, 4);
+      context.fillRect(w * (d.x + 6) / 12, h - h * (d.y + 6) / 12 - 4, 4, 4);
     });
     d3.select(canvas.parentNode).style("display", null);
   }

src/state.ts

@@ -44,6 +44,8 @@ export let datasets: {[key: string]: dataset.DataGenerator} = {
 
 /** A map between dataset names and functions that generate regression data. */
 export let regDatasets: {[key: string]: dataset.DataGenerator} = {
+  "reg-maximum": dataset.regressMaximum,
+  "reg-argmax": dataset.regressArgMax,
   "reg-plane": dataset.regressPlane,
   "reg-gauss": dataset.regressGaussian
 };