Merge branch 'bokeh' into 'master'

bokeh

See merge request !20

applications/data_visualisation/Bokeh.ipynb

+%% Cell type:markdown id: tags:
+
+# `bokeh`
+
+[`bokeh`](https://docs.bokeh.org/en/latest/index.html) is a Python library for creating interactive visualizations for modern web browsers. `bokeh` allows you to create these interactive web-based plots without having to code in javascript.
+
+`bokeh` has excellent documentation: https://docs.bokeh.org/en/latest/index.html
+
+This notebook is not intended to instruct you how to use `bokeh`.  Instead it pulls together interesting examples from the `bokeh` documentation into a single notebook to give you a taster of what can be done with `bokeh`.
+
+## Install `bokeh`
+
+`bokeh` is not installed in the `fslpython` environment so you will need to install it to run this notebook. In a terminal run the following command (you will need admin privileges):
+
+```
+sudo $FSLDIR/fslpython/bin/conda install -c conda-forge -n fslpython bokeh
+```
+
+Setup bokeh to work in this notebook:
+
+%% Cell type:code id: tags:
+
+``` python
+from bokeh.plotting import figure, output_file, show
+from bokeh.io import output_notebook
+output_notebook()
+```
+
+%% Cell type:markdown id: tags:
+
+Fetch some sampledata for the examples:
+
+%% Cell type:code id: tags:
+
+``` python
+from bokeh import sampledata
+sampledata.download()
+```
+
+%% Cell type:markdown id: tags:
+
+## Scatter Plots
+
+https://docs.bokeh.org/en/latest/docs/gallery/iris.html
+
+%% Cell type:code id: tags:
+
+``` python
+from bokeh.sampledata.iris import flowers
+
+colormap = {'setosa': 'red', 'versicolor': 'green', 'virginica': 'blue'}
+colors = [colormap[x] for x in flowers['species']]
+
+p = figure(title = "Iris Morphology")
+p.xaxis.axis_label = 'Petal Length'
+p.yaxis.axis_label = 'Petal Width'
+
+p.circle(flowers["petal_length"], flowers["petal_width"],
+         color=colors, fill_alpha=0.2, size=10)
+
+# output_file("iris.html", title="iris.py example")
+
+show(p)
+```
+
+%% Cell type:markdown id: tags:
+
+## Line Plots
+
+https://docs.bokeh.org/en/latest/docs/gallery/box_annotation.html
+
+%% Cell type:code id: tags:
+
+``` python
+from bokeh.models import BoxAnnotation
+from bokeh.sampledata.glucose import data
+
+TOOLS = "pan,wheel_zoom,box_zoom,reset,save"
+
+data = data.loc['2010-10-04':'2010-10-04']
+
+p = figure(x_axis_type="datetime", tools=TOOLS, title="Glocose Readings, Oct 4th (Red = Outside Range)")
+p.background_fill_color = "#efefef"
+p.xgrid.grid_line_color=None
+p.xaxis.axis_label = 'Time'
+p.yaxis.axis_label = 'Value'
+
+p.line(data.index, data.glucose, line_color='grey')
+p.circle(data.index, data.glucose, color='grey', size=1)
+
+p.add_layout(BoxAnnotation(top=80, fill_alpha=0.1, fill_color='red', line_color='red'))
+p.add_layout(BoxAnnotation(bottom=180, fill_alpha=0.1, fill_color='red', line_color='red'))
+
+show(p)
+```
+
+%% Cell type:markdown id: tags:
+
+# Bar Charts
+
+https://docs.bokeh.org/en/latest/docs/gallery/bar_stacked.html
+
+%% Cell type:code id: tags:
+
+``` python
+from bokeh.palettes import Spectral5
+from bokeh.sampledata.autompg import autompg_clean as df
+from bokeh.transform import factor_cmap
+
+df.cyl = df.cyl.astype(str)
+df.yr = df.yr.astype(str)
+
+group = df.groupby(['cyl', 'mfr'])
+
+index_cmap = factor_cmap('cyl_mfr', palette=Spectral5, factors=sorted(df.cyl.unique()), end=1)
+
+p = figure(plot_width=800, plot_height=500, title="Mean MPG by # Cylinders and Manufacturer",
+           x_range=group, toolbar_location=None, tooltips=[("MPG", "@mpg_mean"), ("Cyl, Mfr", "@cyl_mfr")])
+
+p.vbar(x='cyl_mfr', top='mpg_mean', width=1, source=group,
+       line_color="white", fill_color=index_cmap, )
+
+p.y_range.start = 0
+p.x_range.range_padding = 0.05
+p.xgrid.grid_line_color = None
+p.xaxis.axis_label = "Manufacturer grouped by # Cylinders"
+p.xaxis.major_label_orientation = 1.2
+p.outline_line_color = None
+
+show(p)
+```
+
+%% Cell type:markdown id: tags:
+
+# Distribution Plots
+
+https://docs.bokeh.org/en/latest/docs/gallery/histogram.html
+
+%% Cell type:code id: tags:
+
+``` python
+import numpy as np
+import scipy.special
+
+from bokeh.layouts import gridplot
+
+
+def make_plot(title, hist, edges, x, pdf, cdf):
+    p = figure(title=title, tools='', background_fill_color="#fafafa")
+    p.quad(top=hist, bottom=0, left=edges[:-1], right=edges[1:],
+           fill_color="navy", line_color="white", alpha=0.5)
+    p.line(x, pdf, line_color="#ff8888", line_width=4, alpha=0.7, legend_label="PDF")
+    p.line(x, cdf, line_color="orange", line_width=2, alpha=0.7, legend_label="CDF")
+
+    p.y_range.start = 0
+    p.legend.location = "center_right"
+    p.legend.background_fill_color = "#fefefe"
+    p.xaxis.axis_label = 'x'
+    p.yaxis.axis_label = 'Pr(x)'
+    p.grid.grid_line_color="white"
+    return p
+
+# Normal Distribution
+
+mu, sigma = 0, 0.5
+
+measured = np.random.normal(mu, sigma, 1000)
+hist, edges = np.histogram(measured, density=True, bins=50)
+
+x = np.linspace(-2, 2, 1000)
+pdf = 1/(sigma * np.sqrt(2*np.pi)) * np.exp(-(x-mu)**2 / (2*sigma**2))
+cdf = (1+scipy.special.erf((x-mu)/np.sqrt(2*sigma**2)))/2
+
+p1 = make_plot("Normal Distribution (μ=0, σ=0.5)", hist, edges, x, pdf, cdf)
+
+# Log-Normal Distribution
+
+mu, sigma = 0, 0.5
+
+measured = np.random.lognormal(mu, sigma, 1000)
+hist, edges = np.histogram(measured, density=True, bins=50)
+
+x = np.linspace(0.0001, 8.0, 1000)
+pdf = 1/(x* sigma * np.sqrt(2*np.pi)) * np.exp(-(np.log(x)-mu)**2 / (2*sigma**2))
+cdf = (1+scipy.special.erf((np.log(x)-mu)/(np.sqrt(2)*sigma)))/2
+
+p2 = make_plot("Log Normal Distribution (μ=0, σ=0.5)", hist, edges, x, pdf, cdf)
+
+# Gamma Distribution
+
+k, theta = 7.5, 1.0
+
+measured = np.random.gamma(k, theta, 1000)
+hist, edges = np.histogram(measured, density=True, bins=50)
+
+x = np.linspace(0.0001, 20.0, 1000)
+pdf = x**(k-1) * np.exp(-x/theta) / (theta**k * scipy.special.gamma(k))
+cdf = scipy.special.gammainc(k, x/theta)
+
+p3 = make_plot("Gamma Distribution (k=7.5, θ=1)", hist, edges, x, pdf, cdf)
+
+# Weibull Distribution
+
+lam, k = 1, 1.25
+measured = lam*(-np.log(np.random.uniform(0, 1, 1000)))**(1/k)
+hist, edges = np.histogram(measured, density=True, bins=50)
+
+x = np.linspace(0.0001, 8, 1000)
+pdf = (k/lam)*(x/lam)**(k-1) * np.exp(-(x/lam)**k)
+cdf = 1 - np.exp(-(x/lam)**k)
+
+p4 = make_plot("Weibull Distribution (λ=1, k=1.25)", hist, edges, x, pdf, cdf)
+
+show(gridplot([p1,p2,p3,p4], ncols=2, plot_width=400, plot_height=400, toolbar_location=None))
+```
+
+%% Cell type:markdown id: tags:
+
+# Boxplot
+
+https://docs.bokeh.org/en/latest/docs/gallery/boxplot.html
+
+%% Cell type:code id: tags:
+
+``` python
+import numpy as np
+import pandas as pd
+
+# generate some synthetic time series for six different categories
+cats = list("abcdef")
+yy = np.random.randn(2000)
+g = np.random.choice(cats, 2000)
+for i, l in enumerate(cats):
+    yy[g == l] += i // 2
+df = pd.DataFrame(dict(score=yy, group=g))
+
+# find the quartiles and IQR for each category
+groups = df.groupby('group')
+q1 = groups.quantile(q=0.25)
+q2 = groups.quantile(q=0.5)
+q3 = groups.quantile(q=0.75)
+iqr = q3 - q1
+upper = q3 + 1.5*iqr
+lower = q1 - 1.5*iqr
+
+# find the outliers for each category
+def outliers(group):
+    cat = group.name
+    return group[(group.score > upper.loc[cat]['score']) | (group.score < lower.loc[cat]['score'])]['score']
+out = groups.apply(outliers).dropna()
+
+# prepare outlier data for plotting, we need coordinates for every outlier.
+if not out.empty:
+    outx = list(out.index.get_level_values(0))
+    outy = list(out.values)
+
+p = figure(tools="", background_fill_color="#efefef", x_range=cats, toolbar_location=None)
+
+# if no outliers, shrink lengths of stems to be no longer than the minimums or maximums
+qmin = groups.quantile(q=0.00)
+qmax = groups.quantile(q=1.00)
+upper.score = [min([x,y]) for (x,y) in zip(list(qmax.loc[:,'score']),upper.score)]
+lower.score = [max([x,y]) for (x,y) in zip(list(qmin.loc[:,'score']),lower.score)]
+
+# stems
+p.segment(cats, upper.score, cats, q3.score, line_color="black")
+p.segment(cats, lower.score, cats, q1.score, line_color="black")
+
+# boxes
+p.vbar(cats, 0.7, q2.score, q3.score, fill_color="#E08E79", line_color="black")
+p.vbar(cats, 0.7, q1.score, q2.score, fill_color="#3B8686", line_color="black")
+
+# whiskers (almost-0 height rects simpler than segments)
+p.rect(cats, lower.score, 0.2, 0.01, line_color="black")
+p.rect(cats, upper.score, 0.2, 0.01, line_color="black")
+
+# outliers
+if not out.empty:
+    p.circle(outx, outy, size=6, color="#F38630", fill_alpha=0.6)
+
+p.xgrid.grid_line_color = None
+p.ygrid.grid_line_color = "white"
+p.grid.grid_line_width = 2
+p.xaxis.major_label_text_font_size="16px"
+
+show(p)
+```
+
+%% Cell type:markdown id: tags:
+
+## Connectivity Matrix
+
+https://docs.bokeh.org/en/latest/docs/gallery/les_mis.html
+
+%% Cell type:code id: tags:
+
+``` python
+import numpy as np
+from bokeh.sampledata.les_mis import data
+
+nodes = data['nodes']
+names = [node['name'] for node in sorted(data['nodes'], key=lambda x: x['group'])]
+
+N = len(nodes)
+counts = np.zeros((N, N))
+for link in data['links']:
+    counts[link['source'], link['target']] = link['value']
+    counts[link['target'], link['source']] = link['value']
+
+colormap = ["#444444", "#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99",
+            "#e31a1c", "#fdbf6f", "#ff7f00", "#cab2d6", "#6a3d9a"]
+
+xname = []
+yname = []
+color = []
+alpha = []
+for i, node1 in enumerate(nodes):
+    for j, node2 in enumerate(nodes):
+        xname.append(node1['name'])
+        yname.append(node2['name'])
+
+        alpha.append(min(counts[i,j]/4.0, 0.9) + 0.1)
+
+        if node1['group'] == node2['group']:
+            color.append(colormap[node1['group']])
+        else:
+            color.append('lightgrey')
+
+data=dict(
+    xname=xname,
+    yname=yname,
+    colors=color,
+    alphas=alpha,
+    count=counts.flatten(),
+)
+
+p = figure(title="Les Mis Occurrences",
+           x_axis_location="above", tools="hover,save",
+           x_range=list(reversed(names)), y_range=names,
+           tooltips = [('names', '@yname, @xname'), ('count', '@count')])
+
+p.plot_width = 800
+p.plot_height = 800
+p.grid.grid_line_color = None
+p.axis.axis_line_color = None
+p.axis.major_tick_line_color = None
+p.axis.major_label_text_font_size = "7px"
+p.axis.major_label_standoff = 0
+p.xaxis.major_label_orientation = np.pi/3
+
+p.rect('xname', 'yname', 0.9, 0.9, source=data,
+       color='colors', alpha='alphas', line_color=None,
+       hover_line_color='black', hover_color='colors')
+
+show(p) # show the plot
+```
+
+%% Cell type:markdown id: tags:
+
+## Sliders
+
+https://docs.bokeh.org/en/latest/docs/gallery/slider.html
+
+%% Cell type:code id: tags:
+
+``` python
+import numpy as np
+
+from bokeh.layouts import column, row
+from bokeh.models import CustomJS, Slider
+from bokeh.plotting import ColumnDataSource
+
+x = np.linspace(0, 10, 500)
+y = np.sin(x)
+
+source = ColumnDataSource(data=dict(x=x, y=y))
+
+plot = figure(y_range=(-10, 10), plot_width=400, plot_height=400)
+
+plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
+
+amp_slider = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
+freq_slider = Slider(start=0.1, end=10, value=1, step=.1, title="Frequency")
+phase_slider = Slider(start=0, end=6.4, value=0, step=.1, title="Phase")
+offset_slider = Slider(start=-5, end=5, value=0, step=.1, title="Offset")
+
+callback = CustomJS(args=dict(source=source, amp=amp_slider, freq=freq_slider, phase=phase_slider, offset=offset_slider),
+                    code="""
+    const data = source.data;
+    const A = amp.value;
+    const k = freq.value;
+    const phi = phase.value;
+    const B = offset.value;
+    const x = data['x']
+    const y = data['y']
+    for (var i = 0; i < x.length; i++) {
+        y[i] = B + A*Math.sin(k*x[i]+phi);
+    }
+    source.change.emit();
+""")
+
+amp_slider.js_on_change('value', callback)
+freq_slider.js_on_change('value', callback)
+phase_slider.js_on_change('value', callback)
+offset_slider.js_on_change('value', callback)
+
+layout = row(
+    plot,
+    column(amp_slider, freq_slider, phase_slider, offset_slider),
+)
+
+show(layout)
+```