Fastpages Notebook Blog Post
A tutorial of fastpages for Jupyter notebooks.
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!
Just testing updating from colab ... nice!
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: truewill automatically generate a table of contents - Setting
badges: truewill automatically include GitHub and Google Colab links to your notebook. - Setting
comments: truewill enable commenting on your blog post, powered by utterances.
More details and options for front matter can be viewed on the front matter section of the README.
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:
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:
cars = 'https://vega.github.io/vega-datasets/data/cars.json'
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'
stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'
flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'
Interactive Charts With Altair
Charts made with Altair remain interactive. Example charts taken from this repo, specifically this notebook.
# use specific hard-wired values as the initial selected values
selection = alt.selection_single(
name='Select',
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
alt.Chart(movies).mark_circle().add_selection(
selection
).encode(
x='Rotten_Tomatoes_Rating:Q',
y='IMDB_Rating:Q',
tooltip='Title:N',
opacity=alt.condition(selection, alt.value(0.75), alt.value(0.05))
)
alt.Chart(movies).mark_circle().add_selection(
alt.selection_interval(bind='scales', encodings=['x'])
).encode(
x='Rotten_Tomatoes_Rating:Q',
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']
).properties(
width=600,
height=400
)
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.X('date:T'),
alt.Y('price:Q', scale=alt.Scale(type='log')),
alt.Color('symbol:N')
)
alt.layer(
base, # base line chart
# add a rule mark to serve as a guide line
alt.Chart().mark_rule(color='#aaa').encode(
x='date:T'
).transform_filter(label),
# add circle marks for selected time points, hide unselected points
base.mark_circle().encode(
opacity=alt.condition(label, alt.value(1), alt.value(0))
).add_selection(label),
# 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(
text='price:Q'
).transform_filter(label),
# add text labels for stock prices
base.mark_text(align='left', dx=5, dy=-5).encode(
text='price:Q'
).transform_filter(label),
data=stocks
).properties(
width=700,
height=400
)
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
df = pd.read_json(movies)
# display table with pandas
df[['Title', 'Worldwide_Gross',
'Production_Budget', 'Distributor', 'MPAA_Rating', 'IMDB_Rating', 'Rotten_Tomatoes_Rating']].head()
Tweetcards
Typing > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20 will render this:
Altair 4.0 is released! https://t.co/PCyrIOTcvv
— Jake VanderPlas (@jakevdp) December 11, 2019
Try it with:
pip install -U altair
The full list of changes is at https://t.co/roXmzcsT58 ...read on for some highlights. pic.twitter.com/vWJ0ZveKbZ
Boxes / Callouts
Typing > Warning: There will be no second warning! will render this:
Typing > Important: Pay attention! It's important. will render this:
Typing > Tip: This is my tip. will render this:
Typing > Note: Take note of this. will render 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: