Skip to content

Commit

Permalink
point all the image src URIs to use the fig/ path
Browse files Browse the repository at this point in the history 
And change the `<img>` tags to use Markdown's `![caption](/path/to/image)`
syntax.
  • Loading branch information
@zmughal
zmughal committed Jan 20, 2015
1 parent b609b98 commit ee479c2
Show file tree
Hide file tree
Showing 13 changed files with 170 additions and 111 deletions.
40 changes: 29 additions & 11 deletions 01-numpy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
<div class="span10 offset1">
<h1 class="title">Programming with Python</h1>
<h2 class="subtitle">Analyzing Patient Data</h2>
<div id="learning-objectives" class="objectives objectives">
<h2 id="learning-objectives" class="objectives objectives">Learning Objectives</h2>
<div id="learning-objectives" class="objectives">
<h2>Learning Objectives</h2>
<ul>
<li>Explain what a library is, and what libraries are used for.</li>
<li>Load a Python library and use the things it contains.</li>
Expand Down Expand Up @@ -68,17 +68,23 @@ <h2 id="learning-objectives" class="objectives objectives">Learning Objectives</
<pre class="output"><code>weight in kilograms is now: 57.5</code></pre>
<p>As the example above shows, we can print several things at once by separating them with commas.</p>
<p>If we imagine the variable as a sticky note with a name written on it, assignment is like putting the sticky note on a particular value:</p>
<p><img src="img/python-sticky-note-variables-01.svg" alt="Variables as Sticky Notes" /></p>
<div class="figure">
<img src="fig/python-sticky-note-variables-01.svg" alt="Variables as Sticky Notes" /><p class="caption">Variables as Sticky Notes</p>
</div>
<p>This means that assigning a value to one variable does <em>not</em> change the values of other variables. For example, let's store the subject's weight in pounds in a variable:</p>
<pre class="sourceCode python"><code class="sourceCode python">weight_lb = <span class="fl">2.2</span> * weight_kg
<span class="dt">print</span> <span class="st">&#39;weight in kilograms:&#39;</span>, weight_kg, <span class="st">&#39;and in pounds:&#39;</span>, weight_lb</code></pre>
<pre class="output"><code>weight in kilograms: 57.5 and in pounds: 126.5</code></pre>
<p><img src="img/python-sticky-note-variables-02.svg" alt="Creating Another Variable" /></p>
<div class="figure">
<img src="fig/python-sticky-note-variables-02.svg" alt="Creating Another Variable" /><p class="caption">Creating Another Variable</p>
</div>
<p>and then change <code>weight_kg</code>:</p>
<pre class="sourceCode python"><code class="sourceCode python">weight_kg = <span class="fl">100.0</span>
<span class="dt">print</span> <span class="st">&#39;weight in kilograms is now:&#39;</span>, weight_kg, <span class="st">&#39;and weight in pounds is still:&#39;</span>, weight_lb</code></pre>
<pre class="output"><code>weight in kilograms is now: 100.0 and weight in pounds is still: 126.5</code></pre>
<p><img src="img/python-sticky-note-variables-03.svg" alt="Updating a Variable" /></p>
<div class="figure">
<img src="fig/python-sticky-note-variables-03.svg" alt="Updating a Variable" /><p class="caption">Updating a Variable</p>
</div>
<p>Since <code>weight_lb</code> doesn't &quot;remember&quot; where its value came from, it isn't automatically updated when <code>weight_kg</code> changes. This is different from the way spreadsheets work.</p>
<p>Just as we can assign a single value to a variable, we can also assign an array of values to a variable using the same syntax. Let's re-run <code>numpy.loadtxt</code> and save its result:</p>
<pre class="sourceCode python"><code class="sourceCode python">data = numpy.loadtxt(fname=<span class="st">&#39;inflammation-01.csv&#39;</span>, delimiter=<span class="st">&#39;,&#39;</span>)</code></pre>
Expand Down Expand Up @@ -173,7 +179,9 @@ <h2>In the Corner</h2>
<pre class="sourceCode python"><code class="sourceCode python"><span class="dt">print</span> <span class="st">&#39;maximum inflammation for patient 2:&#39;</span>, data[<span class="dv">2</span>, :].<span class="dt">max</span>()</code></pre>
<pre class="output"><code>maximum inflammation for patient 2: 19.0</code></pre>
<p>What if we need the maximum inflammation for <em>all</em> patients, or the average for each day? As the diagram below shows, we want to perform the operation across an axis:</p>
<p><img src="img/python-operations-across-axes.svg" alt="Operations Across Axes" /></p>
<div class="figure">
<img src="fig/python-operations-across-axes.svg" alt="Operations Across Axes" /><p class="caption">Operations Across Axes</p>
</div>
<p>To support this, most array methods allow us to specify the axis we want to work on. If we ask for the average across axis 0, we get:</p>
<pre class="sourceCode python"><code class="sourceCode python"><span class="dt">print</span> data.mean(axis=<span class="dv">0</span>)</code></pre>
<pre class="output"><code>[ 0. 0.45 1.11666667 1.75 2.43333333 3.15
Expand All @@ -200,19 +208,27 @@ <h2>In the Corner</h2>
<pre class="sourceCode python"><code class="sourceCode python"><span class="ch">from</span> matplotlib <span class="ch">import</span> pyplot
pyplot.imshow(data)
pyplot.show()</code></pre>
<p><img src="../../novice/python/01-numpy_files/novice/python/01-numpy_71_0.png"></p>
<div class="figure">
<img src="fig/01-numpy_71_0.png" alt="Heatmap of the Data" /><p class="caption">Heatmap of the Data</p>
</div>
<p>Blue regions in this heat map are low values, while red shows high values. As we can see, inflammation rises and falls over a 40-day period. Let's take a look at the average inflammation over time:</p>
<pre class="sourceCode python"><code class="sourceCode python">ave_inflammation = data.mean(axis=<span class="dv">0</span>)
pyplot.plot(ave_inflammation)
pyplot.show()</code></pre>
<p><img src="../../novice/python/01-numpy_files/novice/python/01-numpy_73_0.png"></p>
<div class="figure">
<img src="fig/01-numpy_73_0.png" alt="Average Inflammation Over Time" /><p class="caption">Average Inflammation Over Time</p>
</div>
<p>Here, we have put the average per day across all patients in the variable <code>ave_inflammation</code>, then asked <code>pyplot</code> to create and display a line graph of those values. The result is roughly a linear rise and fall, which is suspicious: based on other studies, we expect a sharper rise and slower fall. Let's have a look at two other statistics:</p>
<pre class="sourceCode python"><code class="sourceCode python">pyplot.plot(data.<span class="dt">max</span>(axis=<span class="dv">0</span>))
pyplot.show()</code></pre>
<p><img src="../../novice/python/01-numpy_files/novice/python/01-numpy_75_1.png"></p>
<div class="figure">
<img src="fig/01-numpy_75_1.png" alt="Maximum Value Along The First Axis" /><p class="caption">Maximum Value Along The First Axis</p>
</div>
<pre class="sourceCode python"><code class="sourceCode python">pyplot.plot(data.<span class="dt">min</span>(axis=<span class="dv">0</span>))
pyplot.show()</code></pre>
<p><img src="../../novice/python/01-numpy_files/novice/python/01-numpy_75_3.png"></p>
<div class="figure">
<img src="fig/01-numpy_75_3.png" alt="Minimum Value Along The First Axis" /><p class="caption">Minimum Value Along The First Axis</p>
</div>
<p>The maximum value rises and falls perfectly smoothly, while the minimum seems to be a step function. Neither result seems particularly likely, so either there's a mistake in our calculations or something is wrong with our data.</p>
<p>It's very common to create an <strong>alias</strong> for a library when importing it in order to reduce the amount of typing we have to do. Here are our three plots side by side using aliases for <code>numpy</code> and <code>pyplot</code>:</p>
<pre class="sourceCode python"><code class="sourceCode python"><span class="ch">import</span> numpy <span class="ch">as</span> np
Expand All @@ -236,7 +252,9 @@ <h2>In the Corner</h2>

plt.tight_layout()
plt.show()</code></pre>
<p><img src="../../novice/python/01-numpy_files/novice/python/01-numpy_80_0.png"></p>
<div class="figure">
<img src="fig/01-numpy_80_0.png" alt="The Previous Plots as Subplots" /><p class="caption">The Previous Plots as Subplots</p>
</div>
<p>The first two lines re-load our libraries as <code>np</code> and <code>plt</code>, which are the aliases most Python programmers use. The call to <code>loadtxt</code> reads our data, and the rest of the program tells the plotting library how large we want the figure to be, that we're creating three sub-plots, what to draw for each one, and that we want a tight layout. (Perversely, if we leave out that call to <code>plt.tight_layout()</code>, the graphs will actually be squeezed together more closely.)</p>
<div id="fixme" class="challenge">
<h2>FIXME</h2>
Expand Down
18 changes: 9 additions & 9 deletions 01-numpy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ we can print several things at once by separating them with commas.
If we imagine the variable as a sticky note with a name written on it,
assignment is like putting the sticky note on a particular value:

<img src="img/python-sticky-note-variables-01.svg" alt="Variables as Sticky Notes" />
![Variables as Sticky Notes](fig/python-sticky-note-variables-01.svg)

This means that assigning a value to one variable does *not* change the values of other variables.
For example,
Expand All @@ -138,7 +138,7 @@ print 'weight in kilograms:', weight_kg, 'and in pounds:', weight_lb
weight in kilograms: 57.5 and in pounds: 126.5
~~~

<img src="img/python-sticky-note-variables-02.svg" alt="Creating Another Variable" />
![Creating Another Variable](fig/python-sticky-note-variables-02.svg)

and then change `weight_kg`:

Expand All @@ -150,7 +150,7 @@ print 'weight in kilograms is now:', weight_kg, 'and weight in pounds is still:'
weight in kilograms is now: 100.0 and weight in pounds is still: 126.5
~~~

<img src="img/python-sticky-note-variables-03.svg" alt="Updating a Variable" />
![Updating a Variable](fig/python-sticky-note-variables-03.svg)

Since `weight_lb` doesn't "remember" where its value came from,
it isn't automatically updated when `weight_kg` changes.
Expand Down Expand Up @@ -434,7 +434,7 @@ or the average for each day?
As the diagram below shows,
we want to perform the operation across an axis:

<img src="img/python-operations-across-axes.svg" alt="Operations Across Axes" />
![Operations Across Axes](fig/python-operations-across-axes.svg)

To support this,
most array methods allow us to specify the axis we want to work on.
Expand Down Expand Up @@ -500,7 +500,7 @@ pyplot.imshow(data)
pyplot.show()
~~~

<img src="../../novice/python/01-numpy_files/novice/python/01-numpy_71_0.png">
![Heatmap of the Data](fig/01-numpy_71_0.png)

Blue regions in this heat map are low values, while red shows high values.
As we can see,
Expand All @@ -513,7 +513,7 @@ pyplot.plot(ave_inflammation)
pyplot.show()
~~~

<img src="../../novice/python/01-numpy_files/novice/python/01-numpy_73_0.png">
![Average Inflammation Over Time](fig/01-numpy_73_0.png)

Here,
we have put the average per day across all patients in the variable `ave_inflammation`,
Expand All @@ -529,14 +529,14 @@ pyplot.plot(data.max(axis=0))
pyplot.show()
~~~

<img src="../../novice/python/01-numpy_files/novice/python/01-numpy_75_1.png">
![Maximum Value Along The First Axis](fig/01-numpy_75_1.png)

~~~ {.python}
pyplot.plot(data.min(axis=0))
pyplot.show()
~~~

<img src="../../novice/python/01-numpy_files/novice/python/01-numpy_75_3.png">
![Minimum Value Along The First Axis](fig/01-numpy_75_3.png)

The maximum value rises and falls perfectly smoothly,
while the minimum seems to be a step function.
Expand Down Expand Up @@ -572,7 +572,7 @@ plt.tight_layout()
plt.show()
~~~

<img src="../../novice/python/01-numpy_files/novice/python/01-numpy_80_0.png">
![The Previous Plots as Subplots](fig/01-numpy_80_0.png)

The first two lines re-load our libraries as `np` and `plt`,
which are the aliases most Python programmers use.
Expand Down
30 changes: 22 additions & 8 deletions 02-func.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="span10 offset1">
<h1 class="title">Programming with Python</h1>
<h2 class="subtitle">Creating Functions</h2>
<div id="learning-objectives" class="objectives objectives">
<div id="learning-objectives" class="objectives">
<h2>Learning Objectives</h2>
<ul>
<li>Define a function that takes parameters.</li>
Expand Down Expand Up @@ -106,20 +106,34 @@ <h2 id="the-call-stack">The Call Stack</h2>
<pre class="sourceCode python"><code class="sourceCode python">original = <span class="fl">32.0</span>
final = fahr_to_celsius(original)</code></pre>
<p>The diagram below shows what memory looks like after the first line has been executed:</p>
<p><img src="img/python-call-stack-01.svg" alt="Call Stack (Initial State)" /></p>
<div class="figure">
<img src="fig/python-call-stack-01.svg" alt="Call Stack (Initial State)" /><p class="caption">Call Stack (Initial State)</p>
</div>
<p>When we call <code>fahr_to_celsius</code>, Python <em>doesn't</em> create the variable <code>temp</code> right away. Instead, it creates something called a <strong>stack frame</strong> to keep track of the variables defined by <code>fahr_to_kelvin</code>. Initially, this stack frame only holds the value of <code>temp</code>:</p>
<p><img src="img/python-call-stack-02.svg" alt="Call Stack Immediately After First Function Call" /></p>
<div class="figure">
<img src="fig/python-call-stack-02.svg" alt="Call Stack Immediately After First Function Call" /><p class="caption">Call Stack Immediately After First Function Call</p>
</div>
<p>When we call <code>fahr_to_kelvin</code> inside <code>fahr_to_celsius</code>, Python creates another stack frame to hold <code>fahr_to_kelvin</code>'s variables:</p>
<p><img src="img/python-call-stack-03.svg" alt="Call Stack During First Nested Function Call" /></p>
<div class="figure">
<img src="fig/python-call-stack-03.svg" alt="Call Stack During First Nested Function Call" /><p class="caption">Call Stack During First Nested Function Call</p>
</div>
<p>It does this because there are now two variables in play called <code>temp</code>: the parameter to <code>fahr_to_celsius</code>, and the parameter to <code>fahr_to_kelvin</code>. Having two variables with the same name in the same part of the program would be ambiguous, so Python (and every other modern programming language) creates a new stack frame for each function call to keep that function's variables separate from those defined by other functions.</p>
<p>When the call to <code>fahr_to_kelvin</code> returns a value, Python throws away <code>fahr_to_kelvin</code>'s stack frame and creates a new variable in the stack frame for <code>fahr_to_celsius</code> to hold the temperature in Kelvin:</p>
<p><img src="img/python-call-stack-04.svg" alt="Call Stack After Return From First Nested Function Call" /></p>
<div class="figure">
<img src="fig/python-call-stack-04.svg" alt="Call Stack After Return From First Nested Function Call" /><p class="caption">Call Stack After Return From First Nested Function Call</p>
</div>
<p>It then calls <code>kelvin_to_celsius</code>, which means it creates a stack frame to hold that function's variables:</p>
<p><img src="img/python-call-stack-05.svg" alt="Call Stack During Call to Second Nested Function" /></p>
<div class="figure">
<img src="fig/python-call-stack-05.svg" alt="Call Stack During Call to Second Nested Function" /><p class="caption">Call Stack During Call to Second Nested Function</p>
</div>
<p>Once again, Python throws away that stack frame when <code>kelvin_to_celsius</code> is done and creates the variable <code>result</code> in the stack frame for <code>fahr_to_celsius</code>:</p>
<p><img src="img/python-call-stack-06.svg" alt="Call Stack After Second Nested Function Returns" /></p>
<div class="figure">
<img src="fig/python-call-stack-06.svg" alt="Call Stack After Second Nested Function Returns" /><p class="caption">Call Stack After Second Nested Function Returns</p>
</div>
<p>Finally, when <code>fahr_to_celsius</code> is done, Python throws away <em>its</em> stack frame and puts its result in a new variable called <code>final</code> that lives in the stack frame we started with:</p>
<p><img src="img/python-call-stack-07.svg" alt="Call Stack After All Functions Have Finished" /></p>
<div class="figure">
<img src="fig/python-call-stack-07.svg" alt="Call Stack After All Functions Have Finished" /><p class="caption">Call Stack After All Functions Have Finished</p>
</div>
<p>This final stack frame is always there; it holds the variables we defined outside the functions in our code. What it <em>doesn't</em> hold is the variables that were in the various stack frames. If we try to get the value of <code>temp</code> after our functions have finished running, Python tells us that there's no such thing:</p>
<pre class="sourceCode python"><code class="sourceCode python"><span class="dt">print</span> <span class="st">&#39;final value of temp after all function calls:&#39;</span>, temp</code></pre>
<pre class="error"><code>---------------------------------------------------------------------------
Expand Down
14 changes: 7 additions & 7 deletions 02-func.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ final = fahr_to_celsius(original)

The diagram below shows what memory looks like after the first line has been executed:

<img src="img/python-call-stack-01.svg" alt="Call Stack (Initial State)" />
![Call Stack (Initial State)](fig/python-call-stack-01.svg)

When we call `fahr_to_celsius`,
Python *doesn't* create the variable `temp` right away.
Expand All @@ -240,12 +240,12 @@ to keep track of the variables defined by `fahr_to_kelvin`.
Initially,
this stack frame only holds the value of `temp`:

<img src="img/python-call-stack-02.svg" alt="Call Stack Immediately After First Function Call" />
![Call Stack Immediately After First Function Call](fig/python-call-stack-02.svg)

When we call `fahr_to_kelvin` inside `fahr_to_celsius`,
Python creates another stack frame to hold `fahr_to_kelvin`'s variables:

<img src="img/python-call-stack-03.svg" alt="Call Stack During First Nested Function Call" />
![Call Stack During First Nested Function Call](fig/python-call-stack-03.svg)

It does this because there are now two variables in play called `temp`:
the parameter to `fahr_to_celsius`,
Expand All @@ -258,26 +258,26 @@ When the call to `fahr_to_kelvin` returns a value,
Python throws away `fahr_to_kelvin`'s stack frame
and creates a new variable in the stack frame for `fahr_to_celsius` to hold the temperature in Kelvin:

<img src="img/python-call-stack-04.svg" alt="Call Stack After Return From First Nested Function Call" />
![Call Stack After Return From First Nested Function Call](fig/python-call-stack-04.svg)

It then calls `kelvin_to_celsius`,
which means it creates a stack frame to hold that function's variables:

<img src="img/python-call-stack-05.svg" alt="Call Stack During Call to Second Nested Function" />
![Call Stack During Call to Second Nested Function](fig/python-call-stack-05.svg)

Once again,
Python throws away that stack frame when `kelvin_to_celsius` is done
and creates the variable `result` in the stack frame for `fahr_to_celsius`:

<img src="img/python-call-stack-06.svg" alt="Call Stack After Second Nested Function Returns" />
![Call Stack After Second Nested Function Returns](fig/python-call-stack-06.svg)

Finally,
when `fahr_to_celsius` is done,
Python throws away *its* stack frame
and puts its result in a new variable called `final`
that lives in the stack frame we started with:

<img src="img/python-call-stack-07.svg" alt="Call Stack After All Functions Have Finished" />
![Call Stack After All Functions Have Finished](fig/python-call-stack-07.svg)

This final stack frame is always there;
it holds the variables we defined outside the functions in our code.
Expand Down
Loading

0 comments on commit ee479c2

Please sign in to comment.