{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Example Fastpages Notebook\n",
"> An example fastpages notebook\n",
"\n",
"- toc: True\n",
"\n",
"# About\n",
"\n",
"See [fastpages/_notebooks/README.md](https://github.com/fastai/fastpages/blob/master/_notebooks/README.md) for a detailed explanation on how to use notebooks with `fastpages`. This notebook is a demonstration of some of `fastpages's capabilities with notebooks`\n",
"\n",
"\n",
"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!"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"put a `#hide` flag at the top of any cell you want to completely hide in the docs"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"#hide\n",
"import pandas as pd\n",
"import altair as alt"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Interactive Charts With Altair\n",
"\n",
"Charts made with Altair remain interactive. Example charts taken from [this repo](https://github.com/uwdata/visualization-curriculum), specifically [this notebook](https://github.com/uwdata/visualization-curriculum/blob/master/altair_interaction.ipynb)."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"# hide\n",
"cars = 'https://vega.github.io/vega-datasets/data/cars.json'\n",
"movies = 'https://vega.github.io/vega-datasets/data/movies.json'\n",
"sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'\n",
"stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'\n",
"flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"# hide\n",
"df = pd.read_json(movies) # load movies data\n",
"genres = df['Major_Genre'].unique() # get unique field values\n",
"genres = list(filter(lambda d: d is not None, genres)) # filter out None values\n",
"genres.sort() # sort alphabetically"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [],
"source": [
"#hide\n",
"mpaa = ['G', 'PG', 'PG-13', 'R', 'NC-17', 'Not Rated']"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Example 1: DropDown"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
""
],
"text/plain": [
"alt.Chart(...)"
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# single-value selection over [Major_Genre, MPAA_Rating] pairs\n",
"# use specific hard-wired values as the initial selected values\n",
"selection = alt.selection_single(\n",
" name='Select',\n",
" fields=['Major_Genre', 'MPAA_Rating'],\n",
" init={'Major_Genre': 'Drama', 'MPAA_Rating': 'R'},\n",
" bind={'Major_Genre': alt.binding_select(options=genres), 'MPAA_Rating': alt.binding_radio(options=mpaa)}\n",
")\n",
" \n",
"# scatter plot, modify opacity based on selection\n",
"alt.Chart(movies).mark_circle().add_selection(\n",
" selection\n",
").encode(\n",
" x='Rotten_Tomatoes_Rating:Q',\n",
" y='IMDB_Rating:Q',\n",
" tooltip='Title:N',\n",
" opacity=alt.condition(selection, alt.value(0.75), alt.value(0.05))\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Example 2: Use One Visualization To Filter Another"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
""
],
"text/plain": [
"alt.VConcatChart(...)"
]
},
"execution_count": 6,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"brush = alt.selection_interval(\n",
" encodings=['x'] # limit selection to x-axis (year) values\n",
")\n",
"\n",
"# dynamic query histogram\n",
"years = alt.Chart(movies).mark_bar().add_selection(\n",
" brush\n",
").encode(\n",
" alt.X('year(Release_Date):T', title='Films by Release Year'),\n",
" alt.Y('count():Q', title=None)\n",
").properties(\n",
" width=650,\n",
" height=50\n",
")\n",
"\n",
"# scatter plot, modify opacity based on selection\n",
"ratings = alt.Chart(movies).mark_circle().encode(\n",
" x='Rotten_Tomatoes_Rating:Q',\n",
" y='IMDB_Rating:Q',\n",
" tooltip='Title:N',\n",
" opacity=alt.condition(brush, alt.value(0.75), alt.value(0.05))\n",
").properties(\n",
" width=650,\n",
" height=400\n",
")\n",
"\n",
"alt.vconcat(years, ratings).properties(spacing=5)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Example 3: Tooltips"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
""
],
"text/plain": [
"alt.Chart(...)"
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"alt.Chart(movies).mark_circle().add_selection(\n",
" alt.selection_interval(bind='scales', encodings=['x'])\n",
").encode(\n",
" x='Rotten_Tomatoes_Rating:Q',\n",
" y=alt.Y('IMDB_Rating:Q', axis=alt.Axis(minExtent=30)), # use min extent to stabilize axis title placement\n",
" tooltip=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']\n",
").properties(\n",
" width=600,\n",
" height=400\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Example 4: More Tooltips"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
""
],
"text/plain": [
"alt.LayerChart(...)"
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# select a point for which to provide details-on-demand\n",
"label = alt.selection_single(\n",
" encodings=['x'], # limit selection to x-axis value\n",
" on='mouseover', # select on mouseover events\n",
" nearest=True, # select data point nearest the cursor\n",
" empty='none' # empty selection includes no data points\n",
")\n",
"\n",
"# define our base line chart of stock prices\n",
"base = alt.Chart().mark_line().encode(\n",
" alt.X('date:T'),\n",
" alt.Y('price:Q', scale=alt.Scale(type='log')),\n",
" alt.Color('symbol:N')\n",
")\n",
"\n",
"alt.layer(\n",
" base, # base line chart\n",
" \n",
" # add a rule mark to serve as a guide line\n",
" alt.Chart().mark_rule(color='#aaa').encode(\n",
" x='date:T'\n",
" ).transform_filter(label),\n",
" \n",
" # add circle marks for selected time points, hide unselected points\n",
" base.mark_circle().encode(\n",
" opacity=alt.condition(label, alt.value(1), alt.value(0))\n",
" ).add_selection(label),\n",
"\n",
" # add white stroked text to provide a legible background for labels\n",
" base.mark_text(align='left', dx=5, dy=-5, stroke='white', strokeWidth=2).encode(\n",
" text='price:Q'\n",
" ).transform_filter(label),\n",
"\n",
" # add text labels for stock prices\n",
" base.mark_text(align='left', dx=5, dy=-5).encode(\n",
" text='price:Q'\n",
" ).transform_filter(label),\n",
" \n",
" data=stocks\n",
").properties(\n",
" width=700,\n",
" height=400\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Other Elements"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Tweetcards\n",
"\n",
"Typing `> twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20` will render this:\n",
"\n",
"> twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Youtube Videos\n",
"\n",
"Typing `> youtube: https://youtu.be/XfoYk_Z5AkI` will render this:\n",
"\n",
"\n",
"> youtube: https://youtu.be/XfoYk_Z5AkI"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Boxes / Callouts \n",
"\n",
"Typing `> Warning: There will be no second warning!` will render this:\n",
"\n",
"\n",
"> Warning: There will be no second warning!\n",
"\n",
"\n",
"\n",
"Typing `> Important: Pay attention! It's important.` will render this:\n",
"\n",
"> Important: Pay attention! It's important.\n",
"\n",
"\n",
"\n",
"Typing `> Tip: This is my tip.` will render this:\n",
"\n",
"> Tip: This is my tip.\n",
"\n",
"\n",
"\n",
"Typing `> Note: Take note of this.` will render this:\n",
"\n",
"> Note: Take note of this.\n",
"\n",
"\n",
"\n",
"Typing `> Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine.` will render in the docs:\n",
"\n",
"> Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "visualization-curriculum-gF8wUgMm",
"language": "python",
"name": "visualization-curriculum-gf8wugmm"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.7"
}
},
"nbformat": 4,
"nbformat_minor": 4
}