Anatomogram component for Expression Atlas heatmap

Usage no npm install needed!

<script type="module">
  import anatomogram from '';


Expression Atlas Anatomogram

Build Status Coverage Status License License: CC BY 4.0

This is an anatomogram for Expression Atlas that we use to illustrate the experiments.

See demo here.

The ontology IDs are sourced from Uberon, EFO and Plant Ontology.

To install: npm install --save anatomogram

You can use it as a React component:

import Anatomogram from 'anatomogram'


<Anatomogram .../>

Alternatively, if you don’t use React we’re providing a convenience render method:

import {render} from 'anatomogram'


render(options, target)

Where options are the props passed as an object, and target is an ID of the DOM element that will contain the anatomogram.

For example code, have a look at the demo component and how we use it in our Expression Atlas Heatmap. If you want to see it in action, go to an organism part experiment in Atlas or a search that returns organism part experiments.


Name Type Default value Description
species string - This is the only required attribute of the anatomogram
showIds array []
highlightIds array []
selectIds array []
showColour string grey
highlightColour string red
selectColour string purple
showOpacity number 0.4
highlightOpacity number 0.4
selectOpacity number 0.4
onMouseOver function () => {} Callback invoked when the mouse is hovered on a tissue
onMouseOut function () => {} Callback invoked when the mouse is hovered off a tissue
onClick function () => {} Callback invoked when a tissue is clicked
onInjected function () => {} Callback invoked when SVG is injected

For a list of available species and IDs have a look at src/json/svgsMetadata.json. The file is automatically generated every time the package is published.

All three callbacks take a single string argument, the ID of the tissue affected by the mouse event.

The state of a tissue is either not shown, shown, highlighted or selected. On mouseover the opacity is increased by 0.2. You can read a more technically inclined description of the anatomogram behaviour in the repository wiki.


To use the anatomogram in a browser you need to build and bundle the package:

npm run dist -- --output-public-path='<URL>'

<URL> is the URL (absolute or relative) from which you’ll be serving the anatomogram (e.g. /anatomogram/dist/ for the gh-pages branch we use to build the demo page). Remember to append a final slash! This is required so that the code knows where to look for static assets (i.e. SVGs and PNGs). You can read more about this option in Webpack’s documentation site.

After building, deployment of anatomogramDemo.bundle.js is optional, only if you want to host the demo component.

Include the following in your HTML:

<script src="<URL>/vendors.bundle.js"></script>
<script src="<URL>/anatomogram.bundle.js"></script>

anatomogram.render(options, target)

Building for a particular species

You can take out all the unnecessary SVGs and PNGs and change Anatomogram.defaultProps.species to any of the supported species. You can see an example in the mouse branch.


Read carefully our authoring guidelines before adding new tissues or updating IDs in an existing anatomogram or adding a new SVG.

Run npm run parseSvgs to parse the updated IDs. When you are finished run a local copy of the demo page:

npx webpack-dev-server

Go to localhost:9000 and see that the tissues show up like you want them to.


Code is distributed under the Apache License version 2.0. All images, anatomograms and switcher icons, are distributed under the Creative Commons Attribution 4.0 International license.