Note

Click here to download the full example code

Anatomical scan viewer

Generate a brainsprite viewer for an anatomical MRI scan, by populating an html template.

We first download an anatomical scan through one of nilearn’s fetcher:

from nilearn import datasets

# one anatomical scan from the haxby dataset
haxby_dataset = datasets.fetch_haxby()
haxby_anat_filename = haxby_dataset.anat[0]

Out:

Dataset created in /home/circleci/nilearn_data/haxby2001

Downloading data from https://www.nitrc.org/frs/download.php/7868/mask.nii.gz ...

Downloaded 2969 of 2969 bytes (100.0%,    0.0s remaining) ...done. (1 seconds, 0 min)
Downloading data from http://data.pymvpa.org/datasets/haxby2001/MD5SUMS ...

Downloaded 408 of 408 bytes (100.0%,    0.0s remaining) ...done. (0 seconds, 0 min)
Downloading data from http://data.pymvpa.org/datasets/haxby2001/subj2-2010.01.14.tar.gz ...

Downloaded 80830464 of 291168628 bytes (27.8%,    2.6s remaining)
Downloaded 171335680 of 291168628 bytes (58.8%,    1.4s remaining)
Downloaded 261513216 of 291168628 bytes (89.8%,    0.3s remaining)
Downloaded 291168628 of 291168628 bytes (100.0%,    0.0s remaining) ...done. (3 seconds, 0 min)
Extracting data from /home/circleci/nilearn_data/haxby2001/def37a305edfda829916fa14c9ea08f8/subj2-2010.01.14.tar.gz..... done.

Now let’s have a look at a generic html template, and focus on the parts that need to be filled in:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<body>
  <!-- This is the div that will host the html brainsprite code -->
  <div id="div_viewer">
    <!-- Note the curly brackets are here to tell tempita to update this element. -->
    {{ html }}
  </div>

  <!-- Import jquery and brainsprite javascript libraries -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  <script>
    // We'll inject brainsprite.js here, to make the html self-contained.
    {{ bsprite }}
  </script>

  <!-- That's where the js brainsprite code will live -->
  <script>
  // On load: build all figures
  $( window ).on('load',function() {
    // Create brain slices
    var brain = brainsprite(
      // that's where all the brainsprite parameters will be injected.
      {{ js }}
    );
  });
  </script>
</body>
</html>

The parts with {{ }} are part of the tempita language, and means that we need to populate these parts with three types of brainsprite code: an html snippet, a javascript snippet, and the brainsprite.js library itself. Let’s use viewer_substitute to generate the necessary code, and substitute this code in the template. In terms of the parameters, the defaults are set for a functional map, and we will need to specify a few arguments to get the right aspect:

  • use a gray colormap (cmap),

  • do not to a symmetric colormap, centered around zero (symmetric_cmap)

  • pick colors matching a black background (black_bg)

  • set the maximum value displayed in the image to increase contrast (vmax)

  • add a title to the viewer (title)

from brainsprite import viewer_substitute

bsprite = viewer_substitute(cmap='gray', symmetric_cmap=False, black_bg=True,
                         threshold=None, vmax=250, title="anatomical scan", value=False)
bsprite.fit(haxby_anat_filename)

Out:

/home/circleci/.local/lib/python3.8/site-packages/nilearn/image/resampling.py:513: UserWarning: Casting data from int32 to float32
  warnings.warn("Casting data from %s to %s" % (data.dtype.name, aux))

We can now open the template with tempita, and fill it with the required information. The parameters indicate which tempita names we used in the template for the javascript, html and library code, respectively.

import tempita
file_template = '../docs/source/_static/viewer_template.html'
template = tempita.Template.from_filename(file_template, encoding="utf-8")

viewer = bsprite.transform(template, javascript='js', html='html', library='bsprite')

The object viewer can be called directly to insert the viewer inside a jupyter notebook:

viewer


The following instruction can be used to save the viewer in a stand-alone, html document:

viewer.save_as_html('plot_anat.html')

It is possible to include this html page as an iframe in another html document, using the following snippet.

<iframe src="plot_anat.html"></iframe>

Note that the style of the iframe may need to be modified in order to, e.g. center the iframe in the page. This is better done through css, but here is an example of in-line html styling with centering and adapting the size of the iframe to the size of the image (the width and height of the viewer can be found in bsprite.width_ and bsprite.height_, respectively):

<iframe src="plot_anat.html" width=500 height=200
    style="padding:0; border:0; display: block;
    margin-left: auto; margin-right: auto"></iframe>

The templating approach presented here is generic, and allows to insert one or multiple viewers in any html document template.

Total running time of the script: ( 0 minutes 8.892 seconds)

Gallery generated by Sphinx-Gallery