Visualizing human arterial blood flow with a D3.js sankey chart

This Sankey chart represents human arterial blood flow from the heart down into the smallest named arteries. I couldn’t find anything else like this online.  I suspect this could be a useful learning tool, and could be the basis of a visual arterial model.

A Sankey chart is a type of flow diagram showing ‘connections’ between “nodes”. In this case the nodes are the artery names and the connections are flow of blood through the arteries.

Below are two zoom in screenshots of the top level branches from heart to body and lungs. The grey connections represent connections between the arteries. The colored ‘blocks’ represent the arteries.

left right

The Sankey chart itself is very big and you can open it here. If you click on any artery ‘block’ or node the connections upstream and downstream will be highlighted. This is a great way to see how blood flows from artery to artery. A zoomed out screenshot of the Sankey chart is shown below.  The arterial data is here.

 

 

arterial

 

The Sankey chart was created using D3 JavaScript library Sankey plugin and a table of data containing a hierarchical listing of arteries.

The D3 Sankey javascript library can be downloaded from this Github page which includes a simple example.

My Arterial Sankey chart has some additional D3 javascript that add chart formatting and element functionality including feature to highlight node links and to allow node drag and drop positioning.

You can view the javascript for my Sankey chart simply by viewing the Sankey chart’s page source.

The data came from this UAMS web pages
http://anatomy.uams.edu/anatomyhtml/arteries_alpha.html
. The source data required some cleaning to get it ready for D3 to create the Sankey charts. Edits included:

  • Rearrange arterial names so that the comma separation was removed. Eg alveolar, anterior superior to anterior superior alveolar. This was done using Excel and VBA.
  • Creating new table rows to link arteries with their sources. Eg Left Ventricle is source for Aorta.
  • Creating new table rows for both right and left arterial pairs. This was done by duplicating entire table, one for left and another for right, and then manually editing to remove where there are no pairs eg Aorta.
  • Modifying artery names to include right or left references and occasionally add the source name to differentiate artery name from others. Eg Sigmoid Ascending Br. instead of Ascending Br. as sankey.js requires unique node names (Because there are other arteries with name Ascending Br.)
  • Creating new table rows to include arterial branches. Used Excel and VBA to separate branches separated by comma into new rows.

Some notes about the artery data:

  • There are missing arteries or errors in naming and linkages so please don’t study for your anatomy exam using this : )
  • The current Sankey chart termination nodes are major arteries. While the UAMS arterial tables indicated that some ‘unnamed branches’ existed but I didn’t use them. Otherwise I would have had to create unique ‘unnamed’ arterial references.
  • The termination nodes could be at the capillary level but just assume that they are there.
  • The surprisingly large number of arterial ‘anastomoses’ (where hierarchically unrelated arteries join together) are not yet included.
  • The other Venous half of the ‘big picture’ is not yet included. But it would start with the capillaries and then flow together back to the heart.
  • It would be cool to add accurate blood flow ‘value’ to each artery-source connection which would be an additional column in the data table for blood flow volumn for each artery.
    • The Sankey chart would represent these volumes by varying artery-source connection thickness.
    • These would be proportionate values. For example the blood flow from Left Ventricle to Aorta (Ascending Aorta) would be 100% or whatever relative numerical value we could assign (I used 10). From that point, say 30% goes to brachiocephalic trunk and 70% continues into Aortic Arch and down into the body, and so on with each further branching into other arteries.
  • It would be even more interesting to setup a dynamic system that changes these blood flow volumes based on heart rate.
    • Could also represent blood flow changes, for example, if a femoral artery were cut, what would be the effect of flow on rest of system?
    • The Sankey chart values could change to reflect changes. We could change artery-source link color eg red (increase), green (normal) or yellow(decrease) to indicate increase/decrease in blood flow resulting from these system perturbations.

 

2 Thoughts on “Visualizing human arterial blood flow with a D3.js sankey chart

  1. Federico on May 7, 2016 at 11:20 am said:

    Hi , this is a really well done job.
    Im interested in reproducing the same in a smaller scale.

    Is there anyway to see the source code ?

    Thanks in advance

  2. sitrucp on May 7, 2016 at 9:53 pm said:

    Thanks. The source code can be seen by viewing the Sankey chart page source. I updated the post to include a link to the D3 site’s Sankey web page. This has a link to a Github page with very simple implementation of the Sankey chart. You can also view the D3 site’s Sankey web page source to see its code. I actually copied that and modified to make my chart.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation