Jekyll2021-01-11T09:35:24-06:00https://drscotthawley.github.io/devblog4/feed.xmlfastpagesAn easy to use blogging platform with support for Jupyter Notebooks.Citations in Fastpages via BibTeX and jekyll-scholar2020-07-01T00:00:00-05:002020-07-01T00:00:00-05:00https://drscotthawley.github.io/devblog4/2020/07/01/Citations-Via-Bibtex<h2 id="link-to-newer-version-of-this-document">Link to <a href="https://drscotthawley.github.io/blog/2020/07/01/Citations-Via-Bibtex.html">newer version of this document</a>.</h2>
<p><em>(N.B.: The following was created as a Markdown file in <code class="highlighter-rouge">_posts/</code>. For Jupyter notebooks, the same things apply; one simply enters the Liquid codes into Markdown cells. <a href="https://drscotthawley.github.io/devblog4/jupyter/2020/07/01/BibTeX-Check-For-Jupyter.html">Quick Jupyter example.</a></em>)</p>
<h2 id="how-to-cite">How to Cite</h2>
<p>For demonstration purposes, I’ll take the liberty of citing a couple of my recent papers, namely the first SignalTrain paper<a class="citation" href="#signaltrain"> [1]</a> and the new one by Billy Mitchell<a class="citation" href="#billy_signaltrain2"> [2]</a>. Instead of using the LaTeX code \cite{ <whatever> }, I use the Liquid code {% cite <whatever> %}. For example, the first citation above is written as “{% cite signaltrain %}” in the Markdown file that generates this HTML page.</p>
<p>The two citation markings above point to the References section at the end of this post where the full references are printed out in the bibliography style of my choice.</p>
<h2 id="drawing-from-the-bibliography">Drawing from the Bibliography</h2>
<p>In the main blog directory, create a new directory called <code class="highlighter-rouge">_bibliography/</code>, and place your BibTeX file there as <a href="../_bibliography/references.bib">references.bib</a>. In the case of this demo, the references file looks like this:</p>
<pre><code class="language-bibtex">@conference{signaltrain,
title = {Profiling Audio Compressors with Deep Neural Networks},
author = {Hawley, Scott H. and Colburn, Benjamin and Mimilakis, Stylianos Ioannis},
booktitle = {Audio Engineering Society Convention 147},
month = {Oct},
year = {2019},
url = {http://www.aes.org/e-lib/browse.cfm?elib=20595}
}
@article{billy_signaltrain2,
title={Exploring Quality and Generalizability in Parameterized Neural Audio Effects},
author={William Mitchell and Scott H. Hawley},
journal={ArXiv},
year={2020},
volume={abs/2006.05584}
url = {https://arxiv.org/abs/2006.05584}
}
</code></pre>
<p>Note that this (single) references file is for your entire blog. The great thing about this is that all your Jupyter notebooks and Markdown posts will draw from this same file, which could be hundreds of references long, and jekyll-scholar will only include the ones you need for each post.</p>
<p>Finally, at the end of your post, you signal the creation of the list of references by using the Liquid tag</p>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">bibliography</span><span class="w"> </span><span class="o">--</span>cited<span class="w"> </span><span class="p">%}</span>
</code></pre></div></div>
<p>…so I’ll put that at the very bottom of this file. (Currently that’ll generate an error, because we haven’t enabled jekyll-scholar yet, but we’ll do that next.) The optional argument <code class="highlighter-rouge">--cited</code> means it’ll only list the references cited in your post.</p>
<h2 id="enabling-jekyll-scholar">Enabling Jekyll-Scholar</h2>
<p>To enable jekyll-scholar, all we need to do is make the following two changes, and perhaps a third.</p>
<ol>
<li>
<p>In <code class="highlighter-rouge">_config.yml</code>, add “<code class="highlighter-rouge"> - jekyll-scholar</code>” to the list of <code class="highlighter-rouge">plugins:</code>.</p>
</li>
<li>
<p>Edit the <code class="highlighter-rouge">Gemfile</code> to include <code class="highlighter-rouge">gem 'jekyll-scholar'</code> where the other plugins are listed.</p>
</li>
<li>
<p>Optional: The default citation format is “apa”. If you want to change that, you can add the following to your <code class="highlighter-rouge">_config.yml</code> file:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">scholar</span><span class="pi">:</span>
<span class="na">style</span><span class="pi">:</span> <span class="s"><name></span>
</code></pre></div> </div>
<p>…naming one of the styles in the <a href="https://github.com/citation-style-language/styles">CSL style repository</a> (but leaving off the <code class="highlighter-rouge">.csl</code> ending). Tip from the CSL maintainers:</p>
<blockquote>
<p>To quickly search the styles in the GitHub <a href="https://github.com/citation-style-language/styles">CSL style repository</a> by file name, press “t” to activate GitHub’s <a href="https://github.com/blog/793-introducing-the-file-finder">File Finder</a> and start typing.</p>
</blockquote>
<p>Note however that the <code class="highlighter-rouge">csl-styles</code> Gem package used by jekyll-scholar <strong>lags behind the official CSL style repository</strong>, so some names you choose may not work. In that case, you can supply a CSL file yourself. For this demo, I found the file <code class="highlighter-rouge">physical-review-d.csl</code>, added it to my main blog directory, and then specified the style name <code class="highlighter-rouge">physical-review-d</code> in <code class="highlighter-rouge">_config.yml</code>. This produced the bracketed-number citation markers above, and the reference format you see below in the References section.</p>
</li>
</ol>
<p>The convenience of this BibTeX/jekyll-scholar approach is that instead of having to manually edit references on each individual page – say, if you wanted to change citation formats (or alternatively, update information about a paper cited in multiple posts) – now you only change <strong>one line</strong> in <code class="highlighter-rouge">_config.yml</code> (or update one spot in <code class="highlighter-rouge">references.bib</code>) and the system “builds out” the change “everywhere.”</p>
<p>Happy blogging!</p>
<h1 id="references">References</h1>
<ol class="bibliography"><li><span id="signaltrain">[1]S. H. Hawley, B. Colburn, and S. I. Mimilakis, in <i>Audio Engineering Society Convention 147</i> (2019).</span></li>
<li><span id="billy_signaltrain2">[2]W. Mitchell and S. H. Hawley, ArXiv <b>abs/2006.05584</b>, (2020).</span></li></ol>Link to newer version of this document.BibTeX Check for Jupyter2020-07-01T00:00:00-05:002020-07-01T00:00:00-05:00https://drscotthawley.github.io/devblog4/jupyter/2020/07/01/BibTeX-Check-For-Jupyter<!--
#################################################
### THIS FILE WAS AUTOGENERATED! DO NOT EDIT! ###
#################################################
# file to edit: _notebooks/2020-07-01-BibTeX-Check-For-Jupyter.ipynb
-->
<div class="container" id="notebook-container">
<div class="cell border-box-sizing code_cell rendered">
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>I just did a <a href="https://drscotthawley.github.io/devblog4/2020/07/01/Citations-Via-Bibtex.html#references">post showing BibTeX usage for Markdown posts</a>. In this notebook, we'll also try citing but this time from within a Jupyter Notebook. I want to make sure this works in Jupyter too!</p>
<p>Just to assert that we're really using Python,...</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
<span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
<span class="o">%</span><span class="k">matplotlib</span> inline
<span class="nb">print</span><span class="p">(</span><span class="s2">"Yes, this is Python code!"</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_subarea output_stream output_stdout output_text">
<pre>Yes, this is Python code!
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Now, in this Markdown cell, I'll include the same text I did before:</p>
<p>For demonstration purposes, I'll take the liberty of citing a couple of my recent papers, namely the first SignalTrain paper<a class="citation" href="#signaltrain"> [1]</a> and the new one by Billy Mitchell<a class="citation" href="#billy_signaltrain2"> [2]</a>.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># and a little more code</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="n">num</span><span class="o">=</span><span class="mi">50</span><span class="p">)</span>
<span class="n">y</span> <span class="o">=</span> <span class="n">x</span><span class="o">**</span><span class="mi">2</span>
<span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="s1">'o-'</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_text output_subarea output_execute_result">
<pre>[<matplotlib.lines.Line2D at 0x7f2578129eb8>]</pre>
</div>
</div>
<div class="output_area">
<div class="output_png output_subarea ">
<img src="data:image/png;base64,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
" />
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>And now we wrap it up with the same bibliography inclusion as the previous post...</p>
<h2 id="References">References<a class="anchor-link" href="#References"> </a></h2><p><ol class="bibliography"><li><span id="signaltrain">[1]S. H. Hawley, B. Colburn, and S. I. Mimilakis, in <i>Audio Engineering Society Convention 147</i> (2019).</span></li>
<li><span id="billy_signaltrain2">[2]W. Mitchell and S. H. Hawley, ArXiv <b>abs/2006.05584</b>, (2020).</span></li></ol></p>
</div>
</div>
</div>
</div>Test for URL mangling in Jupyter notebooks2020-05-29T00:00:00-05:002020-05-29T00:00:00-05:00https://drscotthawley.github.io/devblog4/jupyter/2020/05/29/url-mangling-nb<!--
#################################################
### THIS FILE WAS AUTOGENERATED! DO NOT EDIT! ###
#################################################
# file to edit: _notebooks/2020-05-29-url-mangling-nb.ipynb
-->
<div class="container" id="notebook-container">
<div class="cell border-box-sizing code_cell rendered">
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><sub>Text [with a hyperlink](http://www.google.com)</sub></p>
</div>
</div>
</div>
</div>Test for URL mangling in Markdown2020-05-28T00:00:00-05:002020-05-28T00:00:00-05:00https://drscotthawley.github.io/devblog4/markdown/2020/05/28/url-mangling-md<h1 id="test-for-url-mangling-in-markdown">Test for URL mangling in Markdown</h1>
<p><sub>Text <a href="http://www.google.com">with a hyperlink</a></sub></p>Test for URL mangling in MarkdownFastpages Notebook Blog Post2020-02-20T00:00:00-06:002020-02-20T00:00:00-06:00https://drscotthawley.github.io/devblog4/jupyter/2020/02/20/test<!--
#################################################
### THIS FILE WAS AUTOGENERATED! DO NOT EDIT! ###
#################################################
# file to edit: _notebooks/2020-02-20-test.ipynb
-->
<div class="container" id="notebook-container">
<div class="cell border-box-sizing code_cell rendered">
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h1 id="About">About<a class="anchor-link" href="#About"> </a></h1><p>This notebook is a demonstration of some of capabilities of <a href="https://github.com/fastai/fastpages">fastpages</a> with notebooks.</p>
<p>With <code>fastpages</code> you can save your jupyter notebooks into the <code>_notebooks</code> folder at the root of your repository, and they will be automatically be converted to Jekyll compliant blog posts!</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Front-Matter">Front Matter<a class="anchor-link" href="#Front-Matter"> </a></h2><p>The first cell in your Jupyter Notebook or markdown blog post contains front matter. Front matter is metadata that can turn on/off options in your Notebook. It is formatted like this:</p>
<pre><code># "My Title"
> "Awesome summary"
- toc:true- branch: master- badges: true- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]</code></pre>
<ul>
<li>Setting <code>toc: true</code> will automatically generate a table of contents</li>
<li>Setting <code>badges: true</code> will automatically include GitHub and Google Colab links to your notebook.</li>
<li>Setting <code>comments: true</code> will enable commenting on your blog post, powered by <a href="https://github.com/utterance/utterances">utterances</a>.</li>
</ul>
<p>The title and description need to be enclosed in double quotes only if they include special characters such as a colon. More details and options for front matter can be viewed on the <a href="https://github.com/fastai/fastpages#front-matter-related-options">front matter section</a> of the README.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Markdown-Shortcuts">Markdown Shortcuts<a class="anchor-link" href="#Markdown-Shortcuts"> </a></h2>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>A <code>#hide</code> comment at the top of any code cell will hide <strong>both the input and output</strong> of that cell in your blog post.</p>
<p>A <code>#hide_input</code> comment at the top of any code cell will <strong>only hide the input</strong> of that cell.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_subarea output_stream output_stdout output_text">
<pre>The comment #hide_input was used to hide the code that produced this.
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>put a <code>#collapse-hide</code> flag at the top of any cell if you want to <strong>hide</strong> that cell by default, but give the reader the option to show it:</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<details class="description">
<summary class="btn btn-sm" data-open="Hide Code" data-close="Show Code"></summary>
<p><div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="c1">#collapse-hide</span>
<span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
<span class="kn">import</span> <span class="nn">altair</span> <span class="k">as</span> <span class="nn">alt</span>
</pre></div>
</div>
</div>
</div>
</p>
</details>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>put a <code>#collapse-show</code> flag at the top of any cell if you want to <strong>show</strong> that cell by default, but give the reader the option to hide it:</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<details class="description" open="">
<summary class="btn btn-sm" data-open="Hide Code" data-close="Show Code"></summary>
<p><div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="c1">#collapse-show</span>
<span class="n">cars</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/cars.json'</span>
<span class="n">movies</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/movies.json'</span>
<span class="n">sp500</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/sp500.csv'</span>
<span class="n">stocks</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/stocks.csv'</span>
<span class="n">flights</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/flights-5k.json'</span>
</pre></div>
</div>
</div>
</div>
</p>
</details>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Interactive-Charts-With-Altair">Interactive Charts With Altair<a class="anchor-link" href="#Interactive-Charts-With-Altair"> </a></h2><p>Charts made with Altair remain interactive. Example charts taken from <a href="https://github.com/uwdata/visualization-curriculum">this repo</a>, specifically <a href="https://github.com/uwdata/visualization-curriculum/blob/master/altair_interaction.ipynb">this notebook</a>.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Example-1:-DropDown">Example 1: DropDown<a class="anchor-link" href="#Example-1:-DropDown"> </a></h3>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># single-value selection over [Major_Genre, MPAA_Rating] pairs</span>
<span class="c1"># use specific hard-wired values as the initial selected values</span>
<span class="n">selection</span> <span class="o">=</span> <span class="n">alt</span><span class="o">.</span><span class="n">selection_single</span><span class="p">(</span>
<span class="n">name</span><span class="o">=</span><span class="s1">'Select'</span><span class="p">,</span>
<span class="n">fields</span><span class="o">=</span><span class="p">[</span><span class="s1">'Major_Genre'</span><span class="p">,</span> <span class="s1">'MPAA_Rating'</span><span class="p">],</span>
<span class="n">init</span><span class="o">=</span><span class="p">{</span><span class="s1">'Major_Genre'</span><span class="p">:</span> <span class="s1">'Drama'</span><span class="p">,</span> <span class="s1">'MPAA_Rating'</span><span class="p">:</span> <span class="s1">'R'</span><span class="p">},</span>
<span class="n">bind</span><span class="o">=</span><span class="p">{</span><span class="s1">'Major_Genre'</span><span class="p">:</span> <span class="n">alt</span><span class="o">.</span><span class="n">binding_select</span><span class="p">(</span><span class="n">options</span><span class="o">=</span><span class="n">genres</span><span class="p">),</span> <span class="s1">'MPAA_Rating'</span><span class="p">:</span> <span class="n">alt</span><span class="o">.</span><span class="n">binding_radio</span><span class="p">(</span><span class="n">options</span><span class="o">=</span><span class="n">mpaa</span><span class="p">)}</span>
<span class="p">)</span>
<span class="c1"># scatter plot, modify opacity based on selection</span>
<span class="n">alt</span><span class="o">.</span><span class="n">Chart</span><span class="p">(</span><span class="n">movies</span><span class="p">)</span><span class="o">.</span><span class="n">mark_circle</span><span class="p">()</span><span class="o">.</span><span class="n">add_selection</span><span class="p">(</span>
<span class="n">selection</span>
<span class="p">)</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">x</span><span class="o">=</span><span class="s1">'Rotten_Tomatoes_Rating:Q'</span><span class="p">,</span>
<span class="n">y</span><span class="o">=</span><span class="s1">'IMDB_Rating:Q'</span><span class="p">,</span>
<span class="n">tooltip</span><span class="o">=</span><span class="s1">'Title:N'</span><span class="p">,</span>
<span class="n">opacity</span><span class="o">=</span><span class="n">alt</span><span class="o">.</span><span class="n">condition</span><span class="p">(</span><span class="n">selection</span><span class="p">,</span> <span class="n">alt</span><span class="o">.</span><span class="n">value</span><span class="p">(</span><span class="mf">0.75</span><span class="p">),</span> <span class="n">alt</span><span class="o">.</span><span class="n">value</span><span class="p">(</span><span class="mf">0.05</span><span class="p">))</span>
<span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_html rendered_html output_subarea output_execute_result">
<div id="altair-viz-1a49e83878ce4d678d7b162f3d6b510f"></div>
<script type="text/javascript">
(function(spec, embedOpt){
const outputDiv = document.getElementById("altair-viz-1a49e83878ce4d678d7b162f3d6b510f");
const paths = {
"vega": "https://cdn.jsdelivr.net/npm//vega@5?noext",
"vega-lib": "https://cdn.jsdelivr.net/npm//vega-lib?noext",
"vega-lite": "https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext",
"vega-embed": "https://cdn.jsdelivr.net/npm//vega-embed@6?noext",
};
function loadScript(lib) {
return new Promise(function(resolve, reject) {
var s = document.createElement('script');
s.src = paths[lib];
s.async = true;
s.onload = () => resolve(paths[lib]);
s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
document.getElementsByTagName("head")[0].appendChild(s);
});
}
function showError(err) {
outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
throw err;
}
function displayChart(vegaEmbed) {
vegaEmbed(outputDiv, spec, embedOpt)
.catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
}
if(typeof define === "function" && define.amd) {
requirejs.config({paths});
require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
} else if (typeof vegaEmbed === "function") {
displayChart(vegaEmbed);
} else {
loadScript("vega")
.then(() => loadScript("vega-lite"))
.then(() => loadScript("vega-embed"))
.catch(showError)
.then(() => displayChart(vegaEmbed));
}
})({"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://vega.github.io/vega-datasets/data/movies.json"}, "mark": "circle", "encoding": {"opacity": {"condition": {"value": 0.75, "selection": "Select"}, "value": 0.05}, "tooltip": {"type": "nominal", "field": "Title"}, "x": {"type": "quantitative", "field": "Rotten_Tomatoes_Rating"}, "y": {"type": "quantitative", "field": "IMDB_Rating"}}, "selection": {"Select": {"type": "single", "fields": ["Major_Genre", "MPAA_Rating"], "init": {"Major_Genre": "Drama", "MPAA_Rating": "R"}, "bind": {"Major_Genre": {"input": "select", "options": ["Action", "Adventure", "Black Comedy", "Comedy", "Concert/Performance", "Documentary", "Drama", "Horror", "Musical", "Romantic Comedy", "Thriller/Suspense", "Western"]}, "MPAA_Rating": {"input": "radio", "options": ["G", "PG", "PG-13", "R", "NC-17", "Not Rated"]}}}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json"}, {"mode": "vega-lite"});
</script>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Example-2:-Tooltips">Example 2: Tooltips<a class="anchor-link" href="#Example-2:-Tooltips"> </a></h3>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">alt</span><span class="o">.</span><span class="n">Chart</span><span class="p">(</span><span class="n">movies</span><span class="p">)</span><span class="o">.</span><span class="n">mark_circle</span><span class="p">()</span><span class="o">.</span><span class="n">add_selection</span><span class="p">(</span>
<span class="n">alt</span><span class="o">.</span><span class="n">selection_interval</span><span class="p">(</span><span class="n">bind</span><span class="o">=</span><span class="s1">'scales'</span><span class="p">,</span> <span class="n">encodings</span><span class="o">=</span><span class="p">[</span><span class="s1">'x'</span><span class="p">])</span>
<span class="p">)</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">x</span><span class="o">=</span><span class="s1">'Rotten_Tomatoes_Rating:Q'</span><span class="p">,</span>
<span class="n">y</span><span class="o">=</span><span class="n">alt</span><span class="o">.</span><span class="n">Y</span><span class="p">(</span><span class="s1">'IMDB_Rating:Q'</span><span class="p">,</span> <span class="n">axis</span><span class="o">=</span><span class="n">alt</span><span class="o">.</span><span class="n">Axis</span><span class="p">(</span><span class="n">minExtent</span><span class="o">=</span><span class="mi">30</span><span class="p">)),</span> <span class="c1"># use min extent to stabilize axis title placement</span>
<span class="n">tooltip</span><span class="o">=</span><span class="p">[</span><span class="s1">'Title:N'</span><span class="p">,</span> <span class="s1">'Release_Date:N'</span><span class="p">,</span> <span class="s1">'IMDB_Rating:Q'</span><span class="p">,</span> <span class="s1">'Rotten_Tomatoes_Rating:Q'</span><span class="p">]</span>
<span class="p">)</span><span class="o">.</span><span class="n">properties</span><span class="p">(</span>
<span class="n">width</span><span class="o">=</span><span class="mi">600</span><span class="p">,</span>
<span class="n">height</span><span class="o">=</span><span class="mi">400</span>
<span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_html rendered_html output_subarea output_execute_result">
<div id="altair-viz-c022b476f4fb482ca6f609bf6ed082d2"></div>
<script type="text/javascript">
(function(spec, embedOpt){
const outputDiv = document.getElementById("altair-viz-c022b476f4fb482ca6f609bf6ed082d2");
const paths = {
"vega": "https://cdn.jsdelivr.net/npm//vega@5?noext",
"vega-lib": "https://cdn.jsdelivr.net/npm//vega-lib?noext",
"vega-lite": "https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext",
"vega-embed": "https://cdn.jsdelivr.net/npm//vega-embed@6?noext",
};
function loadScript(lib) {
return new Promise(function(resolve, reject) {
var s = document.createElement('script');
s.src = paths[lib];
s.async = true;
s.onload = () => resolve(paths[lib]);
s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
document.getElementsByTagName("head")[0].appendChild(s);
});
}
function showError(err) {
outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
throw err;
}
function displayChart(vegaEmbed) {
vegaEmbed(outputDiv, spec, embedOpt)
.catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
}
if(typeof define === "function" && define.amd) {
requirejs.config({paths});
require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
} else if (typeof vegaEmbed === "function") {
displayChart(vegaEmbed);
} else {
loadScript("vega")
.then(() => loadScript("vega-lite"))
.then(() => loadScript("vega-embed"))
.catch(showError)
.then(() => displayChart(vegaEmbed));
}
})({"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://vega.github.io/vega-datasets/data/movies.json"}, "mark": "circle", "encoding": {"tooltip": [{"type": "nominal", "field": "Title"}, {"type": "nominal", "field": "Release_Date"}, {"type": "quantitative", "field": "IMDB_Rating"}, {"type": "quantitative", "field": "Rotten_Tomatoes_Rating"}], "x": {"type": "quantitative", "field": "Rotten_Tomatoes_Rating"}, "y": {"type": "quantitative", "axis": {"minExtent": 30}, "field": "IMDB_Rating"}}, "height": 400, "selection": {"selector001": {"type": "interval", "bind": "scales", "encodings": ["x"]}}, "width": 600, "$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json"}, {"mode": "vega-lite"});
</script>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Example-3:-More-Tooltips">Example 3: More Tooltips<a class="anchor-link" href="#Example-3:-More-Tooltips"> </a></h3>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="c1"># select a point for which to provide details-on-demand</span>
<span class="n">label</span> <span class="o">=</span> <span class="n">alt</span><span class="o">.</span><span class="n">selection_single</span><span class="p">(</span>
<span class="n">encodings</span><span class="o">=</span><span class="p">[</span><span class="s1">'x'</span><span class="p">],</span> <span class="c1"># limit selection to x-axis value</span>
<span class="n">on</span><span class="o">=</span><span class="s1">'mouseover'</span><span class="p">,</span> <span class="c1"># select on mouseover events</span>
<span class="n">nearest</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="c1"># select data point nearest the cursor</span>
<span class="n">empty</span><span class="o">=</span><span class="s1">'none'</span> <span class="c1"># empty selection includes no data points</span>
<span class="p">)</span>
<span class="c1"># define our base line chart of stock prices</span>
<span class="n">base</span> <span class="o">=</span> <span class="n">alt</span><span class="o">.</span><span class="n">Chart</span><span class="p">()</span><span class="o">.</span><span class="n">mark_line</span><span class="p">()</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">alt</span><span class="o">.</span><span class="n">X</span><span class="p">(</span><span class="s1">'date:T'</span><span class="p">),</span>
<span class="n">alt</span><span class="o">.</span><span class="n">Y</span><span class="p">(</span><span class="s1">'price:Q'</span><span class="p">,</span> <span class="n">scale</span><span class="o">=</span><span class="n">alt</span><span class="o">.</span><span class="n">Scale</span><span class="p">(</span><span class="nb">type</span><span class="o">=</span><span class="s1">'log'</span><span class="p">)),</span>
<span class="n">alt</span><span class="o">.</span><span class="n">Color</span><span class="p">(</span><span class="s1">'symbol:N'</span><span class="p">)</span>
<span class="p">)</span>
<span class="n">alt</span><span class="o">.</span><span class="n">layer</span><span class="p">(</span>
<span class="n">base</span><span class="p">,</span> <span class="c1"># base line chart</span>
<span class="c1"># add a rule mark to serve as a guide line</span>
<span class="n">alt</span><span class="o">.</span><span class="n">Chart</span><span class="p">()</span><span class="o">.</span><span class="n">mark_rule</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s1">'#aaa'</span><span class="p">)</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">x</span><span class="o">=</span><span class="s1">'date:T'</span>
<span class="p">)</span><span class="o">.</span><span class="n">transform_filter</span><span class="p">(</span><span class="n">label</span><span class="p">),</span>
<span class="c1"># add circle marks for selected time points, hide unselected points</span>
<span class="n">base</span><span class="o">.</span><span class="n">mark_circle</span><span class="p">()</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">opacity</span><span class="o">=</span><span class="n">alt</span><span class="o">.</span><span class="n">condition</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">alt</span><span class="o">.</span><span class="n">value</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span> <span class="n">alt</span><span class="o">.</span><span class="n">value</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span>
<span class="p">)</span><span class="o">.</span><span class="n">add_selection</span><span class="p">(</span><span class="n">label</span><span class="p">),</span>
<span class="c1"># add white stroked text to provide a legible background for labels</span>
<span class="n">base</span><span class="o">.</span><span class="n">mark_text</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s1">'left'</span><span class="p">,</span> <span class="n">dx</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span> <span class="n">dy</span><span class="o">=-</span><span class="mi">5</span><span class="p">,</span> <span class="n">stroke</span><span class="o">=</span><span class="s1">'white'</span><span class="p">,</span> <span class="n">strokeWidth</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">text</span><span class="o">=</span><span class="s1">'price:Q'</span>
<span class="p">)</span><span class="o">.</span><span class="n">transform_filter</span><span class="p">(</span><span class="n">label</span><span class="p">),</span>
<span class="c1"># add text labels for stock prices</span>
<span class="n">base</span><span class="o">.</span><span class="n">mark_text</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s1">'left'</span><span class="p">,</span> <span class="n">dx</span><span class="o">=</span><span class="mi">5</span><span class="p">,</span> <span class="n">dy</span><span class="o">=-</span><span class="mi">5</span><span class="p">)</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span>
<span class="n">text</span><span class="o">=</span><span class="s1">'price:Q'</span>
<span class="p">)</span><span class="o">.</span><span class="n">transform_filter</span><span class="p">(</span><span class="n">label</span><span class="p">),</span>
<span class="n">data</span><span class="o">=</span><span class="n">stocks</span>
<span class="p">)</span><span class="o">.</span><span class="n">properties</span><span class="p">(</span>
<span class="n">width</span><span class="o">=</span><span class="mi">700</span><span class="p">,</span>
<span class="n">height</span><span class="o">=</span><span class="mi">400</span>
<span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_html rendered_html output_subarea output_execute_result">
<div id="altair-viz-9283d3681fd24aafa3d1e2f9ad193ecf"></div>
<script type="text/javascript">
(function(spec, embedOpt){
const outputDiv = document.getElementById("altair-viz-9283d3681fd24aafa3d1e2f9ad193ecf");
const paths = {
"vega": "https://cdn.jsdelivr.net/npm//vega@5?noext",
"vega-lib": "https://cdn.jsdelivr.net/npm//vega-lib?noext",
"vega-lite": "https://cdn.jsdelivr.net/npm//vega-lite@4.0.2?noext",
"vega-embed": "https://cdn.jsdelivr.net/npm//vega-embed@6?noext",
};
function loadScript(lib) {
return new Promise(function(resolve, reject) {
var s = document.createElement('script');
s.src = paths[lib];
s.async = true;
s.onload = () => resolve(paths[lib]);
s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
document.getElementsByTagName("head")[0].appendChild(s);
});
}
function showError(err) {
outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
throw err;
}
function displayChart(vegaEmbed) {
vegaEmbed(outputDiv, spec, embedOpt)
.catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
}
if(typeof define === "function" && define.amd) {
requirejs.config({paths});
require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
} else if (typeof vegaEmbed === "function") {
displayChart(vegaEmbed);
} else {
loadScript("vega")
.then(() => loadScript("vega-lite"))
.then(() => loadScript("vega-embed"))
.catch(showError)
.then(() => displayChart(vegaEmbed));
}
})({"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "layer": [{"mark": "line", "encoding": {"color": {"type": "nominal", "field": "symbol"}, "x": {"type": "temporal", "field": "date"}, "y": {"type": "quantitative", "field": "price", "scale": {"type": "log"}}}}, {"mark": {"type": "rule", "color": "#aaa"}, "encoding": {"x": {"type": "temporal", "field": "date"}}, "transform": [{"filter": {"selection": "selector002"}}]}, {"mark": "circle", "encoding": {"color": {"type": "nominal", "field": "symbol"}, "opacity": {"condition": {"value": 1, "selection": "selector002"}, "value": 0}, "x": {"type": "temporal", "field": "date"}, "y": {"type": "quantitative", "field": "price", "scale": {"type": "log"}}}, "selection": {"selector002": {"type": "single", "encodings": ["x"], "on": "mouseover", "nearest": true, "empty": "none"}}}, {"mark": {"type": "text", "align": "left", "dx": 5, "dy": -5, "stroke": "white", "strokeWidth": 2}, "encoding": {"color": {"type": "nominal", "field": "symbol"}, "text": {"type": "quantitative", "field": "price"}, "x": {"type": "temporal", "field": "date"}, "y": {"type": "quantitative", "field": "price", "scale": {"type": "log"}}}, "transform": [{"filter": {"selection": "selector002"}}]}, {"mark": {"type": "text", "align": "left", "dx": 5, "dy": -5}, "encoding": {"color": {"type": "nominal", "field": "symbol"}, "text": {"type": "quantitative", "field": "price"}, "x": {"type": "temporal", "field": "date"}, "y": {"type": "quantitative", "field": "price", "scale": {"type": "log"}}}, "transform": [{"filter": {"selection": "selector002"}}]}], "data": {"url": "https://vega.github.io/vega-datasets/data/stocks.csv"}, "height": 400, "width": 700, "$schema": "https://vega.github.io/schema/vega-lite/v4.0.2.json"}, {"mode": "vega-lite"});
</script>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Data-Tables">Data Tables<a class="anchor-link" href="#Data-Tables"> </a></h2><p>You can display tables per the usual way in your blog:</p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">movies</span> <span class="o">=</span> <span class="s1">'https://vega.github.io/vega-datasets/data/movies.json'</span>
<span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_json</span><span class="p">(</span><span class="n">movies</span><span class="p">)</span>
<span class="c1"># display table with pandas</span>
<span class="n">df</span><span class="p">[[</span><span class="s1">'Title'</span><span class="p">,</span> <span class="s1">'Worldwide_Gross'</span><span class="p">,</span>
<span class="s1">'Production_Budget'</span><span class="p">,</span> <span class="s1">'Distributor'</span><span class="p">,</span> <span class="s1">'MPAA_Rating'</span><span class="p">,</span> <span class="s1">'IMDB_Rating'</span><span class="p">,</span> <span class="s1">'Rotten_Tomatoes_Rating'</span><span class="p">]]</span><span class="o">.</span><span class="n">head</span><span class="p">()</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="output_html rendered_html output_subarea output_execute_result">
<div>
<style scoped="">
.dataframe tbody tr th:only-of-type {
vertical-align: middle;
}
.dataframe tbody tr th {
vertical-align: top;
}
.dataframe thead th {
text-align: right;
}
</style>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>Title</th>
<th>Worldwide_Gross</th>
<th>Production_Budget</th>
<th>Distributor</th>
<th>MPAA_Rating</th>
<th>IMDB_Rating</th>
<th>Rotten_Tomatoes_Rating</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>The Land Girls</td>
<td>146083.0</td>
<td>8000000.0</td>
<td>Gramercy</td>
<td>R</td>
<td>6.1</td>
<td>NaN</td>
</tr>
<tr>
<th>1</th>
<td>First Love, Last Rites</td>
<td>10876.0</td>
<td>300000.0</td>
<td>Strand</td>
<td>R</td>
<td>6.9</td>
<td>NaN</td>
</tr>
<tr>
<th>2</th>
<td>I Married a Strange Person</td>
<td>203134.0</td>
<td>250000.0</td>
<td>Lionsgate</td>
<td>None</td>
<td>6.8</td>
<td>NaN</td>
</tr>
<tr>
<th>3</th>
<td>Let's Talk About Sex</td>
<td>373615.0</td>
<td>300000.0</td>
<td>Fine Line</td>
<td>None</td>
<td>NaN</td>
<td>13.0</td>
</tr>
<tr>
<th>4</th>
<td>Slam</td>
<td>1087521.0</td>
<td>1000000.0</td>
<td>Trimark</td>
<td>R</td>
<td>3.4</td>
<td>62.0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Images">Images<a class="anchor-link" href="#Images"> </a></h2><h3 id="Local-Images">Local Images<a class="anchor-link" href="#Local-Images"> </a></h3><p>You can reference local images and they will be copied and rendered on your blog automatically. You can include these with the following markdown syntax:</p>
<p><code>![](my_icons/fastai_logo.png)</code></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><img src="/devblog4/images/copied_from_nb/my_icons/fastai_logo.png" alt="" /></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Remote-Images">Remote Images<a class="anchor-link" href="#Remote-Images"> </a></h3><p>Remote images can be included with the following markdown syntax:</p>
<p><code>![](https://image.flaticon.com/icons/svg/36/36686.svg)</code></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><img src="https://image.flaticon.com/icons/svg/36/36686.svg" alt="" /></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Animated-Gifs">Animated Gifs<a class="anchor-link" href="#Animated-Gifs"> </a></h3><p>Animated Gifs work, too!</p>
<p><code>![](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif)</code></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><img src="https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif" alt="" /></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h3 id="Captions">Captions<a class="anchor-link" href="#Captions"> </a></h3><p>You can include captions with markdown images like this:</p>
<pre><code>![](https://www.fast.ai/images/fastai_paper/show_batch.png "Credit: https://www.fast.ai/2020/02/13/fastai-A-Layered-API-for-Deep-Learning/")</code></pre>
<p><img src="https://www.fast.ai/images/fastai_paper/show_batch.png" alt="" title="Credit: https://www.fast.ai/2020/02/13/fastai-A-Layered-API-for-Deep-Learning/" /></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h1 id="Other-Elements">Other Elements<a class="anchor-link" href="#Other-Elements"> </a></h1>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="GitHub-Flavored-Emojis">GitHub Flavored Emojis<a class="anchor-link" href="#GitHub-Flavored-Emojis"> </a></h2><p>Typing <code>I give this post two :+1:!</code> will render this:</p>
<p>I give this post two :+1:!</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Tweetcards">Tweetcards<a class="anchor-link" href="#Tweetcards"> </a></h2><p>Typing <code>> twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20</code> will render this:
<center>
<div class="jekyll-twitter-plugin"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Altair 4.0 is released! <a href="https://t.co/PCyrIOTcvv">https://t.co/PCyrIOTcvv</a><br />Try it with:<br /><br /> pip install -U altair<br /><br />The full list of changes is at <a href="https://t.co/roXmzcsT58">https://t.co/roXmzcsT58</a> ...read on for some highlights. <a href="https://t.co/vWJ0ZveKbZ">pic.twitter.com/vWJ0ZveKbZ</a></p>— Jake VanderPlas (@jakevdp) <a href="https://twitter.com/jakevdp/status/1204765621767901185?ref_src=twsrc%5Etfw">December 11, 2019</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</center>
</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Youtube-Videos">Youtube Videos<a class="anchor-link" href="#Youtube-Videos"> </a></h2><p>Typing <code>> youtube: https://youtu.be/XfoYk_Z5AkI</code> will render this:
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XfoYk_Z5AkI" frameborder="0" allowfullscreen=""></iframe>
</center>
</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Boxes-/-Callouts">Boxes / Callouts<a class="anchor-link" href="#Boxes-/-Callouts"> </a></h2><p>Typing <code>> Warning: There will be no second warning!</code> will render this:
<div class="flash flash-error">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
<strong>Warning: </strong>There will be no second warning!
</div></p>
<p>Typing <code>> Important: Pay attention! It's important.</code> will render this:
<div class="flash flash-warn">
<svg class="octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
<strong>Important: </strong>Pay attention! It’s important.
</div></p>
<p>Typing <code>> Tip: This is my tip.</code> will render this:
<div class="flash flash-success">
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 8.5l-6 6-3-3L8.5 10l1.5 1.5L14.5 7 16 8.5zM5.7 12.2l.8.8H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h7c.55 0 1 .45 1 1v6.5l-.8-.8c-.39-.39-1.03-.39-1.42 0L5.7 10.8a.996.996 0 000 1.41v-.01zM4 4h5V3H4v1zm0 2h5V5H4v1zm0 2h3V7H4v1zM3 9H2v1h1V9zm0-2H2v1h1V7zm0-2H2v1h1V5zm0-2H2v1h1V3z"></path></svg>
<strong>Tip: </strong>This is my tip.
</div></p>
<p>Typing <code>> Note: Take note of this.</code> will render this:
<div class="flash">
<svg class="octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 01-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 01-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
<strong>Note: </strong>Take note of this.
</div></p>
<p>Typing <code>> Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine.</code> will render in the docs:
<div class="flash">
<svg class="octicon octicon-info octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 01-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 01-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
<strong>Note: </strong>A doc link to <a href="https://www.fast.ai/">an example website: fast.ai</a> should also work fine.
</div></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered"><div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h2 id="Footnotes">Footnotes<a class="anchor-link" href="#Footnotes"> </a></h2><p>You can have footnotes in notebooks, however the syntax is different compared to markdown documents. <a href="https://github.com/fastai/fastpages/blob/master/_fastpages_docs/NOTEBOOK_FOOTNOTES.md">This guide provides more detail about this syntax</a>, which looks like this:</p>
<pre><code>For example, here is a footnote {% fn 1 %}.
And another {% fn 2 %}
{{ 'This is the footnote.' | fndetail: 1 }}
{{ 'This is the other footnote. You can even have a [link](www.github.com)!' | fndetail: 2 }}</code></pre>
<p>For example, here is a footnote <sup id="fnref-1" class="footnote-ref"><a href="#fn-1">1</a></sup>.</p>
<p>And another <sup id="fnref-2" class="footnote-ref"><a href="#fn-2">2</a></sup></p>
<p><div class="footnotes"><p id="fn-1">1. This is the footnote.<a href="#fnref-1" class="footnote footnotes">↩</a></p></div>
<div class="footnotes"><p id="fn-2">2. This is the other footnote. You can even have a <a href="www.github.com">link</a>!<a href="#fnref-2" class="footnote footnotes">↩</a></p></div></p>
</div>
</div>
</div>
</div>An Example Markdown Post2020-01-14T00:00:00-06:002020-01-14T00:00:00-06:00https://drscotthawley.github.io/devblog4/markdown/2020/01/14/test-markdown-post<h1 id="example-markdown-post">Example Markdown Post</h1>
<h2 id="basic-setup">Basic setup</h2>
<p>Jekyll requires blog post files to be named according to the following format:</p>
<p><code class="highlighter-rouge">YEAR-MONTH-DAY-filename.md</code></p>
<p>Where <code class="highlighter-rouge">YEAR</code> is a four-digit number, <code class="highlighter-rouge">MONTH</code> and <code class="highlighter-rouge">DAY</code> are both two-digit numbers, and <code class="highlighter-rouge">filename</code> is whatever file name you choose, to remind yourself what this post is about. <code class="highlighter-rouge">.md</code> is the file extension for markdown files.</p>
<p>The first line of the file should start with a single hash character, then a space, then your title. This is how you create a “<em>level 1 heading</em>” in markdown. Then you can create level 2, 3, etc headings as you wish but repeating the hash character, such as you see in the line <code class="highlighter-rouge">## File names</code> above.</p>
<h2 id="basic-formatting">Basic formatting</h2>
<p>You can use <em>italics</em>, <strong>bold</strong>, <code class="highlighter-rouge">code font text</code>, and create <a href="https://www.markdownguide.org/cheat-sheet/">links</a>. Here’s a footnote <sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote">1</a></sup>. Here’s a horizontal rule:</p>
<hr />
<h2 id="lists">Lists</h2>
<p>Here’s a list:</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>And a numbered list:</p>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<h2 id="boxes-and-stuff">Boxes and stuff</h2>
<blockquote>
<p>This is a quotation</p>
</blockquote>
<div class="Toast Toast--warning googoo">
<span class="Toast-icon"><svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>
<span class="Toast-content">You can include alert boxes</span>
</div>
<p>…and…</p>
<div class="Toast">
<span class="Toast-icon"><svg class="octicon octicon-info" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 01-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 01-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>
<span class="Toast-content">You can include info boxes</span>
</div>
<h2 id="images">Images</h2>
<p><img src="/devblog4/images/logo.png" alt="" title="fast.ai's logo" /></p>
<h2 id="code">Code</h2>
<p>You can format text and code per usual</p>
<p>General preformatted text:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Do a thing
do_thing()
</code></pre></div></div>
<p>Python code and output:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Prints '2'
</span><span class="k">print</span><span class="p">(</span><span class="mi">1</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span>
</code></pre></div></div>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2
</code></pre></div></div>
<p>Formatting text as shell commands:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s2">"hello world"</span>
./some_script.sh <span class="nt">--option</span> <span class="s2">"value"</span>
wget https://example.com/cat_photo1.png
</code></pre></div></div>
<p>Formatting text as YAML:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">key</span><span class="pi">:</span> <span class="s">value</span>
<span class="pi">-</span> <span class="na">another_key</span><span class="pi">:</span> <span class="s2">"</span><span class="s">another</span><span class="nv"> </span><span class="s">value"</span>
</code></pre></div></div>
<h2 id="tables">Tables</h2>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A thing</td>
<td>Another thing</td>
</tr>
</tbody>
</table>
<h2 id="tweetcards">Tweetcards</h2>
<div class="jekyll-twitter-plugin"><blockquote class="twitter-tweet"><p lang="en" dir="ltr">Altair 4.0 is released! <a href="https://t.co/PCyrIOTcvv">https://t.co/PCyrIOTcvv</a><br />Try it with:<br /><br /> pip install -U altair<br /><br />The full list of changes is at <a href="https://t.co/roXmzcsT58">https://t.co/roXmzcsT58</a> ...read on for some highlights. <a href="https://t.co/vWJ0ZveKbZ">pic.twitter.com/vWJ0ZveKbZ</a></p>— Jake VanderPlas (@jakevdp) <a href="https://twitter.com/jakevdp/status/1204765621767901185?ref_src=twsrc%5Etfw">December 11, 2019</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<h2 id="footnotes">Footnotes</h2>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>This is the footnote. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>Example Markdown Post