hmschreiner/hello.html

## hello.html
<html>
    <head>
      <link href="style.css" rel="stylesheet" />
    </head>
  <body>
      <h3>Graph: Dragons</h3>
      <div class="legend legendX"><div>Scariness ️→</div></div>
      <div class="legend legendY"><div>Actual Power →</div></div>
    <!-- http://bit.ly/neuralvanilla -->
    <canvas id="wowacanvas" width="1000" height="1000"></canvas>
    <script>


      const someDragons = generateDragons(500)

      function generateDragons(numberOfDragonsToGenerate) {
        let dragons = []
        for (let i = 0; i < numberOfDragonsToGenerate; i++) {
          // A dragon is just an object literal with two properties,
          // scariness and power, each of which is assigned
          // a random integer between 1 and 1000.
          const dragon = {
            scariness:  randomNumber(0, 1000),
            power:      randomNumber(0, 1000)
          }
          dragons.push(dragon)
        }
        return dragons
      }

      const initialWeights = {
        scariness: randomNumber(-1, 1),
        power: randomNumber(-1, 1)
      }

      let trainedWeights = initialWeights
      /*
      const fluffykins = {
        scariness: 10,
        power: 1000
      }

      const smaug = {
        scariness: 900,
        power: 700
      }

      const minmoo = {
        scariness: 25,
        power: 30
      }

      trainedWeights = train(trainedWeights, fluffykins, 1)
      trainedWeights = train(trainedWeights, smaug, -1)
      trainedWeights = train(trainedWeights, minmoo, 1)*/

      const trainingSetSize = 1250000
      const noiseProbability = 0.01
      for(const dragon of generateDragons(trainingSetSize)) {
        const correctClassification = powerClassification(dragon)
        let trainOnClassification = correctClassification
        if (Math.random() < noiseProbability) {
          if (correctClassification === -1) {
            trainOnClassification = 1
          } else {
            trainOnClassification = -1
          }
        }
        trainedWeights = train(
          trainedWeights, dragon, trainOnClassification)
      }

      function train(weights, dragon, actualPowerClassification) {
        const guessResult = guessPowerClassification(weights, dragon)
        const error = actualPowerClassification - guessResult
        const learningRate = 0.5
        return {
          scariness: weights.scariness + error * dragon.scariness * learningRate,
          power: weights.power         + error * dragon.power * learningRate
        }
      }

      const canvas = document.getElementById("wowacanvas")
      const ctx = canvas.getContext("2d")
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(1000, 1000)
      ctx.stroke()
      for (const dragon of someDragons) {
        const x = dragon.scariness
        const y = dragon.power
        const rectangleHeight = 5
        const rectangleWidth = 5
        if (guessPowerClassification(trainedWeights, dragon) === 1) {
          ctx.fillStyle = "black"
        } else if(guessPowerClassification(trainedWeights, dragon) === -1) {
          ctx.fillStyle = "hotpink"
        }
        ctx.fillRect(x, y, rectangleWidth, rectangleHeight)
      }

      function powerClassification(dragon) {
        return dragon.power > dragon.scariness ? 1 : -1
      }

      function guessPowerClassification(weights, dragon) {
        const someMathGarble =
          dragon.power * weights.power +
          dragon.scariness * weights.scariness
        return someMathGarble >= 0 ? 1 : -1
      }


      // randomNumber - generate number in a certain range.
      function randomNumber (lower, higher) {
        return Math.random() * (higher - lower) + lower
      }

    </script>
  </body>
</html>

## style.css
body {
  font-family: Helvetica;
  padding: 1rem;
}
.legend {
  background-color: black;
  color: white;
  font-weight: bold;
}
.legendX {
  padding-left: 30px;
  width: 1000px;
  height: 20px;
}
.legendY {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  float: left;
  height: 1000px;
  padding-top: 10px;
}
.description {
  width: 1000px;
  clear: both;
}
canvas {
  float: left;
  margin-bottom: 2rem;
}
	<html>
	<head>
	<link href="style.css" rel="stylesheet" />
	</head>
	<body>
	<h3>Graph: Dragons</h3>
	<div class="legend legendX"><div>Scariness ️→</div></div>
	<div class="legend legendY"><div>Actual Power →</div></div>
	<!-- http://bit.ly/neuralvanilla -->
	<canvas id="wowacanvas" width="1000" height="1000"></canvas>
	<script>


	const someDragons = generateDragons(500)

	function generateDragons(numberOfDragonsToGenerate) {
	let dragons = []
	for (let i = 0; i < numberOfDragonsToGenerate; i++) {
	// A dragon is just an object literal with two properties,
	// scariness and power, each of which is assigned
	// a random integer between 1 and 1000.
	const dragon = {
	scariness: randomNumber(0, 1000),
	power: randomNumber(0, 1000)
	}
	dragons.push(dragon)
	}
	return dragons
	}

	const initialWeights = {
	scariness: randomNumber(-1, 1),
	power: randomNumber(-1, 1)
	}

	let trainedWeights = initialWeights
	/*
	const fluffykins = {
	scariness: 10,
	power: 1000
	}

	const smaug = {
	scariness: 900,
	power: 700
	}

	const minmoo = {
	scariness: 25,
	power: 30
	}

	trainedWeights = train(trainedWeights, fluffykins, 1)
	trainedWeights = train(trainedWeights, smaug, -1)
	trainedWeights = train(trainedWeights, minmoo, 1)*/

	const trainingSetSize = 1250000
	const noiseProbability = 0.01
	for(const dragon of generateDragons(trainingSetSize)) {
	const correctClassification = powerClassification(dragon)
	let trainOnClassification = correctClassification
	if (Math.random() < noiseProbability) {
	if (correctClassification === -1) {
	trainOnClassification = 1
	} else {
	trainOnClassification = -1
	}
	}
	trainedWeights = train(
	trainedWeights, dragon, trainOnClassification)
	}

	function train(weights, dragon, actualPowerClassification) {
	const guessResult = guessPowerClassification(weights, dragon)
	const error = actualPowerClassification - guessResult
	const learningRate = 0.5
	return {
	scariness: weights.scariness + error * dragon.scariness * learningRate,
	power: weights.power + error * dragon.power * learningRate
	}
	}

	const canvas = document.getElementById("wowacanvas")
	const ctx = canvas.getContext("2d")
	ctx.beginPath()
	ctx.moveTo(0, 0)
	ctx.lineTo(1000, 1000)
	ctx.stroke()
	for (const dragon of someDragons) {
	const x = dragon.scariness
	const y = dragon.power
	const rectangleHeight = 5
	const rectangleWidth = 5
	if (guessPowerClassification(trainedWeights, dragon) === 1) {
	ctx.fillStyle = "black"
	} else if(guessPowerClassification(trainedWeights, dragon) === -1) {
	ctx.fillStyle = "hotpink"
	}
	ctx.fillRect(x, y, rectangleWidth, rectangleHeight)
	}

	function powerClassification(dragon) {
	return dragon.power > dragon.scariness ? 1 : -1
	}

	function guessPowerClassification(weights, dragon) {
	const someMathGarble =
	dragon.power * weights.power +
	dragon.scariness * weights.scariness
	return someMathGarble >= 0 ? 1 : -1
	}


	// randomNumber - generate number in a certain range.
	function randomNumber (lower, higher) {
	return Math.random() * (higher - lower) + lower
	}

	</script>
	</body>
	</html>
	body {
	font-family: Helvetica;
	padding: 1rem;
	}
	.legend {
	background-color: black;
	color: white;
	font-weight: bold;
	}
	.legendX {
	padding-left: 30px;
	width: 1000px;
	height: 20px;
	}
	.legendY {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	float: left;
	height: 1000px;
	padding-top: 10px;
	}
	.description {
	width: 1000px;
	clear: both;
	}
	canvas {
	float: left;
	margin-bottom: 2rem;
	}