Greater Kansas City LISC (Local Initiative Support Corporation) approached me with a need for an infographic they could use to communicate their ties to the community, both in the services and causes they support and how they compare to and interact with other local organizations.
Initially, they asked me to create a network diagram, but as I looked through the matrix they provided, I realized a network diagram would result in an extremely complex visual, making it difficult for their audience to understand and making it difficult to update in the future.
I decided to use d3js, a JavaScript library that enables relatively simple and flexible visualization of complex data. d3 provides the added benefits of being maintainable, functional across mobile and desktop devices, and offers the ability to export vector graphics that can be reproduced in print.
LISC Chord Diagram
d3 offers a plethora of data visualizations, but I felt a chord diagram provided the most striking visualization of how Greater KC LISC supports the community.
The source data
A small portion of the source matrix provided by Greater KC LISC, which serves as the source of data for the chord diagram visualization.
Interacting with the diagram
Viewers can roll over any of the organizations to see how they're connected to local initiatives. In this example, a viewer can see how Greater KC LISC supports many services.
Interacting with the diagram
Viewers can roll over any of the services to see how they're connected to local organizations.
Viewers can roll over any of the services to see how they're connected to local organizations.
