The comment #hide_input was used to hide the code that produced this.
About
This notebook is a demonstration of some of capabilities of fastpages with notebooks.
With fastpages
you can save your jupyter notebooks into the _notebooks
folder at the root of your repository, and they will be automatically be converted to Jekyll compliant blog posts!
Front Matter
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:
# "My Title"
> "Awesome summary"
- toc: true
- branch: master
- badges: true
- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]
- Setting
toc: true
will automatically generate a table of contents - Setting
badges: true
will automatically include GitHub and Google Colab links to your notebook. - Setting
comments: true
will enable commenting on your blog post, powered by utterances.
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 front matter section of the README.
Markdown Shortcuts
A #hide
comment at the top of any code cell will hide both the input and output of that cell in your blog post.
A #hide_input
comment at the top of any code cell will only hide the input of that cell.
put a #collapse-hide
flag at the top of any cell if you want to hide that cell by default, but give the reader the option to show it:
Code
import pandas as pd
import altair as alt
put a #collapse-show
flag at the top of any cell if you want to show that cell by default, but give the reader the option to hide it:
Code
= 'https://vega.github.io/vega-datasets/data/cars.json'
cars = 'https://vega.github.io/vega-datasets/data/movies.json'
movies = 'https://vega.github.io/vega-datasets/data/sp500.csv'
sp500 = 'https://vega.github.io/vega-datasets/data/stocks.csv'
stocks = 'https://vega.github.io/vega-datasets/data/flights-5k.json' flights
place a #collapse-output
flag at the top of any cell if you want to put the output under a collapsable element that is closed by default, but give the reader the option to open it:
#collapse-output
print('The comment #collapse-output was used to collapse the output of this cell by default but you can expand it.')
The comment #collapse-output was used to collapse the output of this cell by default but you can expand it.
Interactive Charts With Altair
Charts made with Altair remain interactive. Example charts taken from this repo, specifically this notebook.
Example 1: DropDown
# single-value selection over [Major_Genre, MPAA_Rating] pairs
# use specific hard-wired values as the initial selected values
= alt.selection_single(
selection ='Select',
name=['Major_Genre', 'MPAA_Rating'],
fields={'Major_Genre': 'Drama', 'MPAA_Rating': 'R'},
init={'Major_Genre': alt.binding_select(options=genres), 'MPAA_Rating': alt.binding_radio(options=mpaa)}
bind
)
# scatter plot, modify opacity based on selection
alt.Chart(df).mark_circle().add_selection(
selection
).encode(='Rotten_Tomatoes_Rating:Q',
x='IMDB_Rating:Q',
y='Title:N',
tooltip=alt.condition(selection, alt.value(0.75), alt.value(0.05))
opacity )
Example 2: Tooltips
alt.Chart(df).mark_circle().add_selection(='scales', encodings=['x'])
alt.selection_interval(bind
).encode('Rotten_Tomatoes_Rating', type='quantitative'),
alt.X('IMDB_Rating', type='quantitative', axis=alt.Axis(minExtent=30)),
alt.Y(# y=alt.Y('IMDB_Rating:Q', ), # use min extent to stabilize axis title placement
=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']
tooltip
).properties(=500,
width=400
height )
Example 3: More Tooltips
# select a point for which to provide details-on-demand
= alt.selection_single(
label =['x'], # limit selection to x-axis value
encodings='mouseover', # select on mouseover events
on=True, # select data point nearest the cursor
nearest='none' # empty selection includes no data points
empty
)
# define our base line chart of stock prices
= alt.Chart().mark_line().encode(
base 'date:T'),
alt.X('price:Q', scale=alt.Scale(type='log')),
alt.Y('symbol:N')
alt.Color(
)
alt.layer(# base line chart
base,
# add a rule mark to serve as a guide line
='#aaa').encode(
alt.Chart().mark_rule(color='date:T'
x
).transform_filter(label),
# add circle marks for selected time points, hide unselected points
base.mark_circle().encode(=alt.condition(label, alt.value(1), alt.value(0))
opacity
).add_selection(label),
# add white stroked text to provide a legible background for labels
='left', dx=5, dy=-5, stroke='white', strokeWidth=2).encode(
base.mark_text(align='price:Q'
text
).transform_filter(label),
# add text labels for stock prices
='left', dx=5, dy=-5).encode(
base.mark_text(align='price:Q'
text
).transform_filter(label),
=stocks
data
).properties(=500,
width=400
height )
Data Tables
You can display tables per the usual way in your blog:
# display table with pandas
'Title', 'Worldwide_Gross',
df[['Production_Budget', 'Distributor', 'MPAA_Rating', 'IMDB_Rating', 'Rotten_Tomatoes_Rating']].head()
Title | Worldwide_Gross | Production_Budget | Distributor | MPAA_Rating | IMDB_Rating | Rotten_Tomatoes_Rating | |
---|---|---|---|---|---|---|---|
0 | The Land Girls | 146083.0 | 8000000.0 | Gramercy | R | 6.1 | NaN |
1 | First Love, Last Rites | 10876.0 | 300000.0 | Strand | R | 6.9 | NaN |
2 | I Married a Strange Person | 203134.0 | 250000.0 | Lionsgate | None | 6.8 | NaN |
3 | Let's Talk About Sex | 373615.0 | 300000.0 | Fine Line | None | NaN | 13.0 |
4 | Slam | 1087521.0 | 1000000.0 | Trimark | R | 3.4 | 62.0 |
Images
Local Images
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:
![](images/fastai.png)
Remote Images
Remote images can be included with the following markdown syntax:
![](https://image.flaticon.com/icons/svg/36/36686.svg)
(just and example; link broken)
Animated Gifs
Animated Gifs work, too!
![](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif)
Other Elements
GitHub Flavored Emojis
Typing I give this post two :+1:!
will render this:
I give this post two :+1:!
Tweetcards
Typing > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20
will render this:
twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20
Youtube Videos
Typing > youtube: https://youtu.be/XfoYk_Z5AkI
will render this:
Boxes / Callouts
Typing > Warning: There will be no second warning!
will render this:
There will be no second warning!
Typing > Important: Pay attention! It's important.
will render this:
Pay attention! It’s important.
Typing > Tip: This is my tip.
will render this:
This is my tip.
Typing > Note: Take note of this.
will render this:
Take note of this.
Typing > Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine.
will render in the docs:
A doc link to an example website: fast.ai should also work fine.
Footnotes
You can have footnotes in notebooks, however the syntax is different compared to markdown documents. This guide provides more detail about this syntax, which looks like this:
{% raw %}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](https://stefanbschneider.github.io/)!' | fndetail: 2 }}{% endraw %}
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!’ | fndetail: 2 }}