Fastpages Notebook Blog Post

A demonstration of fastpages blog posts with Jupyter notebooks.

  • toc: true
  • badges: true
  • comments: true


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

Front Matter is a markdown cell at the beginning of your notebook that allows you to inject metadata into your notebook. For example:

  • 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.

More details and options for front matter can be viewed on the notebook section of the README.

Markdown Shortcuts

put a #hide flag at the top of any cell you want to completely hide in the docs

put a #collapse flag at the top of any cell if you want to hide that cell by default, but stil have it be visible to the reader:

In [3]:
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:

In [1]:
cars = ''
movies = ''
sp500 = ''
stocks = ''
flights = ''

Interactive Charts With Altair

Charts made with Altair remain interactive. Example charts taken from this repo, specifically this notebook.

In [3]:
# hide
df = pd.read_json(movies) # load movies data
genres = df['Major_Genre'].unique() # get unique field values
genres = list(filter(lambda d: d is not None, genres)) # filter out None values
genres.sort() # sort alphabetically
In [4]:
mpaa = ['G', 'PG', 'PG-13', 'R', 'NC-17', 'Not Rated']

Example 1: DropDown

In [5]:
# single-value selection over [Major_Genre, MPAA_Rating] pairs
# use specific hard-wired values as the initial selected values
selection = alt.selection_single(
    fields=['Major_Genre', 'MPAA_Rating'],
    init={'Major_Genre': 'Drama', 'MPAA_Rating': 'R'},
    bind={'Major_Genre': alt.binding_select(options=genres), 'MPAA_Rating': alt.binding_radio(options=mpaa)}
# scatter plot, modify opacity based on selection
    opacity=alt.condition(selection, alt.value(0.75), alt.value(0.05))

Example 2: Tooltips

In [7]:
    alt.selection_interval(bind='scales', encodings=['x'])
    y=alt.Y('IMDB_Rating:Q', axis=alt.Axis(minExtent=30)), # use min extent to stabilize axis title placement
    tooltip=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']

Example 3: More Tooltips

In [8]:
# select a point for which to provide details-on-demand
label = alt.selection_single(
    encodings=['x'], # limit selection to x-axis value
    on='mouseover',  # select on mouseover events
    nearest=True,    # select data point nearest the cursor
    empty='none'     # empty selection includes no data points

# define our base line chart of stock prices
base = alt.Chart().mark_line().encode(
    alt.Y('price:Q', scale=alt.Scale(type='log')),

    base, # base line chart
    # add a rule mark to serve as a guide line
    # add circle marks for selected time points, hide unselected points
        opacity=alt.condition(label, alt.value(1), alt.value(0))

    # add white stroked text to provide a legible background for labels
    base.mark_text(align='left', dx=5, dy=-5, stroke='white', strokeWidth=2).encode(

    # add text labels for stock prices
    base.mark_text(align='left', dx=5, dy=-5).encode(

Other Elements


Typing > twitter: will render this:


Youtube Videos

Typing > youtube: will render this:


Boxes / Callouts

Typing > Warning: There will be no second warning! will render this:

Warning: There will be no second warning!

Typing > Important: Pay attention! It's important. will render this:

Important: Pay attention! It's important.

Typing > Tip: This is my tip. will render this:

Tip: This is my tip.

Typing > Note: Take note of this. will render this:

Note: Take note of this.

Typing > Note: A doc link to [an example website:]( should also work fine. will render in the docs:

Note: A doc link to an example website: should also work fine.

In [ ]: