Chord diagram – visualizing complex relationships with dependency wheels

Finding the right way to represent complex relationships between multiple entities in data visualization can be challenging. Traditional graphs and charts often fall short when it comes to illustrating intricate connections and flows between various data points. This is where chord diagrams, particularly dependency wheels, shine as powerful visualization tools.

Dependency wheels, a variant of chord diagrams, provide an elegant solution for visualizing complex relationships and flows between different entities.

In this post, we’ll explore how to create effective dependency wheel visualizations using Highcharts. To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started.

Once you get the hang of it, the API reference will help you customize your charts in no time.Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

Understanding chord diagrams and dependency wheels

Before we dive into the implementation details, let’s clarify what chord diagrams and dependency wheels are and how they differ from other visualization types.

A chord diagram is a graphical method of displaying the relationships between entities in a circular layout. The entities are arranged around the circumference of a circle, and the relationships between them are represented by arcs connecting the entities. The thickness of an arc typically indicates the significance of the relationship or the volume of flow between the connected entities.

A dependency wheel is a specific type of chord diagram particularly suited for visualizing directed relationships or flows. In a dependency wheel, the direction of the relationship is often indicated by the curvature of the connecting arcs. This makes dependency wheels especially useful for visualizing data flows, migrations, trade relationships, or any scenario where the directional aspect of relationships is important.

The key advantages of dependency wheels include:

Compactness: They efficiently use space to represent complex networks of relationships.
Clarity: The circular layout and weighted connections provide clear visual cues about the most significant relationships in the dataset.
Intuitiveness: The flow-based representation makes it easy to follow paths and identify patterns.
Aesthetics: They create visually striking representations that engage viewers while conveying complex information.

When to use dependency wheels

Dependency wheels are most effective when you need to visualize complex relationships between multiple entities, especially when:

You have a moderate number of entities (typically between 5 and 30). With too few entities, simpler visualizations might be more appropriate; with too many, the diagram can become cluttered and difficult to interpret.

The relationships between entities have varying strengths or weights. The ability to represent relationship strength through the width of connecting bands is one of the key advantages of dependency wheels.

You want to highlight both the overall network structure and the specific connections between individual entities. Dependency wheels provide both a macro and micro view of your data.

Some common use cases for dependency wheels include:

Migration flow analysis, where you can visualize population movements between countries or regions. The width of the bands can represent the number of migrants moving from one location to another.

Trade relationship visualization, showing import/export flows between different countries. This can help identify key trading partners and imbalances in trading relationships.

Data exchange mapping in computer networks or organizational systems, illustrating how information flows between different nodes or departments.

Customer journey analysis, showing how users navigate between different pages or sections of a website or application.

Skill or knowledge transfer within organizations, depicting how expertise flows between teams or departments.

Creating a dependency wheel with Highcharts

Now, let’s explore how to implement this dependency wheel using Highcharts. The implementation involves three main components: HTML structure, CSS styling, and JavaScript code for chart configuration.

Step 1: Load the required files and create a container to hold the chart

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing a dependency wheel, where each point consists of multiple
        weighted links to other points. This chart type is often used to
        visualize data flow, and can be a striking way to illustrate
        relationships in data.
    </p>
</figure>

The HTML structure is straightforward. First, we include the necessary JavaScript files for Highcharts functionality. The core Highcharts library is loaded first, followed by the Sankey and dependency wheel modules, which provide the specialized functionality needed for this chart type. We also include the exporting, export-data, and accessibility modules to enhance the chart’s functionality and ensure it’s accessible to all users.

Next, we create a container element with the ID “container”, which will hold our chart. We wrap this in a figure element with the class “highcharts-figure” for styling purposes, and include a descriptive paragraph that explains the chart’s purpose.

Step 2: Add some CSS to control the dimensions of the container

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}
#container {
    height: 500px;
}

The CSS is minimal but essential for proper chart rendering. We set the minimum and maximum width for the chart container, ensuring it remains responsive across different screen sizes while maintaining readability. The height is fixed at 500 pixels, which provides sufficient space for the dependency wheel to be displayed clearly. The margin setting centers the chart on the page.

Step 3: Implement the JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Highcharts Dependency Wheel'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. From {point.from} to ' +
                '{point.to}: {point.weight}.'
        }
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Brazil', 'Portugal', 5],
            ['Brazil', 'France', 1],
            ['Brazil', 'Spain', 1],
            ['Brazil', 'England', 1],
            ['Canada', 'Portugal', 1],
            ['Canada', 'France', 5],
            ['Canada', 'England', 1],
            ['Mexico', 'Portugal', 1],
            ['Mexico', 'France', 1],
            ['Mexico', 'Spain', 5],
            ['Mexico', 'England', 1],
            ['USA', 'Portugal', 1],
            ['USA', 'France', 1],
            ['USA', 'Spain', 1],
            ['USA', 'England', 5],
            ['Portugal', 'Angola', 2],
            ['Portugal', 'Senegal', 1],
            ['Portugal', 'Morocco', 1],
            ['Portugal', 'South Africa', 3],
            ['France', 'Angola', 1],
            ['France', 'Senegal', 3],
            ['France', 'Mali', 3],
            ['France', 'Morocco', 3],
            ['France', 'South Africa', 1],
            ['Spain', 'Senegal', 1],
            ['Spain', 'Morocco', 3],
            ['Spain', 'South Africa', 1],
            ['England', 'Angola', 1],
            ['England', 'Senegal', 1],
            ['England', 'Morocco', 2],
            ['England', 'South Africa', 7],
            ['South Africa', 'China', 5],
            ['South Africa', 'India', 1],
            ['South Africa', 'Japan', 3],
            ['Angola', 'China', 5],
            ['Angola', 'India', 1],
            ['Angola', 'Japan', 3],
            ['Senegal', 'China', 5],
            ['Senegal', 'India', 1],
            ['Senegal', 'Japan', 3],
            ['Mali', 'China', 5],
            ['Mali', 'India', 1],
            ['Mali', 'Japan', 3],
            ['Morocco', 'China', 5],
            ['Morocco', 'India', 1],
            ['Morocco', 'Japan', 3],
            ['Japan', 'Brazil', 1]
        ],
        type: 'dependencywheel',
        name: 'Dependency wheel series',
        dataLabels: {
            color: '#333',
            style: {
                textOutline: 'none'
            },
            textPath: {
                enabled: true
            },
            distance: 10
        },
        size: '95%'
    }]
});

The JavaScript code is where the magic happens. Here’s what it does:

We create a chart in the ‘container’ element with a title and accessibility features for screen readers. The chart has one series of type ‘dependencywheel’ with each data point having three parts: from (source), to (destination), and weight (connection strength).

The data shows connections between countries, with the weight representing the strength of the relationship. For example, ‘Brazil’ to ‘Portugal’ has a weight of 5, indicating a strong connection, while ‘Brazil’ to ‘France’ has a weight of 1, showing a weaker relationship.

We customize the appearance with data labels (color #333, no text outline), text that follows the wheel’s curve (textPath enabled), and a label distance of 10 pixels from the chart. The wheel takes up 95% of the container space, ensuring it fits properly while remaining clearly visible.

This example visualizes international connections between countries, possibly representing migration flows, historical ties, or cultural relationships. The pattern reveals interesting clusters and pathways of connection between different regions of the world.

Data preparation and customization

The quality and structure of your data directly impact the effectiveness of your dependency wheel. Consider these data preparation strategies:

Managing data volume

Dependency wheels work best with a moderate number of entities (nodes). With too many nodes, the wheel becomes cluttered and difficult to interpret. Consider these approaches for large datasets:

Aggregation: Combine smaller entities into meaningful groups. For example, group countries into regions or individual products into product categories.
Filtering: Focus on the most significant relationships by setting a minimum threshold for connection strength.
Multiple views: Create separate focused visualizations for different subsets of your data rather than trying to show everything in one wheel.

Handling data imbalances

When your data contains connections with widely varying strengths, the strongest connections can visually dominate the chart, making weaker yet important connections difficult to see. Address this by:

Logarithmic scaling: Apply a logarithmic transformation to compress the range of values.
Capping: Set a maximum value for very strong outlier connections.
Using color alongside width: Use both connection width and color to indicate strength, providing a second visual dimension.

Highcharts offers numerous options to customize your dependency wheel to better match your data visualization needs and design preferences. Let’s explore some key customization areas:

Color schemes and visual styling
Node and connection appearance
Label formatting and positioning
Interactive features like tooltips, hover effects, and click events

Best practices for effective dependency wheels

Follow these guidelines to create dependency wheels that communicate clearly and effectively:

Focus on clarity: Keep your visualization readable by limiting the number of nodes (ideally fewer than 25) and highlighting the most significant relationships.
Provide context: Include clear titles, legends, and explanatory text to help users understand what they’re seeing and why it matters.
Design for your audience: Consider your users’ familiarity with both the subject matter and with dependency wheel visualizations when determining how much detail and guidance to include.
Test with real users: Get feedback on your visualization from actual users to identify any confusion or misinterpretations.
Balance aesthetics and function: Create visually appealing wheels that engage users while ensuring the visual design serves the primary goal of clear data communication.

Conclusion and additional resources

Dependency wheels offer a powerful way to visualize complex relationships in a compact, intuitive format. By representing entities around a circle and connecting them with weighted arcs, these visualizations reveal both the overall network structure and the specific strengths of individual connections.

Highcharts provides a robust framework for implementing dependency wheels, with extensive options for customization, interaction, and accessibility. By carefully preparing your data and following best practices in visualization design, you can create compelling dependency wheels that transform complex relationship data into clear, actionable insights.

Whether you’re analyzing trade flows, migration patterns, organizational networks, or user journeys, dependency wheels can help you and your audience understand complex relationships more intuitively. The circular format efficiently displays connections that might be difficult to grasp in tabular data or traditional network diagrams, making dependency wheels a valuable addition to your data visualization toolkit.

As with any visualization technique, the key to success lies in understanding your data, your audience, and the story you want to tell. With thoughtful implementation using Highcharts, dependency wheels can reveal patterns and insights that drive better understanding and more informed decision-making.