4 Image

In this section, we study how to embed images created by Matplotlib, Bokeh, and HoloViews libraries.

4.1 Matplotlib

First, figsize of figure is temporally set to [2, 1.6] to show small figures for saving space.

import matplotlib as mpl
figsize = mpl.rcParams['figure.figsize']
mpl.rcParams['figure.figsize'] = [2, 1.6]

Normal usage of plt.plot generates a standard output (a list of Line object in this example) and a PNG image as display data:

import matplotlib.pyplot as plt
plt.plot([1, 2, 3], marker='o')
[<matplotlib.lines.Line2D at 0x1cf6b900c88>]

png

If you want to hide the input source and standard output, you can use a display option which only shows the display data such as an image or html:

```python display
plt.plot([4, 2, 3], marker='o')
```

png

"Inline code" is useful to display plots in shorthand notation. {{plt.plot([1, 2, 4])}} generates:

png

Finally, let's set the figsize to its original value.

mpl.rcParams['figure.figsize'] = figsize

4.2 Bokeh

You can embed plots into MkDocs HTML documents. Following User Guide "Embedding Plots and Apps" from official Bokeh documents, configure your mkdocs.yml as below:

extra_css:
  - https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.css
  - https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.css
  - https://cdn.pydata.org/bokeh/release/bokeh-tables-1.0.4.min.css

extra_javascript:
  - https://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js
  - https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.js
  - https://cdn.pydata.org/bokeh/release/bokeh-tables-1.0.4.min.js

Here, 1.0.4 is a version number of Bokeh and you can choose other version number you want to use.

In order to embed plots in your documents, bokeh.embed.components function can be used. This function returns <script> and <div> tags in HTML format. For example:

from bokeh.plotting import figure
from bokeh.embed import components

plot = figure(plot_width=250, plot_height=250)
plot.circle([1, 2, 3, 4, 5], [1, 2, 3, 4, 5], size=10)
script, div = components(plot)
print(script[:132] + '...\n', div)
<script type="text/javascript">
  (function() {
    var fn = function() {
      Bokeh.safely(function() {
        (function(root) {...

<div class="bk-root" id="dd035e3a-910d-4a5a-84c5-254d94c4e13b" data-root-id="1245"></div>

These <script> and <div> tags are used in inline code of {{script}}{{div}} to get a plot as shown below:

{{script}}{{div}}

A shortcut to this functionality is prepared.

{{plot}}

4 HoloViews

```python hide
import holoviews as hv
hv.extension('bokeh')
```

```python 
curve = hv.Curve(([1, 2, 3], [2, 3, 1]))
curve
```
curve = hv.Curve(([1, 2, 3], [2, 3, 1]))
curve

4.1 Using a renderer

import holoviews as hv
renderer = hv.renderer('bokeh')
curve = hv.Curve(([1, 2, 3], [1, 2, 3]))
type(curve)
holoviews.element.chart.Curve
plot = renderer.get_plot(curve)
type(plot.state)
bokeh.plotting.figure.Figure
script, div = components(plot.state)
print(script[:132] + '...\n', div)
<script type="text/javascript">
  (function() {
    var fn = function() {
      Bokeh.safely(function() {
        (function(root) {...

<div class="bk-root" id="633ec983-3450-4f3d-8ba5-993b5c3e057d" data-root-id="1478"></div>

{{plot.state}}

html, info = renderer(curve, fmt='html')
print(html[:132] + '...\n\n', info)
<div style='display: table; margin: 0 auto;'>





  <div class="bk-root" id="1bc96572-869d-4b53-9ccf-d318c502c436" data-root-id="1...

 {'file-ext': 'html', 'mime_type': 'text/html'}

{{html}}