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.

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

The full sized chart is huge, so first take a look at the small size view below to get oriented.

The data used to create the visualization can also be viewed in tabular format here.

Two screenshots below, from the visualization’s top level branches, highlight where blood flows from heart to body and lungs. The grey connections represent blood flow. The colored ‘nodes’ 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 data was sourced from this UAMS Medical Gross Anatomy – Anatomy Tables – Arteries web page:  
https://www.med.umich.edu/lrc/anatomy-tables/arteries_alpha.html

Quite a bit of cleaning was required to get the Arteries table data ready to be used by D3 to create the Sankey charts. Some of the data cleaning 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 interesting observations about the artery data used to create chart and possibilities to extend the data and 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.

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 code used to create this is available in this Github repository.