Tutorials

Network graph visualization: Exploring data relationships

by

Highsoft

5 minutes read

Data visualization, Highcharts Core, JavaScript

Network graph visualization: Exploring data relationships

Network graphs are essential tools for uncovering and understanding complex relationships within data. These visualizations are great for revealing patterns, hierarchies, and connections that might be difficult to discern in traditional data presentations. Through network graphs, analysts can discover key influencers, identify clusters, and understand the flow of information or resources through a system. A network graph represents relationships through a system of nodes (points) and edges (connecting lines).

In this post, we will look at how to create a network graph with Highcharts.

Highcharts 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.

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.

Understanding network graphs

Network graphs combine several key components to create powerful data visualizations:

Nodes: Individual entities that can represent anything from people to concepts, with customizable properties like size and color
Edges: Connections showing relationships or interactions between nodes, with configurable styling options
Force-directed layout: Physics-based algorithms that position nodes optimally using friction and integration parameters
Interactive features: Tools for exploring and analyzing relationships through dragging, zooming, and tooltips

Creating a network graph with Highcharts

Let’s explore how to create this interactive network graph that maps the Indo-European language family tree.

This example demonstrates how to visualize complex hierarchical relationships, showing the evolution and connections between different language groups.

Step 1: Load the required files and create a container

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This force directed graph shows an example of a network graph, where
        the nodes represent languages and the language families they belong to.
        The nodes can be dragged around and will be repositioned dynamically.
    </p>
</figure>

Step 2: Add some CSS to control the dimensions and styling

.highcharts-figure {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

Step 3: Implement the JavaScript

Highcharts.addEvent(
    Highcharts.Series,
    'afterSetOptions',
    function (e) {
        const colors = Highcharts.getOptions().colors,
            nodes = {};
        let i = 0;

        if (
            this instanceof Highcharts.Series.types.networkgraph &&
            e.options.id === 'lang-tree'
        ) {
            e.options.data.forEach(function (link) {
                if (link[0] === 'Proto Indo-European') {
                    nodes['Proto Indo-European'] = {
                        id: 'Proto Indo-European',
                        marker: {
                            radius: 20
                        }
                    };
                    nodes[link[1]] = {
                        id: link[1],
                        marker: {
                            radius: 10
                        },
                        color: colors[i++]
                    };
                } else if (nodes[link[0]] && nodes[link[0]].color) {
                    nodes[link[1]] = {
                        id: link[1],
                        color: nodes[link[0]].color
                    };
                }
            });

            e.options.nodes = Object.keys(nodes).map(function (id) {
                return nodes[id];
            });
        }
    }
);

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
        height: '100%'
    },
    title: {
        text: 'The Indo-European Language Tree',
        align: 'left'
    },
    subtitle: {
        text: 'A Force-Directed Network Graph in Highcharts',
        align: 'left'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                enableSimulation: true,
                friction: -0.9
            }
        }
    },
    series: [{
        accessibility: {
            enabled: false
        },
        dataLabels: {
            enabled: true,
            linkFormat: '',
            style: {
                fontSize: '0.8em',
                fontWeight: 'normal'
            }
        },
        id: 'lang-tree',
        data: [
            ['Proto Indo-European', 'Balto-Slavic'],
            ['Proto Indo-European', 'Germanic'],
            ['Proto Indo-European', 'Celtic'],
            ['Proto Indo-European', 'Italic'],
            ['Proto Indo-European', 'Hellenic'],
            ['Proto Indo-European', 'Anatolian'],
            ['Proto Indo-European', 'Indo-Iranian'],
            ['Proto Indo-European', 'Tocharian'],
            // Additional language relationships...
        ]
    }]
});

Advanced features and customization

The implementation includes several sophisticated features to enhance the visualization:

Dynamic node sizing: Root nodes are larger (radius: 20px) than child nodes (radius: 10px) to emphasize hierarchy
Color inheritance: Child nodes inherit colors from their parents, creating visual groupings
Layout algorithm: Custom friction settings (-0.9) for optimal node distribution
Accessibility features: Built-in support for screen readers and keyboard navigation

Data organization and structure

The language tree example demonstrates effective data organization for complex hierarchical relationships. The data structure uses parent-child relationships to build the network, with special handling for root nodes and their descendants. This approach allows for clear visualization of both direct relationships and broader language family groupings.

Key features of the data structure include:

Hierarchical organization: Clear parent-child relationships between language groups
Visual differentiation: Distinct styling for different levels of the hierarchy
Consistent formatting: Standardized data format for easy maintenance and updates

Performance optimization

The implementation includes several performance optimizations for smooth interaction with large datasets. The force-directed layout algorithm is carefully tuned with custom friction settings to achieve optimal node distribution while maintaining good performance. The enableSimulation option allows for dynamic repositioning, while controlled node sizing prevents overcrowding in the visualization.

Conclusion

Network graph visualization in Highcharts provides a powerful way to map and understand complex relationships. Through careful implementation of node styling, layout algorithms, and interactive features, you can create compelling visualizations that help users explore and understand complex hierarchical data. Whether you’re mapping language families, organizational structures, or any other relationship-based data, network graphs offer an intuitive and effective way to communicate complex connections.