Recently I have been working on a data visualization piece, to show the movements or changes taking place within a certain population of registered patients over two consecutive periods. The patients are put into five to six health status groups based on a number of clinical factors that determine their risk of illness from low to high. The periods could be anything, but more typically these are either annual, by-annual or quarterly.
Having figured out the required data set and built the data extraction part, I investigated several visualizations including, the more traditional line charts, stacked bar charts and also some Sankey and Chord diagrams.
I found chord diagrams to be the most suitable for this type of visualization as it offered more clarity than sankey diagrams which in my opinion are more suitable to visualize flow changing status over time in one direction. Whereas the chords are more flexible and can easily show bi-directional movement of statuses.
D3 has the Chord Layout which simplifies the development of chord diagrams by taking care of all the mathematics involved mapping the data to the visual elements. Essentially what is required is to provide it with a two dimensional matrix consisting of the groups and their values like so.
The above code in javascript is a six by six array of arrays consisting of the number of patients in
each group in the consecutive periods represented by the past in columns (horizontal) and present in rows (vertical).
For example in the above data set, the array element [1] [2] (row, column zero based) contains the 514 patients who have moved from a Low status in the past period to a Healthy status in the present period, and element [2] [1] contains the 53 patients in reverse who have moved from a Healthy status to a Low status. Similarly element [1] [3] contains the 1373 patients who have moved from a Moderate status to Healthy status, and element [3] [1] contains the 143 patients in reverse who have moved from a Healthy status to a Moderate status. On the other hand element [0] [0] contain the 488 patients who have remained in the Non-users status. Similarly elements such as [1] [1] and [3] [3] contain the number of patients who have remained in the same status between the two periods.
The D3 Chord Layout maps the above matrix data into the representative 6 groups which can then be plotted as arcs at the outer radius of the circle. The length of the arc is the group total representing the total number of patients in that health status group. Each arc can be given a specific distinguishing colour as in this instance, I have chosen from blue, green, yellow, orange, purple and red for the 6 health status groups. Then chords are plotted between the arcs which conveys the movement of a health status in both directions. The width of the chord at each end represent the number of patients who have moved from one to another.
Moving the mouse over an arc displays a tool-tip with the total number of patients in that heath status group. Moving the mouse over a chord displays the number of patients who have moved in both directions between the respective health status groups that is connected by that chord.
A running version of the above diagram along with the code is published on http://bl.ocks.org/rarpal/3dd7f3950d3d8c570eb6 or to view only http://rarpal.github.io/LabD3Js/
I agree with you. Diagrams help to do something much better. With their help, you can bring a lot of examples about which there is a story to tell. I'm from the use in their presentations. I really like this site's http://charts.poweredtemplate.com/powerpoint-diagrams-charts/index.html. Here I take a new template for my work.
ReplyDelete