- neural network prediction calculation viz is work in progress. It's rendered now and has some interaction when you hover over weight and input nodes. Still need to show the calculations and results. Then to tackle mobile and clicking behaviour.

spelling

Author: jalammar

_posts/2016-12-14-visual-interactive-guide-basics-neural-networks.md

@@ -580,7 +580,7 @@ If you have reached this far, I have to reveal to you another motivation of mine
 
 I hope you would feel prepared and that you have an understanding of this system and how it works. If you want to start tinkering with code, feel free to pick up from the intro [tutorial](https://www.tensorflow.org/versions/r0.10/tutorials/mnist/beginners/index.html) and teach a neural network how to detect handwritten digits.
 
-You should also continue your education by learning the theoretical and mathimatical underpinnings of the concepts we discussed here. Good questions to ask now include:
+You should also continue your education by learning the theoretical and mathematical underpinnings of the concepts we discussed here. Good questions to ask now include:
 
  * What other kinds of cost functions exist? Which are better for which applications?
  * What's the algorithm to actually calculate new weights using gradient descent?
@@ -601,7 +601,7 @@ Thanks to [Yasmine Alfouzan](https://www.linkedin.com/in/yasmine-alfouzan-b05ba3
 
 Please contact me on [Twitter](https://twitter.com/jalammar) with any corrections or feedback.
 
+<script type="text/javascript" src="/js/nnVizUtils.js"></script>
 <script type="text/javascript" src="/js/simple_nn.js"></script>
 <script type="text/javascript" src="/js/two_variable_nn.js"></script>
-
 <script type="text/javascript" src="/js/shallow_nn_grapher.js"></script>

_posts/2016-12-19-feedforward-neural-networks-visual-interactive.md

@@ -4,15 +4,18 @@ published: False
 title: Feedforward Neural Networks - Part 2 of A Visual and Interactive Guide to Neural Networks
 ---
 
+<!--more-->
+
 In the [previous post]() we discussed some of the basics of neural networks:
+
  * How the inputs flow through the network to calculate a prediction
  * How we multiply the inputs by the respective weights and add the biases
  * How we calculate Mean Square Error and how we use it as a measuring stick to gauge how accurate our model is
  * We touched very lightly on Gradient Descent, an iterative algorithm that takes steps towards a better set of weights and biases
  * We started with regression models and moved into classification models in the last example
 
 
-There are a couple more concepts we need to touch upon if we're to build a better understanding of proper neural networks. So let's dive right in.
+There are a couple more concepts we need to touch upon if we're to build a better understanding of proper neural networks. These will be network structure concepts that improve the behaviours of our networks and our prediction models.
 
 ## Feed it forward
 Let's keep tweaking the example we started with. Your friend who wants to buy a house provided you with this list of house size & price and how appropriate for her she thinks the size and price are.
@@ -36,7 +39,18 @@ Let's keep tweaking the example we started with. Your friend who wants to buy a
 
 </div>
 
-When we trained a neural network to try to classify it, it got an error value of X
+In [this notebook](), I trained a softmax regression neural network against this dataset. After the training, the network could correctly classify only 8 out of the 10 examples in the training set.
+
+Take a look at how the trained network calculates the prediction for each example in the training set:
+
+<div id="neural-network-calculation-viz"></div>
+
+
+## Activation functions
+
+
+
 
 
-## Activation functions
+<script type="text/javascript" src="/js/nnVizUtils.js"></script>
+<script type="text/javascript" src="/js/neuralNetworkCalculationViz.js"></script>

_sass/_variables.scss

@@ -19,6 +19,7 @@ $black: #000;
 $darkerGray: #222;
 $darkGray: #333;
 $gray: #666;
+$lighterGray: #999;
 $lightGray: #eee;
 $white: #fff;
 
@@ -34,7 +35,15 @@ $nnSoftmaxNode: #faf6c9;
 $nnStrokeWidth: 2px;
 $nnNodeStrokeWidth: 1px;
 
+$inputOutlineColor: #d18fe2;
+$biasOutlineColor: #a19cf0;
+$outputOutlineColor: #f2afc7;
+$softmaxOutlineColor: #ebe79f;
+
 $nnGrapherStrokeWidth: 3px;
+$lighterOutlinedNodeStrokeWidth: 3px;
+$outlinedNodeStrokeWidth: 4px;
+$outlinedNodeStrokeWidthHover: 8px;
 
 // Font stacks
 $helvetica: Helvetica, Arial, sans-serif;