Skip to content

Commit d5b3358

Browse files
committed
- Added Google Analytics Customer Events to track user interaction with the visualizations in Basics of Neural Networks post
- Feedforward post is work in progress - Finished viz for exploring prediction calculation
1 parent 7f1c301 commit d5b3358

14 files changed

+5836
-202
lines changed

Diff for: _layouts/default.html

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<script src="/js/jquery-3.1.1.slim.min.js"></script>
1313
<script type="text/javascript" src="/js/d3.min.js"></script>
1414
<script type="text/javascript" src="/js/d3-selection-multi.v0.4.min.js"></script>
15+
<script type="text/javascript" src="/js/d3-jetpack.js"></script>
1516

1617
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.min.css" />
1718
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap-theme.min.css" />
@@ -20,6 +21,7 @@
2021
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
2122
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
2223

24+
<meta name="viewport" content="width=device-width">
2325
<!-- Created with Jekyll Now - http://github.com/barryclark/jekyll-now -->
2426
</head>
2527

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

+3
Original file line numberDiff line numberDiff line change
@@ -602,6 +602,9 @@ Thanks to [Yasmine Alfouzan](https://www.linkedin.com/in/yasmine-alfouzan-b05ba3
602602
Please contact me on [Twitter](https://twitter.com/jalammar) with any corrections or feedback.
603603

604604
<script type="text/javascript" src="/js/nnVizUtils.js"></script>
605+
<!-- Visualizations 1 Weight & bias, and 2 Gradient Descent -->
605606
<script type="text/javascript" src="/js/simple_nn.js"></script>
607+
<!-- Visualization 3 - Two variables -->
606608
<script type="text/javascript" src="/js/two_variable_nn.js"></script>
609+
<!-- Visualization 4 - Features & classes -->
607610
<script type="text/javascript" src="/js/shallow_nn_grapher.js"></script>

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

+82-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,85 @@ title: Feedforward Neural Networks - Part 2 of A Visual and Interactive Guide to
66

77
<!--more-->
88

9+
While the networks we discussed in the [previous post]() show some important basic concepts, we'll need to continue our look at more concepts that can improve our prediction models.
10+
11+
12+
We'll slightly adjust the way we represent the networks from the previous weights. The bias node specifically is more commonly represented like this
13+
14+
<div class="img-div" markdown="0">
15+
<img src="/images/two_input_tow_output_softmax_neural_network.png" />
16+
The calculation flows from the left to the right. Before we can use this net for prediction, we'll have to run a "training" process that will give us the values of all the weights (<span class="weight-node-text">w</span>) and biases (<span class="bias-node-text">b</span>).
17+
</div>
18+
19+
20+
The dataset we'll use this time will be the [Titanic passenger list]() from Kaggle. It lists the names and other information of the passengers and shows whether each passenger survived the sinking event or not. We'll attempt to build a network that predicts whether a passenger survived or not. We'll start with only two feature columns of the dataset (and add more later):
21+
22+
23+
24+
<div class="two_variables">
25+
<table>
26+
<thead>
27+
<tr>
28+
<th>Age</th>
29+
<th>Sex</th>
30+
<th>Survived?</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<td>22</td>
36+
<td>male</td>
37+
<td>No</td>
38+
</tr>
39+
<tr>
40+
<td>38</td>
41+
<td>female</td>
42+
<td>Yes</td>
43+
</tr>
44+
<tr>
45+
<td>26</td>
46+
<td>female</td>
47+
<td>Yes</td>
48+
</tr>
49+
<tr>
50+
<td colspan="3">… 891 rows total</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
</div>
55+
56+
Let's start with training a shallow neural network to predict survival given given a passenger's information. Running two thousand steps of gradient descent looks like this:
57+
58+
[Training Viz]
59+
60+
61+
The trained network now looks like this:
62+
63+
(hover or click on values in the table to see their individual predictions)
64+
65+
<div id="neural-network-calculation-viz"></div>
66+
67+
<div id="neural-network-calculation-table"></div>
68+
69+
70+
When trained, this shallow network can correctly guess only 81% of the training examples. To improve on it, we'll need to pull another tool from our toolbox.
71+
72+
## Feed it forward
73+
74+
75+
## Activation functions
76+
77+
78+
79+
80+
81+
<script type="text/javascript" src="/js/nnVizUtils.js"></script>
82+
<script type="text/javascript" src="/js/neuralNetworkCalculationViz.js"></script>
83+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css" integrity="sha384-wE+lCONuEo/QSfLb4AfrSk7HjWJtc4Xc1OiB2/aDBzHzjnlBP4SX7vjErTcwlA8C" crossorigin="anonymous">
84+
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js" integrity="sha384-tdtuPw3yx/rnUGmnLNWXtfjb9fpmwexsd+lr6HUYnUY4B7JhB5Ty7a1mYd+kto/s" crossorigin="anonymous"></script>
85+
86+
## Where we left off
87+
988
In the [previous post]() we discussed some of the basics of neural networks:
1089

1190
* How the inputs flow through the network to calculate a prediction
@@ -17,6 +96,9 @@ In the [previous post]() we discussed some of the basics of neural networks:
1796

1897
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.
1998

99+
100+
101+
20102
## Feed it forward
21103
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.
22104

@@ -42,15 +124,3 @@ Let's keep tweaking the example we started with. Your friend who wants to buy a
42124
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.
43125

44126
Take a look at how the trained network calculates the prediction for each example in the training set:
45-
46-
<div id="neural-network-calculation-viz"></div>
47-
48-
49-
## Activation functions
50-
51-
52-
53-
54-
55-
<script type="text/javascript" src="/js/nnVizUtils.js"></script>
56-
<script type="text/javascript" src="/js/neuralNetworkCalculationViz.js"></script>

Diff for: _sass/_variables.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,19 @@ $chartLabel: #aaa;
2828

2929
//Neural network graph parameters
3030
$nnInputNode: #e7b7f3;
31+
$nnInputNodeText: #af80bb;
3132
$nnWeightNode: #a8e7ad;
33+
$nnWeightNodeText: #81c086;
3234
$nnBiasNode: #ccc9fa;
35+
$nnBiasNodeText: #8c84ec;
3336
$nnOutputNode: #f2afc7;
37+
$nnOutputNodeText: #c8849c;
3438
$nnSoftmaxNode: #faf6c9;
3539
$nnStrokeWidth: 2px;
3640
$nnNodeStrokeWidth: 1px;
3741

3842
$inputOutlineColor: #d18fe2;
39-
$biasOutlineColor: #a19cf0;
43+
$biasOutlineColor: #b2aef4; //#a19cf0;
4044
$outputOutlineColor: #f2afc7;
4145
$softmaxOutlineColor: #ebe79f;
4246

0 commit comments

Comments
 (0)