Don't be cross.
Published
Edited
Mar 3, 2019
function* slowPlot (ms) {
const node = document.getElementsByTagName('svg')[1]; // get the second svg element
// remove the children. Stops it from adding the same plots to an old svg
while (node.firstChild) {
node.removeChild(node.firstChild);
}
// create a new svg element using the namespace
const newLine = document.createElementNS("http://www.w3.org/2000/svg","line");
newLine.setAttribute("x1","0"); //Set path's data
newLine.setAttribute("x2",X_MAX); //Set path's data
newLine.setAttribute("y1","0"); //Set path's data
newLine.setAttribute("y2",Y_MAX); //Set path's data
newLine.setAttribute("stroke","purple"); //Set path's data
node.appendChild(newLine); // append the new data
// loop over using a generator
let index = 0;
for (const point of randomPoints) {
// creates a new circle element
const newPoint = document.createElementNS("http://www.w3.org/2000/svg","circle")
newPoint.setAttribute("cx",point.x); //Set path's data
newPoint.setAttribute("cy",point.y); //Set path's data
newPoint.setAttribute("r","2"); //Set path's data
newPoint.setAttribute("fill","white"); //Set path's data
//newPoint.style.stroke = p0(randomPoints,trainingWeights,aF0)[index] === 1 ? 'blue' : 'red'; //Set stroke colour
newPoint.style.stroke = guess(trainedWeights, point) === 1 ? 'blue' : 'red'; //Set stroke colour
newPoint.style.strokeWidth = "1"; //Set stroke width
index ++
yield Promises.tick(ms, node.appendChild(newPoint)) // yield a new node every n milliseconds
}
}
p0([{x:[X_MAX],y:[Y_MAX]}],[-9,10],aF0)
p0(randomPoints,trainingWeights,aF0)
guess = (weights, point) => {
const sum =
point.x * weights.x +
point.y * weights.y
const team = sum >= 0 ? 1 : -1
return team
}
p0 = (inputs,weights,activationFunction,tIndex) => {
const localInputs = inputs;
let localWeights = weights;
// The random number function
const train = localInputs.reduce((n,o,i)=> {
const sum = (+o.x + +o.y)*localWeights[i];
const guess = activationFunction(sum);
const target = o.x > o.y ? 1 : -1;
const error = +target - +guess;
localWeights = localWeights.map((d,i)=> (error * ((o.x+o.y))+d)*0.1)
n.push(guess)
return n;
},[])
//const weights = trainingWeights//[...Array(inputs.length)].map(d=>RandomNumber(-10,10));
// feed forward x0,y1,w0,w1 => ((x0*w0)+(y1*w1))
//if (inputs.length !== weights.length) return "inputs unequal to weights"
return train;
}
// activation function
aF0 = (int) => {
if (isNaN(int)) return NaN;
if (int >= 0) {
return 1;
} else if (int < 0) {
return -1;
}
}
generatePoints = (num) => randomPointsGenerator.random(num,{bbox:[ 0, 0, X_MAX, Y_MAX ]}).features.map(({geometry}) => {
const [x,y] = geometry.coordinates;
return {x,y};
})
[1,2,3,4,5,6,7,8,9].map(d=> d*16).reduce((a,b)=> a+b)
[1,2,3,4,5,6,7,8,9].reduce((a,b)=> ((a*a)+(b*b)))*2
randomPoints = generatePoints(500)
team = point => point.x > point.y ? 1 : -1
function train(weights, point, team) {
const guessResult = guess(weights, point) // 1
const error = team - guessResult
const learningRate = 0.1
return {
x: weights.x + point.x * error * learningRate,
y: weights.y + point.y * error * learningRate,
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
trainedWeights = {
const examples = generatePoints(900000).map(point => ({
point,
team: team(point)
}))
let currentWeights = randomWeights
for (const example of examples) {
currentWeights = train(currentWeights, example.point, example.team)
//await sleep(25)
//yield currentWeights
}
return currentWeights
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
