Fastpages Notebook 博客文章
fastpages 的 Jupyter Notebook 教程。
关于
本 Notebook 演示了 fastpages 在 Notebook 中的部分功能。
使用 fastpages，您可以将您的 Jupyter Notebook 保存在仓库根目录的 _notebooks 文件夹中，它们将自动转换为符合 Jekyll 规范的博客文章！
前置信息
您的 Jupyter Notebook 或 Markdown 博客文章的第一个单元格包含前置信息。前置信息是元数据，可以启用或禁用 Notebook 中的选项。它的格式如下：
# "My Title"
> "Awesome summary"
- toc:true- branch: master- badges: true- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]- 设置
toc: true将自动生成目录。 - 设置
badges: true将自动包含指向您的 Notebook 的 GitHub 和 Google Colab 链接。 - 设置
comments: true将启用您的博客文章的评论功能，由 utterances 提供支持。
标题和描述只有在包含冒号等特殊字符时才需要用双引号括起来。有关前置信息的更多详细信息和选项，请参阅 README 中的前置信息部分。
在任何代码单元格顶部添加 #hide 注释将在您的博客文章中隐藏该单元格的输入和输出。
在任何代码单元格顶部添加 #hide_input 注释将只隐藏该单元格的输入。
如果您希望默认隐藏某个单元格，但允许读者选择显示它，请在该单元格顶部添加 #collapse-hide 标记
#collapse-hide
import pandas as pd
import altair as alt
如果您希望默认显示某个单元格，但允许读者选择隐藏它，请在该单元格顶部添加 #collapse-show 标记
#collapse-show
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'
使用 Altair 的交互式图表
使用 Altair 制作的图表保持交互性。示例图表取自此仓库，特别是此 Notebook。
# single-value selection over [Major_Genre, MPAA_Rating] pairs
# 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(df).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(df).mark_circle().add_selection(
alt.selection_interval(bind='scales', encodings=['x'])
).encode(
alt.X('Rotten_Tomatoes_Rating', type='quantitative'),
alt.Y('IMDB_Rating', type='quantitative', axis=alt.Axis(minExtent=30)),
# y=alt.Y('IMDB_Rating:Q', ), # use min extent to stabilize axis title placement
tooltip=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']
).properties(
width=500,
height=400
)
# 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.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=500,
height=400
)
# display table with pandas
df[['Title', 'Worldwide_Gross',
'Production_Budget', 'Distributor', 'MPAA_Rating', 'IMDB_Rating', 'Rotten_Tomatoes_Rating']].head()
!Tweetcards
输入 > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20 将渲染为
Altair 4.0 发布了！https://#/PCyrIOTcvv
— Jake VanderPlas (@jakevdp) 2019年12月11日
试用方法
pip install -U altair
完整更改列表请访问 https://#/roXmzcsT58 ...阅读下文了解一些亮点。pic.twitter.com/vWJ0ZveKbZ
提示框/标注
输入 > Warning: There will be no second warning! 将渲染为
输入 > Important: Pay attention! It's important. 将渲染为
输入 > Tip: This is my tip. 将渲染为
输入 > Note: Take note of this. 将渲染为
输入 > Note: A doc link to [an example website: fast.ai](https://fastai.net.cn/) should also work fine. 将在文档中渲染为
脚注
您可以在 Notebook 中添加脚注，但语法与 Markdown 文档不同。本指南提供了有关此语法的更多详细信息，其格式如下：
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 }}例如，这里是一个脚注 1。
还有另一个 2
1. 这是脚注。↩