Interactive D3.js Chord Diagrams with Meditech Data Repository.
If you’re considering building a Chord Diagram with D3, you’ve probably read how challenging they are. This reputation discouraged me from tackling one for quite some time until I stumbled on an excellent post from Steve Hall. He has managed to bury all of the heavy lifting in a couple of generic helper functions.
The key thing to understand with a Chord diagram is the matrix format necessary for the data (a square array with an equal number of columns and rows).
The arcs (groups) on the outer edge of the diagram are represented by the matrix column and row names or factor variables. The ribbons (chords) are represented by the scalar values within the matrix.
Getting your data to look like this can be challenging. If you are generating your digram from a relational database like the Meditech Data Repository, you’ll have to somehow pivot your tabular data with TSQL (uugh).
Steve’s functions accept our tabular data, extracts the factor variables and builds the matrix. I was able to get this example going within a couple of hours of discovering his post.