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 so spent a few hours cleaning up data and creating this visualization.

A Sankey chart visualizes directional connections between “nodes”. In this case the nodes are the artery names and the connections are flow of blood through the arteries.

Two snippets from the visualization’s top level branches from heart to body and lungs are shown below. The grey connections represent blood flow. The colored ‘blocks’ represent the arteries.

You are able to click on the nodes which will highlight the connections and blood flow. This is a great way to see how blood flows from artery to artery.

The complete Sankey chart is very big. A zoomed out screenshot of it is shown below.   The data used to create the visualization is also provided here.

arterial

The Sankey chart was created using a D3 JavaScript library Sankey plugin.

This arterial Sankey chart includes some additional D3 JavaScript that modified the chart formatting and includes feature to highlight node links and to allow node drag and drop re-positioning.

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

The data was sourced from this UAMS web page 
http://anatomy.uams.edu/anatomyhtml/arteries_alpha.html
and it required quite a bit of cleaning to get it ready for D3 to create the Sankey charts. Some of the data transformations required included:

  • Edited artery names to remove commas 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, to create two sets (one for left, one for right) then manually editing to remove where there are no pairs eg Aorta.
  • Occasionally modified artery name by adding its source artery name to differentiate name from others. Eg Sigmoid Ascending Br. instead of Ascending Br. This was done because sankey.js requires unique node names and some arteries had same name in data source eg Ascending Br.
  • Created 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 finally used to create chart:

  • There are missing arteries or errors in naming and linkages so please don’t study for your anatomy exam using this : )
  • The Sankey chart termination nodes are major arteries. However,  the UAMS arterial tables indicates that ‘unnamed branches’ are actually the terminating nodes. If I included these, I would have had to create unique names for each ‘unnamed’ arterial reference but I was too lazy to do that 🙂
  • The termination nodes are assumed to be capillaries eg other than the ‘unnamed’ arteries, the blood flows into capillaries, then goes back to heart via the Venous system.
  • I was surprised to learn that in reality there can be a large number of ‘arterial anastomoses’ where hierarchically unrelated arteries join together. I didn’t include any of these.
  • The ‘other half’ of the body’s blood flow eg the Venous is not included in this chart. One day I might revisit and include the Venous system.
  • 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 volume 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. Avatar 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. Avatar 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post Navigation