From dcdeb72ab6e07e4a98c56039b8594933da877484 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Mon, 13 Jan 2020 23:44:41 -0600 Subject: [PATCH 1/9] Added radio buttons for color selection, state for color selection, and basic function template for color selection. --- index.html | 9 ++++++++- src/playground.ts | 12 ++++++++++++ src/state.ts | 3 ++- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3f6060d6..4494598a 100644 --- a/index.html +++ b/index.html @@ -274,9 +274,16 @@

Output

+ +
-
Colors shows data, neuron and weight values. diff --git a/src/playground.ts b/src/playground.ts index aeac0f9c..9d8fec51 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -264,6 +264,18 @@ function makeGUI() { reset(); }); + let selectOrangeEdit = d3.select("#select-orange").on("change", function() { + state.editColor = this.checked ? this.value : "blue" + state.serialize() + userHasInteracted() + }); + + let selectBlueEdit = d3.select("#select-blue").on("change", function() { + state.editColor = this.checked ? this.value : "orange" + state.serialize() + userHasInteracted() + }); + let showTestData = d3.select("#show-test-data").on("change", function() { state.showTestData = this.checked; state.serialize(); diff --git a/src/state.ts b/src/state.ts index 42dc8154..9cae5c9f 100644 --- a/src/state.ts +++ b/src/state.ts @@ -130,7 +130,8 @@ export class State { {name: "tutorial", type: Type.STRING}, {name: "problem", type: Type.OBJECT, keyMap: problems}, {name: "initZero", type: Type.BOOLEAN}, - {name: "hideText", type: Type.BOOLEAN} + {name: "hideText", type: Type.BOOLEAN}, + {name: "editColor", type: Type.STRING} ]; [key: string]: any; From 434a7668f234c763ad0c0e0d013702bd713da0f1 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Thu, 16 Jan 2020 00:42:55 -0600 Subject: [PATCH 2/9] Added X and Y for d3 onClick --- src/heatmap.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/heatmap.ts b/src/heatmap.ts index 0bf21f66..9f2dfd19 100644 --- a/src/heatmap.ts +++ b/src/heatmap.ts @@ -88,6 +88,10 @@ export class HeatMap { position: "relative", top: `-${padding}px`, left: `-${padding}px` + }).on("click" , function() { + const [x, y]= d3.mouse(this) + console.log(x) + console.log(y) }); this.canvas = container.append("canvas") .attr("width", numSamples) @@ -97,7 +101,7 @@ export class HeatMap { .style("position", "absolute") .style("top", `${padding}px`) .style("left", `${padding}px`); - + if (!this.settings.noSvg) { this.svg = container.append("svg").attr({ "width": width, From 44ebd45a361d39edb117490f1c0a9d10cb852b37 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Thu, 16 Jan 2020 21:56:38 -0600 Subject: [PATCH 3/9] Added basic adding on the canvas --- index.html | 4 ++-- src/heatmap.ts | 17 ++++++++++++----- src/playground.ts | 22 ++++++++++++++++++---- src/state.ts | 3 ++- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 4494598a..bc29a2e1 100644 --- a/index.html +++ b/index.html @@ -275,11 +275,11 @@

Output

diff --git a/src/heatmap.ts b/src/heatmap.ts index 9f2dfd19..ed036d5a 100644 --- a/src/heatmap.ts +++ b/src/heatmap.ts @@ -41,6 +41,7 @@ export class HeatMap { private color; private canvas; private svg; + private points: Example2D[]; constructor( width: number, numSamples: number, xDomain: [number, number], @@ -88,11 +89,7 @@ export class HeatMap { position: "relative", top: `-${padding}px`, left: `-${padding}px` - }).on("click" , function() { - const [x, y]= d3.mouse(this) - console.log(x) - console.log(y) - }); + }) this.canvas = container.append("canvas") .attr("width", numSamples) .attr("height", numSamples) @@ -146,10 +143,20 @@ export class HeatMap { this.updateCircles(this.svg.select("g.test"), points); } + addPointToCanvas(point: Example2D): void { + if (this.settings.noSvg) { + throw Error("Can't add points since noSvg=true"); + } + this.points.push(point) + this.updateCircles(this.svg.select("g.train"), this.points); + } + updatePoints(points: Example2D[]): void { if (this.settings.noSvg) { throw Error("Can't add points since noSvg=true"); } + console.log("GOT HERE ONCE AT LEAST") + this.points = points.map(point => point); this.updateCircles(this.svg.select("g.train"), points); } diff --git a/src/playground.ts b/src/playground.ts index 9d8fec51..928c8d61 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -264,18 +264,32 @@ function makeGUI() { reset(); }); - let selectOrangeEdit = d3.select("#select-orange").on("change", function() { - state.editColor = this.checked ? this.value : "blue" + d3.select("#select-orange").on("change", function() { + state.editColor = this.checked ? -1 : 1 state.serialize() userHasInteracted() }); - let selectBlueEdit = d3.select("#select-blue").on("change", function() { - state.editColor = this.checked ? this.value : "orange" + d3.select("#select-blue").on("change", function() { + state.editColor = this.checked ? 1 : -1 state.serialize() userHasInteracted() }); + + d3.select("#heatmap").on("click", function() { + let [x, y] = d3.mouse(this) + const label = state.editColor + const padding = 20 + const maxScale = 5.0 + const factor = 23.07 + x -= padding + y -= padding + x = x/factor - maxScale + y = maxScale - y/factor + heatMap.addPointToCanvas({x, y, label}) + }); + let showTestData = d3.select("#show-test-data").on("change", function() { state.showTestData = this.checked; state.serialize(); diff --git a/src/state.ts b/src/state.ts index 9cae5c9f..ccee499a 100644 --- a/src/state.ts +++ b/src/state.ts @@ -131,7 +131,7 @@ export class State { {name: "problem", type: Type.OBJECT, keyMap: problems}, {name: "initZero", type: Type.BOOLEAN}, {name: "hideText", type: Type.BOOLEAN}, - {name: "editColor", type: Type.STRING} + {name: "editColor", type: Type.NUMBER} ]; [key: string]: any; @@ -161,6 +161,7 @@ export class State { sinX = false; cosY = false; sinY = false; + editColor = -1; dataset: dataset.DataGenerator = dataset.classifyCircleData; regDataset: dataset.DataGenerator = dataset.regressPlane; seed: string; From c8cbb97b606643ae697078b0dca4a713b8e5c347 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 16:48:15 -0600 Subject: [PATCH 4/9] Correct radio button set on refresh --- src/heatmap.ts | 1 - src/playground.ts | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/heatmap.ts b/src/heatmap.ts index ed036d5a..86227911 100644 --- a/src/heatmap.ts +++ b/src/heatmap.ts @@ -155,7 +155,6 @@ export class HeatMap { if (this.settings.noSvg) { throw Error("Can't add points since noSvg=true"); } - console.log("GOT HERE ONCE AT LEAST") this.points = points.map(point => point); this.updateCircles(this.svg.select("g.train"), points); } diff --git a/src/playground.ts b/src/playground.ts index 928c8d61..74279f8e 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -287,6 +287,7 @@ function makeGUI() { y -= padding x = x/factor - maxScale y = maxScale - y/factor + console.log(label) heatMap.addPointToCanvas({x, y, label}) }); @@ -975,6 +976,10 @@ function reset(onStartup=false) { d3.select("#layers-label").text("Hidden layer" + suffix); d3.select("#num-layers").text(state.numHiddenLayers); + // Correct radio button on reset + let radioColor = state.editColor === - 1 ? "#select-orange" : "#select-blue"; + d3.select(radioColor).attr("checked", "checked") + // Make a simple network. iter = 0; let numInputs = constructInput(0 , 0).length; From c3ec9b1a4a0ebd4bd7ff5b3c420b6fedcdcc2827 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 17:14:56 -0600 Subject: [PATCH 5/9] Adding to canvas works --- src/heatmap.ts | 10 ---------- src/playground.ts | 27 +++++++++++++-------------- src/state.ts | 2 ++ 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/heatmap.ts b/src/heatmap.ts index 86227911..3e979d93 100644 --- a/src/heatmap.ts +++ b/src/heatmap.ts @@ -41,7 +41,6 @@ export class HeatMap { private color; private canvas; private svg; - private points: Example2D[]; constructor( width: number, numSamples: number, xDomain: [number, number], @@ -143,19 +142,10 @@ export class HeatMap { this.updateCircles(this.svg.select("g.test"), points); } - addPointToCanvas(point: Example2D): void { - if (this.settings.noSvg) { - throw Error("Can't add points since noSvg=true"); - } - this.points.push(point) - this.updateCircles(this.svg.select("g.train"), this.points); - } - updatePoints(points: Example2D[]): void { if (this.settings.noSvg) { throw Error("Can't add points since noSvg=true"); } - this.points = points.map(point => point); this.updateCircles(this.svg.select("g.train"), points); } diff --git a/src/playground.ts b/src/playground.ts index 74279f8e..69d7eed7 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -97,6 +97,7 @@ class Player { /** Plays/pauses the player. */ playOrPause() { + debugger; if (this.isPlaying) { this.isPlaying = false; this.pause(); @@ -166,8 +167,6 @@ let colorScale = d3.scale.linear() .range(["#f59322", "#e8eaeb", "#0877bd"]) .clamp(true); let iter = 0; -let trainData: Example2D[] = []; -let testData: Example2D[] = []; let network: nn.Node[][] = null; let lossTrain = 0; let lossTest = 0; @@ -287,15 +286,15 @@ function makeGUI() { y -= padding x = x/factor - maxScale y = maxScale - y/factor - console.log(label) - heatMap.addPointToCanvas({x, y, label}) + state.trainData.push({x, y, label}) + heatMap.updatePoints(state.trainData); }); let showTestData = d3.select("#show-test-data").on("change", function() { state.showTestData = this.checked; state.serialize(); userHasInteracted(); - heatMap.updateTestPoints(state.showTestData ? testData : []); + heatMap.updateTestPoints(state.showTestData ? state.testData : []); }); // Check/uncheck the checkbox according to the current state. showTestData.property("checked", state.showTestData); @@ -935,7 +934,7 @@ function constructInput(x: number, y: number): number[] { function oneStep(): void { iter++; - trainData.forEach((point, i) => { + state.trainData.forEach((point, i) => { let input = constructInput(point.x, point.y); nn.forwardProp(network, input); nn.backProp(network, point.label, nn.Errors.SQUARE); @@ -944,8 +943,8 @@ function oneStep(): void { } }); // Compute the loss. - lossTrain = getLoss(network, trainData); - lossTest = getLoss(network, testData); + lossTrain = getLoss(network, state.trainData); + lossTest = getLoss(network, state.testData); updateUI(); } @@ -988,8 +987,8 @@ function reset(onStartup=false) { nn.Activations.LINEAR : nn.Activations.TANH; network = nn.buildNetwork(shape, state.activation, outputActivation, state.regularization, constructInputIds(), state.initZero); - lossTrain = getLoss(network, trainData); - lossTest = getLoss(network, testData); + lossTrain = getLoss(network, state.trainData); + lossTest = getLoss(network, state.testData); drawNetwork(network); updateUI(true); }; @@ -1112,10 +1111,10 @@ function generateData(firstTime = false) { shuffle(data); // Split into train and test data. let splitIndex = Math.floor(data.length * state.percTrainData / 100); - trainData = data.slice(0, splitIndex); - testData = data.slice(splitIndex); - heatMap.updatePoints(trainData); - heatMap.updateTestPoints(state.showTestData ? testData : []); + state.trainData = data.slice(0, splitIndex); + state.testData = data.slice(splitIndex); + heatMap.updatePoints(state.trainData); + heatMap.updateTestPoints(state.showTestData ? state.testData : []); } let firstInteraction = true; diff --git a/src/state.ts b/src/state.ts index ccee499a..3c66d88e 100644 --- a/src/state.ts +++ b/src/state.ts @@ -164,6 +164,8 @@ export class State { editColor = -1; dataset: dataset.DataGenerator = dataset.classifyCircleData; regDataset: dataset.DataGenerator = dataset.regressPlane; + trainData: dataset.Example2D[] = []; + testData: dataset.Example2D[] = []; seed: string; /** From 4c97f81d3aabd0012e7dc6a7279fd6f443d08597 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 17:23:42 -0600 Subject: [PATCH 6/9] Drag is working --- src/playground.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/playground.ts b/src/playground.ts index 69d7eed7..c07a7e3a 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -97,7 +97,6 @@ class Player { /** Plays/pauses the player. */ playOrPause() { - debugger; if (this.isPlaying) { this.isPlaying = false; this.pause(); @@ -275,8 +274,7 @@ function makeGUI() { userHasInteracted() }); - - d3.select("#heatmap").on("click", function() { + let dragBehavior = d3.behavior.drag().on("drag", function() { let [x, y] = d3.mouse(this) const label = state.editColor const padding = 20 @@ -290,6 +288,8 @@ function makeGUI() { heatMap.updatePoints(state.trainData); }); + d3.select("#heatmap").call(dragBehavior); + let showTestData = d3.select("#show-test-data").on("change", function() { state.showTestData = this.checked; state.serialize(); From dc8e4b2ed25ec511ccc3622228188fba859bed0f Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 19:39:31 -0600 Subject: [PATCH 7/9] No add on regression --- src/playground.ts | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/playground.ts b/src/playground.ts index c07a7e3a..7f8b4bfb 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -274,18 +274,21 @@ function makeGUI() { userHasInteracted() }); + // On drag, we want to paint our canvas with the dots. let dragBehavior = d3.behavior.drag().on("drag", function() { - let [x, y] = d3.mouse(this) - const label = state.editColor - const padding = 20 - const maxScale = 5.0 - const factor = 23.07 - x -= padding - y -= padding - x = x/factor - maxScale - y = maxScale - y/factor - state.trainData.push({x, y, label}) - heatMap.updatePoints(state.trainData); + if(state.problem === Problem.CLASSIFICATION) { + let [x, y] = d3.mouse(this) + const label = state.editColor + const padding = 20 + const maxScale = 5.0 + const factor = 23.07 + x -= padding + y -= padding + x = x/factor - maxScale + y = maxScale - y/factor + state.trainData.push({x, y, label}) + heatMap.updatePoints(state.trainData); + } }); d3.select("#heatmap").call(dragBehavior); From 198f734eb59f27d11dca2dd38c3f93654794b925 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 22:26:30 -0600 Subject: [PATCH 8/9] Hide selection platform on switch --- index.html | 21 +++++++++++++-------- src/playground.ts | 11 ++++++++++- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index bc29a2e1..644aff4d 100644 --- a/index.html +++ b/index.html @@ -274,14 +274,19 @@

Output

- - +
+
+ Select color that you would like to paint with. +
+ + +
diff --git a/src/playground.ts b/src/playground.ts index 7f8b4bfb..a55adf02 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -262,6 +262,7 @@ function makeGUI() { reset(); }); + // For changing state on different selections d3.select("#select-orange").on("change", function() { state.editColor = this.checked ? -1 : 1 state.serialize() @@ -384,6 +385,7 @@ function makeGUI() { let problem = d3.select("#problem").on("change", function() { state.problem = problems[this.value]; + togglePaintSelection(); generateData(); drawDatasetThumbnails(); parametersChanged = true; @@ -978,10 +980,12 @@ function reset(onStartup=false) { d3.select("#layers-label").text("Hidden layer" + suffix); d3.select("#num-layers").text(state.numHiddenLayers); + togglePaintSelection() + // Correct radio button on reset let radioColor = state.editColor === - 1 ? "#select-orange" : "#select-blue"; d3.select(radioColor).attr("checked", "checked") - + // Make a simple network. iter = 0; let numInputs = constructInput(0 , 0).length; @@ -1097,6 +1101,11 @@ function hideControls() { .attr("href", window.location.href); } +function togglePaintSelection() { + let visiblity = state.problem === Problem.CLASSIFICATION ? "visible" : "hidden" + d3.select("#select-platform").style("visibility", visiblity); +} + function generateData(firstTime = false) { if (!firstTime) { // Change the seed. From 5b75dcf3bd8274a85b6ea74bd9f346fdc2049f85 Mon Sep 17 00:00:00 2001 From: avnerkhan Date: Fri, 17 Jan 2020 23:00:09 -0600 Subject: [PATCH 9/9] Added Hidable control for paint platofrm --- index.html | 2 +- src/playground.ts | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 644aff4d..49ea826c 100644 --- a/index.html +++ b/index.html @@ -274,7 +274,7 @@

Output

-
+
Select color that you would like to paint with.
diff --git a/src/playground.ts b/src/playground.ts index a55adf02..d37698b2 100644 --- a/src/playground.ts +++ b/src/playground.ts @@ -88,6 +88,7 @@ let HIDABLE_CONTROLS = [ ["Noise level", "noise"], ["Batch size", "batchSize"], ["# of hidden layers", "numHiddenLayers"], + ["Paint Platform", "paintPlatform"], ]; class Player { @@ -277,12 +278,13 @@ function makeGUI() { // On drag, we want to paint our canvas with the dots. let dragBehavior = d3.behavior.drag().on("drag", function() { - if(state.problem === Problem.CLASSIFICATION) { + let isVisible = d3.select("#select-platform").style("display") === "block" + if(state.problem === Problem.CLASSIFICATION && isVisible) { let [x, y] = d3.mouse(this) - const label = state.editColor - const padding = 20 - const maxScale = 5.0 - const factor = 23.07 + let label = state.editColor + let padding = 20 + let maxScale = 5.0 + let factor = 23.07 x -= padding y -= padding x = x/factor - maxScale @@ -981,7 +983,6 @@ function reset(onStartup=false) { d3.select("#num-layers").text(state.numHiddenLayers); togglePaintSelection() - // Correct radio button on reset let radioColor = state.editColor === - 1 ? "#select-orange" : "#select-blue"; d3.select(radioColor).attr("checked", "checked") @@ -1102,8 +1103,8 @@ function hideControls() { } function togglePaintSelection() { - let visiblity = state.problem === Problem.CLASSIFICATION ? "visible" : "hidden" - d3.select("#select-platform").style("visibility", visiblity); + let visiblity = state.problem === Problem.CLASSIFICATION ? "" : "none" + d3.select("#select-platform").style("display", visiblity); } function generateData(firstTime = false) {