Note

Go to the end 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]

[fetch_haxby] Added README.md to /home/runner/nilearn_data
[fetch_haxby] Dataset created in /home/runner/nilearn_data/haxby2001
[fetch_haxby] Downloading data from https://www.nitrc.org/frs/download.php/7868/mask.nii.gz ...
[fetch_haxby]  ...done. (0 seconds, 0 min)

[fetch_haxby] Downloading data from http://data.pymvpa.org/datasets/haxby2001/MD5SUMS ...
[fetch_haxby]  ...done. (0 seconds, 0 min)

[fetch_haxby] Downloading data from http://data.pymvpa.org/datasets/haxby2001/subj2-2010.01.14.tar.gz ...
[fetch_haxby]
Downloaded 133693440 of 291168628 bytes (45.9%%,    1.2s remaining)
[fetch_haxby]  ...done. (2 seconds, 0 min)

[fetch_haxby] Extracting data from /home/runner/nilearn_data/haxby2001/9cabe068089e791ef0c5fe930fc20e30/subj2-2010.01.14.tar.gz...
[fetch_haxby] .. done.

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

 1<!DOCTYPE html>
 2<html lang="en">
 3<body>
 4  <!-- This is the div that will host the html brainsprite code -->
 5  <div id="div_viewer">
 6    <!-- Note the curly brackets are here to tell tempita to update this element. -->
 7    {{ html }}
 8  </div>
 9
10  <!-- Import jquery and brainsprite javascript libraries -->
11  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
12  <script>
13    // We'll inject brainsprite.js here, to make the html self-contained.
14    {{ bsprite }}
15  </script>
16
17  <!-- That's where the js brainsprite code will live -->
18  <script>
19  // On load: build all figures
20  $( window ).on('load',function() {
21    // Create brain slices
22    var brain = brainsprite(
23      // that's where all the brainsprite parameters will be injected.
24      {{ js }}
25    );
26  });
27  </script>
28</body>
29</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,
    radiological=False,
)
bsprite.fit(haxby_anat_filename)

/home/runner/work/brainsprite/brainsprite/.tox/doc/lib/python3.10/site-packages/brainsprite/brainsprite.py:143: UserWarning: The provided image has no sform in its header. Please check the provided file. Results may not be as expected.
  stat_map_img = resample_to_img(
/home/runner/work/brainsprite/brainsprite/.tox/doc/lib/python3.10/site-packages/brainsprite/brainsprite.py:143: UserWarning: Casting data from int32 to float32
  stat_map_img = resample_to_img(

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.

from pathlib import Path

import tempita

examples_dir = Path.cwd()
if examples_dir.name != "examples":
    examples_dir = examples_dir / "examples"
file_template = examples_dir / "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


viewer.open_in_browser()

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

viewer.save_as_html(examples_dir / "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 10.592 seconds)

Gallery generated by Sphinx-Gallery